document.addEventListener('DOMContentLoaded', function() { // Initialize Feather Icons if (typeof feather !== 'undefined') { feather.replace(); } // Add smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Add intersection observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate-fade-in-up'); } }); }, observerOptions); // Observe all elements that should animate on scroll document.querySelectorAll('.animate-on-scroll').forEach(el => { observer.observe(el); }); // Add floating particles effect function createParticles() { const particlesContainer = document.getElementById('particles'); if (!particlesContainer) return; // Clear existing particles particlesContainer.innerHTML = ''; for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); // Random position const left = Math.random() * 100; const top = Math.random() * 100; const size = Math.random() * 4 + 2; const duration = Math.random() * 4 + 6; const delay = Math.random() * 6; particle.style.cssText = ` position: absolute; width: ${size}px; height: ${size}px; background: rgba(245, 158, 11, ${Math.random() * 0.4 + 0.2}); border-radius: 50%; left: ${left}%; top: ${top}%; animation: float ${duration}s ease-in-out infinite; animation-delay: ${delay}s; pointer-events: none; `; particlesContainer.appendChild(particle); } } // Initialize particles createParticles(); // Update particles on resize let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(createParticles, 250); }); // Add parallax effect to floating elements document.addEventListener('mousemove', (e) => { const floatingElements = document.querySelectorAll('.animate-float'); const x = e.clientX / window.innerWidth; const y = e.clientY / window.innerHeight; floatingElements.forEach((el, index) => { const speed = (index + 1) * 10; const xOffset = (x - 0.5) * speed; const yOffset = (y - 0.5) * speed; el.style.transform = `translate(${xOffset}px, ${yOffset}px)`; }); }); // Email link tracking (optional - for analytics if needed) document.querySelectorAll('a[href^="mailto:"]').forEach(link => { link.addEventListener('click', function(e) { // You can add analytics tracking here if needed console.log('Email link clicked:', this.href); }); }); });