给个人主页加流体动画背景：SimonAKing HomePage 开源个人主页模板 SimonAKing HomePage

给个人主页加流体动画背景：SimonAKing HomePage 开源个人主页模板

做个人主页最头疼两件事：一是 Hexo/Hugo 主题千篇一律，改起来像搬砖；二是从零写又嫌麻烦——背景、切换动画、移动端适配，每一项都是体力活。如果你想要一个「开箱即用、一眼惊艳、还能当学习样本」的个人主页方案，SimonAKing 开源的 HomePage 项目值得一看。它把 WebGL 流体动画背景、平滑页面切换、响应式布局全打包进一个轻量模板，作者本人的线上站 simonaking.com 就是它跑起来的实例。

一眼惊艳的流体动画背景

项目首屏采用 WebGL-Fluid-Simulation 流体模拟做背景：色彩在屏幕上流动、碰撞、融合，配合发光的大字标题，观感远超传统渐变背景。这种效果常见于 AI 演示页或潮牌官网，放在个人主页上属于「降维打击」。如果你不喜欢，改一行配置即可关闭：intro.background: false。

轻到离谱：css+js 总和不到 18.5KB

在流体背景之外，项目引用的 css 和 js 文件总和不超过 18.5KB。这意味着整套页面加载极快，移动端弱网也能秒开。实现上靠 pug 做 HTML 模板、less 做 CSS 预处理、gulp 做构建，分工清晰，改起来不绕。

配置化一切：config.json 驱动整个页面

项目把页面信息高度封装进 config.json，每个键对应一个组件名。比如头部信息：

{
 "head": {
 "title": "SimonAKing",
 "description": "Category:Personal Blog",
 "favicon": "favicon.ico"
 }
}

这段配置直接对应 layout/head.pug 组件，换标题、换描述、换图标都不用动模板代码。页面结构按「首屏 intro + 次屏 main」划分，配置、样式、功能都遵循这个标准，可读性很高。

快速上手：三步跑起来

git clone https://github.com/SimonAKing/HomePage.git
cd HomePage
npm install
npm run dev

默认开启作者支持功能（右上角的 octopus cat 和控制台提示），想要纯净体验关掉即可。

作者线上站：simonaking.com

项目作者 SimonAKing 是全栈工程师，自称「Front back left right end engineer」，线上站 simonaking.com 就是 HomePage 的实际运行案例：

• 启动页：黑底荧光大字「SimonAKing」+「PRESS START」，游戏机开局既视感，标语「STDIN | Think >> /dev/Mind」尽显极客气质
• About 终端页：仿终端窗口做自我介绍，Name/Sex/Age/Email 全部以命令行输出，还支持 help、clear、exit 等彩蛋命令
• 博客：深度技术文章，比如《模型适配权：Anthropic 藏得最深的垄断》，点阵渐变头图 + 代码高亮卡片，排版精致
• 项目展示：Gwitter（GitHub Issues 变博客）、AnimatedGallery、TermFolio、scrcpy-gui、ITalking 等 7 个作品
• 思考子站：thinking.simonaking.com，一个极简文档风的个人笔记站
• 相册：568 张图的瀑布流画廊，覆盖旅行、日常、技术截图

适合谁用

• 想要个人主页但不想从零搭的前端开发者
• 学习 WebGL 流体背景、pug+less+gulp 工程化组合的练习生
• 喜欢极简极客风、黑色主题的受众
• 想给博客/作品集加一个「炸场」首页的独立开发者

一句话总结

SimonAKing HomePage 用不到 18.5KB 的 css+js 外加一个 WebGL 流体背景，把个人主页做成了「开机即玩」的极客体验——既有模板的省心，又有定制站的惊艳，1.4K Stars 实至名归。