100% finis

script.js

@@ -1,8 +1,248 @@
+AOS.init({
+  duration: 1000,
+  once: true,
+  offset: 100
+});
+
+window.addEventListener('load', function() {
+  const loadingScreen = document.getElementById('loading');
+  setTimeout(() => {
+    loadingScreen.style.opacity = '0';
+    loadingScreen.style.visibility = 'hidden';
+    document.body.style.overflow = 'auto';
+  }, 1000);
+});
+
 const links = document.querySelectorAll('a.nav-link, .navbar-brand');
 links.forEach(link => {
-  link.addEventListener('click', function(e){
+  link.addEventListener('click', function(e) {
     e.preventDefault();
     const target = document.querySelector(this.getAttribute('href'));
-    target.scrollIntoView({behavior:'smooth'});
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth' });
+      const navbarToggler = document.querySelector('.navbar-toggler');
+      const navbarCollapse = document.querySelector('.navbar-collapse');
+      if (navbarCollapse.classList.contains('show')) {
+        navbarToggler.click();
+      }
+    }
   });
 });
+
+window.addEventListener('scroll', function() {
+  const navbar = document.querySelector('.navbar');
+  const backToTop = document.getElementById('backToTop');
+  
+  if (window.scrollY > 50) {
+    navbar.classList.add('scrolled');
+  } else {
+    navbar.classList.remove('scrolled');
+  }
+  
+  if (window.scrollY > 300) {
+    backToTop.classList.add('show');
+  } else {
+    backToTop.classList.remove('show');
+  }
+});
+
+document.getElementById('backToTop').addEventListener('click', function() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
+function typeWriter(element, text, speed = 100) {
+  let i = 0;
+  element.innerHTML = '';
+  
+  function type() {
+    if (i < text.length) {
+      element.innerHTML += text.charAt(i);
+      i++;
+      setTimeout(type, speed);
+    } else {
+      setTimeout(() => {
+        deleteText(element, text, speed);
+      }, 2000);
+    }
+  }
+  
+  function deleteText(el, txt, spd) {
+    let j = txt.length;
+    
+    function del() {
+      if (j > 0) {
+        el.innerHTML = txt.substring(0, j - 1);
+        j--;
+        setTimeout(del, spd / 2);
+      } else {
+        setTimeout(() => {
+          typeWriter(element, texts[(textIndex + 1) % texts.length]);
+        }, 500);
+      }
+    }
+    
+    del();
+  }
+  
+  type();
+}
+
+const texts = ["Apon", "APON", "Passionné"];
+let textIndex = 0;
+
+document.addEventListener('DOMContentLoaded', function() {
+  const typingElement = document.querySelector('.typing-text');
+  if (typingElement) {
+    typeWriter(typingElement, texts[0]);
+  }
+  
+  const skillBars = document.querySelectorAll('.progress-bar');
+  const skillObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const bar = entry.target;
+        const width = bar.style.width;
+        bar.style.width = '0';
+        
+        setTimeout(() => {
+          bar.style.width = width;
+          bar.style.transition = 'width 1.5s ease-in-out';
+        }, 300);
+        
+        skillObserver.unobserve(bar);
+      }
+    });
+  }, { threshold: 0.5 });
+  
+  skillBars.forEach(bar => {
+    skillObserver.observe(bar);
+  });
+  
+  const projectCards = document.querySelectorAll('.project-card');
+  projectCards.forEach(card => {
+    card.addEventListener('mouseenter', function() {
+      this.style.transform = 'translateY(-15px) scale(1.02)';
+    });
+    
+    card.addEventListener('mouseleave', function() {
+      this.style.transform = 'translateY(0) scale(1)';
+    });
+  });
+  
+  const contactForm = document.getElementById('contactForm');
+  if (contactForm) {
+    contactForm.addEventListener('submit', function(e) {
+      e.preventDefault();
+      
+      const inputs = this.querySelectorAll('input, textarea');
+      let isValid = true;
+      
+      inputs.forEach(input => {
+        if (!input.value.trim()) {
+          isValid = false;
+          input.style.borderColor = 'red';
+        } else {
+          input.style.borderColor = '#e0e0e0';
+        }
+      });
+      
+      if (isValid) {
+        alert('Message envoyé avec succès !');
+        this.reset();
+      } else {
+        alert('Veuillez remplir tous les champs.');
+      }
+    });
+  }
+  
+  const buttons = document.querySelectorAll('.btn-custom, .btn-outline-custom, .btn-project');
+  buttons.forEach(button => {
+    button.addEventListener('click', function(e) {
+      const ripple = document.createElement('span');
+      const rect = this.getBoundingClientRect();
+      const size = Math.max(rect.width, rect.height);
+      const x = e.clientX - rect.left - size / 2;
+      const y = e.clientY - rect.top - size / 2;
+      
+      ripple.style.width = ripple.style.height = size + 'px';
+      ripple.style.left = x + 'px';
+      ripple.style.top = y + 'px';
+      ripple.classList.add('ripple');
+      
+      this.appendChild(ripple);
+      
+      setTimeout(() => {
+        ripple.remove();
+      }, 600);
+    });
+  });
+  
+  const yearElement = document.querySelector('footer p');
+  if (yearElement) {
+    const currentYear = new Date().getFullYear();
+    yearElement.innerHTML = `&copy; ${currentYear} Apon Portfolio. Tous droits réservés.`;
+  }
+  
+  window.addEventListener('scroll', function() {
+    const scrolled = window.pageYOffset;
+    const hero = document.getElementById('hero');
+    if (hero) {
+      hero.style.backgroundPositionY = -(scrolled * 0.5) + 'px';
+    }
+  });
+  
+  const style = document.createElement('style');
+  style.textContent = `
+    .ripple {
+      position: absolute;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.6);
+      transform: scale(0);
+      animation: ripple-animation 0.6s linear;
+    }
+    
+    @keyframes ripple-animation {
+      to {
+        transform: scale(4);
+        opacity: 0;
+      }
+    }
+    
+    .btn-custom, .btn-outline-custom, .btn-project {
+      position: relative;
+      overflow: hidden;
+    }
+  `;
+  document.head.appendChild(style);
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+  const skillItems = document.querySelectorAll('.skill-item');
+  
+  skillItems.forEach(item => {
+    item.addEventListener('mouseenter', function() {
+      this.style.transform = 'scale(1.05)';
+      this.style.transition = 'transform 0.3s ease';
+    });
+    
+    item.addEventListener('mouseleave', function() {
+      this.style.transform = 'scale(1)';
+    });
+  });
+});
+
+function createParticles() {
+  const hero = document.getElementById('hero');
+  if (!hero) return;
+  
+  for (let i = 0; i < 20; i++) {
+    const particle = document.createElement('div');
+    particle.classList.add('particle');
+    particle.style.left = Math.random() * 100 + 'vw';
+    particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
+    particle.style.animationDelay = Math.random() * 5 + 's';
+    hero.appendChild(particle);
+  }
+}
+
+window.addEventListener('load', createParticles);