feat: import fluid portfolio snapshot

2026-06-11 12:24:52 +08:00
parent f7b529b1bd
commit 22baa715fd
22 changed files with 2955 additions and 6813 deletions
@@ -0,0 +1,87 @@
+# 设计文档：「与湛兮(花名)的数字思维体对话」作品集重设计
+
+日期：2026-06-11
+状态：已批准
+备份：`../wang-yuanyou-fluid-portfolio-backup-20260611-110154/`
+
+## 概念
+
+整站是访客与「湛兮(花名)的 AI 分身」的一场对话记录。简历核心（最近一年做 SSE 流式对话、打字机渲染、思考态动画）即设计语言来源——网站本身就是其工作成果的活演示。3D 流体 =「思维体」，是画面中唯一的角色。
+
+决策记录：
+
+- 设计隐喻：AI 对话流（vs 职业河流 / 跨端粒子宇宙）
+- 推进方式：滚动驱动的对话（vs 真·对话界面 / 滚动+问答入口）
+- 流体形态：单一思维流体 + 三状态状态机（vs raymarched metaballs / GPGPU 粒子流）
+- 视觉基调：深色 AI 实验室（vs 浅色编辑风 / 双主题）
+- 技术路线：原生 Three.js 自写 shader + GSAP ScrollTrigger + Lenis（vs 纯手写 / R3F）
+
+## 信息架构：7 轮问答
+
+| # | 访客提问 | 回答内容 | 数据源 |
+|---|---|---|---|
+| 0 | —（开机自检） | 「你好，我是湛兮(花名)。」+ 身份一行 + 6 指标 token 式吐出 | metrics |
+| 1 | 先介绍一下你自己？ | 4 条概述逐行流式输出 | resumeSignals |
+| 2 | 最近一年具体在做什么？ | 4 张焦点卡依次「生成」 | focusAreas |
+| 3 | 有实际项目证明吗？ | 4 个项目，各为一轮子对话：项目名打字机 → 模块逐条吐出 | projects |
+| 4 | 技能栈展开讲讲？ | 7 组技能标签 token 流喷发归位 | skills |
+| 5 | 之前的团队经历？ | 3 段经历沿垂直对话流时间线生成 | experiences |
+| 6 | 怎么联系你？ | 联系方式 + 流体归于平静，「对话已保存」收尾 | — |
+
+页面右侧（移动端顶部）设「会话进度轨」：7 节点对应 7 轮，可点击跳转，保证 HR 快速扫读。
+
+## 思维流体（Three.js 自写 shader）
+
+- 几何：高细分 IcosahedronGeometry；顶点着色器 3 层 FBM simplex 噪声液态位移
+- 片元：Fresnel 边缘辉光 + 双色渐变（青 #22d3ee ↔ 紫 #a78bfa）+ 加性内核光晕
+- 伴生粒子：约 2000 GPU 粒子，curl noise 流场
+- 状态机（uniform 插值过渡）：
+  - `idle`：低频低幅呼吸，粒子懒散环绕
+  - `thinking`：收缩 0.85x，噪声频率 ×3 搅动，色温升高，粒子吸入
+  - `answering`：回弹 1.1x 归位，粒子向内容区喷发消散，辉光脉冲与文字生成同步
+- 流体位置随轮次左右缓移（lerp）与内容互让；鼠标轻微视差
+
+## 非线性动画编排（GSAP ScrollTrigger + Lenis）
+
+每轮问答为一个 pin 区段，滚动量映射轮内时间轴：
+
+1. 提问（0→15%）：访客气泡逐字打出，steps() 离散节奏
+2. 思考（15→35%）：流体 thinking，内容区仅 shimmer 占位——刻意停顿即非线性核心
+3. 爆发生成（35→75%）：expo.out 爆发；标题打字机、卡片不等间隔 stagger（模拟 token 不均匀到达）、数字滚动跳变
+4. 余韵（75→100%）：流体回 idle，内容微视差上浮，解除 pin
+
+每轮思考时长 / 爆发曲线 / stagger 间隔均不同（场景配置驱动），避免节奏雷同。向上滚动时时间轴反播，内容「被收回」。
+
+降级：`prefers-reduced-motion` → 关 pin 与打字机、内容直出、流体仅呼吸；移动端粒子减半、DPR ≤ 2、细分降档。
+
+## 视觉系统
+
+- 背景 #070b14 近黑蓝 + 极淡网格点阵 + 流体环境光溢出
+- 强调色：青 #22d3ee（访客/交互）、紫 #a78bfa（思维体/回答）、琥珀 #fbbf24（仅指标数字）
+- 气泡语言：提问 = 右对齐细边框气泡；回答 = 无框流式文本块 + 左侧渐变「生成光标」竖线
+- 字体：等宽（JetBrains Mono / 思源等宽回退）用于指标、token、技能标签；正文 Inter + 思源黑体
+- 细节：回答块尾闪烁光标 ▋；项目 logo 复用 public/logos/
+
+## 文件结构
+
+```
+src/
+  main.js              # 入口：装配 + Lenis + 进度轨
+  resume-data.js       # 不动（数据即简历）
+  dialogue.js          # 7 轮问答文案与节奏配置
+  render.js            # 由 resume-data 生成各轮 DOM
+  choreography.js      # GSAP ScrollTrigger 时间轴编排
+  mind/
+    mind.js            # 流体场景、状态机、粒子
+    shaders.js         # GLSL
+  styles.css           # 重写
+index.html             # 重写骨架
+```
+
+新依赖：gsap、lenis。重写 main.js / styles.css / index.html（旧版已整目录备份）。
+
+## 性能与验收
+
+- 单 canvas 固定底层；rAF 与 GSAP ticker 合并；目标桌面 60fps、移动 30fps+
+- 文字全部真实 DOM（可选中/可索引），打字机仅控制 reveal；进度轨 + 锚点保证可跳转
+- 验收：7 轮完整走查（含回滚反播）、375px 移动端、reduced-motion 降级、Lighthouse 不低于现版本