个人网站：内容中台与作品集一体站

背景

笔记散落在多个软件、想法没有出口、求职缺少可展示的作品载体。这三个问题指向同一个解法：一个自己完全掌控的站点。

架构

内容（笔记/文章/作品）由 Git + MDX 驱动，构建期生成静态页与搜索索引；说说需要随时发布，走 Route Handlers + serverless 数据库，前台以 ISR 渲染；图片直传对象存储并生成 WebP 缩略图。

内容作者（Git）        访客                作者（在线）
   MDX                浏览器               /admin
    │ 构建期            │ 静态页/ISR         │ 写说说 + 传图
    ▼                   ▼                   ▼
┌─────────────── Next.js App Router ───────────────┐
│ 内容层 │ 搜索层 │ 说说层 │ 视觉层 │ 管理层        │
└────────┬──────────┬─────────┬──────────────────┘
     索引 JSON    Turso(libSQL)   对象存储 COS

我负责的部分

全部。需求梳理、信息架构、设计令牌与视觉系统、前端实现、服务端接口、数据库 schema、对象存储对接、部署配置。

难点与取舍

性能与动态的平衡：内容页是流量主体，全部静态化；只有说说需要动态，单独走 ISR 重新验证，避免为了一小块动态内容牺牲整站性能上限。

玻璃拟态的性能代价：backdrop-filter 面积与层数直接决定滚动帧率。最终光晕控制在 3 个且只动 transform，卡片模糊层限制在可见区域内。

搜索零后端成本：构建期生成轻量 JSON 索引，客户端 Fuse.js 模糊检索并分组，不引入搜索服务。

结果

内容页 Lighthouse Performance ≥ 90，LCP < 2s；三端（移动/平板/桌面）布局与导航形态独立适配，桌面端保留 TOC 与键盘快捷键。