// — — Colophon

How this notebook is made.

For the people who check. Stack, type, tools — and the reasoning behind the look.

why it looks like this

The site is built like an engineer's notebook because that is what it is. Ivory paper instead of white, ink instead of black, amber margins — the palette of a well-used desk, not a dashboard. Nothing here is auto-generated to feel personal: the margin notes, captions and status line are written by hand, when there is something worth writing.

stack

framework: Next.js 16 (App Router), TypeScript, deployed on Vercel
styling: Tailwind CSS v4 with a hand-tuned token set — no component library theme
content: MDX collections on disk; new content = new file, no code touched
motion: Framer Motion — one entrance curve, one paper curve, three durations

type

headings: Fraunces — warm, soft-contrast serif; variable weight animates on hover
body: Public Sans
labels: IBM Plex Mono — nav, tags, timestamps, eyebrows
margins: Caveat — handwritten asides only, used sparsely on purpose

key libraries

React Flow — the learning-log connection graph
@mdx-js/mdx + rehype-pretty-code — article rendering, ivory-toned syntax theme
shadcn/ui primitives — accordion, buttons
lucide-react — the only icon set
@vercel/analytics — anonymous page counts, nothing else

Find me on GitHub, LinkedIn, X, or Instagram — or just write to hello@kampitojha.com.

no trackers beyond anonymous page counts · no cookies · the KO mark, coffee stains and torn edges are hand-drawn SVGs

← back home