Initial commit

static/js/main.js

@@ -0,0 +1,130 @@
+/**
+ * Portfolio Alexandre — Scripts JS
+ * Filtres dynamiques, navigation mobile, lightbox
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  // ─── Navigation mobile ─────────────────────────────────────────────────
+  const navToggle = document.getElementById('navToggle');
+  const navLinks  = document.querySelector('.nav-links');
+
+  if (navToggle && navLinks) {
+    navToggle.addEventListener('click', () => {
+      navLinks.classList.toggle('open');
+    });
+    // Fermer le menu au clic sur un lien
+    navLinks.querySelectorAll('.nav-link').forEach(link => {
+      link.addEventListener('click', () => navLinks.classList.remove('open'));
+    });
+  }
+
+  // ─── Filtres dynamiques (page projets) ────────────────────────────────
+  const filterPills = document.querySelectorAll('.filter-pill:not(.pill-more)');
+
+  filterPills.forEach(pill => {
+    pill.addEventListener('click', () => {
+      const filterType  = pill.dataset.filter;   // 'category' ou 'tech'
+      const filterValue = pill.dataset.value;
+
+      // Mettre à jour l'input hidden correspondant
+      const inputId = filterType === 'category' ? 'categoryInput' : 'techInput';
+      const hiddenInput = document.getElementById(inputId);
+      if (hiddenInput) {
+        hiddenInput.value = filterValue;
+      }
+
+      // Mettre à jour l'apparence des pills du même groupe
+      const group = pill.closest('.filter-pills');
+      if (group) {
+        group.querySelectorAll('.filter-pill').forEach(p => p.classList.remove('active'));
+        pill.classList.add('active');
+      }
+
+      // Soumettre le formulaire automatiquement
+      const form = document.getElementById('filtersForm');
+      if (form) form.submit();
+    });
+  });
+
+  // ─── Smooth scroll pour ancres internes ───────────────────────────────
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', (e) => {
+      const targetId = anchor.getAttribute('href').slice(1);
+      const target   = document.getElementById(targetId);
+      if (target) {
+        e.preventDefault();
+        const navHeight = parseInt(
+          getComputedStyle(document.documentElement).getPropertyValue('--nav-height')
+        ) || 68;
+        const top = target.getBoundingClientRect().top + window.scrollY - navHeight - 16;
+        window.scrollTo({ top, behavior: 'smooth' });
+      }
+    });
+  });
+
+  // ─── Animation d'apparition des cartes ────────────────────────────────
+  const cards = document.querySelectorAll('.project-card');
+
+  if ('IntersectionObserver' in window) {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry, i) => {
+          if (entry.isIntersecting) {
+            setTimeout(() => {
+              entry.target.style.opacity    = '1';
+              entry.target.style.transform  = 'translateY(0)';
+            }, i * 80);
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    cards.forEach(card => {
+      card.style.opacity   = '0';
+      card.style.transform = 'translateY(20px)';
+      card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
+      observer.observe(card);
+    });
+  }
+
+  // ─── Navbar : réduire au scroll ───────────────────────────────────────
+  const navbar = document.querySelector('.navbar');
+  let lastScrollY = window.scrollY;
+
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 80) {
+      navbar?.classList.add('scrolled');
+    } else {
+      navbar?.classList.remove('scrolled');
+    }
+    lastScrollY = window.scrollY;
+  }, { passive: true });
+
+});
+
+// ─── Lightbox (fonctions globales appelées depuis HTML) ──────────────────
+function openLightbox(src) {
+  const lightbox  = document.getElementById('lightbox');
+  const lightboxImg = document.getElementById('lightboxImg');
+  if (lightbox && lightboxImg) {
+    lightboxImg.src = src;
+    lightbox.classList.add('open');
+    document.body.style.overflow = 'hidden';
+  }
+}
+
+function closeLightbox() {
+  const lightbox = document.getElementById('lightbox');
+  if (lightbox) {
+    lightbox.classList.remove('open');
+    document.body.style.overflow = '';
+  }
+}
+
+// Fermer la lightbox avec Échap
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeLightbox();
+});