The site you're reading went through a phase most personal sites get stuck in: functionally fine, typographically reasonable, and completely interchangeable with every other developer portfolio ever shipped. Monochrome dark theme, asymmetric hero, serviceable nav. No personality anywhere.
The question wasn't "what should I change?" It was "what would make a reader notice this is mine?"
Spines, not surfaces
The mistake I kept making was thinking in surfaces — a new font here, a color accent there, maybe an animation on the hero. Those are decorations. What a site actually needs is a spine: a single visual-typographic idea strong enough to propagate through every page without constant re-decision.
After a lot of pacing around, I picked one: the site should feel like a terminal session. Not be a terminal — I'm not making you type cd about to navigate. But everything about the visual language should borrow from that world.
What that actually means
Concretely, the spine carries through as:
- Mono fonts for all chrome (nav, labels, timestamps, breadcrumbs).
- Path-style navigation —
~/as the wordmark,/work,/about,/blogas nav items. - A muted ANSI-derived accent palette where every color has one job —
--color-linkis cyan,--color-successis sage,--color-warningis amber. No decorative colors, no one-offs. - ASCII illustrations instead of SVG line art or commissioned imagery. The homepage "hero" is a fake
htop:
judi@localhost · up ∞ · load 0.42 0.31 0.28
─────────────────────────────────────────────
cpu [|||||| ] 31%
mem [|||||||||||||||| ] 78%
swp [ ] 0%
─────────────────────────────────────────────
pid cpu% mem% time command
1337 31.0 8.2 24h42m arctype --ship
1338 4.2 1.1 0h12m judi-plugins --publish
1339 12.8 3.4 0h03m tsc --watch
1340 0.2 0.4 0h01m brew --strength=max
1341 0.0 0.0 0h00m sleep 8h
- A
⌘Kcommand palette and a?keyboard-shortcut sheet, because any interface worth its salt should be keyboard-first. - A status line at the bottom of the hero reading
● ctrl+c to exit— the universal escape hatch of every long-running terminal program, repurposed as a one-liner.
None of this is literal terminal. It's terminal-dialect — a visual accent that colors every decision without constraining what the site can do.
Why a spine beats a library
The payoff isn't aesthetic, it's budget. With a spine, every future decision answers to one question: does this read as terminal-dialect or not?
New page? It inherits the path-style header and the ANSI color slots. New component? Mono if it's chrome, body font if it's content. New illustration? ASCII first, SVG only if ASCII can't carry it. New status copy? It has to pass the "would this appear in a real terminal?" test.
I used to think the hard part of personal-site design was making tasteful choices. It's actually the opposite: making fewer choices, and making them consistent enough that future-me doesn't have to re-derive them every time I sit down to ship a page.
A good design spine is a forcing function. It doesn't tell you what to build. It tells you what not to reconsider.
The rest of the site is an exercise in propagating this one decision outward — and this post itself, rendered in MDX with a small terminal-dialect component map, is the first test of whether the dialect holds up inside long-form writing.
So far, so good.