script.js

window.addEventListener('scroll', () => {
    // 1. Main Overall Progress Bar
    const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrolled = (winScroll / height) * 100;
    document.getElementById('main-bar').style.width = scrolled + '%';

    // 2. Individual Section Progress
    const sections = document.querySelectorAll('.scroll-section');
    sections.forEach((section, index) => {
        const rect = section.getBoundingClientRect();
        const sectionHeight = section.offsetHeight;
        
        // Calculate progress within the current section
        let sectionProgress = 0;
        if (rect.top <= 0 && rect.bottom >= 0) {
            sectionProgress = Math.abs(rect.top) / sectionHeight * 100;
        } else if (rect.top > 0) {
            sectionProgress = 0;
        } else if (rect.bottom < 0) {
            sectionProgress = 100;
        }

        const barId = `bar-${index + 1}`;
        const bar = document.getElementById(barId);
        if (bar) {
            bar.style.width = sectionProgress + '%';
        }
    });
});