Stack technique

Comment ce site est fait.

Pas de framework, pas de build pipeline, pas de CMS, pas d'analytics. HTML, CSS, JavaScript vanilla. Hébergé chez OVH en France. Soixante-douze pages, neuf cents kilooctets de zip, zéro dépendance npm. Voici les choix derrière, et pourquoi.

— Si tu te demandes pourquoi cette page existe : parce que les recruteurs aiment regarder sous le capot. Et moi aussi.

01

Le front

HTML5 sémantique, CSS3 moderne, JavaScript ES2020+ vanilla. Zero framework — pas de React, pas de Vue, pas de Svelte, pas de Next. Soixante-douze pages statiques générées à la main, avec un petit système de templates JS pour les articles (un fichier JS par langue, qui injecte le contenu dans un template post.html).

  • CSS : variables natives (--bg, --accent, etc.), grid + flexbox, clamp() pour la fluidité responsive, custom properties pour les thèmes clair/sombre. Un seul fichier styles.css de 8 500 lignes, soigneusement organisé par sections.
  • JavaScript : un fichier script.js qui gère la nav, le toggle de thème, les filtres de blog, le quiz, le footer Currently dynamique, le cookie banner et les animations reveal au scroll. Plus quelques modules dédiés (chess.js, snake.js, metro.js, tags.js).
  • Polices : Poppins (sans), Instrument Serif (italique éditorial), JetBrains Mono (monospace technique), chargées via Google Fonts avec preload + critical CSS inline pour éviter le FOIT.
  • Illustrations : 50 SVG dessinées à la main dans la palette Direction B (navy + crème + bordeaux + ocre). Une par article, une par section, plus quelques scènes éditoriales.
02

L'hébergement

OVH France. Mutualisé. Vingt euros par an. Mes fichiers, dans des serveurs à Roubaix. Pas de Cloudflare, pas de Vercel, pas d'AWS, pas de Netlify. Juste du HTTP/2 et un certificat Let's Encrypt automatique.

Le déploiement se fait à l'ancienne : je zippe le dossier portfolio/, je l'uploade via le gestionnaire de fichiers OVH, je déziippe, je supprime l'ancienne version. Trois minutes. Pas de CI/CD, pas de webhook. La simplicité a un coût en confort, mais zéro point de défaillance externe.

— OVH parce que c'est français, que j'aime bien les boîtes du Nord, et que ça me coûte moins qu'un café par mois.

03

Ce qu'il n'y a pas

  • Pas de framework JS. React + Next + Vercel auraient suffi à doubler le temps de développement et tripler la taille du bundle pour un résultat équivalent.
  • Pas de build pipeline. Webpack, Vite, esbuild, Rollup — rien. Le fichier que vous voyez est exactement le fichier que j'écris. Pas de transpilation, pas de minification.
  • Pas de CMS. Le contenu des articles vit dans posts-fr.js et posts-en.js, deux fichiers texte que j'édite avec VS Code. Pas de WordPress, pas de Contentful, pas de Sanity.
  • Pas de package.json. Aucune dépendance npm. Le seul truc "externe" est Google Fonts (qui charge des fichiers de polices, pas du code).
  • Pas de tracking. Pas de Google Analytics, pas de pixel Facebook, pas de Hotjar, pas de PostHog. Je préfère ne pas savoir qui visite, plutôt que de surveiller mes visiteurs.
  • Pas de service externe sauf le formulaire de contact qui passe par Formspree (un proxy SMTP simple), et OpenStreetMap pour la carte des Voyages.
04

Pourquoi ces choix

Pour la pérennité. Dans dix ans, ce site fonctionnera encore tel quel. Pas de version majeure de framework qui casse tout. Pas de plugin déprécié. Pas de service tiers qui ferme.

Pour la performance. Première peinture en moins de 200 millisecondes en 4G. Pas de Lighthouse à 60 parce qu'un framework a chargé 3 MB de JavaScript pour afficher trois divs.

Pour le contrôle. Je vois et comprends chaque ligne. Chaque pixel sait pourquoi il est là.

Pour la pédagogie. Un site portfolio fait avec React qui charge sept secondes ne convaincra personne qu'on sait construire du simple, robuste, durable. Le médium est le message.

05

Crédits techniques

Quelques outils m'ont aidé en cours de route :

  • VS Code — éditeur principal
  • Claude (Anthropic) — assistant de pair programming pour le CSS complexe et les revues d'accessibilité
  • Figma — pour le maquettage initial et la palette Direction B
  • Inkscape — pour la création et la retouche des SVG d'illustration
  • BrowserStack — pour tester sur Safari iOS et Edge Windows que je n'ai pas en local
  • Lighthouse + WAVE — pour l'audit performance et accessibilité

Et puis, comme toujours pour ce genre de projet : du temps, de la patience, et beaucoup de réajustements.

Une question sur le code ?

Le repository n'est pas public, mais je peux partager des bouts en privé si ça t'intéresse. Pour quoi faire ?

DERNIÈRE MISE À JOUR · 17 MAI 2026