script.js

/*==================== toggle icon navbar ====================*/
let menuIcon = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menuIcon.onclick = () => {
    menuIcon.classList.toggle('bx-x');
    navbar.classList.toggle('active');
};

/*==================== scroll sections active link ====================*/
let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header nav a');

window.onscroll = () => {
    sections.forEach(sec => {
        let top = window.scrollY;
        let offset = sec.offsetTop - 150;
        let height = sec.offsetHeight;
        let id = sec.getAttribute('id');

        if (top >= offset && top < offset + height) {
            navLinks.forEach(links => {
                links.classList.remove('active');
                document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
            });
        };
    });
    /*==================== sticky navbar ====================*/
let header = document.querySelector('header');

header.classList.toggle('sticky', window.scrollY > 100);

    /*==================== remove toggle icon and navbar when click navbar link (scroll) ====================*/
    menuIcon.classList.remove('bx-x');
    navbar.classList.remove('active');
};
/*==================== scroll reveal ====================*/
ScrollReveal({
    reset: true,
    distance: '80px',
    duration: 2000,
    delay: 200
});

ScrollReveal().reveal('.home-content, .heading', { origin: 'top',});
ScrollReveal().reveal('.home-img, .services-container, .portfolio-box, .contact form', { origin: 'bottom',});
ScrollReveal().reveal('.home-content h1, .about-img', { origin: 'left',});
ScrollReveal().reveal('.home-content p, .about-content', { origin: 'right',});


/*==================== typed js ====================*/
const typed = new Typed ('.multiple-text', {
    strings: ['Web Developer', 'Media Buyer', 'Graphics Designer'],
    typeSpeed: 100,
    backSpeed: 50,
    backDelay: 1000,
    loop: true
});
// Toggle between dark mode and light mode
const modeToggleBtn = document.getElementById('mode-toggle');
const body = document.body;

modeToggleBtn.addEventListener('click', () => {
    body.classList.toggle('light-mode');
});

// Change images when light mode is activated
modeToggleBtn.addEventListener('click', () => {
    const homeImg = document.querySelector('.home-img img');
    const aboutImg = document.querySelector('.about-img img');

    if (body.classList.contains('light-mode')) {
        homeImg.src = 'imgs/home-v2.png';
        aboutImg.src = 'imgs/about-v2.png';
    } else {
        homeImg.src = 'imgs/home.png';
        aboutImg.src = 'imgs/about.png';
    }
});