Colophon

A brief note on how I’ve built this site and the tools that make it possible.

Infrastructure

The centerpiece of the infrastructure is Astro, a web framework that seems especially suited for this use case. Astro’s unique feature of islands allows for static content (like a case study text) to live alongside dynamic content (like a color picker or something returned from an API fetch). This gives me a way to render stuff really fast while also supporting interactive bits. Astro also handles image processing and cleverly loads elements to keep the experience fast.

The app is hosted on Vercel. I’m really impressed with how Vercel integrates things, but more importantly how everything seems to be hidden away until I need it.

This is all part of a monorepo hosting three apps: the main portfolio site and the sketches are both Astro and React, and there’s a Storybook instance used for development.

Design

I use Figma to draw out site layouts and dial in specifics across three breakpoints. The foundational tokens are from Palettebro, which itself is based on Material Design 3. Working with a system like this has it’s quirks but those are quirks I’m quite familiar with.

Those frames are made real by the frontend: Tailwind CSS v4, shadcn and Radix, Phosphor icons. Storybook helps me debug and track that translation. Framer Motion serves up animation.

For type: Cutive, Spline Sans, and JetBrains Mono are hosted via Fontsource.

Content

Case studies and pages like this one are authored in a Markdown-JavaScript blend called MDX. It can seamlessly render both plain text and interactive elements like the ones found here.

MCP

The case studies are also exposed to non-human readers via a Model Context Protocol server. Read how to access the MCP server and your AI agent can read this site while you make a coffee.

Fun stuff

The cursors you might see drifting across the page belong to other people reading it right now. Those come from PartyKit (after Matt Webb).

On the homepage, my notes on design live inside a little text editor loosely modeled on BeOS. (Try typing!) BeOS never won, but its visual language has captivated me for years.

Most of these begin life as a sketch. The Sketches page is a separate playground where I try out interactions and oddities with no obligation to ship them. Some graduate to the main site, but most just are simply there because they were fun to build.