求职向技术博客与作品集，也是「写下来」学习方式的载体。本站坚持内容即代码、全静态渲染，把复杂度收敛在真正需要交互的地方。
项目背景与目标
需求很直接：求职作品集 + 技术沉淀，部署到个人服务器。工程目标是首屏零等待、全端响应式、明暗主题，以及一个「阅读进度 + 目录联动」的核心交互。
技术架构与选型思考
选择 Next.js 14 App Router + 全静态生成（SSG）：内容在构建期渲染成 HTML，客户端组件只保留在真正需要交互的地方（主题切换、目录面板、搜索、代码复制）。
- 数据层：内容即代码，文章/项目以 TypeScript 数据文件维护，类型约束保证结构一致。
- 样式：Tailwind CSS 令牌化设计系统，颜色收敛为语义变量，明暗主题一行切换，全站禁用渐变。
- 交互：阅读进度环与目录双向联动、站内搜索、RSS 输出、下载简历。
核心难点与解决方案
目录与滚动双向联动
目录高亮要在快速滚动时保持正确且流畅。方案是 scroll 事件 + requestAnimationFrame 节流，帧内定位当前区块并配合平滑锚点滚动。
主题闪烁（FOUC）
深色模式最常见的坑是首屏白闪。通过 head 注入同步脚本读取本地主题并先行挂载 dark class，配合 CSS 变量实现零闪烁切换。
项目成果与个人收获
- 全静态生成，首页不加载冗余运行时，构建产物轻量。
- 完整落地设计系统思维：纯色分层、字重层级、状态规范。
- 收获：把一套从设计到数据约束的博客工程沉淀为可长期维护的内容站。