main.js

/* MENU SHOW */ 
const showMenu = (toggleId, navId) =>{
    const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId)

    if(toggle && nav){
        toggle.addEventListener('click', ()=>{
            nav.classList.toggle('show')
        })
    }
}

showMenu('nav-toggle','nav-menu')

/* CLOSE MENU ON LINK CLICK */
// listen on _all_ nav links, including the logo
const navLinks = document.querySelectorAll('.nav__link, .nav__logo');
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    document.getElementById('nav-menu').classList.remove('show');
  });
});

/* NAV LINK ACTIVE STATE */
const currentPage = window.location.pathname.split("/").pop();
const navItems = document.querySelectorAll('.nav__link, .nav__logo');

navItems.forEach(link => {
  // If href matches this HTML filename, mark it active
  if (link.getAttribute('href') === currentPage) {
    link.classList.add('active');
  }
});

/*----- ANIMATE -----*/
// OVERLAY
gsap.to(".first", 1.5, {delay: .5, top: "-100%", ease: Expo.easeInOut});
gsap.to(".second", 1.5, {delay: .7, top: "-100%", ease: Expo.easeInOut});
gsap.to(".third", 1.5, {delay: .9, top: "-100%", ease: Expo.easeInOut});

// IMG
gsap.from('.home__img', {opacity: 0, duration: 2, delay: 2, x: 60})

// INFORMATION
gsap.from('.home__information', {opacity: 0, duration: 3, delay: 2.3, y: 25})
gsap.from('.anime-text', {opacity: 0, duration: 3, delay: 2.3, y: 25, ease:'expo.out', stagger: .3})

// NAV ITEM
gsap.from('.nav__logo', {opacity:0, duration: 3, delay: 3.2, y: 25, ease:'expo.out'});
gsap.from('.nav__item', {opacity: 0, duration: 3, delay: 3.2, y: 25, ease:'expo.out', stagger: .2})

// SOCIAL
gsap.from('.home__social-icon', {opacity: 0, duration: 3, delay: 4, y: 25, ease:'expo.out', stagger: .2})