No framework, on purpose

The process is deliberately boring. Prose is written as plain text; the diagrams are drawn once; a small set of long-lived tools turns all of it into finished HTML, with a static search index built alongside. There is no client-side framework, no component runtime, no third-party script. What reaches your browser is HTML, one stylesheet, and first-party JavaScript only — search, the reading controls, the interactive figures, annotations, and an on-device ask-the-page feature; not one third-party script among them. Even search runs in your browser, against that static index: no query ever leaves the page, and there is no server to ask.

This is a bet about decay rates — and it's worth stating it honestly, because the durable thing is the artifact, not every tool that made it. Some of the middle box has barely changed in a decade and will run in another (Pandoc, Sass, Make); some of it is young and moving (Typst, the diagram renderers, the bundler) and will be swapped when it must be. The asymmetry is the design: every tool is replaceable because what it produces is plain HTML, SVG, and CSS — the writing outlasts the machinery even when the machinery doesn't outlast the decade. A single-page application inverts that: its tower of packages must be migrated to keep the prose merely visible.

It also keeps the whole thing calm. A process you can hold in your head as one straight line — text in, pages out — is one you can still reason about years later. There is no magic, no inversion of control, nothing that requires a mental model bigger than "Org in, HTML out." A site you can hold entirely in your head is a site you can still maintain years later, when whatever was fashionable at its birth is gone.

The typography: one designed system, not a font pile

The visible identity is a purposeful type system — not a stack of unrelated faces, and not a fixed count. Every face earns its place by doing one job, and the load-bearing faces were chosen as a set rather than one at a time.

The core reading hierarchy is a coherent pairing. The default body face is Lora, a sturdy screen-first serif; the book reading profile swaps in Linux Libertine, whose sans companion Linux Biolinum sets the section headings and UI chrome — drawn as a single project by the same hand, so in that register the prose and the chrome read as one designed system rather than two typefaces bolted together. Two display faces join at the very top — Cinzel for the site name in the masthead, Cormorant Upright for the article title — to lend a moment of magazine-cover authority a workhorse serif can't; code is set in Fira Code.

Beyond that core, a face is admitted only when a role genuinely asks for one: a maximally-legible reading mode (below), a Devanagari face so the Hindi pages are set with the same care as the English, an initial or a display flourish where a motto wants it. The count is whatever the roles require — the discipline is that no face appears without a reason.

Accessibility is treated as a mode, not an afterthought that compromises the default. The reading-profile switch in the footer is a four-way choice of body register — Lora (the default), the Libertine book face, Alegreya, or Atkinson Hyperlegible Next, a humanist sans engineered by the Braille Institute for maximum letter distinction — so any reader can pick the register that suits them without changing what everyone else sees. The elegant default and the maximally-legible option coexist; neither has to lose.

The layout: a single gutter, after Tufte

The page is one column of body text with a single wide gutter on the right. That gutter is where the marginalia live — sidenotes, definitions, small figures — pulled out of the reading flow but kept beside the line they annotate, in the manner Edward Tufte made familiar. A reader never loses their place to a footnote at the bottom of the page; the aside is right there, in the margin, and they can take it or leave it.

There's a subtle discipline holding it together. The body column is held to a measure of about sixty-eight characters — long enough to read efficiently, short enough that the eye never loses the line return — and everything in the flow is held to that same width, so no block ever overhangs into the gutter and shoves the marginalia off the page. (Getting that right took a few rounds: a width measured in characters quietly grows when the type does, so a larger-faced block lays out wider than the body and spills over. The cure was to anchor the measure to something that doesn't move with the font.) The reward for the discipline is a page that stays calm at every width.

Diagrams that theme themselves

The figures follow the same spare instinct, and one small idea earns its place. Every diagram is drawn once, in a single neutral color, with one warm accent for the thing the figure is about. The drawn line is then told simply to inherit the surrounding text color rather than to carry a fixed one of its own.

The consequence is that the diagrams theme themselves. Because a figure's lines take their color from the text around them, they turn dark on the light page and light in dark mode automatically — with no second copy of the artwork, no duplicated asset, no script. One source of truth per figure, correct in every color scheme. It's the design philosophy in miniature: spend a little thought once so the artifact needs no maintenance later.

Why a portfolio earns this care

It would be easy to call this over-engineering for a personal site. I'd argue the opposite: a place that collects your writing — a record you intend to add to for years and point people at — is exactly the thing worth building to last. The articles here are meant to be citable a decade from now; it would be strange to house writing built for permanence inside a shell built for this quarter.

So the substrate is plain, the type is a coherent system, the layout is calm, and the diagrams maintain themselves. None of it is novel individually. Together, and in service of one stubborn principle — that the writing should outlast the machinery — they make a site whose best feature is that you forget it's there, and just read.

Lessons

• The document outlasts its tooling. Keep the artifact plain (HTML, SVG, CSS) so every tool that produces it stays replaceable.
• No framework is a feature: a short pipeline of durable tools — text in, static pages out — stays legible and runnable far longer than a bundler graph.
• Choose type by role, not by count. Pair faces designed together (Libertine + Biolinum) so the page reads as one system, reserve a display face for the top of the hierarchy, and admit an extra face only when a role — accessibility, another script, a motto — genuinely needs one. Offer accessibility as a mode, not a compromise.
• One body measure, clamped everywhere, plus a single Tufte gutter for marginalia, keeps the page calm at any width.
• Let diagrams inherit the surrounding text color so they theme themselves across light and dark from one source of truth.

References

1. “The colophon.” — font credits and the people behind the type
2. “Edward Tufte.” — the single-gutter, marginalia-beside-the-line tradition
3. “Linux Libertine & Biolinum.” — and Atkinson Hyperlegible — the type

Mangalapilly, Y. J. (2026, May). Scaffolding a Typographic Portfolio Site. Saṃhitā Notes. https://yesudeep.com/blog/scaffolding-a-typographic-portfolio-site/

@online{mangalapilly2026scaffolding,
          author  = {Yesudeep Jose Mangalapilly},
          title   = {Scaffolding a Typographic Portfolio Site},
          journal = {Sa\d{m}hit\=a Notes},
          year    = {2026},
          month   = {May},
          url     = {https://yesudeep.com/blog/scaffolding-a-typographic-portfolio-site/},
          urldate = {2026-07-01},
        }

Yesudeep Jose Mangalapilly. “Scaffolding a Typographic Portfolio Site.” Saṃhitā Notes, 2026. https://yesudeep.com/blog/scaffolding-a-typographic-portfolio-site/.

TY  - ELEC
        AU  - Mangalapilly, Yesudeep Jose
        TI  - Scaffolding a Typographic Portfolio Site
        T2  - Saṃhitā Notes
        PY  - 2026
        UR  - https://yesudeep.com/blog/scaffolding-a-typographic-portfolio-site/
        Y2  - 2026-07-01
        ER  -