Plexi09/plexi09.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated visual look

Browse source
This commit is contained in:
Plexi09 2026-02-23 00:36:21 +01:00
parent 91936e441f
commit c965168ef2
Signed by: Plexi09
GPG key ID: 20D439A69163544A
3 changed files with 471 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

71
js/main.js
View file

@ -210,14 +210,17 @@ document.addEventListener('DOMContentLoaded', () => {
gsap.utils.toArray('.cv-column').forEach(col => {
const items = col.querySelectorAll('.group');
if (!items.length) return;
gsap.from(items, {
scrollTrigger: { trigger: col, start: 'top 82%' },
y: 40,
opacity: 0,
duration: 0.85,
stagger: 0.18,
ease: 'power3.out',
});
gsap.fromTo(items,
{ y: 40, opacity: 0 },
{
scrollTrigger: { trigger: col, start: 'top 90%', toggleActions: 'play none none none' },
y: 0,
opacity: 1,
duration: 0.85,
stagger: 0.18,
ease: 'power3.out',
}
);
});
// ── 11. PARALLAX IMAGES ───────────────────────────────────────────
@ -273,4 +276,56 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
// ── 14. MAGNETIC BUTTON EFFECT ─────────────────────────────────────
if (window.innerWidth >= 768) {
document.querySelectorAll('.magnetic-btn').forEach(btn => {
btn.addEventListener('mousemove', (e) => {
const rect = btn.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
gsap.to(btn, { x: x * 0.3, y: y * 0.3, duration: 0.4, ease: 'power2.out' });
});
btn.addEventListener('mouseleave', () => {
gsap.to(btn, { x: 0, y: 0, duration: 0.7, ease: 'elastic.out(1, 0.3)' });
});
});
}
// ── 15. SKILL ITEMS STAGGER ANIMATION ──────────────────────────────
const skillItems = document.querySelectorAll('.skill-item');
if (skillItems.length) {
gsap.from(skillItems, {
scrollTrigger: { trigger: skillItems[0].parentElement, start: 'top 85%' },
scale: 0.8,
opacity: 0,
duration: 0.6,
stagger: 0.06,
ease: 'back.out(1.7)',
});
}
// ── 16. PROJECT CARDS ANIMATION ────────────────────────────────────
gsap.utils.toArray('.project-card').forEach(card => {
gsap.from(card, {
scrollTrigger: { trigger: card, start: 'top 85%' },
y: 60,
opacity: 0,
duration: 1,
ease: 'power3.out',
});
});
// ── 17. CONTACT SECTION ANIMATION ──────────────────────────────────
const contactSection = document.getElementById('contact');
if (contactSection) {
gsap.from(contactSection.querySelectorAll('.social-link'), {
scrollTrigger: { trigger: contactSection, start: 'top 70%' },
scale: 0,
opacity: 0,
duration: 0.6,
stagger: 0.1,
ease: 'back.out(1.7)',
});
}
});