https://github.com/sdras/smashing

This was the result of a live code talk at Smashing Conf in Toronto, this is how far I got in 45 minutes
https://github.com/sdras/smashing

Last synced: 9 days ago
JSON representation

This was the result of a live code talk at Smashing Conf in Toronto, this is how far I got in 45 minutes

• Host: GitHub
• URL: https://github.com/sdras/smashing
• Owner: sdras
• Created: 2019-06-25T14:54:07.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2022-12-10T20:10:50.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T15:45:26.559Z (about 1 month ago)
• Language: Vue
• Homepage: https://smashingtoronto.netlify.com/
• Size: 733 KB
• Stars: 67
• Watchers: 3
• Forks: 15
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Smashing Toronto 2019 Talk

I live coded a Vue/Nuxt portfolio app in 45 minutes with layout and animation at Smashing Conf, here's the repo, and it was deployed to: [https://smashingtoronto.netlify.com/](https://smashingtoronto.netlify.com/)

**Video of the talk here!** [https://vimeo.com/348717993](https://vimeo.com/348717993)

![Screenshot of Site](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/Screen%20Shot%202019-06-25%20at%204.21.33%20PM.png)

## VS Code Extensions

I use my own [VS Code snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) a ton in development to speed up my workflow/not have to type boilerplate.

I use my own [Night Owl VS Code Theme](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl&WT.mc_id=twitter-social-sdras)

Both are in my [Vue VS Code Extensionspack](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack), which houses a lot of the extensions I use for development.

## CSS Grid Generator

I used my [CSS Grid Generator](https://cssgrid-generator.netlify.com/) to create the grids I used for the layout.

## Terminal Razzle Dazzle

I used [Hub](https://hub.github.com/) to create a repo from the command line.

I mentioned I'd share how I made my terminal fancy. For the colors:

`brew install lolcat`

Then in `.bash_profile`:

```

export CLICOLOR=1

export LSCOLORS=gx

alias l='ls | lolcat'

```

Also the sparks are from [Hyperpower](https://github.com/zeit/hyperpower).

## Build Setup

```bash

# install dependencies

$ yarn install

# serve with hot reload at localhost:3000

$ yarn dev

# build for production and launch server

$ yarn build

$ yarn start

# generate static project

$ yarn generate

```

For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).