Engineering · Jun 5, 2026

How this site is built

No framework, no build step, no third-party requests — and why each of those is a decision, not a limitation.

This site is a few hand-written files. There is no framework, no bundler, no build step, and no request to any server we don't control. Everything needed to render it — the page, the fonts, the motion — is about 150 KB, most of it a single font file; the one photograph lazy-loads below the fold. The whole thing makes zero third-party requests. That isn't a stunt. It's what happens when you treat the boring decisions as design decisions, which is the same thing we do when we build apps.

No framework, no build step

It's plain HTML, CSS, and JavaScript. You can open any file and read it top to bottom; what you see is what ships. There's nothing to compile, so there's nothing to break in six months when a toolchain moves on without you. It deploys to a static host by copying files.

The cost of that choice is real and we paid it honestly: there's no templating, so the nav and footer are copied into each page by hand. At three pages and a few posts, that's a fine trade — a few duplicated blocks in exchange for zero dependencies and a site that will still build, byte for byte, a decade from now. The day that copy-paste becomes the bottleneck is the day we add a tiny generator. Not before. Reaching for a framework you don't need yet is its own kind of slop.

The fonts are doing real work

The identity leans hard on the typography — an oversized, expanded grotesque for the display and a monospace for the small instrument labels. The naïve way to get that is to pull four font files from a font CDN. We do none of that.

There's exactly one display font file: a single variable Archivo with both a weight axis and a width axis. The stretched headline isn't a separate "expanded" family — it's the same file pushed to its widest setting with one line of CSS:

.display { font-family: "Archivo"; font-stretch: 125%; font-weight: 800; }

Both fonts are subset to just the Latin characters and punctuation the site actually uses, then compressed to woff2. The display face — every weight, every width — lands around 75 KB. The whole type system is roughly 100 KB, self-hosted, preloaded, and served from the same origin as everything else.

Why self-host Three reasons, in order: it's faster (no extra DNS, TLS, and round-trip to a font host); it's private (no third party learns who visits); and it never shifts (the exact face is there on first paint, so the stretched headline never flashes a fallback and reflows). For a studio that sells care about detail, a font that pops in late is a tell.

The motion is hand-drawn

Behind the headline is a slow field of streamlines that drift and bend toward your cursor — a flow field driven by a small hand-written value-noise function on a <canvas>. It's a few hundred lines, no library. It reads its colors from CSS custom properties, so the entire site — motion included — reskins by changing a single --accent token.

It's also a good citizen. It respects prefers-reduced-motion (and renders one calm static frame instead of nothing). It pauses when the tab is hidden or the hero scrolls out of view. And it's purely decorative — marked aria-hidden, layered behind the text, and entirely absent from the accessibility tree.

It works without JavaScript

Every word and every link works with JavaScript turned off. The motion, the scroll reveals, and the cursor are additive — enhancements layered on top of a document that is complete on its own. The trick is a tiny inline script in the head that sets a class before the first paint; only then do the reveal animations arm themselves. No script, no class, nothing hidden. The page degrades to a perfectly readable document, which is what a page is supposed to be.

The details that don't show

The rest is unglamorous and load-bearing. Images are WebP with a small fallback, carry explicit width and height so nothing reflows as they load, and sit below the fold behind loading="lazy". Color is one rationed accent over tinted neutrals — never pure black, never pure white. Every interactive target clears 44 pixels. Contrast clears WCAG AA. There's a real 404, a manifest, structured data, and a sitemap. None of it is visible, and all of it is the point.

Constraints as craft

None of these choices are about performance for its own sake. They're the same instinct that runs through everything we make: decide the boring things on purpose, early, and let the constraints sharpen the work instead of loosening it. A site that loads instantly, depends on no one, and degrades to plain text isn't a smaller version of a "real" website. It's what a real website is, when someone bothered.

That instinct has a name, and it's the same one we build apps with — design is the specification. This site is just the smallest possible proof of it. The larger proof is the work.

Written by BD Media — a small iOS app studio. We make a few things, exceptionally well. Say hello: hello@bdmedia.app.

← All writing