Colophon
For the curious, and for my own memory, here's how this site came to be.
Process
My Collaborator
I designed and built this site working with Claude Code, Anthropic’s agentic coding tool, as an experiment and a learning process. Designing a personal website is, in my experience, one of the hardest projects. The mix of blank-canvas freedom, deep personal investment, and the gap between ideas and execution tends to make them stall. Claude Code narrowed that gap in a way I hadn’t experienced before. I could stay focused on creative decisions rather than getting lost in implementation details. That’s new for me, and a little magical.
Because AI-assisted workflows are new to most of us, it feels worth describing how the collaboration actually went. As with any design project, I brought my own ideas about concept, color palette, typography, information hierarchy, and the overall user experience. I shared those with Claude Code, who in turn opened my eyes to ways I could extend them using technical solutions I wouldn’t have reached on my own. I’ve spent years teaching design, front-end, and server-side development, and I’ve built plenty of sites and apps, solo and with collaborators. This felt like old times sitting next to an engineer who helped bring my ideas to life and contributed her own. I never once felt like I was abdicating creativity. Quite the opposite. I felt more in touch with it.
I was occasionally in the code making my own tweaks, but I can’t hold a candle to what Claude can do there. I never opened a Figma file to figure out layout. I designed in the browser, which feels truer to the medium. Designing a picture of a website and then turning it into the real thing has always struck me as a silly way to do things. It tied my hands. I don’t think I’ll go back.
The Feels
Design Influences
The visual language of the site draws from a few places. The stacked ridgeline plot in this header is not synthetic — it’s actual radio emission data from PSR B1919+21, the first radio pulsar ever discovered, recorded at 318 MHz by Harold Craft at Arecibo Observatory in 1970. Peter Saville used the same dataset for Joy Division’s Unknown Pleasures cover. The subtle animation reflects the pulsar’s actual 1.3373-second period.
The weathered landscapes of Tatooine and Arrakis inspired the color palette here of warm cream, deep ink tones, cold grays, spice red. As a child of the 1970s and 80s, these places feel like a second home to me. The sounds of Hans Zimmer, Tangerine Dream, Boards of Canada, and Carbon Based Lifeforms were playing while I designed this site. No doubt this music influenced things.
Typography
Typefaces
Display headings are set in F37 Lineca by F37 Foundry— a contemporary serif with an optical elegance that holds up at both large and small sizes. Its slightly negative sidebearing at display scale gives the headings their tight, confident stance.
Body copy, labels, and UI text are set in Aktiv Grotesk by Dalton Maag, served via Adobe Fonts. It pairs well with Lineca without competing.
Audio Nerdery
Sound Setup
Music matters to me, and dialing in the right listening experience is half the fun. After plenty of tinkering, here’s the setup that keeps me happy in the studio: a Thorens TD125 Mk II turntable, a McIntosh MA5100 integrated amp, and a pair of Klipsch Heresy IV speakers. Warm sound, beautiful objects. My kids will fight over this gear when I die.
Accessibility
WCAG 2.1 AA
The site targets WCAG 2.1 Level AA compliance. A full audit was conducted covering landmark roles, heading structure, image alt text, keyboard navigation, focus management, color contrast, and motion preferences. All decorative canvas animations are hidden for users who have enabled prefers-reduced-motionin their OS settings. The lightbox, hamburger navigation, and contact form all have proper focus management so keyboard and screen reader users aren’t left stranded.
If you spot something that feels off, please file a bug.
Under the Hood
Tech Stack
The site is a statically generated Next.js application deployed on Vercel.
- Framework
- Next.js 16 App Router (TypeScript)
- Styling
- Tailwind CSS v4 + custom design system in globals.css
- Deployment
- Vercel — pushed to master, ships automatically
- Analytics
- Vercel Web Analytics
- Contact form
- Resend — email delivery via verified domain
- Now Listening
- Discogs API
- Now Reading
- Open Library Covers API
- Animations
- Canvas 2D — real terrain from ETOPO1 (reading), PSR B1919+21 pulsar (colophon), LIGO GW150914 (listening), 2004 Sumatra IRIS/USGS seismogram (Mailchimp), geomagnetic Ap index (InVision), Mauna Loa CO₂ (RTSL), SILSO sunspot (books), ENSO MEI (consulting), NOAA tide gauge (footer)
