document.addEventListener('DOMContentLoaded', function() { // 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) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); // Add animation classes when elements come into view const animateOnScroll = function() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementPosition < windowHeight - 100) { element.classList.add('animate-fade-in'); } }); }; // Initialize scroll animations window.addEventListener('scroll', animateOnScroll); animateOnScroll(); // Run once on page load // Contact form handling const contactForm = document.querySelector('#contact form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Form validation const name = this.querySelector('#name').value.trim(); const email = this.querySelector('#email').value.trim(); const message = this.querySelector('#message').value.trim(); if (!name || !email || !message) { alert('Please fill in all required fields.'); return; } // In a real application, you would send the form data to a server here console.log('Form submitted:', { name, email, message }); // Show success message alert('Thank you for your message! I will get back to you soon.'); this.reset(); }); } });