个人网站很容易变成一个不断增加效果、却越来越难更新的页面。这次改版最重要的决定,不是选择新的动画,而是先确定每类内容应该出现在哪里。
先重新划分内容边界
根页面负责职业定位、精选项目和 Experience;Projects 负责展示案例;Blog 负责保存完整思考;Life 只保留适合公开的生活记录。
这样做的目的,是让第一次访问的人可以快速找到能力证据,同时让照片和生活内容拥有自己的阅读节奏。
<nav>
<a href="/projects/">Projects</a>
<a href="/resume/">Resume</a>
<a href="/blog/">Blog</a>
<a href="/life/">Life</a>
</nav>
动态效果应该解释什么
粒子、视差、磁吸按钮和页面转场都很容易成为视觉噪声。因此每种效果都需要承担一个明确任务:粒子负责建立第一印象,悬停预览帮助判断项目,滚动揭示强调阅读顺序,转场则让不同页面保持连续。
触屏设备没有悬停,减少动态偏好的用户也不需要完整动画。所以效果必须可以降级,而内容不能依赖动画才能被阅读。
为什么继续使用静态架构
当前内容不需要登录、数据库或后台管理。Jekyll 和 GitHub Pages 已经足够支持项目、文章、Life 与简历页面,也让部署和维护保持简单。
if (prefersReducedMotion) {
revealEverything();
disableDecorativeMotion();
}
真正需要服务器的时机,是未来出现私密内容、身份验证、在线编辑或需要存储用户数据的时候。
Life 为什么保持独立
Life 不是简历的装饰,也不应该抢占首页的职业信息。主页只保留一个较小的入口,点击后再进入独立页面查看照片、Now 和时间线。
圣诞树也被移动到 Life 内部。它依然是一项技术作品,但在这个网站中更接近一段可以交互的生活记忆。
下一步是补充真实资料
页面结构和交互只能建立容器。真正决定求职价值的,仍然是项目背景、个人职责、技术选择、结果数据,以及真实的教育和工作经历。
因此公开简历暂时只展示能够验证的信息。等资料补充完整后,再让设计为内容服务,而不是反过来让内容迁就模板。