← PROJECT INDEX

CASE STUDY · 01 / 2026

Personal
Interface

将个人主页从单一展示页重构为可持续更新的职业内容系统。

ROLE
Design & Engineering
STACK
Jekyll · CSS · JavaScript
DELIVERY
GitHub Pages

问题不是页面不够炫,
而是所有内容都挤在同一层。

原有主页更像一段完整的视觉体验,但项目、文章、职业信息与生活记录缺少清晰边界。招聘者难以快速定位能力证据,生活内容也容易抢占职业信息的注意力。

把网站拆成五个长期维护的界面。

01

Home

只承担定位、精选项目、Experience 与关键入口。

02

Projects

项目索引与案例详情,不混入生活作品。

03

Blog

支持目录、阅读进度和代码复制的公开写作。

04

Life

独立、公开但低调,保存照片与时间线。

05

Resume

只展示可验证资料,并可直接打印保存。

动态负责解释层级,
不负责替代内容。

粒子网络用于第一印象,聚光和悬停预览用于项目探索,页面幕布用于建立跨页连续性。触屏和减少动态偏好下,这些效果会自动降级。

POINTER

hover → preview
click → transition
scroll → reveal

每次改动都经过真实页面检查。

  • 01JavaScript 语法与 Git diff 检查
  • 02桌面、手机和关键内页截图检查
  • 03横向溢出与公开链接数量检查
  • 04GitHub Pages 构建与线上 HTTP 检查
查看公开简历