Colophon
How this site is made.
A colophon traditionally describes how a book is made. For a website, it's an opportunity to document the design decisions, tools, and technologies that shape the experience. Consider this a manifesto of sorts.
Typography
Body
Satoshi
A modernist sans-serif from Indian Type Foundry. It strikes a balance between geometric precision and warmth, with a double-storey 'a' and 'g' that add character without sacrificing readability.
Code
JetBrains Mono
A monospace designed for developers, with programming ligatures and excellent readability at small sizes.
Fluid Scale
Typography is scaled using a fluid type system from Utopia. Font sizes interpolate smoothly between mobile and desktop viewports.
- Min viewport:
320px@ 16px base, 1.2 ratio - Max viewport:
1240px@ 18px base, 1.25 ratio - Line height:
1.6 - Letter spacing:
-0.02emto-0.03em(headings)
Influences
- Utopia for fluid type and space scales
- Practical Typography by Matthew Butterick
- Font Review Journal by Bethany Heck
- The Elements of Typographic Style by Robert Bringhurst
Design
Principles
- Minimalist and content-focused
- Black and white palette, no accent colors
- Support for light and dark modes
- Links are underlined, with subtle glow on hover in dark mode
Colors
Light
- Background:
#fcfcfc - Text:
#202020 - Muted:
#6b6b6b
Dark
- Background:
#141414 - Text:
#f0f0f0 - Muted:
#8a8a8a
Technology
| Framework | Astro |
| Styling | Tailwind CSS |
| Content | MDX |
| Backend | Convex |
| Hosting | Vercel |
| Audio | ElevenLabs |
Weather Avatar
The avatar on this site changes based on real-time weather conditions. It uses Skyface, an open-source system that generates weather-responsive avatars.
How it works
- Weather data from Météo France API
- 45 avatar variants generated with Gemini AI
- 9 weather conditions: sunny, cloudy, rain, snow, fog, thunderstorm, wind, clear night, cloudy night
- 5 unique variants per condition for visual variety
Tools
- Editor: Claude Code
- Terminal: Bash
- Version control: Git + GitHub
Accessibility & Performance
- Respects
prefers-reduced-motion - No trackers, no analytics
- Optimized images
- Variable fonts to reduce weight
Open Source
The source code for this site is available on GitHub.