div class="slide" data-bg="#fff0e0">gt;
   div class="slide-inner">gt;
     p class="slide-credit">gt;subtitle goes herep>gt;
     img src="img link" alt="" class="slide-img" />gt;
     p class="slide-text">gt;
      slide text goes here
      p>gt;
   div>gt;

div>gt;

Theres also a mascot (idk how to describe it) popout thing:

div id="mascot" class="mascot">gt;
   img src="src/assets/graphic.jpeg" alt="" class="mascot-img" />gt;
   div id="mascot-bubble" class="mascot-bubble">gt;div>gt;

div>gt;

It slides in from the right with a fun fact whenever you land on a new slide, then slides back out after a bit. Fun Facts are stored in the FunFacts array in the main.js file

originally I had planned to use tailwind.css but I couldnt get it ro run properly so I used regular css The css is pretty self explanatory with styles for the bg , slides ,progress dots and Mascot/popoutt

Uses gsap code to make a top to bottom slideshow. We use a basic circular queue method here for changing current slide. Scroll position gets umm 'teleported' (ig?) back near the top/bottom to fake an infinite scroll, with ScrollTrigger temporarily disabled during the jump so it doesn't get stuck looping on itself. As for the Audio/bg musics, we utalize the element from the index.html file then do the following make a simple toggle button using boolean logic::

const music = document.getElementById("bg-music");

const soundToggle = document.getElementById("sound-toggle");

let on = false;

soundToggle.addEventListener("click", () =>gt; {
   on = !on; 
   if (on) {
     music.play();
     soundToggle.innerHTML = "🔊";

    }

    else {
     music.pause();
     soundToggle.innerHTML = "🔈";
       soundToggle.textContent = "🔇";

    }

});