Ch. 06The Architect's notes
Every design decision behind this site, documented — so you know exactly how deep the rabbit hole goes.
01 · Concept
The site is a set of personal field notes wearing a Matrix terminal as a skin. The structure is deliberately simple — numbered chapters for tech notes, life notes, travel, photos, and the longer version of me — so the theme can be loud where it matters and silent where you're actually reading.
The guiding rule for every effect: it has to mean something in both worlds. Green is phosphor andthe data stream; "stable" is a build status and a promise about the writing; the globe is a travel log and a map of the simulation.
02 · Palette
Two rooms, one system. Dark mode is the Matrix: phosphor green on near-black, defined in oklch so the greens stay uniform in brightness. Light mode is the Construct: the white loading room, same tokens, deeper green. Every component reads its colors from five CSS variables, which is why the whole site can change personality by swapping one block of tokens:
03 · Typography
JetBrains Mono carries the terminal: headings, labels, metadata, anything the machine would say. Newsreader, a serif built for long reading, carries everything I say. The pairing is the whole thesis — the interface is a computer, the writing is a person.
04 · Interactive systems
Digital rain home hero
A canvas of falling half-width katakana behind the opening screen. Columns near your cursor glow and fall faster; a click sends a pulse of drops through the rain.
Cursor glyph trail home page
Glyphs shed off the pointer as it moves — one per ~28px of travel, fading within a second. Distance-gated on purpose: a whisper, not a storm.
Scramble decode headline & navigation
Text resolves out of cipher characters, left to right — the headline decodes on load, nav links on hover. A nod to the film's opening title treatment.
Typewriter boot line above the headline
Types, holds, and erases the movie's opening messages on loop: Wake up, Neo... The Matrix has you... Follow the white rabbit.
The globe travel page
A full-screen WebGL globe (cobe) pinned behind the expedition log. Thirteen visited cities as dots, four routes radiating from Melbourne to each country's main city, draggable in every direction.
CRT scanlines & phosphor glow dark mode, site-wide
A fixed scanline overlay and a soft green glow on headings — the site renders like an old terminal. The light theme drops both; there are no CRTs in the Construct.
Red pill / blue pill header
The theme toggle. Inside the Matrix (dark), you're offered the blue pill back to the white Construct (light). Out there, the red pill returns you.
All of it respects prefers-reduced-motion — the rain freezes, the typewriter prints, the scramble skips — and every overlay is pointer-transparent, so the theatrics never get between you and the text.
05 · The road here
This site did not arrive at the Matrix in one step. The honest changelog:
v1 — Warm editorial
Cream paper, a soft serif, big travel-photo energy. Pleasant, safe, forgettable.
v2 — The Data Forge
Ember-on-coal industrial theme where lifting met data engineering: stamped-steel headlines, an animated bench press pressing database-cylinder plates.
v3 — Field notes
Rebuilt as a chaptered notes site — numbered chapters, note lists with tags, a stat block, a quieter voice. The structure that survived every restyle since.
v3.5 — Green detours
A neon green pass (too electric), then forest green (too polite). Both taught the same lesson: the color wanted to mean something.
v4 — The Matrix
Phosphor green on black, terminal type, rain, scramble, scanlines. The color finally has a reason to be green. This is the version you're reading.
06 · Stack & credits
Next.js 16 with static generation, Tailwind CSS 4 with a token-first setup, cobe for the globe, and hand-rolled canvas and CSS for everything else that moves. No analytics, no trackers — nobody is watching you read.
The chaptered field-notes structure owes a debt to personal sites I admire, and the full-screen globe treatment was inspired by another Pham entirely. The Wachowskis own the rest of the vocabulary.
// end of transmission