snikhilesh's picture
need more latest graphics and animations, I want this to be rich and professional
6943658 verified
// Initialize animations
document.addEventListener('DOMContentLoaded', function() {
// GSAP animations
gsap.registerPlugin(ScrollTrigger);
// Animate sections on scroll
gsap.utils.toArray('section').forEach(section => {
gsap.from(section, {
scrollTrigger: {
trigger: section,
start: "top 80%",
toggleActions: "play none none none"
},
y: 50,
opacity: 0,
duration: 1,
ease: "power3.out"
});
});
// Animate skill tags
gsap.utils.toArray('.bg-gray-100').forEach((tag, i) => {
gsap.from(tag, {
scrollTrigger: {
trigger: tag,
start: "top 90%",
toggleActions: "play none none none"
},
scale: 0,
opacity: 0,
duration: 0.5,
delay: i * 0.05,
ease: "back.out"
});
});
// Form submission handler
const contactForm = document.querySelector('form');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Get form values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const subject = document.getElementById('subject').value;
const message = document.getElementById('message').value;
// Simple validation
if (!name || !email || !message) {
alert('Please fill in all required fields');
return;
}
// In a real application, you would send this data to a server
console.log('Form submitted:', { name, email, subject, message });
alert('Thank you for your message! I will get back to you soon.');
contactForm.reset();
});
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});