Skip to content
Daniel Allen

Colophon

How this site is built

The resume says I design and build in one loop. This site is the evidence.

  1. Browser

    The page arrives as finished HTML, then Vue takes over for interaction.

  2. Interface

    Accessible primitives and icons under every component on the page.

  3. Styling

    One token file drives four theme states.

  4. Components

    Every page and component is a typed single-file component.

  5. Application

    Routing, server rendering and the build.

  6. Hosting

    Renders each request on the server and sends the page to the browser.

Stack

I build in React day to day and still reach for it first, because it is everywhere. I picked Vue for this site to try something new. The developer experience is good and I enjoyed it.

  • Nuxt 4, server-rendered on Vercel
  • Vue 3 and TypeScript
  • Tailwind v4, with every color, radius, shadow and spacing as a token
  • shadcn-vue primitives on reka-ui, Phosphor icons
  • Storybook 10, with the accessibility addon set to fail a story on any violation
  • Prettier, husky and commitlint on every commit

The design system

One token file drives four theme states: light, dark and the off-the-clock pair. Each state is a class on the root element. Components use semantic tokens and never know which theme they are in, so the other side of this site is the same components with different tokens. Dark mode at DNSFilter shipped the same way. Layout is a 12-column grid with gutters. Content lives in typed data, so a wording change is a data change.

Process

I designed and built it in one loop, the way my resume describes. First I wrote a contract for the project. It covers the architecture, the design system rules, the copy rules and the definition of done for a component. Claude Code built against that contract and the design system. I reviewed every component in Storybook, in all four theme states, before it shipped. I run the same pipeline at Censys. This one was on my own time.