Colophon
Uses
How this site was made: tools, decisions and process. Everything here comes from the repository and the project docs.
Stack
- Framework
- Next.js 16 with React 19, on a single route; the active mode is a URL parameter.
- Language
- TypeScript.
- Styling
- Tailwind CSS 4 over semantic color tokens defined in CSS.
- Quality
- Biome for lint and formatting.
- Packages
- bun.
- Typography
- JetBrains Mono, everywhere.
Styles, themes and languages
- Matrix
- 3 styles × 3 themes × 2 languages, all chosen by the visitor. Any combination is valid.
- Style is structure
- Manual, Blue Note and Rotation change the layout of the whole site.
- Theme is color
- Chrome, Gunmetal and LCD only swap color tokens, so they work in any style.
- Language
- Portuguese and English, rendered on the server from a cookie or the ?lang parameter.
- Rules
- No glow, no decorative gradients, hierarchy by hairline and weight, accent color only where there is action.
Audio
- Drone and SFX
- An ambient synth and the interface sounds, written directly on the Web Audio API.
- Player
- The deathko music player is hand-rolled too, with queue, seek and an analyser for the visuals.
- No Tone.js
- No third-party audio library.
Motion
- Motion
- React presence and transitions.
- Anime.js
- SVG choreography, like the Rail patch cable.
- Reduced motion
- The only gate is prefers-reduced-motion. Content, motion and audio are removable layers.
Hosting and measurement
- App
- Railway.
- DNS and proxy
- Cloudflare.
- Analytics
- Cloudflare Web Analytics, cookie-free and with no banner.
Process
- Orchestration
- The work is run by agents: an Opus model plans and coordinates; Sonnet workers execute the tasks, each on its own branch, through Orca.
- Source of truth
- DECISIONS.md and ROADMAP.md record what was decided and what is left. Content comes only from the résumé.