Colophon

Comment ce site est fait.

Un colophon raconte comment un livre est fabriqué. Celui-ci fait la même chose pour le site : typographie, couleurs, code et outils.

Typographie

Corps

Satoshi

Satoshi est une sans-serif de Indian Type Foundry. Ses formes géométriques restent faciles à lire, même dans les petits textes.

Code

JetBrains Mono

Une monospace avec des ligatures pour le code. Elle sert ici à distinguer les caractères sans ralentir la lecture.

Échelle fluide

Les tailles de texte suivent l'échelle fluide d'Utopia. Elles évoluent avec la largeur de l'écran, sans saut entre mobile et ordinateur.

  • 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

Design

Principes

  • Du texte d'abord, peu d'ornements
  • Noir et blanc, sans couleur d'accent
  • Modes clair et sombre
  • Liens soulignés, légère lueur 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 suit la météo du moment. Il utilise Skyface, le projet qui génère et affiche ses variantes.

Comment ça marche

  • Données météo via l'API Météo France
  • Jusqu'à 45 variantes générées avec Gemini
  • 9 conditions météo : ensoleillé, nuageux, pluie, neige, brouillard, orage, vent, nuit claire, nuit nuageuse
  • Jusqu'à 5 variantes par condition

Outils

  • Éditeur : Claude Code
  • Terminal : Bash
  • Gestion de version : Git + GitHub

Accessibilité et 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.