前段时间，moto 问我：「你怎么不自己搞个网站，就当电子名片了？」
我心想：对哦，我都工作这么多年了，每次有人问我之前做过什么，总得翻视频、找链接、整理各种音乐人页面。等我整理完，人家可能已经不想看了。
连我爸都常年吐槽：「不知道你这么多年来工作到底都在做了些啥？？！还在写那个什么少女什么的吗」（爆笑，我爸当年真的下了个少前来听我写的曲子）
于是乎，就有了做个人网站这个想法。
以后有人问，甩一个网址过去多方便哇。
顺便还能写点东西，记录一下生活。完美。
本来以为很简单
九月初开始动手的时候，我的要求其实不多：放几个游戏音乐项目，做得好看一点，有点互动，别太像简历。
听起来也没多难，对吧？
结果一做就是一个多月。
最开始纠结的是设计。这个动画太花哨，那个排版太普通，视频切换不够自然，字体又好像差点意思。
有时候折腾半天，最后发现还是第一版比较好。
好不容易网页版弄好了，一放到手机上一看，排版又乱成一锅粥，之前设计好的视觉语言也全部被打乱。
甚至有时候手机打开直接卡成 PPT。
好不容易把网站做完了，以为可以上线，结果又折腾了大半个月的域名、CDN、SSL、ICP备案啥的。
我只是想做张电子名片，怎么还得兼职当运维？
关于 AI
这个网站基本是靠 AI 帮我写代码完成的。
我不是前端开发者，也没打算为了一个个人网站从头学一遍 JavaScript。
（上次真正自己动手做网页，还是二十多年前上小学的时候，用 Dreamweaver 参加了个网页设计大赛，甚至还拿了个广州小学生一等奖？？？）
AI 确实让很多以前做不到的事情变得可行了。但用起来，也远没有想象中那么省心。
比如你让它改一个按钮的位置，它很可能顺手把另外三个页面也改了。
你让它修一个动画，它可能建议你直接把动画删掉。
最崩溃的不是它做不出来，而是有时候它做出来了，还觉得自己做得特别好。
当然，我也经常说不清自己到底想要什么。很多时候得先看到一个不喜欢的版本，才知道正确答案是什么。
最后就变成了一个很奇妙的工作流程：
AI 写代码，我负责挑刺。（然后去写会儿曲子）
挑完再改，改完再挑。（在等待过程中继续写曲子）
不得不说，比单纯写曲子要好玩多了。
总算上线了
从九月折腾到十月，网站终于上线了。
目前放了过去十年里深度参与过的几个游戏项目。虽然还有些地方想继续调整，但我决定先放过自己。
至少现在有人问我做过什么，我终于可以理直气壮地发一个链接：
至于 Blog，以后应该会写点音乐、游戏、摄影，还有各种乱七八糟的生活记录。
不定期更新，不保证质量。
毕竟这个网站最初的目的也没那么复杂。
就是想有个自己的地方。
以及，真的觉得有个自己的网站挺帅的。
对了，看到这里，如果大家有意思的项目或者约稿，欢迎私信我！！！！！！
P.S. 给 Nerds 的一点技术说明 🤓
如果你也对这个网站是怎么做出来的感兴趣，下面是一些没什么必要但我很想分享的技术细节。
关于设计
一开始就不想做传统的作品集网站，所以整个首页更像是一个可以滚动的空间场景。
四个游戏项目依次出现，视频、文字和背景处于不同的空间层级，随着滚动产生景深和过渡。
我希望动效是整个浏览体验的一部分，而不是单纯为了看起来很酷而加上去的东西。
当然，最后还是加了不少纯粹因为我觉得很酷的效果。
关于技术
网站主要使用 Astro + TypeScript 构建，没有使用 React，也没有后端或数据库。
视觉和交互部分用了：
- Three.js / WebGL / GLSL — 空间场景、Shader 和视觉效果。
- GSAP / ScrollTrigger — 动画与滚动交互。
- Lenis — 桌面端平滑滚动。
- Custom Touch Driver — 手机端自己实现的触摸滚动与插值逻辑，因为原来的方案实在太卡了。
Blog 使用 Markdown 编写。整个网站静态生成，最后通过腾讯云 COS + CDN 部署。
关于开发方式
基本就是我负责提出想法、找参考、判断视觉效果，AI 负责写代码和解决技术问题。
先讨论设计，再把任务拆开交给 Coding Agent 实现，然后在浏览器里反复测试、截图对比、修改。
后期甚至为了十几个像素的位置差异，来来回回折腾了好几轮。
所以如果你问我会不会写前端代码……
还是不会。
但现在至少知道怎么把 AI 写的代码折腾到自己满意了。
← BACK TO BLOG