我做了一个工业终端风个人主页

无论是年轻嘉豪的我，还是中年沉稳 (并不) 的我，一直都想写一个非常究极炫酷的个人主页。之前玩过明日方舟和终末地，虽然我并不喜欢鹰角，但抛开其他的不谈，美术和设计是真没的说。于是我参考明日方舟、终末地的官网样式和设计，做了一个工业终端风格的个人主页，很cooooooool，请点击这里 (https://zaihu

文章 · Angular · 2026/08/17

无论是年轻嘉豪的我，还是中年沉稳~~(并不)~~的我，一直都想写一个非常究极炫酷的个人主页。

之前玩过明日方舟和终末地，虽然我并不喜欢鹰角，但抛开其他的不谈，美术和设计是真没的说。

于是我参考明日方舟、终末地的官网样式和设计，做了一个工业终端风格的个人主页，很cooooooool，请点击这里查看 Demo（也可以看下面的效果展示）

我不想纯粹是给自己用，所以设置了一个便于自定义内容和文本的config文件夹

只要你有一点点的编程基础或会使用AI，便可以很轻松的获得一个一模一样的个人主页！

目前只是第一版，内容和体验很有限，后续我会根据我自己的想法和其他人的需求继续进行开发。

效果展示

注：动图中的页面元素和鼠标指针的闪烁效果是录制软件导致的，实际并没有。

加载和首页

加载进度条，我参考的是终末地官方的加载进度条。

在样式方面，这类画面全黑（或者说全空）但是在角落、侧边放置一些运动元素，显得很高级又不失枯燥。

首页.gif

首页样式，使用的是我最爱的主体信息突出首先加载，卡片作为次要信息平滑切入的设计

你可以在花墨的首页也看到这样的风格和设计。

在我眼里，作为个人主页，第一步映入眼帘的，一定是你的名字，其次才是你的信息。

爱好和粒子效果

粒子效果是本项目的重点，也是我最开始看到明日方舟官网就想做的效果。

我使用了整页的粒子蒙层来渲染粒子飞来飞去的效果，所以从右往左飞才会这么丝滑（但代价就是初次加载可能会卡顿一下）

粒子的hover效果我调试了很久，依旧没有复刻出明日方舟官方的效果，只是做了一个类似，后续可能会再次调整和尝试。

文本的hover效果就不说了，很常规的设计（

链接

链接也是很常规的设计，不过我特意做了一个动效变色+跳转icon的hover效果，我个人很喜欢

细节

讲一些不太容易注意但我专门做的细节：

几乎所有能看到的文本，都可以通过自定义文件定制化（除了Github项目地址）
滚轮就可以实现页面之间的切换以及爱好之间的切换，不需要纯靠鼠标点击
左上右下的直角是双层并且有加载完成的动画，和左下右上的直角设计不一样。
背景有向上漂浮的粒子效果（参考明日方舟官网），可以自定义速度、范围和密度。

技术栈

主框架

主框架依旧使用的是 Angular ，本花最擅长的。

这次的目的本身也是为了尝试其他 npm 库与 Angular 的适配兼容性，以及在性能、视觉体验上的具体表现。

动画

动画方面我并没有选择使用 Angular Animation ，而是选择了 GSAP 。

因为 Angular Animation ，更适用于UI动画，也就是状态切换、简单的渐入渐出、组件之间的过渡等简单场景。

而本项目关于动画方面的构想会更复杂，例如最核心的“粒子重组”效果（也就是爱好页），它的生命周期可以看作一个由大量动画组成的时间轴：

多个元素同时运动
 ↓
某些元素从左侧进入
 ↓
某些元素从右侧进入
 ↓
背景线条同时展开
 ↓
标题延迟出现
 ↓
粒子开始运动
 ↓
粒子重组

这就是GSAP更适合的地方。

粒子效果

我对于粒子重组的需求有两个：

通过SVG渲染粒子效果图
能够左右移动进行图案的粒子重组

GSAP 已经可以满足动画、动作相关的需求了，那么我需要的仅仅是一个能够高性能渲染2D粒子对象的库

这也是我没有选择 Three.js 的原因

PixiJS 的 Renderer 会把场景绘制到 Canvas，并利用 WebGL/WebGL2 或 WebGPU 进行 GPU 加速，并专门提供了 ParticleContainer 和 Particle，针对大量轻量粒子做高性能渲染。

如何使用？

环境准备

安装版本 ≥ 22 的 NodeJS

确保 npm 版本 ≥ 10

启动方式

你可以fork或直接下载项目的源代码，在项目根目录依次执行：

pm install     # 安装依赖
npm start      # 开发服务器 → http://localhost:510

自定义配置

所有可自定义内容集中在 src/app/config/，改配置文件即可，无需动组件代码。空字段会自动隐去对应元素。

文件	作用
`global.config.ts`	系统设置 \| 名字、favicon、link 图标、GitHub 仓库链接、HUD 文案、底部导航
`home.config.ts`	首页设置 \| 问候语、名字、角色、头像、状态卡、统计项
`hobbies.config.ts`	爱好设置 \| 标题、正文、超链接、详情、粒子图案 SVG
`contact.config.ts`	联系设置 \| 标题、联系方式（超链接 / 点击复制 / 备注）
`loading.config.ts`	加载设置 \| 文案、时长（ms）
`particle.config.ts`	粒子设置 \| 数量、速度、透明度等

粒子图案

粒子图案需要上传至 public/particles 文件夹，并在 hobbies.config.ts 中进行配置。

svg文件推荐网站：阿里巴巴矢量图标库

特殊文本

比较复杂的是爱好页面的文本extra设置，例如带有浮窗的文本和带有超链接的文本

hobbiesConfig.items.lines，便是文本段落的相关设置，一个object数组，每一个元素单独渲染一行。

带浮窗的文本写法如下：

fragments 意味着特殊文本，同级下的字段 details 用于存放浮窗的内容

{
    fragments: [{ text: '查看我最喜欢的游戏' }],
        details: [
            { text: '死亡搁浅', extra: '小岛秀夫就是神' },
            { text: '群星', extra: '不知道玩什么就开一把' },
            { text: '只狼：影逝二度', extra: '心态蜕变的开始' },
            { text: '艾尔登法环', extra: '最爱的RPG没有之一' },
            { text: '最终幻想14', extra: '边骂边玩' },
        ],
},

带超链接的文本写法如下：

{
    fragments: [
        { text: '查看我的' },
        { text: '游戏库', url: 'https://flowersink.com/game' },
    ],
},

该写法同样同于普通文本和特殊文本的拼接，只需要在 fragments 数组中用多个元素拼接即可。

部署方式

仓库已内置 GitHub Actions 工作流（.github/workflows/deploy.yml），fork 后无需自己写部署脚本。

如果你需要部署在自己的服务器上，那就需要自行了解 Angular 的服务器部署流程

步骤：

Fork 本仓库（或直接使用自己的仓库），推送到 GitHub
仓库 Settings → Pages → Build and deployment → Source 选 "GitHub Actions"
工作流会在每次 push 到 master 时自动构建并部署

部署要求：

仓库必须为 public（GitHub Pages 免费版不支持私有仓库）
部署地址为 https://<用户名>.github.io/<仓库名>/
工作流的 base-href 当前硬编码为 /FlowerTerminal/：若你的仓库名不同，改 .github/workflows/deploy.yml 里 Build 步骤的 --base-href=/你的仓库名/

工作流流程：npm ci → ng build（production + 子路径 base-href）→ 复制产物到 _site → actions/deploy-pages 部署。也支持在 Actions 页面手动触发（workflow_dispatch）。

二次开发

如果你有一定的前端基础/Angular基础/Vibe Coding基础，可以尝试对项目进行二次开发，添加你需要的展示样式、页面、动画等。

项目结构

# FlowerTerminal 项目结构

```
FlowerTerminal/
├── .github/
│   └── workflows/
│       └── deploy.yml            # GitHub Actions 部署脚本（push 到 master 自动构建并部署到 Pages）
│
├── public/                       # 静态资源（构建时原样复制到根路径）
│   ├── favicon.ico               # 标签页图标
│   └── particles/                # 粒子系统与图标用的 SVG
│
├── src/
│   ├── index.html                # 入口 HTML（含 Google Fonts 引用、<base href>）
│   ├── main.ts                   # 应用启动入口（bootstrap）
│   ├── styles.scss               # 全局样式（CSS 变量、HUD 微字体、加载隐藏规则等）
│   │
│   └── app/
│       ├── app.ts                # 根组件（挂载 RouterOutlet）
│       ├── app.config.ts         # 应用级 providers（Zone、Router 配置）
│       ├── app.routes.ts         # 路由（'' → Shell，/animation-lab → 调试页）
│       │
│       ├── config/               # ★ 所有可自定义内容的集中入口（改这里即可，无需动组件）
│       │   ├── index.ts          # 配置聚合导出
│       │   ├── types.ts          # 各 config 的 TypeScript 类型定义
│       │
│       ├── core/                 # 核心业务逻辑（无 UI）
│       │   ├── animation/        # 统一 GSAP 动画层
│       │   ├── navigation/       # 页面状态机（非 Router，SPA 状态切换）
│       │   ├── particle/         # PixiJS 粒子系统（爱好页图案重组）
│       │   └── debug/            # 调试服务（?debug=true 覆盖层数据源）
│       │
│       ├── layout/               # 全局布局层（固定全屏叠层）
│       │   ├── shell/            # 应用外壳：叠加各层 + 驱动页面切换 + 滚轮切页 + 挂载加载条
│       │   │   ├── shell.component.ts        # 外壳主组件（含 wheel 监听、loading-bar 挂载）
│       │   │   └── page-container.component.ts # 当前页渲染容器（switch 切换 3 页）
│       │   ├── background/       # 背景层
│       │   │   ├── background.component.ts   # 基底渐变 + 网格 + 噪点 + 漂浮尘埃
│       │   │   └── rising-particles.component.ts # 上升粒子层（底部飘到顶部淡出）
│       │   ├── hud/              # HUD 层（四角边框 + 上下状态文字 + 右下 GitHub 链接）
│       │   └── navigation/       # 底部导航菜单
│       │
│       ├── pages/                # 三个页面 + 调试页
│       │   ├── home/             # 首页（boot 三阶段动画、头像/状态卡擦除）
│       │   ├── hobbies/          # 爱好页（内部滚轮翻页、粒子 morph、行详情）
│       │   ├── contact/          # 联系页（超链接/点击复制）
│       │   └── animation-lab/    # 动画调试页（路由 /animation-lab）
│       │
│       └── shared/components/    # 跨页复用的小组件
│           ├── hud-corner/       # HUD 四角装饰边框
│           ├── hud-line/         # 装饰性分隔线（可 SVG path 自绘）
│           ├── ui-bracket/       # 方括号装饰（如状态卡 "[PIBEI]"）
│           ├── page-indicator/   # 顶部页码指示器（"1 / 3"）+ 处理中状态条
│           ├── loading-bar/      # 首次加载进度条（左侧纵条 + 跟随百分比）
│           └── debug-overlay/    # 调试覆盖层（FPS/页面/粒子数）
│
├── .gitignore                    # 排除 node_modules/dist 等
├── package.json                  # 依赖与脚本（start/build/test/watch）
├── package-lock.json             # 依赖锁定
├── angular.json                  # Angular 构建配置（端口 510、outputHashing 等）
├── tsconfig*.json                # TypeScript 编译配置
└── README.md                     # 项目说明（简介/技术栈/启动/自定义/部署）
```

后续的规划

优化自定义方式

我目前觉得通过直接修改 ts 文件来进行文本、样式相关的自定义实在是有些不方便

但暂时没有想到更好的自定义方式，后续会尝试更好的。

添加更多页面

目前页面只允许存在三个，虽然可以自行命名，但样式是基本固定的。

未来的设想是预设有多个样式的页面，可以自行选择数量和顺序，进行自定义化。

性能优化

目前项目暂时没有做性能相关的优化，因为我是第一次用Angular去做一个无路由的单人展示页面，暂时没有优化的头绪。

动画和粒子的实验区

未来如果有更多关于网页动画（可能包括3D）或粒子相关的想法和设计，会在此进行尝试。