案例文章：如何建立一座可以持续生长的个人网站

这是用于展示版式与阅读体验的案例文章。之后你可以把标题、摘要、发布日期和正文替换成自己的内容，页面的字体层级、留白与响应式结构会保持不变。

我曾经把个人网站理解成一次性交付的项目：设计完成、代码上线，然后在很长一段时间里保持原样。后来才意识到，真正有生命力的网站并不以“完成”为目标，它应该允许新的兴趣出现，也允许旧的判断被修改。

先决定它要承载什么

开始设计之前，先回答一个朴素的问题：几年以后，你希望在这里找到什么？如果答案只有一段自我介绍，那么单页名片已经足够；如果你希望留下文章、照片和项目轨迹，就需要一套能够持续扩展的信息架构。

这个案例把内容分成四个清晰入口：首页负责建立第一印象，博客保存完整思考，摄影集承载视觉档案，GitHub 汇总公开创作。它们彼此独立，又通过相同的导航、设计语言与内容模型连成一个整体。

好的架构不是一次把所有功能装进去，而是为未来的内容留出自然生长的位置。

让内容与界面分开

一个容易维护的网站，不应该要求每次修改名字或新增文章都去重写布局。因此，这套架构把个人资料、项目、文章、相册与仓库信息集中在内容文件里。页面只负责决定这些信息如何呈现。

• 个人资料可以统一替换，导航与页脚会保持一致。
• 文章卡片使用相同字段，后续可以接入 Markdown 或内容管理系统。
• 照片使用缩略图与懒加载策略，为真实的大图素材预留性能空间。
• GitHub 数据既可以先用案例，也可以在部署后接入公开 API。

把滚动变成叙事节奏

长页面的价值不只是“可以往下滑”。每一次滚动都应该带来新的信息层次：先认识这个人，再看到他关心的问题，接着进入作品与记录，最后留下继续联系的入口。模块之间的大留白让阅读有停顿，圆角卡片则帮助用户识别内容边界。

动效也遵循同样的原则。元素进入视野时轻微上浮，卡片在指针经过时给出反馈，页面内锚点平滑移动。它们应该让浏览更自然，而不是抢走内容本身的注意力；当系统开启“减少动态效果”时，这些动画也会自动关闭。

先上线骨架，再持续填充

与其等所有材料都准备完毕，不如先让结构工作起来。使用案例内容验证导航、阅读、筛选、主题切换与移动端布局，确认整体节奏后，再逐步替换真实头像、照片、项目和文章。

这也是个人网站最合适的建设方式：它不需要在第一天证明一切，只需要提供一个足够可靠的容器，让真实生活在之后慢慢进入。