Framework
Astro
Content-first pages, static output, and small client-side islands when the interface calls for them.
Colophon
How This Site Is Made
A quiet inventory of the tools, type, performance choices, accessibility details, and publishing decisions behind this website.
Astro
Fast static pages with content collections.
MDX
Long-form writing with components when needed.
Vue
Small islands for interactive surfaces only.
Principles
This site is built to stay lightweight, legible, and easy to maintain. Static pages carry most of the work, with interactive islands reserved for places where they make browsing meaningfully better.
Interface
Tailwind CSS
Utility classes handle layout and rhythm, with a small global layer for site tokens and reusable text treatments.
Type
Inter and JetBrains Mono
Inter carries UI and prose; JetBrains Mono handles code, labels, eyebrows, and metadata.
Search
Pagefind
Local search is generated at build time, keeping the archive searchable without a hosted search service.
Editor
Zed
The site is written and maintained in Zed, with formatting and build checks keeping the workspace consistent.
Images
Sharp and Static Assets
Open graph images are generated from SVG sources, while portfolio images are served as local static assets with modern formats where available.
Design
Typography and color
How reading rhythm and theme tokens stay consistent across notes, lists, and interface surfaces.
Typography
Reading and rhythm
Inter is self-hosted from
public/fonts as a Latin-focused variable WOFF2 subset. The normal face is preloaded;
italic loads on demand. OpenType features include standard ligatures, contextual alternates,
and slashed zeros, with font-optical-sizing: auto. Body and UI text keep
normal letter spacing; headings tighten on a small tracking scale (-0.006em to -0.02em) as sizes grow, following Inter's dynamic metrics.
JetBrains Mono covers inline code, code blocks, timestamps, labels, eyebrows, and category tags at 13px with tabular figures and slashed zeros. iOS falls back to static Inter TTF cuts when variable fonts are unreliable.
MDX articles use the .prose-site scale: 17px body copy at 1.75 line height,
capped near 68 characters. Headings stay semibold and compact — page titles scale up to
text-6xl, section headings sit around text-2xl to
text-4xl, and eyebrows are uppercase mono labels with a cyan-to-magenta
gradient.
Color
Tokens and contrast
Colors live as CSS custom properties in src/styles/global.css.
ink and
paper anchor primary text and page backgrounds;
surface lifts cards and inputs;
muted,
soft, and
faint step supporting copy from body text down
to dates and metadata.
cyan is the primary interaction color — links, selected topic filters, and primary-button hovers. magenta is editorial: blockquote borders and eyebrow accents. blue and violet handle quieter structural moments; electric-cyan and electric-magenta appear in gradients, the favicon, and the soft radial glows behind the page.
Light, dark, and system modes resolve before paint via an inline script in
BaseLayout.astro, stored in localStorage as
site-theme. Hex and rgba values are the baseline; browsers on wide-gamut
P3 displays get OKLCH overrides. Text selection inverts the ink/paper pairing so
highlighted copy stays readable in both modes.