[01]Challenge and context
This site is my most accomplished project. I designed it, built it and run it myself, from the code to the deployment on a Docker VPS. Rather than describe good practices in a résumé, I run them in production and make them observable.
A static portfolio claims skills without proving anything. The challenge: a site whose security, delivery quality and real-time architecture can be seen directly in the interface, and that I maintain under real conditions.
[02]Three families of good practices
Security
- Strict CSP with nonce and strict-dynamic
- Server-signed challenge
- Isolated socket-proxy network
- Dependency audit in CI
The browser only runs scripts carrying the nonce generated by the server (strict-dynamic), with no inline script at all. The contact form requires solving a server-signed challenge. Access to the Docker daemon goes through a socket proxy on an isolated network, and dependencies are audited in CI.
Quality & delivery
- Vitest tests and Playwright E2E
- Typecheck in CI
- Automated deployment through an HMAC webhook on a Docker VPS
- Multilingual SSR prerendering (FR/EN/ZH)
Vitest unit tests and Playwright end-to-end tests (Firefox) run in CI, along with the typecheck and the dependency audit. Deployment is automated through an HMAC-signed webhook to a Docker VPS. Pages are prerendered on the server in three languages (FR, EN, ZH).
Real-time architecture
- Simulations in Web Worker / OffscreenCanvas
- Event bus feeding the Overseer AI (NVIDIA NIM)
- Multi-API audio aggregator
The two simulations (mini-games) run in a Web Worker with OffscreenCanvas, off the main thread. An event bus passes their activity to the Overseer AI (NVIDIA NIM), which comments on it live in the terminal. The audio player aggregates several APIs (details below).
[03]The proof in the cockpit
Rather than copy these elements here, I point to the real modules of the cockpit. On the home page, each marker of the Portfolio card lights up the matching module.
Home page captures in English, taken on a local copy of the site with demonstration data.
- SYS.UPLINK_NODE (right column): the number and age of the build actually deployed, reported by the CI/CD pipeline.
SYS.UPLINK_NODE - Overseer terminal: the AI receives the events of the two games (simulation failures, manual control taken) and comments on them live.
TERMINAL : OVERSEER_AI - THREAT_INTELLIGENCE_NODE: real-time CVE feed (GitHub Advisories, NVD).
CVE_WATCH - NAV.MAP (left rail): an altimeter of the home page, a passive indicator of the current section.
NAV - Audio player: see the next section.
[04]Audio engineering
The player is a radio synchronized by the server: each visitor receives the current track and playback position computed from the server clock, with signed, time-limited playback links. Two audio elements take turns so tracks chain without gaps.
Covers and links are found by querying the iTunes and Deezer APIs in parallel, plus a YouTube search link. Results are scored on how well title and artist match, and only the best one above a confidence threshold is kept.
[05]Results and limits
Results
- The build number and age shown in the cockpit come from the CI/CD pipeline telemetry, not from hand-written text.
- The full topology (user flow, CI/CD, security) is detailed on the Architecture page.
- The site is served in three languages with SSR prerendering, under a strict CSP with no inline script.
Limits
- The source code is private: the repository is coupled to the CI/CD chain that deploys the server. I am happy to walk through it in an interview, with all the decisions behind it.
- The cockpit is designed for large screens. On small screens, the side columns collapse or hide, and the markers then point to the Architecture page.
[06]Links
Curious how it is built? Get in touch, I will gladly walk you through it.