Coulisses du site

Ce site est aussi mon petit terrain de jeu technique. Voici comment il est construit, comment il s’améliore, ce qu’il sait de vous (presque rien) et qui en répond.

Les mots suivis d’un * s’expliquent d’un clic.

Fait comment ?

Des pages préparées à l’avance, sans base de données ni serveur d’application : le site reste léger, rapide, et offre peu de prise aux attaques.

et génèrent toutes les pages au moment de la construction (), en strict ; s’occupe de la mise en forme.

Sans bibliothèque, le navigateur anime tout : le passage du clair au sombre se fait en cercle, le monde change en losange de pixels parti du bouton et la nouvelle saison apparaît sur la scène en trame de pixels (), le lexique s’ouvre en sans JavaScript, la scène de l’accueil glisse au défilement, ses nuages dérivent, la neige ou les feuilles y tombent (un bouton met tout en pause), plus loin les piles se posent au défilement, chaque icône de titre joue sa petite scène en pixels (le cœur bat, le marteau frappe, l’enveloppe s’ouvre), une œuvre sort de sa pile d’un clic pour dire pourquoi je l’aime, et chaque page s’ouvre en fondu, en CSS seul. L’ambiance de la scène ne démarre qu’une fois la page chargée, par une ligne de JavaScript, pour ne pas ralentir l’affichage. Moins de mouvement demandé ? Rien ne bouge.

Les polices Inter, JetBrains Mono et Bricolage Grotesque sont servies par le site lui‑même. Mon personnage et les icônes sont des dessins en pixel art maison : les icônes en SVG, le personnage en sprite, de petites images PNG tirées de sa grille, avec un contour teinté et trois tons par matière, sous un visage en SVG. Touché, le mage lève son bâton et le fait tournoyer : son orbe sème une traînée d’étincelles, puis une petite étoile éclate, six images qu’une animation CSS fait défiler pas à pas. Le scientifique, lui, porte sa fiole à hauteur de ses lunettes : elle bouillonne, des bulles carrées montent et éclatent, puis une bouffée verte déborde du col. L’explorateur, enfin, abaisse son casque sur ses lunettes, et sa salle holographique s’allume. Au Contact, le personnage fait aussi son geste de lui‑même, pose après pose, à mesure qu’on fait défiler la page jusqu’à lui. Les joueurs trouveront sur l’accueil un petit secret, clavier en main : le personnage connaît un très vieux code de triche.

La scène de l’accueil suit les saisons d’après la date de votre appareil, et le mage s’habille en conséquence : une fleur au chapeau au printemps, une feuille rousse en automne, une écharpe en hiver. Le ninja aussi : un pétale de cerisier au printemps, un éventail l’été, une feuille d’érable en automne, une longue écharpe en hiver. La dernière semaine d’octobre, une citrouille-lanterne s’invite aussi dans le décor. Pour en voir une autre, le bouton au coin de la scène passe à la suivante, et « Saison », au pied de chaque page, les propose toutes ; ce choix vaut le temps de votre visite, la suivante retrouve la saison du jour. Essayez-les aussi ci‑dessous : c’est le CSS qui change le décor, sans JavaScript.

À partager :printemps été automne hiver

À chaque visite, le site tire un monde au hasard : « Pixel et papier », où mon personnage est un mage devant son château, « Manga », où il devient ninja entre Fuji et cerisiers, « Laboratoire », où il devient scientifique en blouse blanche entre son radiotélescope et son observatoire, « Néon », où il devient explorateur de réalité virtuelle sur la plateforme de sa salle holographique, ou « Cathodique », où il redevient l’enfant qui joue à la console devant la télé du salon. Jamais deux fois de suite le même : votre navigateur retient celui de votre dernière visite (clé « precedent »), et le suivant est tiré parmi les autres. Le personnage, le décor et l’habillage du site vont toujours ensemble : le même HTML, habillé par le CSS seul. « Manga », « Laboratoire », « Néon » et « Cathodique » ont chacun leur feuille de style, qui ne se télécharge que si leur monde s’affiche. Le dé au coin de la scène passe au monde suivant ; votre choix ci‑dessous le fixe. Chaque monde a aussi son lien, qui l’ouvre le temps d’une visite : de quoi partager votre préféré. Le clair et le sombre ne sont jamais tirés : ils suivent votre appareil, ou votre choix.

À partager :Pixel et papier Manga Laboratoire Néon Cathodique

Le tout est servi par , dans un conteneur, sur un petit que j’administre moi‑même. construit et déploie chaque nouvelle version.

Ce que chaque version doit prouver

Avant d’arriver en préversion, chaque version passe ces contrôles automatiques ; un seul échec, et elle s’arrête là.

L’accueil charge au plus 10 ko de JavaScript compressé : ni ni ne sont envoyés au navigateur.
Aucun script ni style écrit dans la page elle‑même, et aucune exception dans les consignes de sécurité : le navigateur n’exécute que les scripts du site et de sa mesure d’audience, et refuse qu’un script glisse du code dans la page.
Polices, images et scripts viennent tous du site, à une exception près : la mesure d’audience, que j’héberge moi‑même.
Les erreurs corrigées sont gardées par des tests : une coquille, un fait rectifié ou un mot abandonné qui reviendrait ferait échouer la version.
Typographie française vérifiée sur chaque page : apostrophes courbes, guillemets à la française, et jamais un « ? » ni un « : » seul en début de ligne.
Les photos et captures publiées ne gardent aucune métadonnée : ni lieu, ni date de prise de vue, ni appareil.

Une boucle d’IA, un humain qui valide

Ce site s’améliore par petites touches, cycle après cycle, grâce à une boucle que j’ai programmée : chaque étape est confiée à Claude, l’IA d’Anthropic. Rien n’est mis en ligne sans que je l’aie relu.

Mesure. Captures en mobile, tablette et bureau, performance, accessibilité et référencement.
Analyse. Des propositions d’amélioration, rédigées en tickets que je peux commenter.
Développement. Un ticket à la fois, réalisé sur sa propre branche.
Porte qualité. Lint, typage, tests, construction, audit des dépendances et contrôle des pages produites doivent passer.
Revue. Une autre instance relit le changement avant toute livraison.
Préversion. Le changement part sur une préversion non indexée, où je peux le regarder.
Mémoire. Ce que le cycle a appris (le cap, les décisions, les leçons, mes réponses) est noté, puis relu au cycle suivant.

Mise en ligne. C’est moi : je relis la préversion, et je suis seul à décider de la publier.

L’IA n’invente rien sur moi : elle s’en tient à mes réponses, mes projets et les pages publiques de mon employeur. Elle propose en préversion, je décide seul de publier.

Pour les curieux : l’orchestrateur est un programme , pas une IA. Il enchaîne les étapes et confie chacune à une instance neuve de , isolée dans un bac à sable et sans souvenir des précédentes : d’un cycle à l’autre, tout passe par cette mémoire, quelques fichiers texte.

Vos données

Pas de cookie, pas de publicité, pas de traceur : je compte les visites, sans savoir qui vous êtes.

La mesure d’audience passe par , un outil que j’héberge moi‑même. Il ne dépose aucun cookie et ne conserve pas votre adresse IP. Il retient la page consultée, le site d’où vous venez, une localisation approximative et votre type de navigateur et d’appareil.

Seules les visites du site en ligne sont comptées : ni la préversion, ni mes propres essais.

Le thème que vous choisissez (clair, sombre ou celui de votre appareil), le monde tiré ou choisi, celui de votre visite précédente et la saison choisie restent dans votre navigateur : ils ne me sont jamais envoyés.

Ces statistiques restent chez moi : elles ne sont ni vendues, ni partagées.

Aucune ressource n’est chargée depuis un autre site : ni police, ni script, ni image venant d’un tiers.

Une question sur ces données ? Écrivez‑moi, l’adresse est juste en dessous.

Mentions légales

Les informations que la loi demande à tout site publié en France.

Éditeur et directeur de la publication: Xavier Rocher, à titre personnel
Contact: xavier@xavierrocher.fr
Hébergeur: OVH SAS2 rue Kellermann, 59100 Roubaix, France+33 9 72 10 10 07

GitLab CI/CD Un robot qui, à chaque modification du code, le vérifie, le teste puis le met en ligne automatiquement, sans geste à la main.

Export statique Préparer toutes les pages d’un site à l’avance, une fois pour toutes : il n’y a plus qu’à les envoyer telles quelles, sans rien calculer à chaque visite.

nginx Un serveur web : le programme qui reçoit les demandes des navigateurs et leur renvoie les pages et les images d’un site, très rapidement.

Open source Se dit d’un logiciel dont la recette, le code, est publique : chacun peut la lire, la vérifier, l’améliorer et la partager.

Next.js Un outil pour fabriquer des sites web : il assemble chaque page à partir de briques réutilisables et peut toutes les préparer à l’avance.

React Une bibliothèque de programmation qui construit l’affichage d’un site ou d’une application en petites briques réutilisables, les composants.

TypeScript Le langage des pages web, JavaScript, complété d’un contrôle qui vérifie avant tout lancement que chaque donnée est bien du type attendu.

Tailwind CSS Une boîte à outils de mise en forme pour le web : on habille chaque élément d’une page de petites étiquettes toutes prêtes (couleur, marge, taille…).

Umami Un outil libre de mesure d’audience : il compte les visites et les pages vues d’un site, sans cookie et sans suivre les personnes.

Claude Code L’assistant de programmation d’Anthropic : une IA qui lit, écrit, teste et corrige du code elle-même, directement dans un projet.

Python Un langage de programmation très répandu, réputé facile à lire et à apprendre, aussi bien pour de petits scripts que pour de gros logiciels.

View Transitions Une fonction des navigateurs web qui fait passer une page d’un aspect à un autre en douceur, par un fondu ou un effet animé, plutôt que d’un coup.

Cluster Kubernetes Un groupe de serveurs qui travaillent ensemble comme une seule grande machine : un chef d’orchestre y répartit les applications et les relance si l’une tombe.