Back

Colophon

How this site was made

I'm a frontend engineer and I like working close to design. I made this site to show that in practice. Here I tell you what I used and why I made some of the choices.

RepositoryStyleguide

Technologies

Stack

I built the site with Astro and published it on Cloudflare.

I used React for the interactive parts and Nanostores to share state between the islands. For the styles, I picked Tailwind CSS. For the primitives, I used Ark UI because they are headless. The animations were made with Motion. The form emails are templates in React Email sent through Resend.

I wrote the code using Claude Code to define the specs, implement the tasks, and review the code.

Design

I started the design in Figma, then explored some interactions in Claude Design and prototyped straight in code. I also built a styleguide page to show the site tokens.

For the colors, I used Catppuccin Mocha in the dark theme and Latte in the light one. For the text, I used Geist for headings and body and Fira Code for technical bits. The icons come from Tabler, and the character images were generated with ChatGPT Image.

Content

The site has Portuguese and English versions, split by language and organized in YAML files. The home narrations were generated with ElevenLabs using my own voice as the base.

Quality

I set up CI to run typecheck with TypeScript, linter with Biome, tests with Vitest and a Lighthouse audit. I follow how the site is used with PostHog.

Decisions

  1. 01

    Content pages as static HTML

    The content pages are generated during the build and only the contact form runs on the server. That way they reach the browser ready and faster.

  2. 02

    The form keeps no messages

    The form sends the messages to my email and no copy stays in a database or in the logs, because I don't want to keep data about whoever visits the site.

  3. 03

    Analytics without cookies

    I set PostHog up to work without cookies and to respect Do Not Track. That way I don't need a privacy and consent banner.

  4. 04

    Lighthouse targets in CI

    I set a target of performance above 95 on mobile and 100 in accessibility, best practices and SEO, with WCAG AA as the accessibility reference. I care about the performance of every screen, and the audit checks it on each change.

Want to talk about any of these choices?

Get in touch