Gridsome-grace, AKA Grace Snow Design

This is a portfolio site built in 2020. It was a place to play with different front end tidbits and showcase my front end and design projects. It is very much a work in progress!

Tech stack chosen

I designed several versions of this site in Adobe XD, and used Adobe illustrator for some of the svg icons. This site is built up from the base starter for new Gridsome projects, a static site generator using Vue.js.

The design and layout is entirely my own work. I could have made this site a lot simpler but wanted to experiment with different techniques, especially CSS shapes, transforms and min-max font sizes.

Ideally, I'd like to add more functionality via gridsome plugins, make better use of vue components, reduce scss variables and streamline some of the scss (i.e. reduce repetition of some styles across pages).

But my time is limited and i am busy mentoring on Frontend Mentor and blogging over at FEDmentor.dev

License

This project is licensed under the terms of the GNU General Public License v3.0.

Others are welcome to use this code as a base for their own projects, but with explicit attibution and a link back to this repository.

How to use

Clone this repo to a local directory on your machine
Run gridsome develop to spin up a live development server at http://localhost:8080. This will include a link to explore the graph QL data layer at http://localhost:8080/___explore
Run gridsome build to compile a production-ready version to the dist directory

Happy coding! 🎉🙌

Page speed Experiment

A new bit of CSS can improve page speed content-visibility: auto

Lots of blogs about this, like this one.

I have created an .auto-visible class and added the css directly in a few components on the site.

To test

Comment out all content-visibility
Push to staging site
Run lighthouse in private tab and note all results
Add content-visibility to all below-fold parts of home page
Re-push
Re-run lighthouse and compare