现在打开这个站的首页,亮色下是白的,深色下是纯黑的,上面没几样东西。背景里有一层很淡的线在往右下慢慢飘,淡到要凑近屏幕才看得见。

这个站其实不是一直这样的。我想看看它是怎么一路改成这样的,就从第一个提交往后翻了一遍。

第一个提交

2023 年 11 月 2 号下午四点多的第一个提交,就带着 55 个文件,一万四千多行,Nuxt 3.7.4,UnoCSS、Pinia、milkdown 都已经在里面了。那篇《迈出第一步》的日期是 10 月 31 号,比这个提交早两天。

那个月一共 12 个提交,背景、模糊、响应式、分享代码、项目和 demo 列表,到 17 号就停了,说起来空了将近两个月。

三天

再动起来是 2024 年 1 月 13 号下午,到 15 号下午收住,三天 26 个提交。标题翻下来是这些东西:版权块,打赏按钮(带一圈模糊的阴影),爱心,新的头部,引用块发光,一个新的 star 按钮,大纲旁边指针的平滑动画,头部标题的自动钉住。

这 26 个里有 11 个是 fix,大多是刚加完几分钟就在补。头部刚加了个支持按钮,一分钟后就在修打赏按钮的样式;指针动画加完两分钟,在修重复播放。新头部是 14 号凌晨 0 点 17 分提交的,5 分钟后第一个修百分比计算错误,21 分钟后又一个修滚动和百分比。提交信息里只写了百分比,没写是什么的百分比。

2024 年 6 月 6 号开始改 demo 页的瀑布流,7 号晚上 10 点 57 分有个提交写着完全适配瀑布流,11 点 21 分又在修头部进度条,这回信息里明明白白写了是进度条。再往后就静下来了:10 月、11 月各一个提交,2025 年 3 月两个。

一天和五天

2026 年 5 月 17 号一天 16 个提交。傍晚把部署换到了 Cloudflare 上,6 点 35 分加了新的 logo 和一层极光,6 点 44 分,也就是九分钟之后,有个提交把极光的不透明度调低了。那天后面的标题里还有 compact、simplify 这样的词,一个是收紧首页开场的动画,一个是精简目录页和文章页。

7 月 28 号有个提交叫 brand-new site experience,220 个文件,加了三万八千多行,/brand-new 那个页面到现在还留着。9 月 3 号有个叫 refocus portfolio and publish research program 的提交,17 个文件,首页和项目页重改了一遍,另外加了一个 /research,424 行;9 月 8 号早上 9 点 08 分,一个叫 restore previous portfolio experience 的提交把这一批撤了回去,从 3 号加到 8 号撤。撤完十几秒后又连着两个提交,把公开的作品加进 demo 和项目页。提交记录里没写为什么。

这一批加了一千二百多行,撤回来只用了一个提交。这个站的改动好像一直是一阵一阵的。

这一轮

这一轮的起头是老首页我嫌「太复杂了」,先退成了一版纯白的。纯白之后的想法是,效果还是要适度加一点,背景也要有,以前的设计里该留的要留,比如 logo 里那个 t 的动画。接着出来一版蓝色加琥珀色的光晕,外加一个跟着鼠标走的聚光,我看了说「非常 ai」,要的是之前那种浅浅的线条。

线条是叠在一层很弱的 WebGL 极光上的。后来又嫌极光太明显,再弱了一点(它 5 月加完就调暗过一次,看来这个亮度我一直没拿准);嫌线条有杂乱感,把缠在一起的去掉,剩下的统一往右下偏大概 20 度;进文章页的时候线条要自己淡下去,现在是降到原来的 0.3 倍,用 1.4 秒。

现在的数是这样:极光在亮色下的不透明度是 0.08,深色下 0.12,正文页再低一点,0.06 和 0.09;线条自己是亮色 0.15、深色 0.12。极光的帧率限制在 30,页面看不见的时候线条和极光都会停。

深色也减了一次。原来偏蓝的黑改成纯黑 #000,强调色换成接近白的 #f5f5f7,亮色那边是 #2676D8。

数一数,这几轮拿掉的是光晕,缠在一起的线,一点亮度,蓝色。

cd ..

文章页的版权块默认收起来,只露一个 Copyright 的字样。2024 年 1 月加过一个版权块,现在这个和它是不是一脉相承,提交里看不出来。

页面上有个胶囊,显示读到了百分之多少。2024 年 1 月修过两次百分比,我猜这个胶囊是它的后代。现在的算法是文章自己标出正文结束的位置,就是最底下那行 cd ..,百分比走到它就是 100%,下面留的空白不算没读完。

我觉得减东西比加东西费眼睛。2024 年那三天,一天差不多九个提交,有想法就能加;这一轮每次只能减一点,再看一眼,才知道哪样是多的。

页面的最后是一行 cd ..,点一下回到上一级。它下面留了大约半屏的空白,让页面能多滚一截,直到这一行能停在屏幕中间。