我用 HTML/CSS/JS 复刻了 Apple 发布会风格的个人简历页

为什么要做这个项目

做了 8 年房地产营销策划，我一直对技术和设计有浓厚的兴趣。去年开始自学前端开发，这个简历页面算是我的第一个完整作品。

选择 Apple 发布会风格，是因为我一直很喜欢 Apple 的极简设计语言——大量留白、精致的排版、克制的配色。我希望自己的简历也能传递出这种质感。

技术选型

整个页面用纯 HTML + CSS + 原生 JavaScript 完成，没有使用任何框架。选这个技术栈有两个原因：

1. 零依赖——不需要 npm、webpack、框架，一个文件就能跑
2. 学习价值——亲自写每一行代码，才能真正理解 CSS Grid、Intersection Observer、Canvas API 的底层原理

几个有意思的技术点

Bento Grid 栅格布局

用 CSS Grid 实现不规则卡片排列，每张卡片可以跨 1-4 列，形成杂志般的排版节奏。

液态玻璃效果

用 backdrop-filter 实现毛玻璃质感，配合高光线叠加增加层次。

Canvas 粒子动画

Hero 区域做了两个 Canvas 动效——多彩涟漪和时空穿梭，可以一键切换。

最大的收获

不是技术本身，而是跨界学习的信心。从一个完全不懂代码的策划，到能独立做出一个视觉效果不错的页面，这个过程证明了：只要方法对路、持续投入，跨行学习并没有想象中那么难。