script.js

// Side nav dots
const dots = document.querySelectorAll('.side-dot');
dots.forEach(dot => {
	dot.addEventListener('click', () => {
		const target = document.getElementById(dot.dataset.target);
		if (target) target.scrollIntoView({ behavior: 'smooth' });
	});
});

// Active dot on scroll
const sections = ['hero','about','skills','cursus','projects','contact'];
const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			dots.forEach(d => d.classList.remove('active'));
			const active = document.querySelector(`.side-dot[data-target="${entry.target.id}"]`);
			if (active) active.classList.add('active');
		}
	});
}, { threshold: 0.4 });

sections.forEach(id => {
	const el = document.getElementById(id);
	if (el) observer.observe(el);
});

// Fade-in on scroll
const fadeObserver = new IntersectionObserver((entries) => {
	entries.forEach((entry, i) => {
		if (entry.isIntersecting) {
			setTimeout(() => entry.target.classList.add('visible'), i * 80);
			fadeObserver.unobserve(entry.target);
		}
	});
}, { threshold: 0.1 });

document.querySelectorAll('.fade-in').forEach(el => fadeObserver.observe(el));

// Project card click
document.querySelectorAll('.project-card').forEach(card => {
	card.addEventListener('click', () => {
		const href = card.dataset.href;
		if (href && href !== '#') window.open(href, '_blank');
	});
});