334 lines
14 KiB
JavaScript
334 lines
14 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
// ── 1. LENIS SMOOTH SCROLL ────────────────────────────────────────
|
|
const lenis = new Lenis({
|
|
duration: 1.2,
|
|
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
|
smooth: true,
|
|
mouseMultiplier: 1,
|
|
smoothTouch: false,
|
|
touchMultiplier: 2,
|
|
});
|
|
|
|
function raf(time) {
|
|
lenis.raf(time);
|
|
requestAnimationFrame(raf);
|
|
}
|
|
requestAnimationFrame(raf);
|
|
|
|
// ── 2. GSAP PLUGINS ───────────────────────────────────────────────
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
// ── 3. PRELOADER ──────────────────────────────────────────────────
|
|
gsap.set('.hero-title, .hero-subtitle', { opacity: 0 });
|
|
|
|
gsap.timeline()
|
|
.to('#loader-text', { y: 0, duration: 1, ease: 'power4.out', delay: 0.2 })
|
|
.to('#loader-text', { y: '-100%', duration: 1, ease: 'power4.in', delay: 0.5 })
|
|
.to('#preloader', { y: '-100%', duration: 1, ease: 'power4.inOut' }, '-=0.5')
|
|
.to('.hero-title', { y: 0, opacity: 1, duration: 1.5, stagger: 0.15, ease: 'power4.out' }, '-=0.4')
|
|
.to('.hero-subtitle', { y: 0, opacity: 1, duration: 1.2, stagger: 0.12, ease: 'power3.out' }, '-=1.2');
|
|
|
|
// ── 4. CANVAS PARTICLES ───────────────────────────────────────────
|
|
const heroCanvas = document.getElementById('hero-canvas');
|
|
if (heroCanvas) {
|
|
const pCtx = heroCanvas.getContext('2d');
|
|
const heroSec = document.getElementById('home');
|
|
|
|
// Track mouse in viewport coords (works on all devices)
|
|
const pMouse = { x: null, y: null };
|
|
document.addEventListener('mousemove', (e) => { pMouse.x = e.clientX; pMouse.y = e.clientY; });
|
|
document.addEventListener('mouseleave', () => { pMouse.x = null; pMouse.y = null; });
|
|
|
|
function resizeCanvas() {
|
|
heroCanvas.width = heroSec.offsetWidth;
|
|
heroCanvas.height = heroSec.offsetHeight;
|
|
}
|
|
window.addEventListener('resize', resizeCanvas);
|
|
resizeCanvas();
|
|
|
|
const PARTICLE_COUNT = 90;
|
|
const P2P_DIST = 130; // particle ↔ particle connection radius
|
|
const CUR_DIST = 200; // cursor ↔ particle connection radius
|
|
|
|
class Particle {
|
|
constructor() { this.init(); }
|
|
init() {
|
|
this.x = Math.random() * heroCanvas.width;
|
|
this.y = Math.random() * heroCanvas.height;
|
|
this.vx = (Math.random() - 0.5) * 0.45;
|
|
this.vy = (Math.random() - 0.5) * 0.45;
|
|
this.radius = Math.random() * 1.4 + 0.4;
|
|
this.alpha = Math.random() * 0.45 + 0.2;
|
|
}
|
|
update() {
|
|
this.x += this.vx;
|
|
this.y += this.vy;
|
|
if (this.x < 0 || this.x > heroCanvas.width) this.vx *= -1;
|
|
if (this.y < 0 || this.y > heroCanvas.height) this.vy *= -1;
|
|
}
|
|
draw() {
|
|
pCtx.beginPath();
|
|
pCtx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
|
pCtx.fillStyle = `rgba(255,255,255,${this.alpha})`;
|
|
pCtx.fill();
|
|
}
|
|
}
|
|
|
|
const particles = Array.from({ length: PARTICLE_COUNT }, () => new Particle());
|
|
|
|
function line(x1, y1, x2, y2, alpha) {
|
|
pCtx.beginPath();
|
|
pCtx.moveTo(x1, y1);
|
|
pCtx.lineTo(x2, y2);
|
|
pCtx.strokeStyle = `rgba(255,255,255,${alpha})`;
|
|
pCtx.lineWidth = 0.6;
|
|
pCtx.stroke();
|
|
}
|
|
|
|
function animateParticles() {
|
|
pCtx.clearRect(0, 0, heroCanvas.width, heroCanvas.height);
|
|
|
|
// Cursor position relative to the hero section
|
|
const rect = heroSec.getBoundingClientRect();
|
|
const cx = pMouse.x !== null ? pMouse.x - rect.left : null;
|
|
const cy = pMouse.y !== null ? pMouse.y - rect.top : null;
|
|
|
|
for (let i = 0; i < particles.length; i++) {
|
|
const p = particles[i];
|
|
p.update();
|
|
p.draw();
|
|
|
|
// Particle ↔ particle
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
const q = particles[j];
|
|
const dx = p.x - q.x, dy = p.y - q.y;
|
|
const d = Math.sqrt(dx * dx + dy * dy);
|
|
if (d < P2P_DIST) line(p.x, p.y, q.x, q.y, (1 - d / P2P_DIST) * 0.12);
|
|
}
|
|
|
|
// Cursor ↔ particle
|
|
if (cx !== null) {
|
|
const dx = p.x - cx, dy = p.y - cy;
|
|
const d = Math.sqrt(dx * dx + dy * dy);
|
|
if (d < CUR_DIST) line(p.x, p.y, cx, cy, (1 - d / CUR_DIST) * 0.7);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(animateParticles);
|
|
}
|
|
|
|
animateParticles();
|
|
}
|
|
|
|
// ── 5. CUSTOM CURSOR ──────────────────────────────────────────────
|
|
if (window.innerWidth >= 768) {
|
|
const cursor = document.getElementById('cursor');
|
|
const cursorDot = document.getElementById('cursor-dot');
|
|
let mouseX = 0, mouseY = 0, cursorX = 0, cursorY = 0;
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
mouseX = e.clientX;
|
|
mouseY = e.clientY;
|
|
gsap.to(cursorDot, { x: mouseX, y: mouseY, duration: 0 });
|
|
});
|
|
|
|
gsap.ticker.add(() => {
|
|
cursorX += (mouseX - cursorX) * 0.2;
|
|
cursorY += (mouseY - cursorY) * 0.2;
|
|
gsap.set(cursor, { x: cursorX, y: cursorY });
|
|
});
|
|
|
|
document.querySelectorAll('.hover-target').forEach(target => {
|
|
target.addEventListener('mouseenter', () => {
|
|
gsap.to(cursor, { scale: 2.5, backgroundColor: 'rgba(255,255,255,1)', duration: 0.3 });
|
|
gsap.to(cursorDot, { opacity: 0, duration: 0.3 });
|
|
});
|
|
target.addEventListener('mouseleave', () => {
|
|
gsap.to(cursor, { scale: 1, backgroundColor: 'transparent', duration: 0.3 });
|
|
gsap.to(cursorDot, { opacity: 1, duration: 0.3 });
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── 6. SCROLL PROGRESS BAR ────────────────────────────────────────
|
|
const progressBar = document.getElementById('progress-bar');
|
|
lenis.on('scroll', ({ progress }) => {
|
|
if (progressBar) progressBar.style.width = `${progress * 100}%`;
|
|
});
|
|
|
|
// ── 7. ACTIVE NAV LINK ────────────────────────────────────────────
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
const sections = document.querySelectorAll('section[id]');
|
|
|
|
const sectionObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const id = entry.target.getAttribute('id');
|
|
navLinks.forEach(link => {
|
|
link.classList.toggle('active', link.dataset.section === id);
|
|
});
|
|
}
|
|
});
|
|
}, { rootMargin: '-40% 0px -40% 0px', threshold: 0 });
|
|
|
|
sections.forEach(s => sectionObserver.observe(s));
|
|
|
|
// ── 8. MOBILE MENU ────────────────────────────────────────────────
|
|
const hamburger = document.getElementById('hamburger');
|
|
const mobileOverlay = document.getElementById('mobile-overlay');
|
|
|
|
if (hamburger && mobileOverlay) {
|
|
hamburger.addEventListener('click', () => {
|
|
const isOpen = hamburger.classList.contains('open');
|
|
hamburger.classList.toggle('open');
|
|
mobileOverlay.classList.toggle('open');
|
|
isOpen ? lenis.start() : lenis.stop();
|
|
});
|
|
|
|
document.querySelectorAll('.mobile-nav-link').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
hamburger.classList.remove('open');
|
|
mobileOverlay.classList.remove('open');
|
|
lenis.start();
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── 9. REVEAL TEXT ANIMATIONS ─────────────────────────────────────
|
|
gsap.utils.toArray('.reveal-text').forEach(el => {
|
|
gsap.from(el, {
|
|
scrollTrigger: { trigger: el, start: 'top 85%' },
|
|
y: 60,
|
|
opacity: 0,
|
|
duration: 1.2,
|
|
ease: 'power3.out',
|
|
});
|
|
});
|
|
|
|
// ── 10. CV STAGGERED ANIMATIONS ────────────────────────────────────
|
|
gsap.utils.toArray('.cv-column').forEach(col => {
|
|
const items = col.querySelectorAll('.group');
|
|
if (!items.length) return;
|
|
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 ───────────────────────────────────────────
|
|
gsap.utils.toArray('.parallax-img').forEach(img => {
|
|
gsap.to(img, {
|
|
scrollTrigger: {
|
|
trigger: img.parentElement,
|
|
start: 'top bottom',
|
|
end: 'bottom top',
|
|
scrub: true,
|
|
},
|
|
y: 50,
|
|
ease: 'none',
|
|
});
|
|
});
|
|
|
|
// ── 12. CV DOWNLOAD MODAL ───────────────────────────────────────
|
|
const cvModal = document.getElementById('cv-modal');
|
|
const cvClose = document.getElementById('cv-modal-close');
|
|
const cvBackdrop = document.getElementById('cv-modal-backdrop');
|
|
|
|
function openCvModal() { cvModal.classList.add('is-open'); }
|
|
function closeCvModal() { cvModal.classList.remove('is-open'); }
|
|
|
|
document.querySelectorAll('.cv-download-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => { e.preventDefault(); openCvModal(); });
|
|
});
|
|
if (cvClose) cvClose.addEventListener('click', closeCvModal);
|
|
if (cvBackdrop) cvBackdrop.addEventListener('click', closeCvModal);
|
|
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeCvModal(); });
|
|
|
|
// Auto-close modal after a language link is clicked
|
|
document.querySelectorAll('.cv-lang-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => setTimeout(closeCvModal, 400));
|
|
});
|
|
|
|
// ── 13. DRAGGABLE GALLERY ─────────────────────────────────────────
|
|
const gallery = document.getElementById('gallery');
|
|
if (gallery) {
|
|
let isDown = false, startX, scrollLeft;
|
|
|
|
gallery.addEventListener('mousedown', (e) => {
|
|
isDown = true;
|
|
startX = e.pageX - gallery.offsetLeft;
|
|
scrollLeft = gallery.scrollLeft;
|
|
});
|
|
gallery.addEventListener('mouseleave', () => { isDown = false; });
|
|
gallery.addEventListener('mouseup', () => { isDown = false; });
|
|
gallery.addEventListener('mousemove', (e) => {
|
|
if (!isDown) return;
|
|
e.preventDefault();
|
|
gallery.scrollLeft = scrollLeft - (e.pageX - gallery.offsetLeft - startX) * 2;
|
|
});
|
|
}
|
|
|
|
// ── 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.fromTo(contactSection.querySelectorAll('.social-link'),
|
|
{ scale: 0, opacity: 0 },
|
|
{
|
|
scrollTrigger: { trigger: contactSection, start: 'top 90%', toggleActions: 'play none none none' },
|
|
scale: 1,
|
|
opacity: 1,
|
|
duration: 0.6,
|
|
stagger: 0.1,
|
|
ease: 'back.out(1.7)',
|
|
}
|
|
);
|
|
}
|
|
|
|
});
|