Take a closer look
I've added notes to the home page about its type, project previews, transitions, and controls. Open them to see each decision alongside the thing it describes.
Type and color
Inter and Berkeley Mono are served locally, so reading doesn't depend on a request to a font service. The interface uses 16px text for reading and 14px for metadata and controls, with 400, 450, 500, and 550 weights. A small palette keeps the page styles manageable as new sections are added.
Quotes in the blog are set in Cormorant Garamond, an open-source Garamond by Christian Thalmann, also served locally. Its old-style letterforms let a quoted voice step apart from the essay around it.
Light and dark themes share the same layout. Neutral foregrounds, backgrounds, and borders change together so the grouping stays readable in either mode.
Motion and sound
Page entrances use a short stagger to reveal the reading order. Reduced-motion preferences skip that entrance. A controlled audio provider lets the header mute all interface cues together; @web-kits/audio generates the piano clips.
Built with
- Next.js
- Pages and static exports, built with React and TypeScript.
- Tailwind CSS
- Layout, spacing, and the light and dark palettes.
- Nucleo
- UI Outline icons for navigation, preferences, and form controls.
- Motion
- Page entrances, springs, and interactive studies.
- Paper Shaders
- The slowly moving light inside the orange arch.
- Highlighters
- The ink effect when you select text.
- Drawesome
- Hand-drawn highlights, circles, and arrows in the annotated home page.
The production build exports HTML and navigation data ahead of time. The metadata editor stays in development. Analytics and browser-storage details are documented on the privacy page.