Building this site, one iteration at a time

Every website has a story, and this one is less about a big launch than about a long series of small steps. It started as a plain blog — a place to write things down — and, one iteration at a time, it grew into a little workshop: a design system, an authoring studio, a research space, and a shelf of tools I actually use.

This post is a short tour of how it all fits together, and why it looks the way it does.

The loop above is the heartbeat of the site: I write in a studio, it becomes portable MDX, and the website renders it. The very page you're reading travelled exactly that path.

One repo, many surfaces

Under the hood this isn't a single app — it's a Turborepo monorepo. A few applications share a common foundation, so a fix or a new component lands everywhere at once instead of being copy-pasted around.

Here's the shape of it, sketched on the very whiteboard tool that ships with the site:

The apps are the surfaces people see — the public website, a research space, a local-only studio for authoring, and an api. The packages are the shared core they all lean on.

The design system does the heavy lifting

Almost everything you see is a component from @repo/ui, built following atomic design — atoms compose into molecules, molecules into organisms, organisms into templates. Each one lives in Storybook with its own stories, so it can be designed and reviewed in isolation before it ever reaches a page.

That discipline is what keeps the site cohesive: the same buttons, cards, and typography show up on the blog, in the tools, and inside the studio, because they are literally the same code.

Write once, render anywhere

Content lives in @repo/content as MDX with a small, typed frontmatter schema. The studio is a WYSIWYG editor (built on TipTap) that serializes straight to that MDX — and it can embed richer blocks than plain prose:

• Mermaid diagrams for flows and sequences
• Database diagrams written as DBML
• SVG drawings — including animated ones, like the shapes in this very post
• Whiteboards powered by Excalidraw, like the architecture sketch above

Because the source is just MDX, the words stay portable and the diagrams travel with them.

A playground of tools

Beyond writing, the site carries a growing set of small, focused tools — a JWT decoder, a diff checker, a Mermaid playground, a database diagrammer, an SVG editor, a whiteboard, and more. Some are genuinely useful day to day; some exist just because they were fun to build. There are even a couple of games hiding in the corners.

Always iterating

Nothing here is finished, and that's the point. The site is a place to try ideas, keep the good ones, and quietly delete the rest. If you're reading this, you're catching it mid-iteration — which is exactly how I like it.