How this site was made, and why.

The site is built on Next.js (App Router) with React and TypeScript, styled with Tailwind v4. UI components are scaffolded with shadcn, built on Base UI as the Radix-free headless layer underneath. Case studies are written in MDX: no CMS, no lock-in. Builds are pushed to GitHub and deployed automatically to Vercel for preview and review. The domain is registered at Hover.

Performance is treated as craft: static pages where possible, minimal JavaScript, self-hosted subset fonts, and restraint with imagery and motion. Optimization is part of the framework and planning as much as the design.

Relume's component library served as a structural reference point for early drafts. From there, everything was built from the ground up in custom code, designed by me and developed alongside Claude. The design direction was set before a single component was written. Designed with confident minimalism, typography-led, subtle glass and gradient signatures, and nothing that gets in the way of the work itself.

Design tokens are the source of truth, defined in globals.css and visualized at /styleguide. Every spacing, color, and type decision lives there and propagates everywhere.

Light and dark are each a full, separately tuned palette. Dark is the default. Switching between them from Preferences applies a soft cross-fade.

This site was designed and built with Claude Code as a working partner. The direction, the rules, and every call on what shipped came from me. Claude helped turn those decisions into working code far faster than I could alone. It also means the site runs on free hosting. There is no website builder, no stack of paid plugins, and no platform charging a monthly fee to keep it online.

Before anything was built, the project had a written brief: design tokens, type weights, one gradient headline per page, and accessibility and responsive requirements. Claude worked inside those guidelines, and anything that missed the mark was sent back for revision.

Plenty of what it produced didn't make the cut. When a glass effect started slowing the site down, I was able to isolate the issues and strip it back to rebuild without those problems. Knowing what and how to reject is half the battle.

For me, AI tools allow my workflow to shorten the distance between an idea and something I can test. The thinking, the taste, and the accountability for the result are still mine. It's not a crutch, it doesn't remove creativity, and it certainly doesn't remove the designer from the process or the outcome.

Set in Roobert, a geometric-humanist sans serif named in homage to Robert Moog, the inventor of the first commercial synthesizer and founder of Moog Music. It's a nod to my experience in the electronic music industry as much as it is a typographic choice. Self-hosted as a Latin-subset woff2 (~15KB per weight) so it loads instantly and privately.

Icons are from two Nucleo sets: the Micro Bold set (20px) for navigation and UI controls, and the UI outline set (18px) for weather conditions and alert states. All are inline SVG components rather than an icon font or npm package, so only the icons that are actually used ship with the page.

Layout, case study mockups, and component design all start in Figma before moving into code.

Built to WCAG 2.2 AA from the first commit, not audited in at the end: AA-passing color tokens, semantic landmarks, a visible focus ring on every control, a skip link, and motion that defers to the user's accessibility settings. Every page was then audited against the standard in full, and the result, including where it still falls short, is published on the accessibility page.

Analytics are managed by Fathom to avoid complex, intrusive web analytics. I prefer Fathom as it's an ethical, easy-to-use platform that supports forever data retention, accuracy, and complete, worry-free GDPR, CCPA, ePrivacy, PECR, and more compliance that protects visitors' digital privacy. Fathom also anonymizes IP addresses and other visitor data without using cookies, which is why you'll never see a consent banner anywhere on this site. This site also honors the Global Privacy Control (GPC) signal, so Fathom simply won't load for visitors who have it enabled. Fonts are self-hosted, so nothing phones home to a third party just to render a page.

Interactions and animations are custom-built with CSS and scoped JavaScript. No animation library, no scroll-jacking.

The footer's location card pulls live weather data from Open-Meteo and active weather alerts from the NWS API for the three US cities. The timezone display uses airport codes (LAX, ORD, JFK, LHR) and auto-reverts to Chicago after 15 seconds. Two alert severity tiers map to the warning and destructive semantic tokens defined in the design system, visible at the styleguide.