Personal websites inspiration

Reference shelf of personal sites with a strong point of view — collected for whenever the blog (hugo-blog chirpy theme) or a future personal page wants more personality than a stock theme gives. The criterion isn’t polish, it’s memorable on purpose.

Retro gaming — Bootoshi’s FIELD NOTES

bootoshi.ai/field-notes — the favorite. Verified from the page source, not guesswork: PressStart2P pixel font (the NES-class 8-bit face) for headings/branding, JetBrains Mono for body, an idle animated game sprite (BooKing_idle.gif — the mascot sits in the corner like an NPC), RSS-first field-notes format, dark CRT-ish palette. What makes it work:

• Pixel font only for display sizes; body stays in a readable mono — retro flavor without sacrificing legibility (the classic mistake is pixel font at paragraph size)
• The sprite gives the site a character/mascot — cheap animation, huge personality payoff
• Numbered “FIELD NOTES” entries feel like game quest-log entries; short posts, loud titles (“BUILD IT UGLY”, “IT’S THAT EASY”)
• First captured post: build it ugly, then refactor — the any-model agent workflow: build raw → lock with tests → review with a DIFFERENT model (a model checking its own code is blind and biased) → refactor, same X, much less code; “the ugly version is the prompt for the clean one”. Rhymes with the Agent tests / LLM evals loop doctrine.

How to steal it for Hugo/chirpy or a hand-rolled page: load PressStart2P via Google Fonts (or self-host the woff2 like bootoshi does), apply to .site-title/headers only, keep body in the existing serif/mono, add one animated GIF mascot in a corner, and use uppercase loud titles sparingly.

Minimal engineer blog — Farid Zakaria

fzakaria.com — the opposite pole from bootoshi: zero theme, all typography. Verified from the page source and base.css, not guesswork: Jekyll v4.4.1 (meta generator), Newsreader serif for prose + JetBrains Mono for code (both from CSS font-family), fluid type via clamp() (body 17px capped at --root-max, h1 ~1.85→2.85rem), custom-property palette (--ink-faint, --step type scale), § anchors on h2, “4 min read” estimate, GitHub-style > [!WARNING] callouts, <sup> footnotes, and a responsive-image pipeline that derives -720w.webp variants. What makes it work:

• Two fonts, one job each: warm editorial serif carries the voice, mono marks the machine parts — no display font, no mascot, the content is the personality
• Fluid clamp() type scale means one CSS rule instead of five media-query breakpoints
• Engineered details that read as craft: § anchors, footnotes-as-aside (dry humor lives in them), derived webp images, content-warning callout as a joke (“if you are pissed off reading this, start here”)
• Post structure worth stealing: concrete personal story → reproducible artifact (a script, a Nix check) → turns the check on himself with a data table → Goodhart’s law closer

First captured post: Hiding my AI slop from my Nix friends (clipping: clippings/fzakaria-com-2026-09-28-hiding-my-ai-slop-from-my-nix-friends.md) — the no LLM tells doctrine: a banned-vocabulary style block in agent-settings.nix (from Wikipedia’s Signs of AI writing + Willison’s LLM cliche highlighter) that the agent itself escalated into a deterministic CI check (tools/check-prose.py — fails on banned word/phrase/em-dash). Verifiable check > markdown context file: no guessing whether the agent follows the style. Rhymes with Agent tests — deterministic gates beat prompting.

How to steal it for Hugo/chirpy: keep the theme but swap the prose font to an editorial serif (Newsreader, Source Serif), set body size with clamp(17px, .95rem + .2vw, 20px), and adopt the §-anchor + footnote-aside post structure. The check-prose.py idea ports directly: banned-words list as a pre-commit/CI lint for blog posts and READMEs.

Candidates to add when found

• (open: Bruno Simon-style 3D playgrounds, brutalist plain-HTML (motherfuckingwebsite lineage), terminal/emulator aesthetics — prompt: capture sites whose design is the content)

Where to browse for more

• Design inspirations — galleries and reference boards (SEESAW, Appllama), plus the point-your-agent-at-the-gallery workflow