时隔五年，我的个人主页又改版了 —— 这次聊聊「毛玻璃」与新生产力工具

上一次认真改版个人主页，还是 2021 年 7 月 8 日。那篇《个人主页改版遇到的一些问题》写完之后，这个站点就一直在「老年模式」里安安静静地躺着。
文章链接：https://blog.isww.cn/1132.html
旧版主页：https://www.isww.cn/old/

五年，足够让一个前端er 把整套技术栈换一遍。

也足够让一个人从学生时代的「通宵改 CSS 不觉得累」,变成下班后瘫在沙发上、连开 IDE 都要挣扎五分钟。这五年里,换了工作、搬了家、换了好几台电脑,每次想动主页的念头都被「下周再说」一次次推回去。打开旧仓库看一眼,搜一下当年那个魔幻的 jQuery 写法,默默关掉——这一套动作在过去五年里我重复了不下十次。

直到最近苹果在新系统里推的那套「液态玻璃（Liquid Glass）」磨砂 UI 深深戳中了我——通透、有层次、随光线流动,看一眼就想动手把它搬到自己的主页上。再加上这一年多 React 已经成了我的主力,于是某个加完班回家的夜里,我没有像往常一样瘫进沙发,而是打开五年前的那份代码,默默新建了一个文件夹。

说实话,这一版最后落地的并不是苹果那种真正的「液态玻璃」——没有那层随光线和内容实时折射的高光镜面,只是老老实实的 backdrop-filter 毛玻璃。但拉满质感、统一语言这件事,我尽力做到了。

这篇文章不讲什么宏大架构,就当是和朋友喝茶,聊聊这次改版我在视觉和技术上做了哪些取舍。

一、先说说上一版

旧版个人主页截图

上一版其实也挺有意思——当时参考了苹果官网那种序列帧滚动动画:页面往下滚,产品图跟随滚动条一帧一帧地切换,像翻一本翻页书。这种效果在 2021 年很潮,放到今天也依然能打。

翻出当年那份代码的时候,有点像在收拾老房子抽屉:满眼都是当年自己写的注释、给自己打气的 TODO、还有那种「先把效果跑起来再说」的莽撞劲。一边看一边笑,一边也确实看不下去了。

但问题也很明显:

大部分 DOM 和样式都是「手搓」的,CSS 一把梭,维护起来越来越痛;
动画逻辑和业务逻辑混在一起,改一个地方要全局搜索半天;
想换主题?只能改 CSS 变量,动效背景完全是「黑盒」;
移动端体验只能说「能看」,谈不上精致。

于是这次改版的核心目标很清晰:保留质感,重写骨架。

二、这一版的视觉方向:毛玻璃

新版毛玻璃首页

简单总结这一版的视觉关键词:

通透:大面积使用 backdrop-filter: blur() saturate() brightness() 做毛玻璃;
悬浮感:卡片、按钮、侧边栏都有一层半透明的高光描边和柔和投影;
流动:背景不是静态图片,而是跑在 WebGL 上的实时着色器,正好补上了毛玻璃本身偏「静」的那一面;
可切换:主题不再是「亮/暗」二选一,而是配色 + 背景 + 模式的自由组合。

在 SCSS 里我抽象了一个 glass-effect 的 mixin,所有玻璃质感的卡片、按钮、面板统一调用它,参数化的东西做完了,后面就是调参:

@mixin glass-effect(
  $bg-opacity: 0.55,
  $brightness: 1.05,
  $blur: 20px,
  $border-opacity: 0.35,
  $shadow-alpha: 0.06
) {
  background: rgba(255, 255, 255, $bg-opacity);
  border: 1px solid rgba(255, 255, 255, $border-opacity);
  backdrop-filter: blur($blur) saturate(160%) brightness($brightness);
  -webkit-backdrop-filter: blur($blur) saturate(160%) brightness($brightness);
  box-shadow: 0 8px 32px rgba(0, 0, 0, $shadow-alpha);
}

这玩意儿看起来简单,但统一入口这件事很重要——以前每个组件自己写一份 backdrop-filter,改一个参数要满世界搜替换,现在一行 @include glass-effect(); 搞定。

三、技术栈:从「手搓」到「React 化」

graph TB
  ROOT[个人主页技术栈]

  ROOT --- A[框架] & B[样式] & C[动画] & D[动态背景 WebGL] & E[主题系统] & F[其它]

  A --- A1[Next.js 16] --- A2[React 19] --- A3[TypeScript 5]
  B --- B1[SCSS / Sass] --- B2[Bootstrap 5 栅格] --- B3[glass-effect mixin]
  C --- C1[GSAP 序列动画] --- C2[Lenis 平滑滚动]
  D --- D1[OGL 着色器框架] --- D2[three.js] --- D3[postprocessing]
  D --- D4[GridScan] --- D5[LineWaves] --- D6[FaultyTerminal]
  E --- E1[next-themes] --- E2[body class 配色] --- E3[localStorage]
  F --- F1[Swiper] --- F2[react-fast-marquee] --- F3[ESLint]

1. 框架:Next.js 16 + React 19 + TypeScript

这一版彻底转向了 Next.js。App Router 的目录结构、内置的 metadata、SSR/静态导出能力,都非常适合个人主页这种内容相对静态、但又想要现代交互的站点。TypeScript 不用多解释,五年前的我写得有多爽,现在的我改得就有多香。

2. 样式:SCSS + Bootstrap 5 栅格

没用 Tailwind,也不是 CSS-in-JS,而是继续沿用了 SCSS——个人主页有大量「一次性」的视觉表达,写 mixin 和嵌套比写原子类舒服得多。Bootstrap 只用它的栅格系统(.container / .row / .col-lg-7),剩下的视觉全部自己写。

3. 动画:GSAP + Lenis

Lenis 负责平滑滚动,让滚动条本身变成一种「丝滑」的体验;
GSAP 负责序列动画、文字出场、卡片入场时间轴。

这套组合是当下比较成熟的「高级感动效」标配,踩坑资料也多。

4. 背景:跑在 WebGL 上的实时着色器

这次最满意的部分——背景全部跑在 WebGL 上,基于 OGL + postprocessing + three.js 实现了三套可切换的动态背景:

背景	效果	技术
GridScan	网格扫描线,带 bloom 与色散	Fragment Shader + 后处理
LineWaves	流动的彩色等高线,会跟随鼠标	OGL + 鼠标交互
FaultyTerminal	故障终端 / 矩阵雨风格	噪声 + chromatic aberration

三套动态背景拼图