Spaces:
Running
Running
| document.addEventListener('DOMContentLoaded', () => { | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // GSAP Animations | |
| gsap.registerPlugin(ScrollTrigger); | |
| // Animate achievement cards on scroll | |
| gsap.utils.toArray('achievement-card').forEach(card => { | |
| gsap.from(card, { | |
| scrollTrigger: { | |
| trigger: card, | |
| start: "top 80%", | |
| toggleActions: "play none none none" | |
| }, | |
| y: 50, | |
| opacity: 0, | |
| duration: 0.8, | |
| ease: "power2.out" | |
| }); | |
| }); | |
| // Hero section animation | |
| gsap.from(".hero-content", { | |
| duration: 1.5, | |
| y: 50, | |
| opacity: 0, | |
| ease: "power3.out" | |
| }); | |
| // Skill bars animation | |
| gsap.utils.toArray(".skill-bar").forEach(bar => { | |
| const width = bar.getAttribute("data-width"); | |
| gsap.fromTo(bar, | |
| { width: "0%" }, | |
| { | |
| width: width, | |
| scrollTrigger: { | |
| trigger: bar, | |
| start: "top 80%", | |
| toggleActions: "play none none none" | |
| }, | |
| duration: 1.5, | |
| ease: "power2.out" | |
| } | |
| ); | |
| }); | |
| // Tilt effect for cards | |
| document.querySelectorAll('.card').forEach(card => { | |
| card.addEventListener('mousemove', (e) => { | |
| const rect = card.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| const centerX = rect.width / 2; | |
| const centerY = rect.height / 2; | |
| const angleX = (y - centerY) / 20; | |
| const angleY = (centerX - x) / 20; | |
| card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg)`; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)'; | |
| }); | |
| }); | |
| }); |