A personal portfolio website for my projects and photography. You can check it out here.

The front end was created using Gatsby and TailwindCSS. Content is managed with static markdown files in the content/ folder, and images are hosted on Cloudflare R2 with a Worker CDN for optimized delivery. The site itself is hosted on Netlify.

• Ryan Wiemer's gatsby-starter-gcn
• iammatthias's personal photography page
• Way too much Google searching

1. Clone the repo.
2. Install yarn (or npm) if you don't already have it.
3. In the top level directory, run yarn install
4. Look at the .env.example file, and create local .env.production and .env.development files with your API Keys.
5. Generate image metadata for lazy loading: node scripts/generate-image-metadata.js
   • This script processes images in content/photo_collections/ and content/artboards/
   • Extracts dominant colors for smooth lazy loading placeholders
   • Updates markdown frontmatter with aspect ratios and metadata
6. To run locally, run yarn dev
7. To test the production version, run yarn build followed by yarn serve

• Add a light mode and ability to toggle between
• Add a blog page
• Continue to mess with styling
• Add more photo collections and videos

I made this site for the purpose of both learning a modern front-end stack and to be able to say I built my own personal site from scratch. This gave me the freedom of creating something actually unique, and the end result was far more performant than many bootstrap style websites, especially for the resolution of my pictures. This will also be constantly changing and evolving, but for now I'm happy with where it's at.