文山木公 · Homepage

完整 Node.js 个人主页工程，交互与特效对齐 simonaking.com / SimonAKing/HomePage（LGPL-3.0）。

功能

模块	说明
Intro	WebGL 流体背景 · 发光标题 · 逐字副标题 · PRESS START · 下滑/触控进入
Transition	anime.js + SVG path morph 翻页
Main card	头像门户 · 签名 · 多入口导航 · 网格 Snake 彩蛋
About	终端交互页（whoami / skills / now …）
Lab	loser.dev 工具架
Stack	FolioSpace 风格 3D 项目空间 · 地图导航 · Overview · 键盘/触摸操作
Links	社交与邮箱
Config	全部文案集中在 config.json

快速开始

npm install
npm run bootstrap   # 拉取 main.js / background.js / 头像 / dither 图
npm run dev         # http://localhost:8080

生产构建：

npm run build
npm start           # 静态托管 dist/

bootstrap 会从 jsDelivr 拉取 SimonAKing 真源的 main.js 与 WebGL background.js。 若未 bootstrap，浏览器会自动 fallback 到 CDN，页面仍可运行。

目录

.
├── config.json              # 站点内容（改这里）
├── gulpfile.js              # pug/less/js 构建 + 子页拷贝
├── package.json
├── scripts/
│   ├── bootstrap.mjs        # 拉取大文件真源
│   └── serve.mjs            # 生产静态服务
├── src/
│   ├── index.pug
│   ├── components/          # head / intro / main / scripts
│   ├── css/                 # less 模块（common/intro/main/layout）
│   ├── js/                  # 页面交互与 FolioSpace 导航
│   └── assets/              # avatar / background.png
├── about/ lab/ stack/ links/  # 子页面（构建时拷进 dist）
└── dist/                    # 构建产物

改内容

编辑 config.json：

• intro.title / intro.subtitle / intro.enter
• main.name / main.signature / main.ul.* 导航
• lab.items / stack.profile / stack.projects / stack.groups
• about.lines / blog / gallery

然后 npm run build。

致谢

• UI / 动效骨架：SimonAKing/HomePage (LGPL-3.0)
• 3D portfolio 交互思路：SimonAKing/FolioSpace (MIT)
• 流体引擎：PavelDoGreat/WebGL-Fluid-Simulation (MIT)
• 复刻方法论参考：Jane-xiaoer/claude-skill-web-clone

右上角 GitHub 角默认指向 ovws/homepage，可在 config.json → intro.upstream 改成其他地址。