Personal Developer Universe
让作品集本身成为前端工程能力的证明。
先明确项目为何存在。
从业务目标进入技术问题，让后续架构选择拥有可判断的上下文。
一个以内容为基础、以交互为叙事方式的个人开发者作品集，通过分阶段交付连接 DOM 内容、Three.js 空间场景与 GSAP 动效系统。
传统在线简历通常只能描述技术能力，却很难直接展示架构设计、交互实现、性能意识与 AI 应用能力。
真正需要被拆解的约束。
- 01
让普通访问者快速获取关键信息，同时为技术负责人保留足够深度。
- 02
为 Three.js、GSAP 与 AI Action System 建立清晰边界。
- 03
在视觉表现、移动端体验、可访问性和首屏性能之间保持平衡。
让数据、状态与交付边界可解释。
以严格类型内容数据为源，保持语义化 DOM 为可阅读基线，再由 Three.js 场景与 GSAP 时间线提供渐进式空间叙事。
- 01内容数据源
统一维护简历、能力、案例、经历与实验数据。
- 02语义化页面
用服务端渲染的 DOM 保证核心内容始终可读。
- 03交互叙事层
GSAP 管理滚动时间线，Three.js 呈现能力宇宙。
- 04性能与降级
按需加载 3D 资源，并为移动端与减少动态偏好提供降级。
把工程决策和交付结果放在一起验证。
- 01
使用严格类型的数据模型统一管理个人信息、能力、项目、经历和实验内容。
- 02
采用分阶段工程策略，每个阶段保持可运行和可验证。
- 03
优先交付语义化 DOM 内容，再渐进增强动画和空间叙事。
- 01
完成 React 19 与 TypeScript 严格模式工程基础。
- 02
形成无需动画也能完整阅读的中文 Portfolio。
- 03
完成 Developer Core、Scroll Universe 与 Capability Universe。
性能首先是一组工程约束。
只记录项目中真实采用的策略，不用无法核验的数字替代判断。
- 01
将 Three.js 场景放入动态资源块，避免阻塞基础内容的首屏阅读。
- 02
根据设备像素比和运行状态约束渲染开销，并在不可见时停止无效工作。
- 03
让动画只负责增强，内容与导航在脚本或 WebGL 不可用时仍然成立。
沉淀可以迁移到下一次决策的经验。
作品集最有说服力的部分不是技术名词，而是技术如何被边界、验证和降级策略约束。
反思 01
分阶段交付让每一层增强都有可运行基线，也让复杂交互可以被独立验证。
反思 02