我是如何用 vibecoding 重构个人网站的 How I Rebuilt My Personal Site with Vibecoding

yanghuanrong.github.io 这个仓库，比很多读者的前端工龄还老。

2017 年第一次 commit 的时候，它就已经是个人博客了——接 Bmob、写 Markdown、往 GitHub Pages 推静态页。后来我在同一个 repo 里换过三次「整站方案」，每次都没有开新仓库，而是新开一条分支，把旧版本冻在 git 里。现在本地还能看到 ku、master，远程还有 old、develop、gh-pages 这些名字。它们不是备份，是我历年的个人站标本。

→ 这次重构，故事从这些分支讲起；下文想写的，是第三代站上那些会动的地方——以及 agent 时代，做个人站还可以是什么姿态。

三代分支，和一次次够不到的审美

ku 那一代 是 Vue 2 SPA，Loading 进场、TextFly、logo 跟着鼠标跑。当时觉得很有性格，今天 git checkout ku 看，像年轻时的展品。

master 那一代 换成 Vite + vite-ssg，挂线上最久，2023 年后基本停更。比上一代收敛，但仍是模板气质——能写内容，很难说「这就是我想长期住进去的样子」。

astro 这一代 2026 年从 master 切出来。每次推我改版的理由，表面是框架，底下其实是同一句：UI 和审美，总差一口气。 太炫的站，刚上线很兴奋，过几个月自己都会审美疲劳。我羡慕 cali.so、antfu.me 那种简约、大气、耐看——有细节，但不表演。

换 Astro，核心目的只有一个：静态 HTML，更好的 SEO 和 GEO。 文章和介绍页构建出来就能读，不依赖客户端渲染；llms.txt、sitemap、OG 元信息，让搜索和 AI 都能稳定抓到正文。首页几个 React 岛是点缀，不是地基。Actions 推 Pages 只是省事，不在故事中心。

页顶与底部：站点骨架上的小反应

头像与写轮眼。 页顶圆形头像是全站锚点。我用的头像是《火影》里的带土——面具、单边刘海那张。正经个人站挂动漫头像，听起来有点跳戏，但这张脸我用了很久，自己也习惯了一抬头就看见它。

带土有一只写轮眼。头像定下来之后，我老在想：既然都是他了，不给补一只写轮眼说不过去吧？于是桌面端在头像上叠了一层 AvatarEye：红色三勾玉跟着鼠标轻微转，隔几秒自然眨一下，偶尔连眨两次。不夸张，像页面上有一个在留意访客的小细节——懂的人知道是梗，不懂的人只觉得眼睛会动。

触摸设备上自动关掉，也尊重 prefers-reduced-motion。个人站可以有一点私货，但不该绑架所有读者。

底部 Dock。 首页、文章、项目三个图标浮在底部，hover 有 tooltip，当前页用小圆点标出来。切路由时 Dock 和头像 transition:persist，留在原位，只有中间内容区在换——像 cali 一类站点，导航不抢戏，但始终够得着。右侧是深浅色切换。

全站 slide-enter。 进首页、项目页、文章列表，内容块依次轻微上移、淡入，每块错开约 90ms，参考 antfu 那套，但收得更轻。文章详情页单独关掉外层动画，避免和正文分层入场叠两次。根级 View Transition 关掉了——试过 blur、morph 一类更重的方案，和「稳重简约」不合，删了。

链接 hover。 文章列表、贡献过、外链统一成虚线下划线，只在 hover 时出现。全站一个手势，不每种列表各玩一招。

首页：自我介绍里的字会动

首页第一段是正经自我介绍，但几个词埋了小交互，像把简历里最容易写干的部分，留一点可以摸到的温度。

「设计工程师」 点一下，角色词会有轻微的强调反馈。

「健身」 逐字跳一下；「游泳」 是波浪；「驾驶」 带一点前进感；「摄影」 hover 时有快门闪一下。

都不复杂，移动端点触也会触发。目的是让长段文字里偶尔有呼吸，而不是整页粒子背景那种轰炸。

照片堆 PhotoStack。 自我介绍末尾露出一叠照片边角，点开会从 peep 位置展开成整叠卡片。可以拖拽最上面一张，松手会飞出去，下一张顶上来——像桌上一叠洗出来的相片，不是标准 Lightbox 弹窗。这是首页上最「玩」的一块，收在段落末尾，不定义全站气质。

页脚：技术图标物理堆

首页最底是全宽 TechPile。用 Matter.js 把 Tailwind、Vue、React、Webpack、Electron……这些年摸过的技术图标扔进场里，重力、碰撞、边界反弹，鼠标还能拣起再丢。图标多了会堆成一堆，像把简历上的技能树倒出来，让它们自己滚到页脚。

堆底下有一行手写的 Be water, my friend.

这话是李小龙说的，我把它放在这里，是有私心的。从 ku 到 master 再到 astro，HTML、jQuery、Webpack、Vite 换了一轮又一轮——每个图标背后都是真的学过、用过、踩过坑。可到了 agent 时代，有时候也会恍惚：这些堆起来的技能，是不是变得没那么「硬通货」了？问 AI 一段实现，它比你在某个框架里熬过的夜更快给出答案。学了一对，又好像没以前那么骄傲。

但我仍然想把它们留在页脚。不是炫耀我会多少，是承认这条路走过——而且路还在继续。Be water 的意思，不是否定过去，是别抱死一种形态。框架会过气，工具会换代，agent 会改写「会写代码」这件事的分量；人还得流动，往新的问题上去靠。

所以 TechPile 既是玩——扔图标、看碰撞——也是一句说给自己的话：拥抱变化，别跟时代赌气。

prefers-reduced-motion 时降级成静态排列，玩心有，但不绑架所有人。和前代的 siriwave、Loading 特效不一样：它只在页脚，读者愿意玩就玩，不玩也不挡路。愿意停下来的，也许能看见那行 Be water；愿意丢两下图标的，也许想起自己堆过的技术栈——然后继续往下读，或继续往下活。

删掉的，和留下的

第三代站上，删掉的交互比留下的多。Touch Bar 式列表 hover、morph 标题、复杂 FLIP——试完觉得太抢、太不稳，整段拿掉。个人站我现在的标准是：动画要经得起每天打开，不是证明我会 View Transition。

留下的，都是上面这些——轻、有位置、该静的地方静。

→ 简约不是零动画，是只在值得记住的地方动一下。

拥抱 agent 时代

都是 vibe conding 了，博客还重要吗？不需要管那么多吧， be water my friend，有意思的是：agent 时代，个人站可以更快逼近你心里那个版本。