// Main JavaScript functionality document.addEventListener('DOMContentLoaded', function() { // Smooth scrolling for navigation links const navLinks = document.querySelectorAll('nav a[href^="#"]'); navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Navbar scroll effect const navbar = document.getElementById('navbar'); if (navbar) { window.addEventListener('scroll', function() { if (window.scrollY > 50) { navbar.style.background = 'rgba(0, 0, 0, 0.98)'; } else { navbar.style.background = 'rgba(0, 0, 0, 0.95)'; } }); } // Contact form handling const contactForm = document.getElementById('contact-form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(this); const data = { name: formData.get('name'), email: formData.get('email'), message: formData.get('message') }; // Simple validation if (!data.name || !data.email || !data.message) { alert('Please fill in all fields'); return; } // Here you would typically send the data to a server console.log('Form submitted:', data); alert('Thank you for your message! I will get back to you soon.'); // Reset form this.reset(); }); } // Add scroll-based animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe sections for scroll animations const sections = document.querySelectorAll('section'); sections.forEach(section => { section.style.opacity = '0'; section.style.transform = 'translateY(20px)'; section.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(section); }); // Hero section is always visible const heroSection = document.getElementById('hero'); if (heroSection) { heroSection.style.opacity = '1'; heroSection.style.transform = 'translateY(0)'; } });