[01]Défi et contexte
Ce site est mon projet le plus abouti. Je l'ai conçu, développé et je l'exploite moi-même, du code jusqu'au déploiement sur un VPS Docker. Plutôt que de décrire des bonnes pratiques dans un CV, je les fais tourner en production et je les rends observables.
Un portfolio statique affirme des compétences sans rien prouver. Le défi : un site dont la sécurité, la qualité de livraison et l'architecture temps réel se constatent directement dans l'interface, et que je maintiens en conditions réelles.
[02]Trois familles de bonnes pratiques
Sécurité
- CSP stricte avec nonce et strict-dynamic
- Défi signé côté serveur
- Réseau socket-proxy isolé
- Audit des dépendances en CI
Le navigateur n'exécute que les scripts portant le nonce généré par le serveur (strict-dynamic), sans aucun script en ligne. Le formulaire de contact exige la résolution d'un défi signé côté serveur. L'accès au démon Docker passe par un proxy de socket sur un réseau isolé, et les dépendances sont auditées dans la CI.
Qualité & livraison
- Tests Vitest et E2E Playwright
- Typecheck en CI
- Déploiement automatisé par webhook HMAC sur VPS Docker
- Prérendu SSR multilingue (FR/EN/ZH)
Les tests unitaires Vitest et les tests de bout en bout Playwright (Firefox) tournent en CI, avec le typecheck et l'audit des dépendances. Le déploiement est automatisé par un webhook signé HMAC vers un VPS Docker. Les pages sont prérendues côté serveur en trois langues (FR, EN, ZH).
Architecture temps réel
- Simulations en Web Worker / OffscreenCanvas
- Bus d'événements vers l'IA Overseer (NVIDIA NIM)
- Agrégateur audio multi-API
Les deux simulations (mini-jeux) tournent dans un Web Worker avec OffscreenCanvas, hors du thread principal. Un bus d'événements transmet leur activité à l'IA Overseer (NVIDIA NIM), qui la commente en direct dans le terminal. Le lecteur audio agrège plusieurs API (détails plus bas).
[03]Les preuves dans le cockpit
Plutôt que de recopier ces éléments ici, je renvoie vers les modules réels du cockpit. Sur la page d'accueil, chaque repère de la carte Portfolio illumine le module correspondant.
Captures de l'accueil en anglais, prises sur une copie locale du site avec des données de démonstration.
- SYS.NOEUD_LIAISON (colonne droite) : le numéro et l'âge du build réellement déployé, remontés par le pipeline CI/CD.
SYS.UPLINK_NODE - Terminal Overseer : l'IA reçoit les événements des deux jeux (échecs de simulation, prise de contrôle manuelle) et les commente en direct.
TERMINAL : OVERSEER_AI - THREAT_INTELLIGENCE_NODE : flux de CVE en temps réel (GitHub Advisories, NVD).
CVE_WATCH - NAV.MAP (rail gauche) : un altimètre de la page d'accueil, indicateur passif de la section en cours.
NAV - Lecteur audio : voir la section suivante.
[04]Ingénierie audio
Le lecteur est une radio synchronisée par le serveur : chaque visiteur reçoit la piste en cours et la position de lecture calculées à partir de l'horloge du serveur, avec des liens de lecture signés et limités dans le temps. Deux éléments audio se relaient pour enchaîner les pistes sans coupure.
Les pochettes et les liens sont retrouvés en interrogeant en parallèle les API iTunes et Deezer, avec en complément un lien de recherche YouTube. Les résultats sont notés selon la correspondance du titre et de l'artiste, et seul le meilleur est retenu au-dessus d'un seuil de confiance.
[05]Résultats et limites
Résultats
- Le numéro et l'âge du build affichés dans le cockpit proviennent de la télémétrie du pipeline CI/CD, pas d'un texte écrit à la main.
- La topologie complète (flux utilisateur, CI/CD, sécurité) est détaillée sur la page Architecture.
- Le site est servi en trois langues avec prérendu SSR, sous une CSP stricte sans script en ligne.
Limites
- Le code source est privé : le dépôt est couplé à la chaîne CI/CD qui déploie le serveur. Je le présente volontiers en entretien, avec toutes les décisions qui le sous-tendent.
- Le cockpit est pensé pour grand écran. Sur petit écran, les colonnes latérales se replient ou se masquent, et les repères renvoient alors vers la page Architecture.
[06]Liens
Envie de voir comment c'est construit ? Contactez-moi, je vous le présente volontiers.