Ce site

Deux univers#

Le même code sert deux sites: celui-ci, sombre et technique, et /wild, un carnet de randonnée sur papier crème. Chacun a son thème, ses polices et sa voix: Mona Sans et Martian Mono ici, Instrument Serif et Newsreader de l'autre côté.

Ils partagent une même signature, Axel /dev et Axel /wild, dont le suffixe sert de sélecteur d'univers depuis n'importe quelle page.

La traversée#

Passer d'un univers à l'autre déclenche une transition en WebGL: une carte topographique se déploie depuis le point cliqué, dans les couleurs de la destination, et ses lignes de niveau se transforment en relief avant de s'ouvrir sur la nouvelle page. Le shader n'est chargé qu'au survol du bouton, et une version en CSS prend le relais quand WebGL manque.

Du contenu typé#

Randonnées, photos, articles et projets sont des fichiers (MDX, GPX, images) validés par des schémas Zod au chargement. Une erreur de contenu est une erreur de build, pas une page cassée en production.

Les articles ont leurs propres composants: arborescences de fichiers, formules mathématiques rendues au build, tableaux qui défilent sur mobile, sommaire qui suit la lecture.

Rendu et hébergement#

TanStack Start rend les pages côté serveur, déployées sur Cloudflare. Le code des articles est coloré au build, les formules aussi: le navigateur ne reçoit ni surligneur ni moteur de rendu mathématique. Les graphiques, comme l'activité du blog, sont rendus en SVG dès le serveur.

Le carnet d'ordres#

La scène 3D de la page d'accueil est un carnet d'ordres simulé: une crête par instantané, l'historique qui recule. Environ 18 000 sommets en deux appels de dessin, une seule ligne écrite par tick, et un rendu qui s'arrête dès que la scène sort de l'écran.