---
title: "Colophon — how this site is built — Akshay Maurya"
url: "https://www.akshaymaurya.com/writing/colophon"
---
A portfolio is a carpenter's workshop. If the benches are crooked the
customer notices. This page is where I write down what the benches are
made of so nothing has to be reverse-engineered later.
## The homages
Two sites did the thinking I borrowed from.
[chanhdai.com](https://chanhdai.com) supplied the grammar: a lined
column whose rules run past the content to the edge of the screen,
registration crosses where they meet, icon tiles sitting on a hairline
rail, mono keys down the left of every list. Almost every structural
decision here started as "how does Đại handle this," and a few of them —
the experience timeline, the project rows, the dashed gutter under the
archive — are close enough that I should just say so.
[maxkatz.me](https://maxkatz.me) supplied the restraint. His project
list is a name, one line, and one number, and it is more convincing than
most people's case studies. Every time a section here grew a third line
of explanation, that list is what made me delete it.
Where both of those sites stay still, this one plays video. The
Interactions chapter is real CRED production work, framed as numbered
figures, and it is the loudest thing on the page on purpose — it is the
evidence.
## The stack
- **Vite + React 19.** Fast dev loop, modern JSX runtime, SWC for
transforms. No framework overhead I don't use.
- **TanStack Router.** File-based routing with first-class TypeScript
and per-route code splitting. The `/writing/$slug` page you are on is
one file.
- **Tailwind v4.** Design tokens live in CSS custom properties, so both
themes are the same stylesheet with a different set of values. The
palette is a neutral document; terracotta is the only accent, and it
is rationed — prose links, the focus ring, text selection, the scroll
bar, the active nav item, and the two badges that mark something as
current. Never a filled area.
- **Motion** for the handful of things that animate, **Lenis** for
smoothed scrolling.
- **MDX** for essays like this one, with `rehype-slug` and
`remark-gfm`, so a piece of writing is a file rather than a row in a
database.
- **simple-icons** for the brand marks in the stack and project rows,
drawn in `currentColor` rather than brand colour. Fifty logos at full
saturation would undo the whole argument of the page.
- **Vercel Analytics** for traffic. It is cookieless and keeps no visitor
identifier beyond a hash that resets daily, which is why there is no
consent banner here asking you about it.
- **Biome 2** for lint and format, **Bun** for installs and scripts.
## The grammar
The look (v5, September 2026) is an *engineering document*: hairline
rules to the viewport edges, `+` crosses at the intersections, a 45°
hatch for filler zones, and a mono `Fig. N.` caption under every
exhibit.
A few devices carry most of it. Experience and Education run on one
vertical rail — company tile, role node, and everything belonging to
that role hanging off a single indent — and the rail turns out in a
small elbow at the foot of each entry so it closes rather than trailing
off. Lists that could sprawl get clipped to their first line with a
`+ see more` underneath, which is why the toolbox reads as seven lines
instead of eighteen. The one piece of pure ornament is the isometric
mark in the masthead: an "A" built from blocks on a 5×5 grid, extruded
in true 30° isometric, drifting toward your cursor on a spring.
Everything else on the page is evidence.
## The live numbers
Three sets of numbers are fetched in your browser rather than typed by
me: the GitHub contribution calendar, the star counts on every repo, and
the pub.dev likes and monthly installs on every package. Stars come from
one request per account rather than one per repo, because unauthenticated
GitHub allows sixty an hour and eighteen separate calls would spend a
third of that on a single visit.
Every one of them has a dated fallback underneath. If a fetch fails you
get the number I last wrote down, not a zero and not an invention.
## Motion, honestly
Everything that moves is on an `ease-editorial` curve
(`cubic-bezier(0.22, 1, 0.36, 1)`), and every bit of it is gated on
`prefers-reduced-motion`. If your system reports it, the site stops
moving and the smoothed scrolling never starts. That is not a feature,
it is the minimum.
Two rules I learned the hard way and now follow everywhere. Anything
that opens stays mounted and animates between parked states rather than
being added and removed, because a stalled exit leaves an invisible
overlay swallowing your clicks. And anything that opens full size —
a photograph, an interaction clip — grows out of the thumbnail you
clicked instead of appearing from nowhere.
## Typography
Three families, each with one job.
- **Inter** for body and headings. Weight does the hierarchy work; the
sizes stay modest, because the structure is doing the shouting.
- **Geist Mono** for everything that gives the site its voice: labels,
dates, figure captions, key-value keys, counts, buttons.
- **Caveat** for exactly one line — the greeting at the top. It is there
so that one thing on a page of hairlines sounds like a person.
## The chapters
Every section is a numbered chapter with a mono ordinal in its header.
Press 1–8 to jump between the major ones, or
? for the full map. The document ends with an `EOF` band,
because it is one.
## What's next
- Static prerendering, so essay links unfurl properly everywhere.
- Selected posts from X, once I pick the ones worth quoting — the Posts
chapter is written and hides itself until there are any.
- More essays in this format — written when I wish someone else had
already written them.
If anything on this site feels wrong, tell me. The email is on the
landing page.