把个人站重做成一台可以按的键盘

个人站最容易犯的错，是把它做成一份在线简历 —— 除了「看起来很专业」，没有任何属于自己的东西。

这次换个思路：让访客真的能玩。首页右边是一台 3D 键盘，每个键帽代表一项技能，按下去才会浮出它的说明。

为什么是键盘

键盘是程序员唯一每天都会摸的硬件。把它做成页面里的主角，比放一张头像更有信息量 —— 你按下的每一个键，都在回答「我平时到底用什么做事」。

技术上它不轻：WebGL 场景、自定义键帽模型、按键音效、滚动联动，以及一堆在低端设备上必须优雅退场的分支。 但正是这些分支让它变得可信：没有 WebGL 的时候退回到普通网格，用户照样能读完所有内容。

静态导出 + Cloudflare Pages

这类站点没有后端：内容全部在构建时确定，交互全在浏览器里跑。

于是选择也就明确了：

• next build 直接 output: "export"，产出纯 HTML / CSS / JS；
• 字体自托管在 /public/fonts，构建不依赖 Google Fonts 是否可达；
• 部署交给 Cloudflare Pages，全球边缘缓存，推送即发布。

代价是 API 路由和 ISR 都没了。联系表单改成调用访客自己的邮件客户端， 既不需要密钥，也不经手任何第三方 —— 对一个个人站来说，这反而是更好的默认值。

一些细节

按键音：不是每个访客都想被声音吓到，所以默认静音，只有主动打开才响。

性能分级：粒子数量、阴影、后处理都在运行时根据设备能力调整，而不是在代码里写死。

彩蛋：打开 devtools 会看到提示。不剧透。

最后

站点是给自己看的第一个用户界面。它应该能说明你在意什么 —— 而不是只说明你会什么。