Colophon
How this site is made.
The stack is part of the portfolio. Every tool choice here is a deliberate one: made because it's the right fit, documented because it's the kind of thinking I want to show.
- build
- Astro · Vue 3 + React 19 islands
- lang
- TypeScript (strict)
- style
- Tailwind v4 · CSS-variable design tokens
- content
- Sanity: publish without a deploy
- host
- Cloudflare Pages · ~$0
- perf
- ~0 KB JS on content pages · Lighthouse ≥ 95
- a11y
- WCAG 2.2 AA · axe clean · skip link · visible focus
- type
- Zen Old Mincho · Zen Kaku Gothic New · JetBrains Mono
- source
- github.com/CaioAP/caio-alfonso
Design tokens
The color palette, typography, and spacing are all CSS custom properties, a single source of truth that both the Tailwind utilities and hand-written CSS read from. Try editing them live in theToken Studio →
Design rationale
The visual language is Yohaku (余白), Japanese for intentional negative space. Restraint over decoration. Hairline rules over drop shadows. One accent color (vermilion seal) instead of a palette. The typography is Zen Old Mincho + Zen Kaku Gothic New: Japanese-lineage typefaces that carry Latin beautifully with structured, deliberate strokes.
The only non-Latin character on the site is カ in the hanko seal, a katakana initial used as a logo mark, not cultural decoration.