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 moved into hand-built code from the ground up. 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.

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. 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.