Colophon
How this site is made.
A colophon tells you how a book was made. This one does the same for the site: type, colors, code and tools.
Typography
Body
Satoshi
Satoshi is a sans-serif from Indian Type Foundry. Its geometric shapes stay readable even in small text.
Code
JetBrains Mono
A monospace with ligatures for code. It's used here where the characters need to be easy to tell apart.
Fluid Scale
Text sizes follow Utopia's fluid scale. They change with screen width instead of jumping between mobile and desktop sizes.
- 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
- Text first, few ornaments
- Black and white, no accent color
- Light and dark modes
- Underlined links, a slight 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 follows the current weather. It uses Skyface to generate and display the variants.
How it works
- Weather data from Météo France API
- Up to 45 variants generated with Gemini
- 9 weather conditions: sunny, cloudy, rain, snow, fog, thunderstorm, wind, clear night, cloudy night
- Up to 5 variants per condition
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.