作品集: Eldora 动画

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

演示链接

概述

• 角色：全栈开发与 UI/UX 设计
• 技术栈：Next.js 14、React Three Fiber、Eldora UI、GSAP、Tailwind CSS
• 关键结果：成功交付了一个高度沉浸式、交互式的 3D 作品集
• 摘要：使用 Next.js 14、React Three Fiber、Eldora UI 组件和 GSAP 为 Prince Jeruh Reyes 构建的动画 3D 作品集网站，具有沉浸式的 3D 场景、blobity 光标效果和平滑的页面过渡。

挑战与问题

• 挑战：挑战在于操作 DOM 并无缝集成 3D 元素，特别是与之前拥有更成熟概念的 v1 "glass" 作品集相比。
• 受众：为 Prince Jeruh Reyes 制作，以支持他作为学生即将到来的实习和求职。
• 限制：没有严格的截止日期，只是一个不断添加和完善信息的迭代过程。

方法与决策

• 架构：简单、以客户端为中心的 Next.js 14 架构。
• 关键决策：选择 React Three Fiber 和 GSAP 主要是出于想在真实场景中尝试并学习它们的功能。
• 权衡：最小化了权衡；最终结果是一个视觉上令人印象深刻且整体功能强大的网站。
• 数据流：纯静态/客户端数据流，没有复杂的后端。

关键成果与影响

• 成果：客户非常满意，表示“看起来很棒”。
• 影响：提供了一个出色的、专业的在线形象，以帮助他完成 2026 年的实习和求职。

技术深入

• 值得注意的细节：集成了 blobity 自定义光标并应用了 Eldora UI 开源动画组件。
• 代码维护：维护了一个简单的代码库，可以在一个文件中轻松编辑网站内容。
• 优化：在此过程中实施了大量优化，以平衡视觉丰富度与各种设备上的流畅性能。
• 代码质量：使用深色主题和完全响应式布局设计了所有部分（英雄、关于、工作、工具、联系人）。

思考

• 成功之处：成功地将 React Three Fiber 与 Next.js 结合起来，实现了高质量、精美的视觉效果，而没有做出重大妥协。
• 经验教训：迭代过程巩固了灵活、易于编辑的项目结构的价值。

---

我的贡献

• 模板定制：利用预先构建的模板作为作品集的基础，并定制了 UI 和布局以满足 Prince Jeruh Reyes 的特定需求。
• 内容整合：将占位符内容替换为真实的项目数据，调整配置和细节，以在各个部分准确反映客户的工作。
• 技术调整：管理 DOM 操作并调整现有的 3D 元素 (React Three Fiber) 和滚动动画 (GSAP)，使其与新的内容流顺畅对齐。

---

项目架构

该项目遵循简单直接的客户端架构。

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

---

演示预览

• 实时网站：pjreyes.vercel.app
• 展示部分：预加载器、英雄、关于、工作、工具、联系人、页脚
• 核心功能：使用 Three.js 的 3D 互动英雄、平滑的滚动触发动画、带有 blobity 效果的自定义光标、带有工作部分的项目展示，以及在深色主题响应式布局上的联系表单。

托管说明：
该项目目前已在 Vercel 部署并在提供的演示链接上上线。

---

版权归属：
此项目使用 Eldora UI 作品集模板 构建。原始模板设计、组件和核心配置的全部版权归 Eldora UI 所有。