This site is the case study

The site you are reading is the most recent thing I shipped, so it should answer the question a portfolio usually dodges: what does this person’s work look like when nobody scoped it for him? I rebuilt chrisdalbano.com from scratch in about two and a half weeks of nights and weekends, solo, from first scaffold to DNS cutover. Not from a template. The constraint I set on day one: every visual decision has to live in a system, not in a component.

Tokens before pixels

The styling is built on a three-layer token architecture: primitives (raw oklch values, type sizes, durations), semantic tokens (surface, ink, accent roles), and component tokens that map semantics onto anatomy. Components are only allowed to consume the top layer. There is a binding rule in the repo doctrine: no hex literals in components, ever. Tailwind v4 reads the same tokens through @theme, so CSS and utility classes draw from one source.

That rule is what makes the site’s party trick cheap. There are two versions of this portfolio, a software engineering identity and a game design identity, and they are the same components fed different data and a swapped accent role. Switching variants costs one data attribute. No forked components, no second stylesheet.

Motion as vocabulary, not decoration

Animation runs through a finite set of eleven named presets (motion-v under the hood): entrances, emphasis, and the hero treatments. Finite is the point. When every animation comes from a shared vocabulary with shared easings and durations, the page feels composed instead of assembled. Every preset carries an explicit reduced-motion branch, and a global guard backs it up, because respecting prefers-reduced-motion is table stakes for calling something crafted.

Content modeled like a CMS, without the CMS

The content is not in the components. It is authored as markdown with typed frontmatter in a private vault, and a build script bakes it into per-variant JSON the site renders from. Each content item declares which identities it belongs to; the pipeline emits one payload per variant. That separation is the same shape as a headless CMS: content modeling, an editorial workflow, and a render layer that never touches the source. It also means publishing a new project or note is a markdown commit, not a deploy decision.

The two-agent workflow

The part I would defend hardest: how it was built. I run two Claude Code agents with deliberately separated powers. A design-authority agent owns tokens, grid, component anatomy, and motion specs, and writes them to a specs directory. An engineering agent implements those specs in Vue and Tailwind and is forbidden from making design decisions. The spec file is the handoff contract. If a spec is ambiguous, the engineer sends it back rather than improvising.

This sounds like ceremony for a personal site. It is the opposite. Solo builders drift; the system held the line on every late-night shortcut I was tempted to take, and it is why the site stayed coherent while shipping fast. It is also a working answer to a question I care about professionally: what does AI-assisted craft look like when you architect the collaboration instead of just prompting harder?

The repo doctrine, token files, and motion presets are all real artifacts, not retrofitted documentation. If you are reading this as a hiring signal: this is the process you would be hiring.