nextgen-devfolio / script.js
AmanitaEnjoyer's picture
Create a NextJS web developer portfolio. Style - modern, minimalistic. Focus on the main hero section of the landing page to look well, some inspiration can be Vercel for the style
2e41dd0 verified
Raw
History Blame Contribute Delete
1.76 kB
// Smooth scroll 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 - 100,
behavior: 'smooth'
});
}
});
});
// Form submission handler
const contactForm = document.querySelector('form');
if (contactForm) {
contactForm.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(contactForm);
const data = Object.fromEntries(formData);
try {
// Here you would typically send the data to your backend
console.log('Form submitted:', data);
// Show success message
alert('Thank you for your message! I will get back to you soon.');
contactForm.reset();
} catch (error) {
console.error('Error submitting form:', error);
alert('There was an error sending your message. Please try again later.');
}
});
}
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fadeIn');
}
});
}, observerOptions);
document.querySelectorAll('[data-observe]').forEach(el => {
observer.observe(el);
});