我想做一个个人网站，已经想了很久。
这件事以前一直没有真正开始，主要是因为我觉得自己还没有足够多的内容。只有一段个人介绍和几个社交账号，单独做成一个网站，能够呈现的信息很有限。
最近再回头整理，我发现情况已经变了。我做了几个产品，开源了一批自己日常使用的 Skills，视频内容也在不断增加。以前缺少的内容慢慢积累起来，个人网站终于有东西可以承载了。
所以我花了一个周末，用 Vibe Coding 完成了现在这个网站：oiloil.org。
这次我没有准备讲具体的实现教程。相比用了什么框架、写了多少代码，我更想先分享我怎样整理这些内容，以及最后为什么把网站做成现在这个样子。
先决定这个网站应该承载什么
我对这个网站的期待很明确。它需要放下我做过的产品、开源的 Skills、过去的视频文章、个人经历和交流方式，也需要呈现我自己的设计偏好。
内容多了以后，最容易出现的问题就是页面越来越散。如果每类内容都单独做一页，访问者需要不断跳转，整个网站也会越来越像几个页面的集合。
我最后选择了单页、一栏的结构。产品、Skills、文章、关于我和交流入口都放在同一个作品区域，通过标签切换；页面的主要动作就是向下滚动。内容区的最大宽度控制在 820px，视觉注意力尽量留在中间。
这个结构也决定了首屏应该足够简单。页面上只有很大的「Oil makes things.」、一个靠在文字旁边的小人和一只狗。鼠标移动时，小人的眼睛、狗的眼睛和头部会跟着转动；继续滚动，画面也会跟着产生变化。
看起来只是一个很轻的互动，实际调整了很多次。网站的提交记录里，从最早的二维跟随，到完整视频帧驱动，再到转动速度、最大转速、资源预载、待机微动和滚动联动，这只狗几乎贯穿了整个首屏的修改过程。
我保留它的原因也很直接。我喜欢现代、简洁的页面，但不希望简洁最后只剩下一张安静的名片。这个小互动没有承担复杂功能，它只是让网站在第一眼就多一点属于我的东西。
让产品和 Skills 自己说明用途
确定整体结构以后，接下来要处理的是作品应该怎样出现。
目前网站里放了 Wolfcha AI 狼人杀、Text-Well、VibeHub、Selector 和 NotchNotes。它们以前分散在不同的网站和仓库里，产品形态也不一样。如果这里只放一张截图和一段简介，访问者仍然需要点击进去，才能知道它们具体在完成什么。
产品区最终没有采用常见的 Logo 列表。我给每个产品做了一段独立的迷你演示。
Wolfcha 的卡片会呈现不同角色和发言状态；Text-Well 会把扫描、标错和修改建议直接演示出来；Selector 的画面则展示怎样选中网页元素并生成结构化提示词。每段演示都只保留产品最核心的动作，让人停留在当前页面也能大致理解它的用途。
Skills 面临的是另一个问题。GitHub 仓库名称和文字说明很准确，但连续放在一起时，很容易变成一面技术清单。
我给每个 Skill 单独制作了一张插画，用火柴人和小狗表现它正在完成的事情。这些插画也是通过我自己的 Skill 生成的，视觉风格保持一致，具体动作再根据不同用途调整。
鼠标移到卡片上时，插画和背景会以不同速度移动，形成轻微的层次感。每张卡片可以直接进入对应的 GitHub 仓库，右上角的 Star 数量每天更新，页面展示的仍然是真实的公开数据。
产品和 Skills 最后采用了两种不同的展示方式。产品依靠真实界面和动态演示说明功能，Skills 通过统一插画降低理解成本。它们解决的是同一件事：让作品先把自己说清楚，再把选择权交给访问者。
把过去的视频整理成可以回看的文章
做这个网站时，我发现还有一块内容一直没有得到合适的整理，就是过去的视频。
我以前分享过很多 AI 工具和实际工作流，其中有些视频的信息密度很高，也会涉及具体命令、配置和操作步骤。视频适合跟着画面学习，但过一段时间想回头找某条命令，重新拖动进度条并不方便。
所以我增加了文章模块，把以前的视频逐步整理成图文版本。文章会保留真实录屏画面，也会补齐视频里提到的命令和链接。读者可以从文章列表进入详情页，需要回顾步骤或者保存内容时，文字会更容易查找。
从列表进入详情页时，封面会连续移动到文章顶部，形成类似一镜到底的转场。这个效果本身不改变文章内容，但它让列表和阅读页面之间的关系更连贯。
文章模块补上以后，这个网站也有了继续积累内容的空间。产品和 Skills 记录我完成了什么，文章则把具体过程保存下来。
页面后面还有我的个人介绍和工作经历。访问者先看到作品，再看到我曾经所在的公司和现在的工作，前面的产品、开源项目和视频内容就有了更完整的背景。
最后是交流入口。咨询、社群交流、直播和线下分享分别有对应的说明，需要联系我时，可以直接打开相应的详情。
以前我没有开始做个人网站，是因为还不知道这个页面应该放什么。现在，产品、Skills、文章、经历和交流方式终于有了一个统一入口，网站也可以承载我积累的知识和设计想法。
目前这个版本先解决了内容如何集中呈现的问题。首屏互动、产品演示和文章转场具体怎样实现，我会在后面的内容里继续拆开分享。