3D 作品集网站

原始作品集 / 3D 交互式 Web / 存档展示

一句话总结： 一个全响应式的个人作品集网站，具有高视觉冲击力的 3D 落地卡片、高级 UI 效果和交互元素。使用现代 Web 技术从头开始构建，以展示技术和设计能力。

开发时长：2025 年 6 月

备注：

• 托管/代码可用性免责声明： 作为展示项目存档。可根据要求提供源代码。更新、优化后的作品集现已在 archivedportfolio.franzdomingo.tech 上线。
• 联系获取更多信息或演示： 通过 franzdomingo.tech 联系 Franz Phillip G. Domingo。
• 导航备注： 本页面记录了原始版本；当前作品集可通过上述链接访问。

---

功能特性

• 具有实时旋转和玻璃拟态效果的 3D 落地卡片
• 由 MDX 驱动的博客和项目内容
• 响应式、移动优先的布局
• 具有持久性的主题切换
• 具有变形过渡效果的高级模态系统
• 由 Framer Motion 驱动的动画和页面过渡
• 用于导航的命令面板 (CMD+K)
• 具有 localStorage 持久性的可拖拽 Dock 栏 UI
• 具有动画效果的磁性按钮
• 实时时钟和嵌入式 AI 聊天机器人
• 玻璃拟态、霓虹点缀、动画背景
• 自定义光标系统
• 启用 PWA、SEO 优化、可访问性优先
• 自定义错误边界

---

我的贡献（角色与职责）

设计与工程：

• 设计并实现了所有 UI/UX、3D 效果和交互功能。

动画与交互：

• 构建了自定义 Framer Motion 原语、磁性按钮、可拖拽 Dock 栏和命令面板。

性能与可访问性：

• 调整了动画，优化了 SEO，并确保了跨设备的可访问性。

内容层：

• 集成了 MDX，用于灵活的博客和项目创作。

技术文档：

• 记录了架构、挑战和技术亮点，以供未来参考。

---

面临的挑战

• MDX + App Router 集成： 在 Next.js 15 中手动设置内容加载器、动态路由和注水。

• Framer Motion 性能调优： 在动画流畅度与设备 GPU/CPU 限制之间取得平衡。

• iOS/Safari 渲染错误： 针对 Safari 中的 GPU 纹理伪影采用了有条件的变通方案。

• 跨浏览器布局一致性： 确保高级效果在各地渲染一致。

• 性能权衡： 繁重的动画导致资源占用较高，促使后来为了简单性和可访问性进行了重新设计。

---

项目架构

• 架构风格： 模块化 React 组件系统、原子化 CSS、MDX 内容层。

• 组件组织：

  • ui/, core/, motion-primitives/: 可复用的原子组件
  • 用于博客和项目的 MDX 内容
  • app/projects/, app/blog/ 下清晰的路由，以及动态 [slug] 路由

• 状态管理： 基于上下文的主题管理，localStorage 用于存储 Dock 栏/光标状态

• 集成技术： Framer Motion, Radix UI, Tailwind CSS, cmdk, embla-carousel, lucide-react

---

演示预览

• 截图/视频： 本页面记录了原始版本。如需在线演示，请访问 archivedportfolio.franzdomingo.tech。当前作品集也可在 archivedportfolio.franzdomingo.tech 访问。

• 平台视图： Web（响应式，移动优先）

• 展示功能：

  • 3D 落地卡片和交互式 UI
  • 动画过渡、模态框和背景
  • 命令面板、Dock 栏、磁性按钮
  • MDX 驱动的内容、实时时钟、嵌入式聊天机器人

• 演示说明： 访问 archivedportfolio.franzdomingo.tech 查看存档演示。有关最新作品集，请参阅 portfolio.franzdomingo.tech。

---

开发资源（可选）

• 指南/文档：
  • Framer Motion, Tailwind CSS, Radix UI, MDX 文档

---

如果您需要更多详情或想查看代码库，请直接联系作者。

---