tom-lefrere.fr, mon site personnel en quatre vies

Le projet

Depuis 2019, je maintiens mon site personnel pour exposer mes projets et expérimenter de nouvelles technos web. Il a connu quatre versions successives, ce qui fait qu’il reflète assez bien mon évolution en tant que développeur, pour le coup. Chaque refonte a été l’occasion de creuser un nouveau stack, de tester ce qui marche vraiment, et de jeter ce qui ne tient pas la durée.

Version 1, 2019

Première version très simple, réalisée en PHP pur avec quelques animations JavaScript. Fonctionnalités minimalistes, évidemment, mais c’était une première expérience de mise en production, ce qui compte beaucoup quand on débute.

Version 2, 2020

Refonte complète en Vue.js pour découvrir ce framework. Intégration de librairies comme GSAP et jQuery pour des animations plus soignées. C’était typiquement la version où je voulais prouver que je savais faire, notamment sur l’aspect visuel.

Version 3, 2021-2026

Migration vers WordPress pour simplifier la maintenance et me concentrer sur le contenu plutôt que sur l’infrastructure. Beaucoup moins de temps à maintenir, beaucoup plus à écrire, ce qui était la bonne balance à l’époque. Mais avec le temps, le combo WordPress + plugins + thème custom est devenu lourd, lent au chargement, et son expérience éditoriale ne me convenait plus.

Version 4, 2026 · actuelle

Refonte totale en Astro 5 (SSG) avec Sveltia CMS, serveur MCP et deploy O2switch via GitHub Actions. Cette version a une ambition différente des précédentes : devenir un site fiable, rapide, mesurable, bilingue et traçable, sans sacrifier le côté un peu vivant que j’aime bien.

Les principes qui ont guidé la refonte :

Tout en statique pour zéro compute serveur à l’exécution, un TTFB quasi instantané, et une charge infra nulle côté hébergeur.
Charte Deep Space : fond bleu nuit #0a0f1f, accent jaune #fdf854, typo Space Grotesk + JetBrains Mono. Ambiance cohérente de bout en bout.
Bilingue natif (FR / EN) avec détection automatique, URLs / et /en/, hreflang self-referencing, et 27 projets + 2 pages légales traduits ligne par ligne.
Contenu versionné en git dans src/content/projects/*.mdx avec schéma Zod validé, plutôt que dans une base de données opaque.
Audité en continu : chaque push CI rejoue des audits éco et accessibilité, résultats affichés dans une app dédiée côté site (Impact 🌱).

Ce que ça donne concrètement

Tom OS, une section CV qui mime un bureau macOS avec une rangée d’apps cliquables (Expérience, Formation, Compétences, Terminal, Playground SHAP, Iris UMAP, Booster Pokémon-like, Snake, Impact). Métaphore un peu joueuse qui me ressemble mieux qu’un simple PDF à télécharger.
Command palette (⌘K ou Ctrl+K) pour sauter à n’importe quel projet, ouvrir une app, switcher de langue, basculer en mode blueprint, couper l’audio. Fuzzy-search, multi-groupes, deep-link via ?q=.
Portfolio en 3 vues : slider défilant, liste éditoriale, et constellation SVG où chaque projet est une étoile positionnée dans un plan année × catégorie. Modale plein écran qui s’ouvre sans quitter la page, deep-link #p-slug, bouton fermer qui tourne au hover.
Filtres multi-tags : search input + pills toggle multi-select + top-N avec “voir plus”. 40 tags distincts extraits automatiquement depuis le contenu des articles via un dictionnaire de regex.
Serveur MCP qui expose le contenu du site comme outils pour Claude Desktop ou Claude Code. 12 outils (list/get/create/update/delete projects, pages, medias, git_status, commit_and_push), validation Zod, sandbox SITE_ROOT, tests d’intégration via node --test.
Impact app avec les scores éco (96/100 via Sustainable Web Design v4), a11y (99/100 via heuristiques WCAG 2.2), tests (15/15 passing), perf runtime. Chaque jauge a une méthodo dépliable qui explique le calcul, pour que ce soit auditable et pas juste décoratif.
Éditoriaux riches : PDF buttons stylés, galeries responsive avec hover zoom, composant <VideoEmbed> pour les démos, tout depuis MDX.

Mes contributions

Tout, du début à la fin. Conception, architecture, intégration, outils d’audit, déploiement, doc. Le repo contient en plus :

Scripts automatisés : eco-audit.mjs (impact carbone par visite), a11y-audit.mjs (63 pages scannées), extract-tags.mjs (auto-tagging par regex), optimize-images.mjs (conversion PNG → WebP via sharp), generate-audit-report.mjs (serialise les scores en JSON consommé par l’app Impact), import-wp.mjs (migration WordPress initiale).
Tests CI : 6 tests de structure build, 9 tests MCP en stdio JSON-RPC, toujours verts avant merge.
GitHub Actions : jobs check + build + test + audit + mcp-test en parallèle, deploy O2switch en FTPS après chaque push sur main.
Cloudflare Worker pour l’OAuth GitHub (api.netlify.com refuse les sites hors-Netlify depuis 2026). Gratuit, 5 min à déployer, sécurisé côté secrets.
SEO 93/100 : sitemap i18n, robots avec max-image-preview:large, hreflang self-ref, schemas Person + WebSite + BlogPosting + BreadcrumbList (éligibles rich snippets Google), OG images SVG 1200×630 générées à la volée par projet.

Ce que j’ai retenu de cette V4

Le SSG, c’est du vrai confort. Une fois que j’ai migré sur Astro, la vitesse de dev a explosé. Hot-reload instantané, pas de base de données à babysit, tout le contenu en git avec du diff propre. Pour un portfolio perso, c’est le bon niveau d’abstraction, vraiment.

Les LLM changent la donne côté éditorial. L’idée d’un serveur MCP sur mon propre contenu, c’était un peu expérimental au départ. Aujourd’hui je peux demander à Claude “liste mes projets par date, crée un brouillon foo, commit et push”, et c’est exécuté. Ça enlève énormément de friction sur les petites MAJ, et ça ouvre la voie à des usages plus ambitieux (auto-tagging, suggestions de titres, cross-linking, etc.).

Mesurer, c’est déjà corriger. L’app Impact affiche les scores en live sur le site. Rendre les chiffres visibles, ça force à ne pas les laisser glisser. Quand l’éco descend sous 90, je le vois à chaque nouvelle feature que je push, du coup j’arbitre autrement.

L’accessibilité a un coût zéro. 99/100 sur l’audit a11y, ce n’est pas un objectif en soi mais le résultat naturel de bonnes pratiques (landmarks sémantiques, alt systématique, skip link, contraste correct). Le seul “low” qui reste, c’est l’absence de skip link sur la page /admin/ du CMS, qui est de toute façon désindexée.

Bilingue, c’est doublement du boulot. 27 projets × 2 langues = 54 articles à maintenir. Sans l’infra multilang solide (schéma lang, filtre getCollection, normalisation des slugs en/xxx → xxx), ça devient vite un cauchemar. Je ne regrette pas, mais il faut avoir conscience de la charge.

Contexte

Projet personnel, en continu depuis 2019. La V4 a été développée en une semaine intensive avec Claude Code, code entièrement écrit et audité en binôme avec lui.

Technologies utilisées

Couche	V4 (2026)
Framework	Astro 5 (SSG, content collections, i18n)
Langage	TypeScript
Styling	CSS custom properties + Tailwind ponctuel
Content	MDX + gray-matter + Zod validation
CMS	Sveltia CMS (fork moderne de Decap)
Auth CMS	Cloudflare Worker OAuth (sveltia-cms-auth)
MCP	`@modelcontextprotocol/sdk` sur stdio JSON-RPC
Image	sharp (PNG → WebP, -97%)
Host	O2switch (cPanel Apache)
Deploy	GitHub Actions FTPS
Tests	node —test (natif, zéro dépendance)

Précédentes vies pour l’historique :

V1 : PHP / JavaScript (2019)
V2 : Vue.js / GSAP / jQuery (2020)
V3 : WordPress (2021-2026)
V4 : Astro + Sveltia CMS + MCP (avril 2026)