黑金科技风个人主页HTML源码全解析：Three.js粒子+代码雨+终端动画

今天分享一份非常酷的个人主页源码：深黑底色、金色粒子星云、黑客帝国代码雨、自定义金色光标、自动敲代码的终端窗口……视觉效果直接拉满，而整个页面核心只有一个 index.html 文件，零构建、零后端、双击即开，非常适合用来做个人名片页、技术博客首页或作品集展示。

本文将从源码结构、特效实现、功能模块、设计系统、部署方式五个维度全面拆解这份源码，想直接抄作业的开发者可以照着复刻，想了解实现原理的也能一次看懂。

截图

---

一、源码概览：单文件架构

这份源码的目录结构非常精简：

boke官网/
├── index.html           # 主页面，约158KB，CSS/JS 全部内联
├── fonts/               # 本地字体（woff2 + fonts.css）
│   └── fonts.css        # 字体声明（Space Grotesk / Inter 等）
├── vendor/
│   └── three.min.js     # Three.js 本地库（约600KB）
└── cdn-cgi/             # Cloudflare 邮箱保护脚本

核心设计：样式全部写在 <style> 标签内，脚本全部写在 <script> 标签内，唯一的外部依赖是本地化的 Three.js——不需要 npm、不需要打包器、不需要后端接口，扔到任意静态服务器就能跑。

单文件架构的优势：

• 零环境依赖：不用装 Node、不用跑 npm install，双击 index.html 即可预览
• 部署极简：支持 GitHub Pages、Cloudflare Pages、Vercel 等任意静态托管
• 易于分发：一个文件就是一个完整网站，方便分享和二次开发

---

二、核心特效实现解析

1. Three.js 金色粒子星云背景

页面底层使用 Three.js 渲染了 1200 个金色粒子，构成缓缓旋转、上下浮动的星云效果：

const count = 1200;
const geo = new THREE.BufferGeometry();
const positions = new Float32Array(count * 3);
// 粒子在 60×40×20 的空间内随机分布
positions[i * 3] = (Math.random() - 0.5) * 60;
positions[i * 3 + 1] = (Math.random() - 0.5) * 40;
positions[i * 3 + 2] = (Math.random() - 0.5) * 20;

实现要点：

• 使用 BufferGeometry + PointsMaterial，顶点颜色在 #C4A878 → #D4AF6A → #B8945A 三档金色间渐变
• 开启 AdditiveBlending（加色混合），粒子重叠处更亮，增强星云质感
• 场景自动旋转（rotation.y += 0.0003），粒子叠加正弦浮动，模拟呼吸感
• 画布层 opacity: 0.12 + mix-blend-mode: screen，既保留氛围又不干扰正文阅读

2. Canvas 代码雨特效

背景叠加了黑客帝国风格的代码雨，字符集和绘制方式如下：

const chars = '01{}[]<>/=+*;:$#&|!?@%^~'.split('');
ctx.fillStyle = 'rgba(255,215,0,' + (0.3 + Math.random() * 0.7) + ')';

实现要点：

• 每列一个”水滴”，下落到底部后随机重置到顶部，形成持续倾泻效果
• 字符颜色为金色半透明（rgba(255,215,0, 0.3~1.0)），与黑金主题统一
• 通过帧计数节流（每 4 帧绘制一次），大幅降低性能消耗
• 整层 opacity: 0.10，作为氛围底纹存在

3. 自定义金色光标

页面把系统光标替换成了金色光点 + 跟随圆环的双层设计：

#cursor-dot {
  background: radial-gradient(circle, #FFD700 0%, rgba(255,215,0,0) 70%);
}
#cursor-ring {
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 50%;
}

实现要点：

• 光点用 requestAnimationFrame 做缓动跟随（dx += (mx - dx) * 0.2），圆环直接跟随鼠标，形成前后拖尾层次
• 鼠标悬停到链接、按钮、卡片上时，光标自动放大并扩散光晕（.hover 状态切换）
• 配合 mix-blend-mode: screen，光标与背景叠加更通透

4. 终端打字动画

首页内置两个终端窗口，其中 hero 终端会像程序员敲代码一样逐行输出资料卡：

const lines = [
  { t: '// 王总 · 前沿AI科技探索者', d: 300 },
  { t: 'const developer = {', d: 60 },
  { t: "  name: '王总',", d: 50 },
  // ...
];

实现要点：

• 通过 IntersectionObserver 监听终端进入视口后才开始播放，滚动到才触发，不浪费首屏性能
• 每行带独立延迟参数（d），模拟真实打字节奏
• 内容用 <span> 包裹并注入 innerHTML，支持关键字高亮（金色 const、黄色字符串、灰色注释）

5. 角色打字机循环效果

hero 区还有一组循环打字机，在 5 个身份标签间自动切换：

const roles = ['AI驱动的运营与商务', '本地AI玩家', 'AI产品开发者', '18年互联网老兵', '自动化主义者'];

• 打字速度 80ms/字、删除 40ms/字、停顿时长 2 秒，节奏自然
• 末尾带金色光标闪烁块（@keyframes blink），持续引导视觉焦点

---

三、页面功能模块详解

1. 技能图谱：纯数据驱动渲染

技能区把 16 项技能按 4 大分类渲染成卡片网格，改数据即可更新整块内容：

const skills = [
  { name: '本地大模型部署', cat: 'ai', years: 2, project: 'ComfyUI / Ollama 本地推理' },
  // ...
];

• 每个技能带年限进度条（years / 15 换算宽度），分类色号自动映射
• 分类标签（# ai、# web、# ops、# tool）与金色系配色一一对应

2. 项目作品集：筛选 + 瀑布流卡片

项目区用数组驱动渲染 8 张卡片，支持全部分类筛选（全部 / AI / Web / 工具）：

const projects = [
  { title: '二次元兑换码汇总站', tags: ['web'], img: '🎁', cat: 'web' },
  // ...
];

• 点击筛选按钮即重新渲染，未筛选项目不产生额外 DOM
• 桌面端双列网格、移动端单列，卡片带 reveal 滚动渐显动画

3. 滚动动画系统

整站动画由两套机制驱动：

• 滚动渐显：.reveal 元素通过 IntersectionObserver（阈值 0.15）在进入视口时添加 .visible，支持左入、右入、上浮三种方向
• 整屏切换：每个 <section> 进入视口时触发 flyInCover / flyUpCover 覆盖式飞入动画，偶数屏交替方向，滚动浏览有”翻页”感

section:not(#hero).entered .container {
  animation: flyInCover .8s cubic-bezier(.22,1,.36,1) both;
}

4. 终端状态栏与 HUD 细节

页面四周布满硬核细节，处处体现”终端美学”：

• 底部固定状态栏：ONLINE / main / UTF-8 / TypeScript / GPU: RTX 4070S / Ln 42, Col 8 / Spaces: 2，模仿编辑器状态栏
• 每屏四角有 HUD 战术边框（金色 L 形描边），像游戏瞄准框
• 超大背景水印字 </> CODE（clamp(8rem, 22vw, 20rem)），增加纵深
• 顶部金色滚动进度条（#scroll-progress），随滚动实时填充

---

四、视觉设计系统

1. 黑金配色

全站围绕两种主色构建：

色值	用途
#121212	页面底色（深黑）
#FFD700	主金色（标题、光标、进度条）
#C9A227 / #B8860B	金色渐变过渡
#94A3B8	次级文字（灰蓝）

背景叠加了三层径向渐变 + 28px 金色点阵网格，暗处不闷、亮处不刺眼。

2. 玻璃拟态卡片

内容卡片统一使用 backdrop-filter: blur(20px) 玻璃效果：

.glass {
  background: rgba(28,24,18,0.55);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(212,175,106,0.12);
  border-radius: 20px;
}

hover 时边框泛金、外发光扩散，与背景粒子层形成层次。

3. 响应式适配

针对移动端做了完整降级：

• 768px：技能网格 4列→2列、项目单列、隐藏科技徽章、水印字缩小
• 640px：统计卡片 4列→2列、hero 字号压缩
• 480px：进一步缩小标题与画布高度

---

五、使用与部署

1. 本地预览

直接双击 index.html 即可在浏览器打开

2. 部署上线（任选其一）

# GitHub Pages：推送到仓库后开启 Pages 即可
git init && git add . && git commit -m "deploy"
git push origin main

# Cloudflare Pages：拖拽文件夹上传，自动部署

3. 二次开发

• 改 hero 文案：搜索 hero-subtitle 与 roles 数组
• 改技能：编辑 skills 数组（名称/分类/年限/项目）
• 改项目：编辑 projects 数组（标题/标签/图标/描述）
• 改配色：全局替换 #FFD700 等金色色值即可换主题

---

六、总结

这份源码最大的价值在于：用最朴素的技术栈（原生 HTML/CSS/JS + Three.js），做出了极具质感的科技风个人主页。没有框架负担、没有构建链，所有特效逻辑都清晰内联，非常适合前端学习者拆解研究，也适合想快速搭建个人名片页的开发者直接使用。

黑金配色高级耐看，粒子、代码雨、终端动画三大特效氛围感十足，数据驱动的内容区改起来也毫不费力——拿来即用，改改就是你的。