Spaces:
Running
Running
File size: 2,025 Bytes
475ae38 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 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)';
});
});
}); |