feat: import fluid portfolio snapshot

docs/plans/2026-06-11-ai-dialogue-redesign-design.md

@@ -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 不低于现版本

docs/plans/2026-06-11-ai-dialogue-redesign.md

@@ -0,0 +1,56 @@
+# 「数字思维体对话」作品集重设计 实现计划
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** 将现有作品集重写为「与湛兮(花名)的 AI 分身对话」式单页站点：滚动驱动的 7 轮问答 + shader 思维流体状态机。
+
+**Architecture:** Vite 原生 JS。`resume-data.js` 不动；`dialogue.js` 定义 7 轮问答节奏配置；`render.js` 生成 DOM；`mind/` 为 Three.js shader 流体（idle/thinking/answering 状态机 + GPU 粒子）；`choreography.js` 用 GSAP ScrollTrigger pin+scrub 编排每轮「提问→思考→爆发生成→余韵」；Lenis 平滑滚动。
+
+**Tech Stack:** Vite 7, Three.js 0.184, GSAP ScrollTrigger, Lenis, 自写 GLSL（FBM simplex + Fresnel）。
+
+**设计文档:** `docs/plans/2026-06-11-ai-dialogue-redesign-design.md`（已批准）
+**备份:** `../wang-yuanyou-fluid-portfolio-backup-20260611-110154/`
+
+---
+
+### Task 1: 依赖安装
+- `pnpm add gsap lenis`
+- 验证: package.json 出现两依赖，`pnpm dev` 可启动。
+
+### Task 2: `src/dialogue.js` — 轮次配置
+- 7 轮：boot / intro(resumeSignals) / focus(focusAreas) / projects / skills / experience / contact。
+- 每轮字段：id、label（进度轨）、question、type、side（流体停靠 -1/1）、palette（双色）、pinLength、qEnd/thinkEnd（相位）、staggerEach——逐轮不同以保证节奏差异。
+- 联系信息常量：邮箱 419021733@qq.com / wmagmgema521@gmail.com、电话 19980439383、GitHub zhanBoss、男·29岁·电子科技大学 信息管理与信息系统 本科。
+
+### Task 3: `index.html` — 骨架重写
+- canvas#mind-canvas（fixed 底层）、.grid-overlay、header.hud（左：姓名/DIGITAL MIND；右：● ONLINE 状态灯）、nav#session-rail、main#dialogue（空，由 render.js 填充）、Google Fonts（JetBrains Mono + Inter, display=swap）。
+
+### Task 4: `src/styles.css` — 深色 AI 实验室
+- 背景 #070b14、点阵网格 overlay、青 #22d3ee / 紫 #a78bfa / 琥珀 #fbbf24。
+- 气泡语言：.q-bubble 右对齐细边框；.answer 左侧渐变生成竖线 + 尾部 ▋ 闪烁光标；token/指标/技能用等宽字体。
+- 各轮内容样式：metrics token、focus 卡、project 块、skill 标签云、timeline、contact。
+- 进度轨右侧固定（移动端转顶部水平）；≤768px 移动端布局；prefers-reduced-motion 关闭闪烁。
+
+### Task 5: `src/render.js` — DOM 生成
+- 每轮 section.round 结构：q-bubble（空文本，编排时打字）→ .thinking（三点 shimmer）→ .answer（.gen 子项供 stagger）。
+- 按 type 分发渲染器，全部读 resume-data.js；boot 轮含问候打字行 + 身份行 + metrics token。
+- 文案全部真实 DOM（初始由 CSS/GSAP 隐藏，reduced-motion 时直接可见）。
+
+### Task 6: `src/mind/shaders.js` + `src/mind/mind.js` — 思维流体
+- 顶点：Ashima simplex 3D + 3 octave FBM 位移；片元：Fresnel 辉光 + uColorA/uColorB 渐变 + uHeat 色温 + AdditiveBlending。
+- 粒子：~2000（移动端 900），属性 seed/radius/speed/phase，轨道半径受 uAttract（吸入）与 uBurst（喷发，setState('answering') 时置 1 后衰减）控制，全 GPU。
+- 状态机 STATES{idle, thinking, answering}，每帧 lerp uniforms；setSide(dir) 左右停靠（移动端居中缩小）；setPalette 双色渐变；指针视差；DPR≤2；resize。
+
+### Task 7: `src/choreography.js` — 滚动编排
+- Lenis + ScrollTrigger 集成（gsap.ticker 驱动）。
+- boot 轮：页面加载后时间驱动的开场时间轴（非滚动）。
+- 轮 1-6：pin + scrub 时间轴，相位 0→qEnd 打字（steps 离散）→thinkEnd 思考 shimmer→0.78 爆发 stagger（expo.out，不等间隔）→1 余韵视差；onUpdate 按相位切 mind 状态；enter/enterBack 切 side+palette。
+- 进度轨高亮与 lenis.scrollTo 跳转。
+- reduced-motion：跳过 pin/打字机，内容直出。
+
+### Task 8: `src/main.js` — 装配
+- 渲染 DOM → 建 rail → createMind → choreography → boot 开场。
+
+### Task 9: 验证
+- `pnpm dev` + Playwright：桌面 1440px 走查 7 轮（截图 hero/中段/尾段）、向上回滚反播、375px 移动端、console 无错误。
+- `pnpm build` 成功。