01 · Contexte & objectif
Un portfolio qui tient lieu de démonstration plutôt que de vitrine : ce qui est décrit ici tourne sur le serveur qui sert cette page.
02 · Contraintes
Contraintes que je me suis données : hébergement et exploitation autonomes sur un VPS, aucun service tiers pour les statistiques, pas de cookies, et des pages légères, rapides sur téléphone comme sur ordinateur.
03 · Architecture
Site statique généré par Astro, servi par Caddy en conteneur avec certificat Let’s Encrypt automatique. Les statistiques sont collectées par une instance Umami auto-hébergée sur un sous-domaine, et les polices sont servies par le même serveur : aucune requête ne part chez un tiers.
04 · Décisions techniques
Une CSP stricte, donc générée. Autoriser les scripts inline aurait vidé la politique de son intérêt. Chaque bloc inline est autorisé par empreinte SHA-256 — mais des empreintes écrites à la main deviennent fausses au premier changement de code. Elles sont donc calculées au build, injectées dans un fragment de configuration Caddy, et le déploiement refuse de publier si ce qui est réellement servi ne correspond pas à ce qui a été construit.
Un déploiement qui sait revenir en arrière. Le script effectue une rotation de sauvegardes, vérifie le site après publication et restaure automatiquement la version précédente en cas d’échec — politique de sécurité comprise, sans quoi l’ancien contenu se retrouverait sous une CSP conçue pour le nouveau.
Des tests de régression visuelle sur le site en ligne. Huit captures pleine page — l’accueil et une fiche projet, en deux résolutions et deux thèmes —, comparées pixel à pixel à la référence précédente. Les animations sont neutralisées pour rendre la comparaison déterministe.
05 · Ce que j’en retire
Presque tous les incidents rencontrés venaient de l’outillage, pas du site : un piège de montage Docker qui servait silencieusement une configuration périmée, un test qui validait sa propre implémentation au lieu de celle du site, un garde-fou qui annulait des déploiements sains. Les mécanismes de sécurité méritent la même défiance que le code qu’ils protègent.
06 · Refonte d’octobre 2026
La première version reposait sur une scène de particules en WebGL (Three.js, animée au défilement par GSAP), chargée en différé et réservée aux machines assez puissantes : 133 Ko de JavaScript compressé pour un décor. La refonte l’a retirée au profit d’une interface sobre, inspirée des outils de développement : moins de code, des pages plus légères, et la même rigueur sur la sécurité et le déploiement.
01 · Context & goal
A portfolio that acts as its own demonstration rather than a showcase: what’s described here runs on the server delivering this page.
02 · Constraints
Self-imposed: independent hosting and operations on a VPS, no third-party analytics service, no cookies, and lightweight pages that stay fast on phones as on desktops.
03 · Architecture
Static site generated by Astro, served by containerised Caddy with automatic Let’s Encrypt certificates. Analytics come from a self-hosted Umami instance on a subdomain, and fonts are served by the same server: no request goes to a third party.
04 · Technical decisions
A strict CSP, therefore a generated one. Allowing inline scripts would have emptied the policy of its purpose. Each inline block is allowed by SHA-256 hash — but hand-written hashes go stale on the first code change. They’re computed at build time, injected into a Caddy configuration fragment, and deployment refuses to publish if what’s actually served doesn’t match what was built.
A deployment that can walk itself back. The script rotates backups, verifies the site after publishing and automatically restores the previous version on failure — security policy included, without which the old content would sit under a CSP built for the new one.
Visual regression tests against the live site. Eight full-page screenshots — the home page and one project sheet, at two resolutions and in two themes — compared pixel by pixel with the previous baseline. Animations are neutralised to make the comparison deterministic.
05 · Takeaways
Nearly every incident came from the tooling, not the site: a Docker mount pitfall silently serving stale configuration, a test that validated its own implementation instead of the site’s, a safety net cancelling healthy deployments. Safety mechanisms deserve the same suspicion as the code they protect.
06 · October 2026 redesign
The first version relied on a WebGL particle scene (Three.js, animated on scroll with GSAP), lazy-loaded and reserved for powerful enough machines: 133 KB of compressed JavaScript for a backdrop. The redesign removed it in favour of a sober interface inspired by developer tools: less code, lighter pages, and the same rigour on security and deployment.