去年有个前端实习生来面试，我让他打开自己的个人网页，他给我看了一个GitHub Pages默认主题搭的页面——白色背景、黑色文字、三行简介加一个项目列表。我问他：你觉得自己写代码水平怎么样？他说还行。我又问：那为什么你的个人网页看起来像是十分钟拼出来的？他沉默了几秒说："我以为面试官只看技术，不在乎设计。"后来我们没要他。不是因为他技术不行，是因为一个连自己都懒得好好展示的人，很难让人相信他会认真对待工作。
个人网页不是一个"我有就行"的标配，它是你在互联网上的数字名片、你的24小时在线简历、你设计能力和技术审美的直接证据。这篇文章不列100个网站链接让你自己翻，而是挑了十几个真正值得拿出来说的优秀个人网页，按风格拆开讲清楚：它们好在哪、为什么让人记住、你从里面能抄到什么。
优秀个人网页的六条设计逻辑
| 1 | 不是炫技，是让看的人三秒内知道你是谁、做什么的、有多厉害 |
| 2 | 顶级作品集分三种路线：技术碾压型（3D/WebGL）、审美碾压型（极简排版）、叙事碾压型（互动故事） |
| 3 | 技术多强不重要，重要的是技术和内容匹配——程序员别硬凹3D，设计师别手写Canvas |
| 4 | 个性大于完美，千篇一律的"白底黑字左对齐三栏布局"不如一个有辨识度的设计缺陷 |
| 5 | 移动端体验是底线——超过60%的个人网页流量来自手机，在手机上崩了等于白做 |
| 6 | 加载速度就是第一印象——超过3秒没打开的页面，50%的人直接关掉，再好看也没人看到 |
一、技术碾压型：用WebGL和Three.js告诉面试官"我能做的事，模板做不到"
如果你是一个前端工程师、创意开发者或游戏程序员，Bruno Simon的个人网站（bruno-simon.com）可能是近年来被讨论最多的作品集，没有之一。他把整个个人网页做成了一个3D游戏场景——深蓝到紫罗兰的渐变背景、发光的蓝点网格地面、一辆可以驾驶的玩具车。访客不是"浏览"他的网站，而是开着车在他的数字世界里探索：撞到路边的项目展板会弹出作品详情，开过不同的区域能看到不同的技能介绍。
这个网站的技术栈核心是Three.js + WebGL + 物理引擎。导航完全摒弃了传统的菜单和按钮，取而代之的是物理碰撞检测、镜头跟随、物体邻近感应。动效不是简单的CSS过渡，而是基于物理模拟的真实运动轨迹。整个网站没有一页"传统的网页"，每一个像素都是动态渲染的3D画布。
但Bruno Simon最厉害的地方不是技术本身，而是他把技术和内容完美统一了。他本身就是教Three.js的（在YouTube上有大量教程），他的作品集就是他的教学成果展示。来访者玩一圈就知道：这个人不仅会写Three.js，而且能把Three.js做到出神入化。这就是"技术碾压型"作品集的核心逻辑——你的网页本身就是你能力的最好证明。
从Bruno Simon身上能学到的：如果你在应聘一份需要3D能力的工作，一个Three.js写的作品集比一百个静态页面都有说服力。但前提是你真的擅长这个领域——如果你的Three.js只是能搭个旋转方块，那不如做一个干净利落的静态页面。技术碾压型作品集的核心是"碾压"，不是"尝试"。
同类型还有一个很经典的案例——Robby Leonardi的互动简历。他把整份简历做成了一款横版通关游戏：角色从左向右跑，穿越不同的场景展示技能、工作经验、项目成果。每穿过一个区域，角色的动作和场景都对应他的真实经历。前端技能、设计能力、幽默感、叙事逻辑——这四样东西在一个页面上同时展示了出来，比任何文字简历都有冲击力。
二、审美碾压型：深色背景+精准排版+留白，代码量可能只有300行但每一行都到位
Brittany Chiang的个人网站（brittanychiang.com）是另一个极端的经典案例。她是软件工程师，拿到了Google的Offer，她的个人网页没有任何3D、没有WebGL、没有花哨动画。深色背景、低饱和度的蓝绿色强调、精致的字体排版、大量留白。整个页面看起来像一本印刷精美的杂志，安静但高级。
这个网站的技术含量并不高——HTML + CSS + 少量JavaScript就能做出来。但它赢在了审美克制上。配色不超过三种（深色底+蓝绿色强调+白色文字），字体不超过两种（标题一种、正文一种），动效只有hover微交互和滚动渐入。每一处细节都经过了反复打磨：行间距、段落间距、卡片圆角、阴影透明度——这些参数差了2px，气质就完全不同。
Brittany Chiang的案例证明了一件事：对非设计师岗位来说，审美碾压比技术碾压更安全。一个程序员做一个深色极简页面，成本低、加载快、手机上不出Bug、内容清晰、气质高级——面试官打开后三秒就能判断"这个人的代码品味不错"。而一个程序员硬做一个3D页面，加载慢、手机上适配差、模型粗糙——反而暴露了短板。
配色克制
主色不超过3种，黑白灰+一个强调色就够。深色模式（#0a0a2e底配#64ffda强调）是程序员作品集的万能公式。
排版精细
字体不超过2种，行高至少1.6，段落间距≥24px。Google Fonts的Inter+Playfair Display是安全组合。
留白大方
每个section至少120px上下间距。信息密度越低越显高级，拥挤是廉价感的第一来源。
动效微细
hover微交互+滚动渐入就够了，不要全屏旋转、不要雪花飘落、不要鼠标跟随特效。
同类型的还有Tobias Ahlin的个人网站——结构清晰得像教科书目录，每个项目展示都有完整的设计思维过程描述。色彩低调，信息层级分明，没有任何多余的装饰。这种风格的适用人群最广：后端工程师、产品经理、数据分析师、甚至非技术岗位，只要你会一点HTML和CSS就能做出来。
三、叙事碾压型：用对话、故事和游戏化把"关于我"变成一次难忘的体验
Adrian Zumbrunnen的个人网站用了一种完全不同的策略：聊天对话。打开他的网页，就像打开了和一个人的聊天窗口，一条条消息跳出来介绍他是谁、做什么的、做过什么项目。你可以回复"yes"或"no"来控制对话走向。没有传统的导航栏、没有项目列表、没有技能标签云——整个过程就像在和这个人聊天。
这个设计的聪明之处在于：它利用了人类最自然的交互方式——对话。人在浏览普通网页时是被动的信息接收者，但在对话模式中是主动的参与者。Adrian不需要在页面上写"我是一个有创意的人"——因为他已经用一个创意十足的形式证明了这一点。
Adham Dannaway的双面分割布局也是叙事逻辑的经典。他是UI设计师兼前端开发者，他的个人网页首页从中间一分为二：左边展示设计作品（渐变色彩、圆润曲线、创意排版），右边展示代码（终端窗口、代码块、深色背景）。不需要任何文字说明，一个人看了这个页面立刻就知道"这个人既懂设计又懂开发"。
Adrian Zumbrunnen · 对话体
用聊天窗口替代传统简历，来访者通过回复yes/no推进对话，了解作者背景。适合文案、产品、创意岗位。
Adham Dannaway · 双面分割
页面从中间一分为二，左边设计右边代码，用视觉直接传达"设计师+程序员"的双重身份。适合跨领域人才。
Robby Leonardi · 游戏化简历
把整份简历做成横版闯关游戏，角色跑过不同场景对应不同经历。技术+设计+幽默感的终极结合。
四、做个人网页前先想清楚：你是谁、给谁看、想传达什么
看了十几个优秀案例之后，一个很常见的误区是"我要做一个像Bruno Simon那样的"。先冷静一下。Bruno Simon是做Three.js教学的，他的3D作品集就是他的产品演示。如果你是一个Java后端工程师，做一个3D赛车网页，面试官打开后的反应大概率是"这个人是不是投错岗位了"。
个人网页的风格应该由你的身份和受众决定，而不是由"现在流行什么"决定。一个大概的匹配逻辑是这样的：
| 你的身份 | 推荐风格 | 参考案例 | 关键词 |
|---|---|---|---|
| 前端/全栈工程师 | 技术碾压型或审美碾压型 | Bruno Simon、Brittany Chiang | 深色、极简、交互细节 |
| UI/UX设计师 | 审美碾压型或叙事碾压型 | Lotta Nieminen、Malika Favre | 留白、排版、作品即内容 |
| 创意/广告/文案 | 叙事碾压型 | Adrian Zumbrunnen、ToyFight | 对话、幽默、故事感 |
| 后端/数据/算法 | 审美碾压型（极简版） | Tobias Ahlin、Brittany Chiang | 结构清晰、信息层级 |
| 产品/项目经理 | 叙事碾压型（案例驱动） | Daniel Filler、Kimi Lewis | 项目故事、数据结果 |
| 自由职业/创业者 | 个性突出型 | Adham Dannaway、Mike Kus | 独特性、记忆点 |
注意：上表里的"技术碾压型"不是让你去硬学Three.js。技术碾压的意思是你的网页本身就是你技术能力的展示。如果你是做数据可视化的，做一个交互式图表页面比做一个3D赛车页面有效得多。如果你是做动画的，用Canvas或GSAP做一个流畅的动效展示。技术要为内容服务，不是为了炫而炫。
五、不管选什么风格，这三条底线是所有优秀个人网页的共同点
前面聊的是风格和创意，但优秀个人网页还有一些"看不见"的共同特征——它们不是设计上的亮点，却是能不能用的底线。
加载速度
Google数据显示页面加载超过3秒，53%的移动端用户会直接离开。压缩图片、启用CDN、懒加载非首屏内容。3D网站更要做好loading动画，让人知道"在加载，没崩"。
移动端适配
超过60%的个人网页流量来自手机。在电脑上完美、手机上布局崩掉的页面等于只做了一半。用Chrome DevTools的Device Mode把所有主流分辨率过一遍。
可访问性
加alt属性、保证色彩对比度、支持键盘导航。这不仅是"做好事"，很多大公司的面试官会检查候选人的可访问性意识。
另外还有一个容易忽略的点：域名和托管。一个优秀的设计配上"yourname.github.io"没问题，但如果你花半天时间买个自己的域名（比如yourname.com），整个网站的专业度会瞬间提升一个档次。GitHub Pages、Vercel、Cloudflare Pages都是免费的托管方案，部署一个静态个人网页几乎零成本。
零成本搭建个人网页的技术栈：域名去Namecheap或阿里云买个.com（首年50-80块）→ 代码放GitHub仓库 → 用Vercel或GitHub Pages自动部署 → 配置自定义域名 → 搞定。如果你想要更灵活的后台管理，用UC建站系统的WP底层+AI管理层架构，可以直接生成HTML直出的SEO友好页面，同时保留独立域名和独立部署的灵活性，适合想做内容型个人网站又不想从头写代码的情况。
六、从零到上线：做个人网页别一上来就写代码
很多人的个人网页做了三个月还没上线，原因是一上来就纠结"用React还是Vue""要不要上Next.js""Tailwind还是手写CSS"。技术选型不是不重要，但它应该在设计确定之后。
一个更高效的做法是：先在纸上或Figma里把页面画出来。确定几个问题：首页第一屏放什么（名字+一句话介绍+一个CTA按钮）、导航有几个入口（关于我/项目/博客/联系方式）、每个项目怎么展示（图片+标题+简短描述+链接）。这些定下来之后再选技术栈，会发现很多纠结自动消失了——因为需求明确了。
个人网页制作四步流程：①内容规划（你是谁、做过什么、怎么联系你、需要哪些页面）→ ②设计稿（纸笔画也行，Figma画也行，至少确定配色和布局）→ ③开发（选最熟悉的技术栈，别边做边学新技术）→ ④部署上线（买域名+选托管平台+配置HTTPS）。前三步花的时间应该占70%，写代码只占30%。
还有一个很多人的心理障碍：觉得自己的项目不够多、不够厉害，所以不好意思做个人网页。这种想法反了。个人网页不是"功成名就后的展示厅"，而是"让机会找到你的入口"。你上面放了什么项目不重要，重要的是当有人搜索你的名字时，第一个结果是你的个人网页，而不是你的微博或知乎主页。这个控制权本身就有价值。
说了这么多，回到开篇那个问题：个人网页到底拼的是技术还是审美？看过这十几个案例之后，答案应该清楚了——拼的是"让看的人记住你是谁"的能力。Bruno Simon让人记住的是"那个开玩具车浏览作品集的人"，Brittany Chiang让人记住的是"那个页面简洁到令人舒服的Google工程师"，Adrian Zumbrunnen让人记住的是"那个用聊天对话展示简历的人"。技术或审美只是手段，被记住才是目的。你的个人网页不需要做给所有人看，只需要让那个你想被看到的群体，在三秒内觉得"这个人有点意思"。
