My Nuxt.js based developer website

Build Setup

# install dependencies
$ yarn

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project (used at production server)
$ yarn generate

For detailed explanation on how things work, checkout the Nuxt.js docs.

Structure

• archive is used to store initial assets(before processing)

Images

Images are cropped using ImageMagick and compressed using TinyPng.
convert archive/original.png -gravity center -resize 350x240\^ -crop 350x240+0+0 +repage static/converted.png
Original images are stored at /archive for future use and the production ones under /static, here is why

Favicon

I use cli-real-favicon for generating icons.
To generate new favicons run:

yarn favicon-gen

You can visit the website for info AND for testing the favicons
Source

Now

Deploy master with now to https://stavrosliaskos.com/:

yarn deploy

Useful Links

• Nuxt layouts
• Typed.js

TODO

• decrease font and icons file size. You can also manually download the svg and use a icon generator tool
• fade in to improve user's speed perspective
• contact section and form (connect to BE when it's available)
• use srcset for RW images (fix device bug: project card images not centered)
• create plugin for FontFaceObserver and fix false negative error in promise
• fix console errors (typed js) | also slows down a lot "yarn dev"
• static html fallback
• what is the vue way to do animationend?
• Install App-Wide Components & Directives
• redirects issue from seo checker
• disable horizontal scrolling in iphone
• horizontal list and scrolling project cards in device mode
• 404 page doesn't work on production (-> because it's deployed as a spa)
• add some headers
• redirect domain to use production heroku and take full advantage of nuxt features
• maybe give this a try? looks fancy
• https://shields.io/#/
• use #6DD8CE for active/link color? Also on select, hover, button:hover ("fills up" the button)
• what if everytime a user enters, there is another color chosen for links?
• test og images
• re-enable prettier
• future link
• fix sitemap
• add tsipiripo website
• improve cards
• add portfolio here: https://github.com/evavic44/portfolio-ideas
• add a button around "Learn more about what I do": https://nuro.dev/ It's easier for the user to know where to click
• check performance
• update to latest version
• add some interactions on hover
• update content
• text-shadow: 1px 1px 10px rgb(255 255 255 / 20%), 1px 1px 10px #ccc;
• typer can be async loaded: https://github.com/straversi/Typer.js
• replace static speed insights with link to real metrics because they change over time

Pages

/
/about
/contact
/privacy-policy
/terms-and-conditions
/404

Ranking

Lighthouse Audits:

Mobile

• 100 Performance
• 55 PWA
• 100 Accessibility
• 100 Best Practices
• 100 SEO

Desktop

• 100 Performance
• 45 PWA
• 100 Accessibility
• 100 Best Practices
• 100 SEO

page speed insights 100 mobile / 100 desktop

sitechecker : 97%

structured data: 0/0/0

structured data linter: 0

mobile friendly test: passed

CLI Checker

Using Webhint :

yarn hint

License

The code is available under the MIT license.