mu-gatsby-one-page

This is the source code for the 5th version my personal website.

Project Structure

• The site is built in React using Gatsby. (If you're new to Gatsby, check it out! It's a game-changer.)
• The CSS architecture uses a utility-first (a.k.a. atomic, functional) approach powered by Tailwind CSS and PostCSS
• The content is stored in YAML files in src/data (for easy updating)
• The site uses GraphQL to pull content from the YAML files into the relevant React components
• The accordion animations (i.e. expanding/collapsing sections) are built with Greensock (GSAP)

Deployment

• The site is hosted on Netlify (free tier)
• When this repo changes, Netlify automatically builds a new version of the site
• The build process runs the GraphQL queries and generates optimized static assets (i.e. HTML + JS + images)
• The static files are deployed to Netlify's global CDN
• When a user visits the site, the static version loads first (for speed)
• The site then hydrates into a single-page React app