← PROJECT INDEXPersonal
CASE STUDY · 01 / 2026
Personal
Interface
将个人主页从单一展示页重构为可持续更新的职业内容系统。
- ROLE
- Design & Engineering
- STACK
- Jekyll · CSS · JavaScript
- DELIVERY
- GitHub Pages
问题不是页面不够炫,
而是所有内容都挤在同一层。
原有主页更像一段完整的视觉体验,但项目、文章、职业信息与生活记录缺少清晰边界。招聘者难以快速定位能力证据,生活内容也容易抢占职业信息的注意力。
把网站拆成五个长期维护的界面。
Home
只承担定位、精选项目、Experience 与关键入口。
Projects
项目索引与案例详情,不混入生活作品。
Blog
支持目录、阅读进度和代码复制的公开写作。
Life
独立、公开但低调,保存照片与时间线。
Resume
只展示可验证资料,并可直接打印保存。
动态负责解释层级,
不负责替代内容。
粒子网络用于第一印象,聚光和悬停预览用于项目探索,页面幕布用于建立跨页连续性。触屏和减少动态偏好下,这些效果会自动降级。
POINTER
hover → preview
click → transition
scroll → reveal
每次改动都经过真实页面检查。
- 01JavaScript 语法与 Git diff 检查
- 02桌面、手机和关键内页截图检查
- 03横向溢出与公开链接数量检查
- 04GitHub Pages 构建与线上 HTTP 检查