¡Bienvenido al código fuente de mi portfolio interactivo! Este proyecto es una experiencia web inmersiva de scroll vertical, diseñada para tener una estética cinemática y un rendimiento excepcional utilizando renderizado en Canvas de alta definición.
- Secuencia de Renderizado en Canvas: En lugar de utilizar video o CSS puro, la web renderiza una secuencia de más de 500 fotogramas interpolados y precargados dinámicamente en un
<canvas>, sincronizando el fotograma exacto con la posición del scroll. - Smooth Scroll con Inercia: Impulsado por Lenis, garantizando un desplazamiento suave, fluido a 60/120Hz sin importar el dispositivo.
- Animación GSAP y ScrollTrigger: Para manejar las líneas de tiempo (
timelines) de la opacidad de los textos, el movimiento de la pantalla inicial y la coincidencia perfecta del scrub de las imágenes con el progreso del scroll. - Script de Post-procesado en HD: El proyecto incluye
optimizar_fotos.js, un script programado en Node.js (consharp) para convertir los frames base en imágenes re-escaladas a 1080p usando el algoritmo Lanczos3, aplicando también una ligera máscara de enfoque (HDR falso) y corrigiendo colores antes del montaje en la web, aliviando la carga en el navegador del cliente.
- HTML5 / CSS3: Diseño responsive, Flexbox, variables CSS y tipografías fluidas.
- JavaScript (Vanilla): Lógica principal del canvas y cálculos para evitar el subpixel blurring.
- GSAP & ScrollTrigger: Motor de animación central.
- Lenis: Control de inercia y experiencia de usuario.
- Node.js & Sharp: (Herramienta interna de optimización de frames).
Si quieres probar la web de manera local:
- Clona el repositorio:
git clone https://github.com/Guillear14/tu-repositorio-portfolio.git
- Abre el archivo
index.htmldirectamente en cualquier navegador moderno. (No se requiere servidor de Node.js en vivo para visualizar el HTML estático).
Si necesitas procesar los frames de nuevo (las imágenes crudas), sitúalos en una carpeta llamada fotos y ejecuta:
npm install
node optimizar_fotos.jsExplora el resto de mis proyectos directamente en mi GitHub principal:
👉 YouTube: guilleton yt a
Desarrollado y diseñado por Guillear14 © 2026