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

# 「数字思维体对话」作品集重设计 实现计划

> **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` 成功。