Eldora 动画作品集

3D 作品集 / Next.js / React Three Fiber / Eldora UI

一句话摘要： 使用 Next.js 14、React Three Fiber、Eldora UI 组件和 GSAP 为 Prince Jeruh Reyes 构建的动画 3D 作品集网站 —— 具有沉浸式 3D 场景、blobity 光标效果和流畅的页面过渡。

在线站点：pjreyes.vercel.app

---

功能特点

• 使用 React Three Fiber、Drei 和 Rapier 物理引擎的 3D 交互场景
• 用于沉浸式导航的 Blobity 自定义光标
• 页面进入时的预加载动画
• 动画板块：首页、关于、作品、工具、联系方式
• GSAP 驱动的滚动触发动画
• 用于 UI 过渡的 Framer Motion
• 带有自定义样式的深色主题
• 完全响应式设计

---

我的贡献（角色与职责）

全栈开发：

• 使用 Next.js 14 从头开始构建了整个作品集网站
• 集成了 React Three Fiber 用于 3D 场景和交互元素
• 实现了 blobity 自定义光标系统
• 创建了预加载动画以实现流畅的进入体验

UI/UX 设计：

• 设计了所有板块：首页、关于、作品、工具、联系方式、页脚
• 应用了 Eldora UI 开源动画组件
• 实现了 GSAP 滚动触发动画用于板块展示

动画制作：

• 使用 Three.js/Drei 进行 3D 对象渲染
• 用于基于滚动的展示的 GSAP 时间线动画
• 用于组件级过渡的 Framer Motion
• 使用 Kinet 和 Leva 微调动画参数

---

面临的挑战

• 3D 性能： 在不同设备上平衡视觉丰富度与流畅性能需要优化 Three.js 场景
• 自定义光标集成： 使 blobity 光标与 3D 画布元素无缝协作
• 动画协调： 同步 GSAP 滚动动画与 Framer Motion 组件过渡，避免冲突
• 响应式 3D： 确保 3D 场景在移动设备上外观良好且性能出色

---

项目架构

• 框架： Next.js 14 App Router
• 3D 引擎： React Three Fiber, Drei, Rapier
• 动画： GSAP, Framer Motion, Kinet
• UI： Tailwind CSS, FontAwesome 图标, React Icons
• 光标： Blobity 自定义光标
• 工具： Leva (调试面板), Meshline (3D 线条)
• 部署： Vercel

---

演示预览

• 在线站点： pjreyes.vercel.app
• 平台视图： Web（响应式）
• 板块： 预加载、首页、关于、作品、工具、联系方式、页脚
• 功能展示：
  • 使用 Three.js 的 3D 交互首页
  • 流畅的滚动触发动画
  • 具有 blobity 效果的自定义光标
  • 作品板块展示项目
  • 联系表单
  • 深色主题响应式布局

---

开发资源

• 指南/文档：
  • Next.js, React Three Fiber, GSAP, Framer Motion 文档
  • Eldora UI 组件库 (eldoraui.site)

---

如果您需要进一步了解，请直接联系作者。