距离我第一版个人网站上线已经一年多了，其实这一年多来我每周都会给网站加点东西，但是往往这个点子还没实现，就想到一个更好的点子，周而复始，导致一年多网站都没有更新。
终于，这段时间把网站开发收敛到一个基本满意的状态，可以准备上线，也借此记录一下个人网站建设的心路历程。
第一版网站是怎么来的#
我想做一个个人网站单纯是 B 站上刷到了数字游牧人的视频，我第一次发现原来有一个个人网站是一件很酷的事。
在此之前我在稀土掘金上写博客，如果有一个个人网站，我可以做很多更有趣的事。考证了一下 B 站的收藏日期，这天是 2025 年 5 月 27 日。然后接下来的三天，我在研究室用 AI 编码，当时还是用网页版的 GPT 和 Gemini，写完代码后复制粘贴到 IDE。
在此之前我个人是完全不了解任何前端技术的（现在也是一行 JS/TS 都不会写）。我调研了一些建站的思路，包括低代码、wordpress 等，最后选择了 react + next.js 的技术栈。
TODO：补充写代码的图片
经过三天高强度的复制粘贴，5 月 31 日在同学家的榻榻米上趴着把网站部署到 vercel 上了，然后第二天和他们一起去爬了摩耶山，我还背着帐篷在山上睡了一觉。
伴随第二版的上线，初版的网站应该只记录在下面这几张图片中了。
TODO：补充网站图片
在开发过程中我觉得最有趣的事是思考了应该一下如何表现自己，希望传递给访问者的形象决定了这个网站的气质。我选择的是克制的禅意和技术感，因此我使用冷调的蓝白色、大面积的留白和充满果味的卡片。当然这并不意味着我就是一个清寂的人，我可能只是想要这种疏朗的淡淡的装逼感。
具体内容上我选择了介绍我的旅行和技术栈，配上我京都、东京和北海道的旅行经历（可能也是为了装逼）
在之后的两个月，我完成了我的毕业论文答辩，去参加 IVS 的活动见到了 Ivan Zhao，逛了京都衹园祭，目睹了 Figma 的上市，就这些题材更新了几篇博客。
第二版网站的迭代#
我应该是 8 月初答辩的，答辩之后终于有了一个月完全空闲的时间。这一个月时间里我背着我的 MacBook Air，每天游荡在大阪和京都的各个角落，觉得天气热了就走进一家咖啡馆，掏出电脑开始 vibe coding。
我应该去过梅田茶屋町的蓝瓶、lucca 的 tsutaya、难波的 School Bus 还有南禅寺新开的 M Stand。
后面去台湾旅行的时候，我也背着它，在台北的酒店因为暴雨出不去的时候，听着雨声监督 AI 写代码，也算是大学时代最后的回忆。
这段时间我主要有两个新发现，一是 AI IDE 是真的好用，比复制粘贴方便太多，二是有一类网站专门收集和评价各种网页的设计，比如 awwwards。
我最早用我不同的邮箱薅 Trae 新用户试用 3 美元的羊毛，后面也用过 Antigravity、Claude Code 和 Codex。有时候两个月前 AI 不会写的代码，可能一次模型更新或者 Harness 更新，它就会写了，所以第二版网站的技术边界一直在拓宽。
awwwards 则给我一个新视角，原来现代的网站可以用 WebGL 和 Gsap 实现各种新奇的交互体验，正值 AI Coding 的大进步，这给我大胆抄袭的底气。
最初我也想过要不要“借鉴“别人的设计，但我学生时代的作文都是东拼西凑的，现在写个网站继续借百家之长也算是一种延续，也就放下心来。
虽然我写作文抄袭，但这篇文章不是抄的，也不是 AI 写的，纯真情实感。
中间这段抄袭、实现、推翻、再抄新的经历我懒得写，我自己也记不住，直接跳过来看现在版本的设计吧。
WebGL 和 GSAP 真帅#
为了防止非前端出身的同志看不懂，我先简单说一下什么是 WebGL 和 GSAP。
WebGL 是浏览器中调用 GPU 绘制图形的一套底层接口，它让网页不再只能依靠 HTML 和 CSS 排版，而是可以在 canvas 中实时渲染 3D 模型提供了一种强大而灵活的方式来与外部系统交互，并访问训练数据之外的数据。
GSAP 是一个专门控制动画过程的 JavaScript 动画库，它可以精确地控制动画的变化以及与鼠标的同步，是实现滑动叙事的基础。
目前网站的整体背景其实是一个曲面模型，用一张贴图覆盖在曲面上，构成了一个空间，很多标题其实是用 SVG 渲染成的 3D 模型。这样伴随滑动时摄像机视角的变化，背景因为贴图的不均匀会有微妙的变化，标题也会有轻微的摆动。
整个站点的主题色是一种比较温润的纸张色，这点是直接抄的 Anthropic。
TODO：首页截图
首页中的组件，比如开头的 observe、express 和 create 三阶段下方的就绑定的 GSAP，伴随滑动逐渐展示。
细分到具体内容，我把之前统一的博客路由进一步拆分成频道、专栏和文章三级，分成技术、生活、金融和创意，这是我最感兴趣的四个方向。最初我想给每个频道都设计独特的风格，最后决定还是统一一下。
现在不同的频道页的区别只是元素的不同，技术页我放了一个手绘风格的神经网络，生活页我用css实现阴影效果，背景是竹叶和障子门。
TODO：技术页图片
TODO：生活页图片
日本行纪这个专栏因为记录我在日生活的两年，所以我专门设计了专栏页。
TODO：日本频道页截图
真实的自我#
所以说我想用现在这个网站来表现什么样的自我呢，其实我也不知道。这一年我读了不少书，有些还记得有些记不住了。印象最深的是《高效能人士的七个习惯》中提到，思考自己的墓志铭会写什么，这就是自己想要成为的人。
我觉得很有道理，我在学生时代其实没思考过这个问题，高考完我想进互联网狠狠赚一笔于是学计算机、学后端技术、刷 leetcode。我算是实现了一半这个目标。
但这并不是我想写在我墓志铭上的。
我最初想用家计划护王神社通向大海的地道作为整个首页设计的基调。我想用滑动叙事来驱动，从阴暗的地道走出到大海的过程，对此我还去学了一下 blender 建模。但是这个实现难度确实很大，而且不适合现代短平快的网站体验，我放弃了它。
TODO：护王神社通向大海的地道
我想借地道表达的是找寻真正的自我，我还在地道中，远处的大海可能是、也可能不是，但是我认为迈出去向大海走去是对的。
这个设计最后没实现，但是我在 favicon 简单表达了一下这个理念。
文章写的虎头蛇尾，就这样吧。
Next Reads
