站点上线：这个站本身就是第一个作品

上线这篇 post 的时候，这个站大概长这样：首页一把 3D 机械键盘，每个键帽是一项技能；往下滚是项目、经历和这段文字。它由 agent 全程开发——我负责定方向、拍板和验收。

为什么是这个形态

我想要的不只是一份"在线简历"，而是一份活的作品证明：一个能跑、能玩、能体现工程判断的东西。参考了 Naresh Khatri 的「键帽即技能」概念——把技能做成可以敲的实体，比一列图标有记忆点得多。

三个值钱的坑

Next 16 的 cacheComponents 实验模式会让客户端组件里的未缓存 promise 整个挂起——3D 场景凭空消失，页面看起来一切正常。
CDN 的"latest"不可信：devicon 主分支超过 jsdelivr 的 50MB 限制后，下载到的"图标"其实是一句报错文本。固定版本才是纪律。
一个 404 贴图足以让整个 WebGL 场景静默失败。排查这种问题的唯一可靠办法：无头浏览器自己打开页面、抓 console、截图。

下一步

项目案例补全、简历页、部署上线。这个站的 git 历史就是开发过程本身。

附：缓存头的教训

next.config.mjs

// 生产环境才启用 immutable 缓存——开发模式会缓存旧 chunk，
// 浏览器会拿旧代码渲染新页面，报 "module factory is not available"。
export function headers() {
  if (process.env.NODE_ENV !== "production") return [];
  return [
    {
      source: "/_next/static/:path*",
      headers: [{ key: "Cache-Control", value: "public, max-age=31536000, immutable" }],
    },
  ];
}

三个值钱的坑

Next 16 的 cacheComponents 实验模式会让客户端组件里的未缓存 promise 整个挂起——3D 场景凭空消失，页面看起来一切正常。

CDN 的"latest"不可信：devicon 主分支超过 jsdelivr 的 50MB 限制后，下载到的"图标"其实是一句报错文本。固定版本才是纪律。

一个 404 贴图足以让整个 WebGL 场景静默失败。排查这种问题的唯一可靠办法：无头浏览器自己打开页面、抓 console、截图。

附：缓存头的教训

next.config.mjs

// 生产环境才启用 immutable 缓存——开发模式会缓存旧 chunk，
// 浏览器会拿旧代码渲染新页面，报 "module factory is not available"。
export function headers() {
  if (process.env.NODE_ENV !== "production") return [];
  return [
    {
      source: "/_next/static/:path*",
      headers: [{ key: "Cache-Control", value: "public, max-age=31536000, immutable" }],
    },
  ];
}