75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const splash = document.getElementById('splash');
|
|
const burgerBtn = document.getElementById('burger-btn');
|
|
const mainNav = document.getElementById('main-nav');
|
|
const links = document.querySelectorAll('[data-target]');
|
|
const sections = document.querySelectorAll('.page-section');
|
|
|
|
const introText = document.getElementById('dynamic-text');
|
|
const textToType = "Portfolio | Alice THIERRY";
|
|
let charIndex = 0;
|
|
|
|
function typeWriter() {
|
|
if (charIndex < textToType.length) {
|
|
introText.textContent += textToType.charAt(charIndex);
|
|
charIndex++;
|
|
setTimeout(typeWriter, 80);
|
|
} else {
|
|
setTimeout(() => {
|
|
splash.style.opacity = '0';
|
|
setTimeout(() => {
|
|
splash.style.display = 'none';
|
|
}, 800);
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
setTimeout(typeWriter, 500);
|
|
|
|
burgerBtn.addEventListener('click', toggleMenu);
|
|
|
|
function toggleMenu() {
|
|
mainNav.classList.toggle('open');
|
|
|
|
const spans = burgerBtn.querySelectorAll('span');
|
|
|
|
if (mainNav.classList.contains('open')) {
|
|
spans[0].style.transform = 'rotate(45deg) translate(5px, 6px)';
|
|
spans[1].style.opacity = '0';
|
|
spans[2].style.transform = 'rotate(-45deg) translate(5px, -6px)';
|
|
} else {
|
|
spans[0].style.transform = 'none';
|
|
spans[1].style.opacity = '1';
|
|
spans[2].style.transform = 'none';
|
|
}
|
|
}
|
|
|
|
links.forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const targetId = link.getAttribute('data-target');
|
|
navigateTo(targetId);
|
|
});
|
|
});
|
|
|
|
function navigateTo(targetId) {
|
|
const targetSection = document.getElementById(targetId);
|
|
if(!targetSection) return;
|
|
if(mainNav.classList.contains('open')) {
|
|
toggleMenu();
|
|
}
|
|
|
|
const currentSection = document.querySelector('.page-section.active');
|
|
|
|
if(currentSection && currentSection.id === targetId) return;
|
|
if (currentSection) {
|
|
currentSection.classList.remove('active');
|
|
setTimeout(() => {
|
|
targetSection.classList.add('active');
|
|
window.scrollTo(0, 0);
|
|
}, 500);
|
|
} else {
|
|
targetSection.classList.add('active');
|
|
}
|
|
}
|
|
}); |