← Back to projects

This Site

My own portfolio, built with Astro. A place to show photography and projects, and an excuse to sweat details like a topographic contour animation and build-time EXIF metadata.

Year
2026
Stack
  • Astro
  • TypeScript
  • exifr
  • Netlify
My role
  • Design and development, from sketches to launch
  • The canvas contour-line animation on the home page, from terrain noise to marching squares
  • Build-time EXIF pipeline and tag-based photo collections
  • Photography, image optimization, and performance

This is the site you're on. It's an Astro build for photography, a couple of side projects, and a resume. It's mostly static, so pages ship as fast HTML with only the interactive pieces (the contour background, the photo lightbox) shipping their own JS.

A map that reshapes itself

The home page background is a topographic map that never sits still. A value-noise terrain is sampled on a coarse grid, and the contour lines are traced through it with marching squares, so they are smooth vector curves instead of pixels. Every fifth line is drawn heavier like the index contours on a real map, lines fade with elevation so the high ground reads as nearer, and a faint wash deepens toward the peaks. Each noise octave orbits its own slow circle instead of panning, so the land breathes and reshapes in place rather than sliding off the screen. I leaned on Emil Kowalski's writing on UI feel and his skills to tune it: it pauses when the hero scrolls out of view or the tab is hidden, drops to every other frame if renders run long, caps the canvas size so big displays stay cheap, and draws a single still frame when prefers-reduced-motion is on.

Photo details straight from the file

The photography section reads real EXIF data out of each JPEG at build time with exifr: camera, lens, focal length, aperture, shutter speed, ISO, and GPS coordinates. It formats that data for display next to the photo. The data comes straight from the file, so adding a new photo means dropping in a JPEG, not hand-typing camera settings. Also locations, descriptions, and tags were manually added to each photo to provide more detail and to allow for grouping images by collection.

The small details

The rest is the usual accumulation of small decisions: chasing down Lighthouse warnings across every page, re-encoding a folder of multi-megabyte camera JPEGs down to something that loads quickly without looking compressed, and a handful of passes on the header, footer, and layout to get the site feeling less like a template and more like a specific, considered place.

A mountain for a footer

The footer also is a place with a nice touch. One of my photos with a mountain in it had the background removed and was converted into a svg shape to be used for the footer. The result is subtle, calculated, and fits into the site really well.

Looking back

I learned a lot about animations, writing code for good performance, and I had a blast making this site go from sketches and ideas to reality. There are always some improvements that can be made, but it is in a great spot for the first version.