| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| 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' |
| }); |
| } |
| }); |
| }); |
| |
| const handleMouseMove = (e) => { |
| const xAxis = (window.innerWidth / 2 - e.pageX) / 25; |
| const yAxis = (window.innerHeight / 2 - e.pageY) / 25; |
| document.querySelector('main').style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; |
| }; |
|
|
| |
| const animateOnScroll = () => { |
| const elements = document.querySelectorAll('.animate-on-scroll'); |
| |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const windowHeight = window.innerHeight; |
| |
| if (elementPosition < windowHeight - 100) { |
| const depth = element.dataset.depth || 0; |
| element.style.transform = `translateZ(${depth}px)`; |
| element.classList.add('animate-fadeInUp'); |
| } |
| }); |
| }; |
|
|
| |
| document.addEventListener('mousemove', handleMouseMove); |
| |
| window.addEventListener('load', animateOnScroll); |
| window.addEventListener('scroll', animateOnScroll); |
|
|
| |
| const contactForm = document.querySelector('form'); |
| if (contactForm) { |
| contactForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| |
| alert('Thank you for your message! I will get back to you soon.'); |
| this.reset(); |
| }); |
| } |
| }); |