Vista previa en vivo: jihed-hagui.vercel.app

Eleva tu presencia digital

Olvídate de los sitios de portfolio genéricos y planos.

Una plantilla de portfolio cinematográfica e interactiva, creada para desarrolladores, diseñadores, tecnólogos creativos y artistas digitales que quieren que su trabajo se sienta como una experiencia.

Impulsada por Next.js 14, Three.js, React Three Fiber, GSAP y Lenis, combina 3D en tiempo real, movimiento inmersivo, sonido interactivo y transiciones cuidadosamente elaboradas en una experiencia digital inolvidable.

Creada para captar la atención, mostrar tu trabajo con impacto y causar esa primera impresión que te distingue.

Características principales

3D WebGL en tiempo real

Experiencias 3D interactivas con Three.js y React Three Fiber, con escenas personalizadas como la Calavera, el Caballo de ajedrez y El Pensador.

El renderizado optimizado mantiene la experiencia fluida y conserva la calidad visual de los entornos 3D.

Animaciones cinematográficas

GSAP ScrollTrigger, el desplazamiento suave de Lenis, Framer Motion, interacciones personalizadas de inspiración física, efectos de abanico de tarjetas y transiciones cinematográficas crean un portfolio que se siente vivo desde el primer desplazamiento hasta la última sección.

Paisaje sonoro inmersivo

Un sistema Web Audio integrado añade una capa atmosférica a la navegación.

La respuesta de audio interactiva y un diseño sonoro cuidadosamente integrado hacen que el portfolio se parezca más a una experiencia digital que a un sitio web tradicional.

Personalización sin esfuerzo

Diseñado para personalizarse sin pelearte con el código.

Actualiza tu información personal, proyectos, colores, enlaces y demás contenido sin alterar la arquitectura de base.

Formulario de contacto listo para usar

Integrado con Resend API para un envío fiable de los mensajes del formulario.

Conecta tus credenciales de correo y empieza a recibir consultas directamente desde tu portfolio.

Rendimiento adaptable

Creado pensando en el rendimiento tanto en escritorio como en móvil.

Ajustes 3D adaptativos, diseños responsivos, renderizado optimizado y controles de rendimiento según el dispositivo ayudan a que la experiencia sea fluida en distintos tamaños de pantalla.

Código limpio y bien comentado

Desarrollado íntegramente con TypeScript y organizado con una arquitectura modular y limpia.

El código está cuidadosamente comentado en todo el proyecto, lo que facilita entender cómo funcionan los distintos sistemas y dónde hacer cambios.

Sin claves de API expuestas. Sin complejidad innecesaria. Sin código desordenado.

Documentación completa

Se incluye un archivo README dedicado con el proyecto.

Cubre los pasos esenciales para instalar dependencias, configurar el proyecto, ejecutar el servidor de desarrollo, definir las variables de entorno y dejar el portfolio listo para su despliegue.

Tecnología

Framework
Next.js 14
React 18
TypeScript

3D
Three.js
React Three Fiber
@react-three/drei

Animación
GSAP
ScrollTrigger
Framer Motion
Lenis

Estilos
Tailwind CSS

Estado y audio
Zustand
Web Audio API

Correo
Resend API

Creado para

Desarrolladores creativos
Desarrolladores frontend
Desarrolladores full-stack
Artistas 3D
Diseñadores UI/UX
Directores creativos
Agencias digitales
Freelancers

Ya sea que muestres ingeniería, diseño, arte 3D, proyectos experimentales o desarrollo creativo, le da a tu trabajo el entorno visual que merece.

Configuración

Empezar solo requiere unos pocos pasos.

1. Descarga el código fuente.

2. Sigue el README incluido.

3. Instala las dependencias.

4. Configura tus variables de entorno.

5. Añade tu contenido personal.

6. Inicia el servidor de desarrollo.

7. Despliega tu portfolio.

La experiencia

No es otro portfolio construido en torno a una sección principal, una cuadrícula de proyectos y un botón de contacto.

Está diseñado a partir de una idea distinta:

El propio portfolio debería formar parte del trabajo.

Un entorno digital cinematográfico donde la tecnología, el movimiento, el sonido y la narrativa visual se unen para que tu trabajo sea imposible de ignorar.

No te limites a mostrar tu trabajo.
Crea una experiencia a su alrededor.