这一切是如何开始的
在 2018 年，我计划搭建一个全新的个人主页。当时我希望能摆脱随大流的常规设计风格，打造一个带有 80-90 年代赛博朋克美学色彩的站点。这个题材中包含了我非常喜爱的多部经典电影，比如《攻壳机动队》(1995)、《黑客帝国》(1999) 与《阿基拉》(1988)。我从这些作品中借鉴了若干视觉元素，比如首页醒目的片假名标识，以及致敬《黑客帝国》“数字雨”效果的文本解密动效——这一灵感本身同样源自《攻壳机动队》的片头字幕。甚至在我的 404 页面 中也暗藏了对它的致敬。
初代版本
最初构建本站时，虽然对于一个个人作品集来说有些技术过剩，但它成为了绝佳的学习和试验场。我一直认为，掌握一门技术的最佳方式就是亲自创造一个能够真正投入使用并上线发布的产品。
在那个时期，最自然的选择是 Create React App，它让开发者无需繁琐配置就能快速启动项目。在此之上，我还结合了 Styled Components、Tween.js 以及 React Transition Group，并尝试引入了早期 Three.js 效果——例如如今依旧在首页运行的置换球体（Displacement Sphere）。
自那时起，我便将这个站点当作试验前沿技术的自留地，随着时间推移几乎对整个架构进行了全面翻新。其中一个重要演进是将静态展示图替换为基于 WebGL 实时渲染的 3D 交互设备模型。
架构迁移与演进
早期使用静态预渲染方案存在诸多维护问题，而我希望拥有一套更健壮的 MDX 文章发布系统。在评估了 Gatsby、Vite、Parcel 以及 Remix 等多种方案后，我逐步确立了现代化的工程基建：
- 采用现代全栈框架驱动，相比早期脚手架具备更佳的开发体验与扩展性。
- 样式层面回归原生 CSS，搭配 PostCSS 获得更前沿的嵌套与现代特性支持，通过 CSS Modules 彻底解决类名冲突。
- 动效方面全面拥抱声明式交互与 Framer Motion，简化状态与时间线管理。
- 3D 渲染方面持续深耕 Three.js，通过现代模块化标准保障渲染性能与长久维护性。
遇到的挑战
在系统演进的过程中，并非所有事情都一帆风顺。由于需要兼顾复杂的页面路由过渡动画、滚动位置恢复（Scroll Restoration）以及无障碍焦点转移（Accessibility Focus），在不同页面流转时难免会遇到样式闪烁与焦点错位等细节挑战。通过针对性地优化生命周期钩子并结合 CSS 原生过渡能力，最终实现了丝滑的视效闭环。
回望与展望
很高兴看到这个站点在开源社区获得了众多开发者的喜爱与 Star，看到大家将其改造成各自独特的风格，这也是我选择将代码完全开源的初衷所在。我希望更多人能拆解它、理解它的实现原理，并在此基础上继续改进创新。
在未来，我将继续以这里作为前沿技术的实验场，持续探索与前行。
补充更新
随着现代 Web 标准与框架生态的进一步成熟，现已全面拥抱标准化的 CSS 原生 View Transitions API，用更简洁、符合浏览器标准的方式处理跨路由平滑渐变，告别以往复杂的 JavaScript 补丁。这正是技术演进最令人着迷的地方。