Data source: PSR B1919+21 pulsar · Harold Craft, Cornell · 1970

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.

Jedi knights vex Sith lords by quickly zapping the forgotten Wampa.F37 Lineca — Display
Joy quivers as love tears us apart; bleak fog hazes my dim, wrecked exit now.Aktiv Grotesk — Body

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
Contact form
Resend — email delivery via verified domain
Now Listening
Discogs 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)