Colophon
Comment ce site est fait.
Un colophon décrit traditionnellement comment un livre est fait. Pour un site web, c'est l'occasion de documenter les décisions de design, les outils et les technologies qui façonnent l'expérience. Considérez ceci comme une sorte de manifeste.
Typographie
Corps
Satoshi
Une sans-serif moderniste de Indian Type Foundry. Elle trouve un équilibre entre précision géométrique et chaleur, avec un 'a' et un 'g' à deux étages qui ajoutent du caractère sans sacrifier la lisibilité.
Code
JetBrains Mono
Une police monospace conçue pour les développeurs, avec des ligatures de programmation et une excellente lisibilité aux petites tailles.
Échelle fluide
La typographie est mise à l'échelle avec un système de type fluide de Utopia. Les tailles de police s'interpolent en douceur entre les viewports mobile et desktop.
- Viewport min :
320px@ 16px base, ratio 1.2 - Viewport max :
1240px@ 18px base, ratio 1.25 - Hauteur de ligne :
1.6 - Espacement des lettres :
-0.02emà-0.03em(titres)
Influences
- Utopia pour les échelles de type et d'espace fluides
- Practical Typography par Matthew Butterick
- Font Review Journal par Bethany Heck
- The Elements of Typographic Style par Robert Bringhurst
Design
Principes
- Minimaliste et centré sur le contenu
- Palette noir et blanc, sans couleurs d'accent
- Support des modes clair et sombre
- Liens soulignés, avec lueur subtile au survol en mode sombre
Couleurs
Clair
- Fond :
#fcfcfc - Texte :
#202020 - Atténué :
#6b6b6b
Sombre
- Fond :
#141414 - Texte :
#f0f0f0 - Atténué :
#8a8a8a
Technologie
| Framework | Astro |
| Style | Tailwind CSS |
| Contenu | MDX |
| Backend | Convex |
| Hébergement | Vercel |
| Audio | ElevenLabs |
Avatar Météo
L'avatar de ce site change en fonction des conditions météo en temps réel. Il utilise Skyface, un système open-source qui génère des avatars réactifs à la météo.
Comment ça marche
- Données météo via l'API Météo France
- 45 variantes d'avatar générées avec Gemini AI
- 9 conditions météo : ensoleillé, nuageux, pluie, neige, brouillard, orage, vent, nuit claire, nuit nuageuse
- 5 variantes uniques par condition pour la diversité visuelle
Outils
- Éditeur : Claude Code
- Terminal : Bash
- Gestion de version : Git + GitHub
Accessibilité & Performance
- Respecte
prefers-reduced-motion - Pas de trackers, pas d'analytics
- Images optimisées
- Polices variables pour réduire le poids
Open Source
Le code source de ce site est disponible sur GitHub.