document.addEventListener('DOMContentLoaded', function() { // Mobile menu toggle const menuToggle = document.getElementById('menu-toggle'); const mobileMenu = document.getElementById('mobile-menu'); menuToggle.addEventListener('click', function() { mobileMenu.classList.toggle('hidden'); const icon = menuToggle.querySelector('svg'); if (mobileMenu.classList.contains('hidden')) { feather.replace(); } else { icon.setAttribute('data-feather', 'x'); feather.replace(); } }); // Close mobile menu when clicking a link const mobileLinks = mobileMenu.querySelectorAll('a'); mobileLinks.forEach(link => { link.addEventListener('click', function() { mobileMenu.classList.add('hidden'); menuToggle.querySelector('svg').setAttribute('data-feather', 'menu'); feather.replace(); }); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Add shadow to navbar on scroll window.addEventListener('scroll', function() { const nav = document.querySelector('nav'); if (window.scrollY > 50) { nav.classList.add('shadow-xl'); } else { nav.classList.remove('shadow-xl'); } }); // Floating music player interaction const musicPlayer = document.querySelector('.fixed.bottom-6.right-6'); if (musicPlayer) { musicPlayer.addEventListener('click', function() { alert("🎶 Custom workshop playlist loading... Imagine the perfect coding beats here!"); }); } // Animate elements when they come into view const animateOnScroll = function() { const elements = document.querySelectorAll('.bg-gradient-to-br'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.classList.add('opacity-100', 'translate-y-0'); element.classList.remove('opacity-0', 'translate-y-10'); } }); }; // Set initial state for animation document.querySelectorAll('.bg-gradient-to-br').forEach(element => { element.classList.add('transition-all', 'duration-500', 'ease-out', 'opacity-0', 'translate-y-10'); }); window.addEventListener('scroll', animateOnScroll); animateOnScroll(); // Run once on load });