作品集：赛博朋克

具有数字故障和 FUI（未来派用户界面）终端美学的交互式开发者作品集，使用 Next.js 16、React 19 以及自定义 GSAP/Canvas 物理效果构建

在线演示 • GITHUB 仓库（私有访问）

概述

• 角色：创作者、独立全栈与创意工程师
• 技术栈：Next.js 16 (App Router)、React 19、TypeScript、Tailwind CSS 4、GSAP、WebGL (Three.js)、Web Audio API (Text-to-Speech)、Google Generative AI SDK、next-intl（全面本地化内容，支持英语、塔加洛语、德语、西班牙语、法语、阿拉伯语、韩语、日语和中文）
• 核心成果：100% 交互式作品集覆盖率，具有动态语音驱动的聊天机器人导航和亚秒级页面加载速度
• 总结：一个采用数字故障美学设计的优质数字作品集 and 创意工程展示。它具有交互式 AI 语音对话、基于 Canvas 的波物理转换效果以及平滑的滚动体验，旨在展示高水平的设计与前端开发实力。

问题

• 挑战：常规的作品集往往是静态且枯燥的，无法展示真实的全栈和 AI 集成能力。本项目的目标是创建一个沉浸式、高度交互的个人网站，作为复杂动画、布局、状态管理和实时 AI 工具的活生生的概念验证（PoC），同时不损害性能或无障碍性（Accessibility）。
• 受众：招聘人员、工程经理、潜在客户以及寻找技术深度、优质设计品味和健壮软件架构的开发者。
• 限制：在运行基于 Web 的 Canvas 模拟、3D模型查看器以及自定义流式 AI 聊天机器人的同时，在移动设备上保持流畅的 60fps 动画和高性能（亚秒级加载时间）。

方法与决策

• 架构：Next.js App Router 用于 Edge 渲染的国际化路由，并搭配用于主题、音乐和聊天机器人状态的全局 React 上下文（Context）。
• 关键决策：
  • 多语言架构：使用 next-intl 构建了健壮的 i18n 框架，以本地化路由、页面元数据、聊天提示以及项目文档结构（具有 9 种语言的完整本地化页面）。
  • 基于 Canvas 的过渡效果：集成了自定义柏林噪声（Perlin noise）波失真，而不是简单的 CSS 过渡，以在页面切换时创建触觉数字波效果。
  • 语音合成与 AI 聊天机器人：配置了 Google Generative AI SDK 与自定义语音合成队列，使用 Edge 路由快速流式传输响应。
  • Z-Index 分层：建立了严格的 15 层 z-index 堆叠上下文，以防止叠加层、自定义光标和 3D 场景之间的布局和交互冲突。
• 折中方案：决定使用 CSS 叠加层和轻量级 2D Canvas 效果，而不是繁重的 3D 资源，以将初始页面包体积降至最低，并保持加载速度在 100ms 以下。
• 数据流：用户输入 -> Next.js 路由处理程序 -> Google Generative AI -> 文本流 -> 语音合成队列 -> 自定义 Web 音频播放器。

关键成果与影响

• 成果：在各种设备上实现了流畅的 60fps 动画、低于 100ms 的首字节时间（TTFB）以及完全交互式的双语语音助手。
• Lighthouse 性能：在所有核心类别（性能、无障碍性、最佳实践和 SEO）的 Lighthouse 审计中获得了完美的 100/100/100/100 满分。
• 安全合规性：通过 Cloudflare 的 isagentready 评估，在安全验证审计中获得了 100/100 的满分。
• 对比：从创作者第一个欠佳的作品集 Portfolio: Glass 升级为自定义的交互式终端，从而延长了用户停留时间并带来了直接的技术咨询。
• 影响：展示了构建现代、复杂的用户界面和生产级全栈架构的能力。

技术深挖

• 值得瞩目的细节：自主构建的 CRT 屏幕扫描线滤镜、响应式自定义光标跟随、动态音频可视化器以及自定义多语言 next-intl 路由。
• 验证：使用 Lighthouse 审计、无障碍性检查（对比度 >= 4.5:1）以及低端设备上的移动端模拟进行验证。
• 优化：配置了 Next.js 图像远程模式、懒加载 Three.js Canvas 资源，并精简了 Tailwind 样式以减少未使用的 CSS。
• 代码质量：严格的 ESLint 配置、TypeScript 类型定义以及自包含的模块化组件。
• 链接：参考 package.json、next.config.ts 和 app/data.ts。

反思

• 改进方向：进一步优化 3D 模型或为背景波实施自定义着色器（Shaders），以减少移动设备上的 CPU 开销。
• 成功之处：提供了一个统一的设计美学，其中原声带、图形和聊天机器人交互能够天衣无缝地协同工作。
• 教训：在 React 中，管理复杂动画与流式 AI API 需要进行仔细的异步状态隔离。

---

我的贡献

• 前端架构：设计并实现了核心 UI 外壳，包括自定义光标、HUD、Bento 网格以及音乐提供商（Music Provider）。
• AI 聊天机器人集成：编写了语音聊天机器人程序，具有语音合成、系统指令和语境感知上下文。
• 动画微调：编排 GSAP ScrollTrigger 时间线并将其与 Canvas 波形失真过渡同步。

---

项目架构

此应用程序遵循模块化、基于特性的 Next.js App Router 模式，并带有本地化路由文件夹。

• 分层结构：服务端组件处理本地化参数和结构化路由，而客户端组件则渲染交互式小部件（Widgets）。
• 特性模块：
  • components/sections/：布局章节（Hero, About, Projects, Skills, Contact）。
  • components/ui/：交互式 UI 节点（ASCIIText、CustomCursor、MusicPlayer、VerticalHUD）。
• 状态管理：React Context API 控制全局音频播放状态、主题选择以及语言状态。
• 重构与改进：将配置升级到 Next.js 16 并使用 Turbopack，以在开发过程中实现几乎瞬时的热模块替换（HMR）。

编译路由结构 (App Router)

该应用编译为以下静态 (○) 和动态 (ƒ) 路由结构（不包括单个作品集项目路径）：

• PWA 和 SEO 基础设施 (○ 静态)：
  • /_not-found — 静态全局 404 处理程序。
  • /manifest.webmanifest — Web 应用清单。
  • /robots.txt 和 /sitemap.xml — 爬网程序目录。
• 双语路由 (ƒ 动态)：
  • /[locale] 和 /[locale]/[...rest] — 使用 next-intl 的感知语言环境布局包装器。
• 模型上下文协议 (MCP) 与 AI 智能体 (ƒ 动态)：
  • /.well-known/mcp.json 和 /openapi.json — 机器可读的服务器功能架构。
  • /.well-known/agent-skills/ — 技能目录（如 SKILL.md）用于 AI 集成。
  • /api/mcp 和 /api/mcp/sse — 智能体客户端的 SSE（服务器发送事件）通信终点。
• 生成式 AI 聊天机器人与媒体系统 (ƒ 动态)：
  • /api/chat & /api/chat/health — 支持 AI 聊天机器人语音处理器的流路由处理程序。
  • /api/music & /api/music/health — 音频流控制器路由。
• LLM 上下文导出器 (ƒ 动态)：
  • /llms.txt & /llms-full.txt — 针对 LLM 阅读优化的作品集事实、上下文和证书的 Token 高效文本导出。

---

演示预览

• 数字故障落地页：沉浸式主页视图，展示符合标准的排版、CRT 扫描叠加层和实时状态读取。
• 交互式 AI 聊天机器人：位于右下角的对话机器人，可动态更新布局状态并播放语音反馈。
• Bento 网格布局：整洁、高密度的仪表板布局，展示技能、时间线和证书。

托管说明：
该项目已上线并托管在 Vercel 上的 franzdomingo.dev。请注意，此代码库本身就是作品集项目；您当前正在查看和运行的就是这同一个项目。