// Portafolio Animado Eldora

Portafolio Animado Eldora

Portafolio 3D / Next.js / React Three Fiber / Eldora UI

Resumen de una línea: Un sitio web de portafolio 3D animado construido para Prince Jeruh Reyes utilizando Next.js 14, React Three Fiber, componentes de Eldora UI y GSAP, con escenas 3D inmersivas, efectos de cursor blobity y transiciones de página fluidas.

Sitio en vivo: pjreyes.vercel.app

Características

• Escenas interactivas 3D con React Three Fiber, Drei y física Rapier
• Cursor personalizado Blobity para una navegación inmersiva
• Animación de precarga al entrar en la página
• Secciones animadas: Inicio, Sobre mí, Trabajo, Herramientas, Contacto
• Animaciones activadas por desplazamiento (scroll-triggered) potenciadas por GSAP
• Framer Motion para transiciones de UI
• Tema oscuro con estilo personalizado
• Diseño totalmente responsivo

Mis Contribuciones (Rol y Responsabilidades)

Desarrollo Full-Stack:

• Construí todo el sitio web del portafolio desde cero usando Next.js 14
• Integré React Three Fiber para escenas 3D y elementos interactivos
• Implementé el sistema de cursor personalizado blobity
• Creé la animación de precarga para una experiencia de entrada fluida

Diseño de UI/UX:

• Diseñé todas las secciones: Inicio, Sobre mí, Trabajo, Herramientas, Contacto, Pie de página
• Apliqué componentes animados de código abierto de Eldora UI
• Implementé animaciones activadas por desplazamiento de GSAP para la revelación de secciones

Animaciones:

• Renderizado de objetos 3D con Three.js/Drei
• Animaciones de línea de tiempo de GSAP para revelaciones basadas en el desplazamiento
• Framer Motion para transiciones a nivel de componente
• Kinet y Leva para el ajuste fino de los parámetros de animación

Desafíos Enfrentados

• Rendimiento 3D: Equilibrar la riqueza visual con un rendimiento fluido en todos los dispositivos requirió optimizar las escenas de Three.js
• Integración de cursor personalizado: Hacer que el cursor blobity funcionara a la perfección con los elementos del lienzo 3D
• Coordinación de animaciones: Sincronizar las animaciones de desplazamiento de GSAP con las transiciones de componentes de Framer Motion sin conflictos
• 3D Responsivo: Asegurar que las escenas 3D se vean bien y funcionen correctamente en dispositivos móviles

Arquitectura del Proyecto

• Framework: Next.js 14 App Router
• Motor 3D: React Three Fiber, Drei, Rapier
• Animación: GSAP, Framer Motion, Kinet
• UI: Tailwind CSS, FontAwesome Icons, React Icons
• Cursor: Cursor personalizado Blobity
• Herramientas: Leva (panel de depuración), Meshline (líneas 3D)
• Despliegue: Vercel

Vista Previa de la Demo

• Sitio en vivo: pjreyes.vercel.app
• Vistas de Plataforma: Web (responsivo)
• Secciones: Precargador, Inicio, Sobre mí, Trabajo, Herramientas, Contacto, Pie de página
• Funcionalidad Mostrada:
  • Héroe interactivo 3D con Three.js
  • Animaciones fluidas activadas por desplazamiento
  • Cursor personalizado con efecto blobity
  • Muestra de proyectos con la sección de Trabajo
  • Formulario de contacto
  • Diseño responsivo con tema oscuro

Recursos de Desarrollo

• Guías/Docs:
  • Documentación de Next.js, React Three Fiber, GSAP, Framer Motion
  • Biblioteca de componentes Eldora UI (eldoraui.site)

Si necesita más detalles, póngase en contacto con el autor directamente.