What, why, and how this site was made.

Framework

Astro 6, static output, no client-side framework

Search

Pagefind — generated at build time, runs in the browser

Design system

Apparatus — wiobyrne/apparatus on GitHub

Writing tools

Obsidian -> Astro content layer

Design

The visual layer is called Apparatus. It is a reading-first interface grammar built to translate print habits into pixel spaces so digital pages stay oriented, legible, and human. I have spent years writing about reading, writing, and communication online, and this site became a place to test those ideas in public instead of only arguing for them.

Three typefaces do three distinct jobs. Source Serif 4 is the reading voice, Inter is the navigation and label voice, and JetBrains Mono is the record voice for metadata, tags, and system labels. The palette stays warm and restrained, with white surfaces, charcoal text, a quiet green accent, and coral only where urgency actually matters.

Dark mode is a desk-lamp inversion, not a second design language. Square corners, hairline borders, and minimal chrome keep the page calm enough to let the writing do the work.

Why this site exists

I built this site as a public record of a scholarly practice, not as a portfolio or a marketing surface. It tries to answer a few simple questions quickly. What is this, why should I care, and where can I go next? Everything else is back matter, but that back matter still matters because it shows how the work is made.

The site is also a way to mind the gap between print and pixel. A lot of my work has always circled around that problem: how to make web pages feel like readable places, how to give structure meaning, and how to make a page feel like it knows what kind of page it is.

How it is built

The working draft lives in Obsidian as plain Markdown. Notes, drafts, design records, and implementation thinking all sit in the same local vault. From there, content moves into Astro, where it is collected, routed, and rendered into a static site. Pagefind adds search after build so the archive stays readable without turning into a database-shaped interface.

The code is intentionally simple. I wanted the system to be legible enough that I could keep cleaning it up, tightening it, and moving things around without losing the reading contract. That is why the page leans on a small set of repeatable patterns instead of a sprawling set of one-off components.

The process

This started as a lot of sketching and a lot of opinionated choices. I kept asking what the page needed to do, what it should not do, and what was only there because older systems had made it easy. That meant pulling the content out of WordPress-era habits, removing images when they were only adding noise, and paying closer attention to what visual content was actually doing on the page.

I wanted the result to feel simple, but not thin. The design language had to carry meaning. If a mark appears, it should mean something. If a section exists, it should orient the reader. If a link is visible, it should earn its place.

Menu and tools

The header is the main control surface. I wanted it to stay quiet until you need it, then open like a shallow drawer with the few things that matter. The menu is split into pages, tools, and ways to connect. That keeps the site from feeling like a dashboard while still giving you a clear way to move around.

Under pages, you get the main routes. Under tools, you get the things that change the reading experience. You can switch light and dark mode, change the text size, search the site, move into the topics index, or jump to the RSS feed. Search is powered by Pagefind after build, so the archive stays static but still feels searchable.

The site remembers a few choices in the browser. Mode and text size stick around, so the page feels more like a reading instrument than a reset button. I also wanted the menu itself to behave well. It closes when you follow a link, and it steps aside when you are done with it.

Garden language

I use garden imagery to connect this site to the wider constellation of spaces around it. Digitally Literate is the living garden next door: more connective, more in motion, more like an ongoing stream of notes and newsletters. This site is the archive and the apparatus. It is where the more settled record lives.

The image matters because it gives the reader a way to understand what kind of place they are in. The point is not to make a decorative metaphor; the point is to make the boundary between spaces legible.

Using AI

I have used AI as a working partner in this build, but not as an authorial substitute. It has helped with drafting, cleanup, structural comparison, drift detection, and the kind of repetitive work that can obscure the larger design decisions. The important part is that the judgment stayed human. The voice, the hierarchy, the cuts, and the final shape all still had to be chosen.

In practice, that means AI helped me find inconsistencies and move faster through cleanup, while the site still had to earn its structure through editorial choices. If you want the fuller version of that story, see Writing Is a Process. So Is Losing Your Voice. That post is where I talk about building ian-writer, the local voice model I added to Ollama so I could clean drafts without sanding them down into something generic.

Regmarks and marks

The regmarks are not decoration. They are part of the site’s orientation system. The crosshair-style mark acts as the primary identity mark, the quartered ring acts as a utility mark, and the bracket mark is reserved for section or frame use. That gives the site a small family of signs that can do different jobs without turning into a logo soup.

I like that the marks behave a little like printer’s furniture: quiet, structural, useful. They help the page feel authored without becoming ornate.

The mark set

Why it stays Apparatus

Apparatus is the name I give to the reading grammar underneath the site. It is the part that tries to make the page feel navigable, understandable, and alive to the reader. The point is not just to make the site look different. The point is to make the structure visible enough that the content can carry more meaning.

That is the gap I keep trying to mind. Print and pixel. Archive and garden. Settled record and live note. Research and interface. This page exists because those gaps are where a lot of my work lives.