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