| document.addEventListener('DOMContentLoaded', () => { | |
| // Initialize animations | |
| const animatedElements = document.querySelectorAll('.animate-fade-in'); | |
| animatedElements.forEach((el, index) => { | |
| el.style.opacity = '0'; | |
| el.style.animationDelay = `${index * 0.1}s`; | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('[data-menu-toggle]'); | |
| const mobileMenu = document.querySelector('[data-menu]'); | |
| if (mobileMenuButton && mobileMenu) { | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| mobileMenuButton.querySelector('svg').setAttribute('data-feather', | |
| mobileMenu.classList.contains('hidden') ? 'menu' : 'x'); | |
| feather.replace(); | |
| }); | |
| } | |
| // 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' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Intersection Observer for scroll animations | |
| const observerOptions = { | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fade-in'); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.observe-me').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| }); |