Building a Dynamic Portfolio with AI

Hero 视觉方向输入

高级极简白色个人品牌 Hero，使用同一角色保持脸、发型和穿搭一致。人物最初以远景站在大面积留白的白色空间中，随着滚动镜头逐渐推进到全身，再到中景，人物姿势自然变化，并可在后半段手持苹果笔记本。周围以少量超大英文排版、作品卡片和 UI、3D、代码元素形成大透视和层次感，整体像高端设计师个人品牌大片，突出人物和人脸，不要科技舱、赛博风、复杂界面堆叠或电商广告感。

分镜 1：远景推进到全身

从 {{Mixed 1}} 按照以下描述自然衔接到 {{Mixed 2}}：人物从白色极简空间中央缓慢向镜头走近，步伐自然、自信、克制，镜头同步平稳向前推进，由远景逐渐过渡到完整全身景别。背景中的超大 DESIGN 字母保持稳定，随着镜头推进从画面两侧掠过。纯白空间逐渐向两侧展开，少量半透明作品卡片和抽象几何装置从远处缓慢显现，最终形成明亮、宽阔的白色设计展厅。人物在结尾自然停下并轻微侧身，一只手放在腰侧，准确衔接下一张全身构图。始终保持同一角色的面部五官、黑色发型、黑色无袖上衣、黑色长裤、身材比例和妆容完全一致。保持高级极简的纯白未来展厅、冷白柔光和编辑感构图。镜头运动平稳，不变脸、不换装、不增加人物、不改变年龄，不生成新的文字，不让背景文字扭曲，不出现肢体变形、手指异常、界面融化或场景突然跳变。

分镜 2：全身推进到交互中景

从 {{Mixed 1}} 自然衔接到 {{Mixed 2}}，按照以下要求进行生成：镜头从人物全身平稳推进到腰部以上的中景，人物先保持自信站姿，随后转头看向镜头，并自然抬起一只手缓慢伸向前方，像是在触碰镜头前的虚拟界面。周围原本静止的半透明作品卡片逐渐被激活，开始产生轻微环绕和横向流动，远处卡片保持清晰层次，靠近镜头的卡片形成自然运动模糊和大透视。人物手掌逐渐接近镜头，最后停在伸手触碰的构图。始终保持同一角色的面部五官、黑色发型、黑色无袖上衣、黑色长裤、身材比例和妆容完全一致。保持高级极简的纯白未来展厅、冷白柔光和编辑感构图。镜头运动平稳，不变脸、不换装、不增加人物、不改变年龄，不生成新的文字，不让背景文字扭曲，不出现肢体变形、手指异常、界面融化或场景突然跳变。

分镜 3：卡片遮挡转场到手持电脑

从 {{Mixed 1}} 自然衔接到 {{Mixed 2}}，按照以下要求进行衔接：人物伸向镜头的手轻轻触发前方界面，周围的透明作品卡片迅速但流畅地向中心汇聚，并围绕人物形成横向旋转的环形内容带。一块较大的白色半透明卡片从镜头前方快速横向掠过，短暂完全遮挡画面，形成自然的遮挡转场。卡片离开画面后，人物已经自然地双手托着一台打开的银色苹果笔记本，电脑位于胸部以下，不遮挡脸。人物略微侧身并看向镜头，环形作品卡片在身后和前景缓慢旋转，最终准确衔接持笔记本的画面。始终保持同一角色的面部五官、黑色发型、黑色无袖上衣、黑色长裤、身材比例和妆容完全一致。保持高级极简的纯白未来展厅、冷白柔光和编辑感构图。镜头运动平稳，不变脸、不换装、不增加人物、不改变年龄，不生成新的文字，不让背景文字扭曲，不出现肢体变形、手指异常、界面融化或场景突然跳变。

分镜 4：从作品环境推进到人脸特写

把 {{Mixed 1}} 中手持银色笔记本、妆容精致、表情平静自信的角色作为主体 1，把 {{Mixed 2}} 中同一服装、同一外貌特征的角色作为主体 1 的延续状态。

参考 {{Mixed 1}} 中的视觉元素，衔接至 {{Mixed 2}} 的画面，生成主体 1（持笔记本女性）在环境由繁入简的变换中，镜头稳定推进至正面人脸近景的衔接视频。

镜头 1：中景，主体 1 手持银色笔记本稳步站立，背景中可见 DESIGN 标识与浮动的作品卡片，镜头平稳缓慢推进，主体 1 眼神平静且充满自信地看向镜头，伴随平稳的氛围嗡鸣声。

镜头 2：近景，镜头持续向主体 1 面部中心推进，背景中的作品卡片与 DESIGN 字样逐渐减速并产生柔和的焦外虚化，随后自然向四周淡出，环境平滑过渡为纯净的纯白未来展厅，伴随细微的空间流动音效。

镜头 3：正面特写，镜头锁定在主体 1 的人脸近景，其服装、妆容与五官特征保持高度一致，背景已完全变为极简纯白空间，冷白柔光在角色面部留下细腻阴影，画面定格在自信的神情中，伴随轻柔的电子音效收尾。

画面风格：极简未来主义，冷白色调，均匀高亮的冷白柔光。

Codex 页面实现提示词

请基于当前目录实现一个 Vue 3 + Vite + TypeScript 个人作品集首页，动画使用 GSAP ScrollTrigger。

请先检查以下文件：

public/hero/hero-master.mov：20 秒完整 Hero 视频。

public/hero/stage-01.png 至 stage-05.png：五张 PNG 只作为对应视频阶段的文字排版和位置参考。桌面端始终使用 hero-master.mov，不要在视频和图片之间切换。

Figma 设计的作品集展示页链接：黑色作品区的布局和视觉参考。

content/projects.xlsx：只有一个 projects Sheet，字段为 title、date、description、gif、views、engagement。

public/projects/：存放表格中对应的 GIF 文件。

一、Hero

实现一个滚动驱动的视频 Hero。Hero 外层高度约 500vh，内部区域 position: sticky，固定 100vh。

将 Hero 在文档中的滚动进度 0 到 1 映射到 hero-master.mp4 的 currentTime 0 到 20 秒。视频不要自动播放，而是完全跟随页面滚动进度，支持向下播放和向上反向返回。

不要监听 wheel 并调用 preventDefault，不要劫持用户滚轮。

五个文字阶段直接写在代码中：阶段 1 为 0–3 秒，参考 stage-01.png；阶段 2 为 3–7 秒，参考 stage-02.png；阶段 3 为 7–12 秒，参考 stage-03.png；阶段 4 为 12–17 秒，参考 stage-04.png；阶段 5 为 17–20 秒，参考 stage-05.png。

所有文字使用 HTML DOM 叠加在视频上，根据五张 PNG 还原文字的位置、字号、间距和黑白极简编辑风格。

文字切换只使用 opacity、translateY 和轻微 blur，不要使用旋转、弹跳、霓虹或复杂科技动画。不同阶段之间使用约 0.3 至 0.4 秒的交叉淡入淡出。任何文字都不能遮挡人物面部。

Hero 最后一段滚动时，白色画面逐渐过渡到黑色作品区域。黑色背景从下方上移覆盖，Hero 视频逐渐淡出，SELECTED WORKS 文字由黑色转为白色。

二、作品区

根据 references/works-black.png（也可以换成 Figma 链接）实现黑色作品展示区域。

读取 content/projects.xlsx 中的 projects Sheet，并按照 date 字段从新到旧自动排序。GIF 路径自动拼接为 /projects/{gif字段}。

第一版不需要分类、封面、详情弹窗、外部链接或复杂筛选。

作品区使用浏览器正常文档滚动，不得创建内部纵向滚动区域，不得阻止滚轮默认行为。

作品展示区域固定 100vh，外层高度根据项目数量自动计算，每个项目对应约 90vh 至 100vh 的滚动距离。

三、响应式

桌面端使用完整 20 秒视频滚动控制。移动端可以使用五张 PNG 按照滚动阶段切换，不必逐帧控制视频。

支持 prefers-reduced-motion。

完成后运行类型检查和生产构建，修复全部错误。