Under the Hood

How this website is built, one detail at a time.

This site is a fully bespoke build, no templates, no themes. I’ve been writing online since 2008 across Blogspot, WordPress, and Squarespace, but this incarnation is hand-crafted from scratch. Every detail is deliberate.

Stack

Layer Technology
Generator Jekyll (Ruby)
Hosting Netlify (auto-deploys from Git)
Database Supabase (PostgreSQL for reactions and likes)
Functions Netlify Functions (serverless JS)

Typography

Three typefaces set the tone, all self-hosted, no Google Fonts. Departure Mono handles all monospace text — prompts, code blocks, lozenges, and UI labels.

Ivar Headline
The quick brown fox jumps over the lazy dog
Ivar Text
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Departure Mono
The quick brown fox jumps over the lazy dog

Colors

Every color is a CSS variable, never a raw hex value.

Sage
Rose
Lavender
Gold
Coral
Link

The topic palette is rooted in traditional Japanese color naming, where colors come from nature: ground tea, indigo dye, amber resin, cherry blossoms. These aren’t arbitrary hex codes picked from a color wheel. Each name carries centuries of cultural meaning, and that groundedness keeps the palette feeling cohesive even as it spans greens, blues, golds, and pinks. The muted, low-saturation tones echo the Japanese idea of shibui (渋い), finding richness in restraint.

抹茶 Matcha
藍 Indigo
琥珀 Kohaku
朱 Vermillion
藤 Wisteria
桜 Sakura
茜 Madder
縹 Hanada

These map to topic lozenges across the site:

design leadership career product observations ai-experiments life travel

And a neutral gray scale for text hierarchy, borders, and backgrounds:

900
850
700
600
500
400
300
200
000

Features

  • Emoji reactions on every article, five options persisted to Supabase with haptic feedback and flying emoji animations
  • Crown mechanic where the leading emoji gets a 👑 crown; when leadership changes, an 8-bit victory sound plays
  • Notes page with reaction counts and color-coded topic lozenges; top 10% most-reacted posts get gold “viral tier” styling
  • AMA page for anonymous question submission, answered Q&As stored in version control with topic tags and like buttons
  • Custom lightbox that’s keyboard-accessible with focus trapping and alt text propagation

Accessibility

Built to WCAG 2.1 AA standards. All interactive elements have visible :focus-visible indicators for keyboard users. Emoji reactions, lightbox, and navigation are fully keyboard-operable (Tab, Enter, Space, Escape). Screen readers get ARIA labels and live regions that announce changes.

Performance

  • Fonts preloaded as WOFF2 with font-display: swap for instant rendering
  • Only 6 font weights declared (down from 17) — just what the site actually uses
  • All JavaScript deferred to prevent render blocking

Built with care, iterated with love.