我的个人主页背后的故事

写在最前

如果你还没看过这个个人主页 , 我非常推荐您去看一眼。
这是我的个人名片，我花了一个星期的时间从零打造它，在这里我记录一下背后的故事。

技术特色

这是一些我认为这个项目比较有亮点的地方：

功能性：

• 可交互浏览进度条样式导航器取代丑陋的原生滚动条
• i18n（中英切换）支持
• 为叙事制作的动态主题系统：
  • 每个section一套配色 + 暗黑模式配色：共8套动态配色方案
  • 背景动画、按钮/卡片等颜色随section变化时平滑transition
  • 可交互的粒子效果

兼容性：

• 移动端优化：桌面端、移动端交互模式分离 + 自定义响应式 CSS
• 浏览器兼容：Safari、Chrome、Firefox表现一致（尤其保证傻逼苹果safari的动画兼容性）

速度

• 极致轻量
  • 纯静态，压缩后js+css不足300kb
  • fontaswsome图标精简：重做一个自定义图标pack，大幅减小体积
  • 去除bootstrap.js依赖，用到的地方重写方法精简体积
  • 精简bootstrap.css(227kb → 27kb，直接少200kb体积)
• 极致速度：
  • 新加坡/香港/大陆等地网络均测得 lighthouse评分99分!
  • 首屏响应：1s以内（disable cache的情况）
  • Vercel静态部署，图像/音频文件Cloudflare R2 CDN加速

性能

• 优化

  • 背景GPU绘制Canvas动画、粒子效果网格算法优化、颜色缓存等
  • 浏览器性能检测决定合适帧率；检测到低帧给用户发提示
  • 动画可以暂停（保留背景和颜色过渡效果），也可以完全关闭
  • 只用到了一个库：aos.js，其他js纯原生实现，每一行代码都有用
  • 能力版图纯CSS动画实现
  • 尽可能地声明式动画使用：transform/transition/willchange
  • css/js/html minify
  • 粒子动画故意基于帧率而非时间，这样就算个位数帧率，粒子也只是动得慢，而不会显得很卡，同时限制了最高帧避免动画过快

• 效果

  • 苹果全系应该都没问题（向下测试至iPhone8和iPhoneXS）
  • 骁龙680在开启动画的情况下还能正常滑动网页、Canvas正常、主题颜色渐变系统能正常生效
  • 【注意】由于安卓webview版本混乱，有的厂商还会把浏览器丢小核跑，不保证一点性能问题都不会遇见。

设计语言

首当其冲的是要确立我需要为“连接”这个主题选择什么样的设计语言

设计风格需要：

• 神聚（内容）：
  1. “我”是如何思考在艺术设计和机器语言间的连接？（关于section）
  2. “我” 在对这样的连接的思考过程中，我做了哪些艺术作品和技术项目？（作品section）
  3. 支撑 “我” “连接”的能力是什么（技能section）
  4. 建立连接 - 和我联系 （连接section）
• 形聚（设计）：
  • 1. 跟随鼠标移动的粒子会吸引周围的粒子跟随。
  • 2. 最后一个section粒子聚集在鼠标周围
  • 3. 从最后一个section往上自动执行一次爆炸效果
  • 4. 所有section的动画、颜色过渡一定是平滑、连续的、几乎所有元素都有动画
  • 5. 动画的飞入一定是两边向中心靠拢/四周向中心靠拢；飞出逆向动画

具体的样式优化：拟态玻璃变体
- 低模糊半径高透明的按钮样式。
- hover浮起高亮，按下变小，松开回弹
- 按下的tab内阴影
- 卡片要么有呼吸效果（透明度变化+hover动效+scale变化+两层软硬不同的阴影）（大卡片）
- 卡片要么有hover上浮有光晕划过的效果（小卡片）

后记：你为什么要写这个呢？

因为无聊，想做一个主页作为项目的集合入口。

我跟我朋友说，这种个人主页就是一种数字资产，结果他听成了“数字遗产” - 想了想，这话没有问题。作为一个数字时代出生的人，我们留下的印记说不定在驾鹤西去的百年后（希望能活这么久）还会在互联网上存在，那么这就是一个上古石碑了，这么一想，还挺有意思的？

不过，总不可能在碑上刻一个“他生前是个好人”对吧？于是我开始构思这个项目。

首先，“石碑”是怎么样的？顾名思义：在石头上凿下文字，对吧？简单、原始，但是好使：它可以保留很久很久。那一个又原始又现代的“互联网石碑”呢？很显然，这不能有后端 - 石碑不应该是会动的，因为会动的东西代表了它要用更大的能量对抗熵增，保存不久（而且服务器要钱）；其次，这不能用react或者vue，因为他们太现代了，没有那种原始质朴的气息（而且状态管理很烦）。——要不了十几年pnpm install都报错了——“不支持的node.js版本！”

因此思路就清晰了，我决定选择用bootstrap5的css，加上自己写的一点点js逻辑，和一个上古时期就存在的：index.html - 它有一种原始的简单和优雅，而脱离了jQuery的bootstrap5又有那么一点现代的气息。它能完美的被各种搜索引擎、Internet archive收录，它能像2001太空漫游里的黑色石碑一样矗立于不同的时空场景。简直太对了！

核心的问题还没有解决，我应该在上面刻什么呢？我们知道，后人给前人写的叙事大多会给他们打一个醒目的标签：比如乔布斯是一个偏执的产品暴君 - 谁知道乔布斯自己是不是这么定义自己的？但这没关系：因为乔布斯已经有了一个几乎完美的故事 - 大家记住的其实是他和他的Apple - 一个更丰满的承载品。那我和我的思想，我的作品的承载点呢？

所以与其想标签？定义？不如让我来讲好我的故事本身吧：比如，可以用“连接”为主题讲故事，讲讲我在不同领域（文字、代码、摄影、音乐）的探索，讲讲他们是怎么连接起来的，讲讲我对它们结出的网的思考，讲讲我这个人本身是什么样子的。

于是，项目就这么开始了。