the anatomy of this site

This site looks hand-drawn in places, but underneath it's a very boring, very reliable Next.js app. This note walks through the moving parts — partly as documentation, partly as proof the section navigation on the right actually works.

the stack

Next.js 16 (App Router), React 19, Tailwind v4, shadcn/ui primitives, MDX for these notes. Everything prerenders to static HTML — no servers to babysit, no surprises.

bun dev      # local
bun run build  # everything static, no surprises

design tokens

Every visual decision lives in one CSS file as a token. Components never hardcode a color or a font size.

colors

Slate base, one accent — the blue ink pen. Light theme is paper, dark theme is a desk lamp at 1am. The accent is defined once and flips brightness per theme:

:root  { --ink: oklch(0.52 0.20 262); }
.dark  { --ink: oklch(0.71 0.14 258); }

typography

Three fonts, three jobs:

• Inter — body and headings. Invisible on purpose.
• Geist Mono — eyebrows, dates, metadata. The dev flavor.
• Caveat — margin notes only. Never body copy.

margin notes

The handwritten annotations hanging in the gutters. Each one is a <MarginNote> with a squiggly SVG arrow whose head is an SVG marker — it auto-orients to the path's end, so it always points at the content.

<MarginNote side="left" arrow="spiral">
  ask me about this one
</MarginNote>

On mobile they fold inline under the content, arrows hidden.

what's deliberately missing

No analytics, no cookie banner, no newsletter popup, no AI chatbot in the corner. A notebook doesn't ask you to accept cookies.