[01]挑战与背景
这个网站是我最完整的项目。从代码到部署在 Docker VPS 上，全部由我设计、开发并亲自运维。与其在简历里描述最佳实践，不如让它们在生产环境中运行，并让它们可被观察。
静态作品集只能声称具备某些能力，却无法证明。挑战在于：做一个网站，让它的安全性、交付质量和实时架构可以直接在界面中看到，并且由我在真实条件下持续维护。
[02]三类最佳实践
安全
- 带 nonce 与 strict-dynamic 的严格 CSP
- 服务端签名的挑战机制
- 隔离的 socket-proxy 网络
- CI 中的依赖审计
浏览器只执行带有服务器生成 nonce 的脚本（strict-dynamic），完全没有内联脚本。联系表单要求完成一个由服务端签名的挑战。对 Docker 守护进程的访问通过隔离网络中的 socket 代理完成，依赖在 CI 中接受审计。
质量与交付
- Vitest 测试与 Playwright 端到端测试
- CI 中的类型检查
- 通过 HMAC webhook 自动部署到 Docker VPS
- 多语言 SSR 预渲染(FR/EN/ZH)
Vitest 单元测试和 Playwright 端到端测试（Firefox）在 CI 中运行，同时进行类型检查和依赖审计。部署通过 HMAC 签名的 webhook 自动发往 Docker VPS。页面在服务端以三种语言（FR、EN、ZH）预渲染。
实时架构
- 基于 Web Worker / OffscreenCanvas 的模拟
- 面向 Overseer AI(NVIDIA NIM)的事件总线
- 多 API 音频聚合器
两个模拟（小游戏）在 Web Worker 中借助 OffscreenCanvas 运行，不占用主线程。事件总线将它们的活动传给 Overseer AI（NVIDIA NIM），由它在终端中实时点评。音频播放器聚合了多个 API（详见下文）。
[03]驾驶舱中的证据
我不在这里重复这些内容，而是指向驾驶舱里真实的模块。在首页上，作品集卡片的每个标记都会让对应的模块亮起。
首页截图为英文版，取自网站的本地副本，使用演示数据。
- SYS.上行节点（右栏）：当前实际部署构建的编号与时间，由 CI/CD 流水线上报。
SYS.UPLINK_NODE - Overseer 终端：AI 接收两个游戏的事件（模拟失败、手动接管）并实时点评。
TERMINAL : OVERSEER_AI - 威胁情报节点：实时 CVE 数据流（GitHub Advisories、NVD）。
CVE_WATCH - NAV.MAP（左栏）：首页的高度计，被动指示当前所在的部分。
NAV - 音频播放器：见下一节。
[04]音频工程
播放器是一个由服务器同步的电台：每位访问者收到的当前曲目和播放位置都由服务器时钟计算，播放链接带签名且有时效。两个音频元素轮流工作，让曲目无缝衔接。
封面和链接通过并行查询 iTunes 和 Deezer 的 API 获得，另附一个 YouTube 搜索链接。结果按标题和艺术家的匹配程度打分，只保留超过置信阈值的最佳结果。
[05]成果与局限
成果
- 驾驶舱中显示的构建编号和时间来自 CI/CD 流水线的遥测数据，而不是手写文字。
- 完整的拓扑（用户流、CI/CD、安全）在“系统架构”页面中详细说明。
- 网站以三种语言提供 SSR 预渲染内容，并运行在没有内联脚本的严格 CSP 之下。
局限
- 源码为私有：仓库与部署服务器的 CI/CD 链路耦合。欢迎在面试中向你介绍它以及背后的所有决策。
- 驾驶舱为大屏幕设计。在小屏幕上，侧栏会折叠或隐藏，此时标记会跳转到系统架构页面。