feat: Add project detail page with animated hero section, dynamic gallery, and image modal.

Author: eddndev

resources/js/project-gallery.js

@@ -1,5 +1,8 @@
-// 1. Importa GSAP al inicio del archivo. Ahora tienes acceso a él.
+// 1. Importa GSAP y ScrollTrigger.
 import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
 
 // 2. Envolvemos toda la lógica en un listener para que se ejecute cuando el DOM esté listo.
 document.addEventListener('DOMContentLoaded', function () {
@@ -13,10 +16,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
     const loader = document.getElementById('gallery-loader');
 
-    // 4. Obtenemos la URL de la API desde un atributo de datos que añadiremos en la vista Blade.
+    // 4. Obtenemos la URL de la API desde un atributo de datos.
     const galleryUrl = galleryContainer.dataset.galleryUrl;
     if (!galleryUrl) {
-        // Puede pasar si el proyecto no está guardado aún o no tiene galería asignada.
         console.warn('Galería detectada pero sin URL de datos. Omitiendo carga.');
         if(loader) loader.style.display = 'none';
         return;
@@ -25,13 +27,12 @@ document.addEventListener('DOMContentLoaded', function () {
     // --- Lógica de Renderizado con Animación ---
     const buildFullGallery = async () => {
         try {
-            // 5. Usamos la URL que obtuvimos del atributo de datos.
             const response = await fetch(galleryUrl);
             if (!response.ok) throw new Error(`HTTP error!`);
             const images = await response.json();
 
             if (!images || images.length === 0) {
-                loader.innerHTML = '<p class="text-on-surface/60">Esta galería no tiene imágenes.</p>';
+                if(loader) loader.innerHTML = '<p class="text-on-surface/60">Esta galería no tiene imágenes.</p>';
                 return;
             }
 
@@ -40,7 +41,8 @@ document.addEventListener('DOMContentLoaded', function () {
             images.forEach(image => {
                 const link = document.createElement('a');
                 link.href = image.src_full;
-                link.className = 'gallery-item block mb-4 opacity-0'; 
+                // Añadimos translate-y-4 para que la animación tenga desde dónde subir
+                link.className = 'gallery-item block mb-4 opacity-0 translate-y-4'; 
 
                 const placeholder = document.createElement('div');
                 placeholder.className = 'gallery-item-placeholder w-full overflow-hidden';
@@ -73,20 +75,26 @@ document.addEventListener('DOMContentLoaded', function () {
 
             galleryContainer.appendChild(fragment);
 
+            // Disparamos evento custom por si alguien escucha
             window.dispatchEvent(new CustomEvent('gallery-ready'));
 
-            // GSAP ahora funciona porque fue importado al inicio del archivo.
+            // Animación con ScrollTrigger
             gsap.to('.gallery-item', {
                 opacity: 1,
                 y: 0,
                 duration: 0.8,
-                ease: 'power3.out',
-                stagger: 0.05,
+                ease: 'power2.out',
+                stagger: 0.08,
+                scrollTrigger: {
+                    trigger: "#gallery-container",
+                    start: "top 85%", // Inicia cuando el top del contenedor está al 85% del viewport
+                    toggleActions: "play none none none"
+                }
             });
 
         } catch (error) {
             console.error('Error al construir la galería:', error);
-            loader.innerHTML = '<p class="text-red-500">Error al cargar la galería.</p>';
+            if(loader) loader.innerHTML = '<p class="text-red-500">Error al cargar la galería.</p>';
         }
     };
 

resources/views/pages/projects/show.blade.php

@@ -123,7 +123,7 @@ class="font-teko text-7xl md:text-9xl lg:text-[10rem] text-white uppercase leadi
     {{-- 2. SECCIÓN GALERÍA (sin cambios en su estructura) --}}
     <div class="bg-surface text-on-surface">
         <div class="container mx-auto py-16 px-4">
-            <div id="gallery-container" class="columns-2 md:columns-3 gap-4"></div>
+            <div id="gallery-container" data-gallery-url="{{ route('projects.gallery', $project) }}" class="columns-2 md:columns-3 gap-4"></div>
         </div>
     </div>
 
@@ -316,98 +316,10 @@ function runCluster() {
     runCluster();
     }
 
-
-  // ---------- GALERÍA ----------
-  async function buildFullGallery() {
-    if (!galleryContainer) return;
-    try {
-      const res = await fetch(`{{ route('projects.gallery', $project) }}`);
-      if (!res.ok) throw new Error('HTTP ' + res.status);
-      const images = await res.json();
-      if (!images?.length) {
-        galleryContainer.innerHTML = '<p class="text-on-surface/60">Esta galería no tiene imágenes.</p>';
-        return;
-      }
-      const frag = document.createDocumentFragment();
-      images.forEach(img => {
-        const a  = document.createElement('a');
-        a.href   = img.src_full;
-        a.className = 'gallery-item block mb-4 opacity-0 translate-y-4';
-
-        const ph = document.createElement('div');
-        ph.className = 'gallery-item-placeholder w-full overflow-hidden';
-        if (img.height > 0) ph.style.aspectRatio = `${img.width} / ${img.height}`;
-
-        const picture = document.createElement('picture');
-        picture.innerHTML = `
-          <source type="image/avif" srcset="${img.srcset_avif}" sizes="(max-width: 768px) 50vw, 33vw">
-          <source type="image/webp" srcset="${img.srcset_webp}" sizes="(max-width: 768px) 50vw, 33vw">
-          <img src="${img.src_fallback}" alt="${img.alt}" loading="lazy" decoding="async"
-               class="w-full h-full object-cover opacity-0 transition-opacity duration-500">
-        `;
-        const imgEl = picture.querySelector('img');
-        imgEl.onload = () => imgEl.classList.remove('opacity-0');
-        imgEl.onerror = () => {
-          imgEl.onerror = null;
-          imgEl.classList.remove('opacity-0');
-          imgEl.style.backgroundColor = '#e5e7eb';
-          imgEl.style.minHeight = '200px';
-        };
-
-        ph.appendChild(picture);
-        a.appendChild(ph);
-        frag.appendChild(a);
-      });
-      galleryContainer.appendChild(frag);
-    } catch (err) {
-      console.error('Galería:', err);
-    }
-  }
-
-  function setupGalleryAnimation() {
-    if (!galleryContainer) return;
-    gsap.to('.gallery-item', {
-      opacity: 1, y: 0, duration: 0.8, ease: 'power2.out', stagger: 0.08,
-      scrollTrigger: {
-        trigger: "#gallery-container",
-        start: "top 85%",
-        toggleActions: "play none none none"
-      }
-    });
-  }
-
-  // ---------- MODAL ----------
-  function setupModal() {
-    const modal = document.getElementById('image-modal');
-    if (!modal) return;
-    const modalImage = document.getElementById('modal-image');
-    const modalCloseButton = document.getElementById('modal-close-button');
-
-    const openModal = (url) => {
-      modalImage.src = url;
-      modal.classList.remove('opacity-0', 'pointer-events-none');
-      document.body.style.overflow = 'hidden';
-    };
-    const closeModal = () => {
-      modal.classList.add('opacity-0', 'pointer-events-none');
-      document.body.style.overflow = '';
-    };
-
-    galleryContainer?.addEventListener('click', e => {
-      const link = e.target.closest('a.gallery-item');
-      if (link) { e.preventDefault(); openModal(link.href); }
-    });
-    modalCloseButton.addEventListener('click', closeModal);
-    modal.addEventListener('click', e => e.target === modal && closeModal());
-    document.addEventListener('keydown', e => e.key === 'Escape' && closeModal());
-  }
-
-  // ---------- RUN ----------
+  // ---------- RUN HERO ANIMATIONS ----------
   splitTitle();
   applyInitialFonts();
   playHeroTL();
-  setupModal();
-  buildFullGallery().then(setupGalleryAnimation);
 });
 </script>