Comment ce site est fait

Technique

Construit avec Astro 7.3.1, en HTML statique. Le contenu est géré en collections typées (schémas validés au build), les pages en Markdown. Pas de framework d’interface, pas de dépendance superflue.

Trois fichiers JavaScript existent, et un seul est envoyé partout : theme.js, qui mémorise le choix clair/sombre. Le site s’en est passé jusqu’au 14 août 2026 : une préférence qui survit à la navigation exige un stockage local, et une bascule en CSS pur se réinitialise à chaque lien suivi. cv.js n’est chargé que par les pages du CV : il ouvre la fenêtre d’impression, une action qui n’a aucun équivalent en CSS. demo-mibeko.js, chargé uniquement par l’étude Mibeko, rejoue l’écran réel de l’assistant (question tapée, sources qui se posent) depuis un HTML déjà complet : il vide la conversation puis la reconstitue, il ne l’invente pas.

Sans JavaScript, tout reste lisible et rien ne ment : le sélecteur de thème, le bouton d’impression et la démonstration Mibeko sont masqués ou figés tant que leur script n’a pas signalé qu’il fonctionnait. Un bouton qui ne fait rien est pire que pas de bouton. Le raccourci clavier reste écrit sur la page du CV, et donne exactement le même résultat.

Mouvement

Les transitions de page et les apparitions au défilement sont du CSS natif :@view-transition pour la navigation,animation-timeline: view() pour ce qui se pose en arrivant dans l’écran. La démo Mibeko utilise un script local pour rejouer l’échange et un observateur de visibilité pour le suspendre hors écran. Son bouton d’arrêt restitue immédiatement l’échange complet, comme lorsque le système demande de réduire les animations, même en cours de lecture. La reprise se fait avec le bouton « Rejouer l’animation ». Aucune bibliothèque d’animation ni ressource tierce. Un navigateur qui ne connaît pas ces règles les ignore et affiche la page entière, immédiatement : rien de ce qui bouge n’est nécessaire à la lecture. Tout est coupé si le système signale prefers-reduced-motion.

Sécurité & vie privée

Politique de sécurité de contenu (CSP) stricte : aucune ressource, aucun script ni style tiers. En production, les en-têtes complets (HSTS, X-Content-Type-Options, Referrer-Policy, Permissions-Policy, protection anti-clickjacking) sont posés côté hébergeur. Aucun cookie, aucun traceur, aucune bannière de consentement, parce qu’il n’y a rien à consentir.

Design

Composé en IBM Plex(Sans et Mono, licence SIL Open Font 1.1), auto-hébergé : les fichiers sont servis depuis ce domaine, aucune requête ne part vers un tiers. Les motifs pixel (liserés, puces, glyphes) ne sont pas des images : ils sont dessinés en CSS, comme l’art de mes jeux est généré par code. L’unique illustration éditoriale de l’accueil adapte l’icône Citation footnote de Koboyo, stockée dans le code du site et recolorée par le thème : aucune ressource n’est chargée depuis un tiers. Six autres dessins de la même bibliothèque accompagnent les études de cas, le parcours, une note, la page contact et la 404 : balance-sheet,add-for-reporting, attacker-hood,academic-year-planner, answer et bald-person-looking-confused. Ils sont copiés dans src/assets/illustrations/, rendus en ligne dans le HTML et recolorés par currentColor : aucun n’est chargé depuis un tiers, aucun ne porte de couleur en dur. Thème clair et sombre : le système décide par défaut, et deux commandes permettent de forcer l’un ou l’autre : un bouton dans l’en-tête, le sélecteur détaillé en pied de page.

Les logos de technologies de la page CV et de l’accueil viennent de Simple Icons(licence CC0, domaine public). Le paquet n’est pas une dépendance du site : les tracés utilisés ont été copiés une fois dans le code, puis le paquet retiré : vingt icônes ne justifient pas d’en installer trois mille. Ils sont rendus dans l’encre du thème, jamais dans la couleur de la marque, et les marques citées restent la propriété de leurs détenteurs. Sans icône libre disponible, un monogramme prend la place plutôt qu’un logo redessiné de mémoire.

Chaîne de livraison

Intégration continue GitHub Actions avec dépendances verrouillées (npm ci), actions épinglées par empreinte de commit, et mises à jour surveillées par Dependabot. Le tout se veut cohérent avec la manière dont je livre mes autres projets.