LandingEl problema
En fotografía la web es el portafolio: si las imágenes cargan lentas o el sitio se siente genérico, el cliente asume que el trabajo también lo es. El desafío era que la propia landing transmitiera calidad visual.
La solución
Un recorrido guiado por scroll donde cada sección revela el trabajo de forma progresiva: reveal de texto sincronizado con la aparición de las fotos, galería con carga diferida y un cierre directo hacia el contacto.
Arquitectura técnica
Next.js App Router para SSR y SEO optimizado
GSAP + ScrollTrigger para las animaciones de scroll
CSS Variables para un theming consistente
Componentes reutilizables por sección
Desafíos y soluciones
ScrollTrigger en Next.js
El SSR de Next.js obliga a inicializar GSAP solo en el cliente, con useEffect y un ScrollTrigger.refresh() una vez que las imágenes definen la altura real de la página.
Peso de las imágenes
Una galería de fotografía es pesada por definición. Ajustar formatos, tamaños y carga diferida fue lo que permitió mantener la fluidez del scroll.
Stack utilizado
Next.js
GSAP
TypeScript