Portafolio: Eldora Animado

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

ENLACE DE DEMOSTRACIÓN

Resumen

• Rol: Desarrollo Full-Stack y Diseño UI/UX
• Tecnologías: Next.js 14, React Three Fiber, Eldora UI, GSAP, Tailwind CSS
• Resultado Clave: Entrega exitosa de un portafolio 3D interactivo y altamente inmersivo
• Resumen: 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.

El Problema

• Desafío: El desafío fue manipular el DOM e integrar elementos 3D sin problemas, especialmente en comparación con el portafolio anterior "glass" v1 que tenía un concepto más establecido.
• Audiencia: Construido para Prince Jeruh Reyes para apoyar su próxima pasantía y búsqueda de trabajo como estudiante.
• Restricciones: No hubo una fecha límite estricta, solo un proceso iterativo de agregar y refinar información.

Enfoque y Decisiones

• Arquitectura: Arquitectura Next.js 14 simple, centrada en el cliente.
• Decisiones Clave: Elegí React Three Fiber y GSAP principalmente por el deseo de probarlos y aprender sus capacidades en un escenario del mundo real.
• Compensaciones: Compensaciones minimizadas; el resultado final es un sitio web visualmente impresionante y altamente funcional en general.
• Flujo de Datos: Flujo de datos puramente estático/del lado del cliente sin un backend complejo.

Resultados e Impacto Clave

• Resultado: El cliente quedó muy satisfecho, afirmando que "se ve genial".
• Impacto: Proporciona una presencia en línea destacada y profesional para ayudar en su pasantía y búsqueda de trabajo en 2026.

Profundización Técnica

• Detalles Notables: Integré un cursor personalizado blobity y apliqué componentes animados de código abierto de Eldora UI.
• Verificación: Mantuve una base de código sencilla donde el contenido del sitio web se puede editar fácilmente en un solo archivo.
• Optimizaciones: Implementé toneladas de optimizaciones en el camino para equilibrar la riqueza visual con un rendimiento fluido en todos los dispositivos.
• Calidad del Código: Diseñé todas las secciones (Inicio, Acerca de, Trabajo, Herramientas, Contacto) con un tema oscuro y diseño totalmente responsivo.

Reflexiones

• Éxitos: Logré combinar eficazmente React Three Fiber con Next.js, logrando un resultado visual pulido y de alta calidad sin compromisos importantes.
• Lecciones: El proceso iterativo reforzó el valor de una estructura de proyecto flexible y fácil de editar.

Mis Contribuciones

• Personalización de Plantilla: Utilicé una plantilla preconstruida como base para el portafolio y personalicé la interfaz de usuario y el diseño para adaptarse a las necesidades específicas de Prince Jeruh Reyes.
• Integración de Contenido: Reemplacé el contenido de marcador de posición con datos reales del proyecto, ajustando la configuración y los detalles para reflejar con precisión el trabajo del cliente en todas las secciones.
• Ajustes Técnicos: Gestioné manipulaciones del DOM y modifiqué los elementos 3D existentes (React Three Fiber) y las animaciones de desplazamiento (GSAP) para alinearlos sin problemas con el nuevo flujo de contenido.

Arquitectura del Proyecto

El proyecto sigue una arquitectura del lado del cliente simple y directa.

• 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

• Sitio en Vivo: pjreyes.vercel.app
• Secciones Mostradas: Precargador, Inicio, Acerca de, Trabajo, Herramientas, Contacto, Pie de página
• Características Principales: Inicio interactivo 3D con Three.js, animaciones fluidas activadas por desplazamiento, cursor personalizado con efecto blobity, exhibición de proyectos con sección de Trabajo y un formulario de contacto en un diseño responsivo de tema oscuro.

Nota de Alojamiento:
El proyecto está actualmente desplegado y en vivo en Vercel en el enlace de demostración proporcionado.

Atribución:
Este proyecto fue construido usando la Plantilla de Portafolio de Eldora UI. Todo el crédito por el diseño original de la plantilla, los componentes y las configuraciones principales es para Eldora UI.