awesome now I'll give you some context on what I've been doing:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrackSite - Vista Desktop</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.wallpapersafari.com%2F37%2F57%2FKZIRPy.jpg&f=1&nofb=1&ipt=c2cc7852e05aeba481e69a3654ecff06dbe5ad0758f330e03ae44fb36a35b5a7') center/cover fixed no-repeat;
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Desktop icons container */
        .desktop {
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-content: flex-start;
            gap: 10px;
            height: calc(100vh - 44px);
            overflow: auto;
        }

        /* Desktop icon wrapper */
        .icon-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 72px;
            cursor: pointer;
            transition: all 0.2s;
            padding: 4px;
            border-radius: 4px;
        }

        .icon-wrapper:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Actual icon image */
        .icon {
            width: 48px;
            height: 48px;
            transition: transform 0.2s ease;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
        }

        .icon-wrapper:hover .icon {
            transform: scale(1.1);
        }

        /* Icon label */
        .icon-label {
            margin-top: 4px;
            font-size: 12px;
            color: white;
            padding: 2px 4px;
            border-radius: 3px;
            background: rgba(0, 102, 204, 0.8);
            text-shadow: 0 0 3px #000;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        /* Taskbar */
        .taskbar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 44px;
            display: flex;
            align-items: center;
            padding: 0 14px;
            background: rgba(30, 60, 115, 0.55);
            backdrop-filter: blur(10px) saturate(160%);
            border-top: 1px solid rgba(255, 255, 255, 0.35);
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.45);
            border-radius: 10px 10px 0 0;
            z-index: 90;
        }

        /* Start button */
        .start-button {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            font-weight: 600;
            color: #fff;
            font-size: 14px;
            padding: 5px 14px 5px 10px;
            border-radius: 6px;
            border: 1px solid #043d8c;
            background: linear-gradient(to bottom, #1c7aff 0%, #0d60e3 50%, #084dbf 100%);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 2px 3px rgba(0, 0, 0, 0.4);
            transition: filter 0.2s, transform 0.15s;
        }

        .start-button:hover {
            filter: brightness(1.15);
            transform: scale(1.05);
        }

        .start-button:before {
            content: "";
            width: 20px;
            height: 20px;
            flex: 0 0 20px;
            background: url("images/TrackSite.png") center/contain no-repeat;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
        }

        /* Window */
        .window {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 340px;
            border-radius: 10px;
            overflow: hidden;
            z-index: 120;
            background: rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(18px) saturate(160%);
            border: 1px solid rgba(255, 255, 255, 0.55);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
            display: none;
        }

        .window-header {
            padding: 8px 12px;
            font-weight: 600;
            font-size: 15px;
            color: #fff;
            background: linear-gradient(90deg, #004a9c 0%, #0d7cf4 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close-btn {
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            background: linear-gradient(#ff7474, #da2121);
            color: #fff;
            cursor: pointer;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 2px rgba(0, 0, 0, 0.5);
        }

        .close-btn:hover {
            filter: brightness(1.15);
        }

        .window-body {
            padding: 24px 18px;
            font-size: 14px;
            color: #000;
            text-align: center;
        }

        .time-msg {
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 10px;
            text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(30, 150, 255, 0.9);
        }

        @keyframes shimmer {
            0% { opacity: 0.9; }
            50% { opacity: 1; }
            100% { opacity: 0.9; }
        }

        .time-msg {
            animation: shimmer 2s infinite;
        }

        .message {
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid #7ab1ff;
            border-radius: 6px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.6);
        }
    </style>
</head>
<body>
    <!-- Desktop Icons - Top-left aligned -->
    <div class="desktop">
        <!-- Each icon is wrapped in a container with precise dimensions -->
        <div class="icon-wrapper" onclick="window.location.href='index.html'">
            <img class="icon" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fvectorified.com%2Fimages%2Fwindows-xp-my-computer-icon-24.png&f=1&nofb=1&ipt=cc116e3112a395a838eef9d5532e73d3d97981ea0b6d227f7e9d230ea74db3dd" alt="Home">
            <div class="icon-label">Home</div>
        </div>

        <div class="icon-wrapper" onclick="window.location.href='gaming.html'">
            <img class="icon" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fvectorified.com%2Fimages%2Fwindows-xp-my-computer-icon-24.png&f=1&nofb=1&ipt=cc116e3112a395a838eef9d5532e73d3d97981ea0b6d227f7e9d230ea74db3dd" alt="Gaming">
            <div class="icon-label">Gaming</div>
        </div>

        <div class="icon-wrapper" onclick="window.location.href='extensions.html'">
            <img class="icon" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fvectorified.com%2Fimages%2Fwindows-xp-my-computer-icon-24.png&f=1&nofb=1&ipt=cc116e3112a395a838eef9d5532e73d3d97981ea0b6d227f7e9d230ea74db3dd" alt="Extensions">
            <div class="icon-label">Extensions</div>
        </div>

        <div class="icon-wrapper" onclick="window.location.href='streaming.html'">
            <img class="icon" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fvectorified.com%2Fimages%2Fwindows-xp-my-computer-icon-24.png&f=1&nofb=1&ipt=cc116e3112a395a838eef9d5532e73d3d97981ea0b6d227f7e9d230ea74db3dd" alt="Streaming">
            <div class="icon-label">Streaming</div>
        </div>

        <div class="icon-wrapper" onclick="window.location.href='windows.html'">
            <img class="icon" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fvectorified.com%2Fimages%2Fwindows-xp-my-computer-icon-24.png&f=1&nofb=1&ipt=cc116e3112a395a838eef9d5532e73d3d97981ea0b6d227f7e9d230ea74db3dd" alt="Windows">
            <div class="icon-label">Windows</div>
        </div>

        <div class="icon-wrapper" onclick="window.location.href='android.html'">
            <img class="icon" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fvectorified.com%2Fimages%2Fwindows-xp-my-computer-icon-24.png&f=1&nofb=1&ipt=cc116e3112a395a838eef9d5532e73d3d97981ea0b6d227f7e9d230ea74db3dd" alt="Android">
            <div class="icon-label">Android</div>
        </div>

        <div class="icon-wrapper" onclick="window.location.href='literature.html'">
            <img class="icon" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fvectorified.com%2Fimages%2Fwindows-xp-my-computer-icon-24.png&f=1&nofb=1&ipt=cc116e3112a395a838eef9d5532e73d3d97981ea0b6d227f7e9d230ea74db3dd" alt="Literature">
            <div class="icon-label">Literature</div>
        </div>

        <div class="icon-wrapper" onclick="window.location.href='other.html'">
            <img class="icon" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fvectorified.com%2Fimages%2Fwindows-xp-my-computer-icon-24.png&f=1&nofb=1&ipt=cc116e3112a395a838eef9d5532e73d3d97981ea0b6d227f7e9d230ea74db3dd" alt="Other">
            <div class="icon-label">Other</div>
        </div>
    </div>

    <!-- Taskbar -->
    <div class="taskbar">
        <button class="start-button" onclick="togglePopup()">Start</button>
    </div>

    <!-- Popup Window -->
    <div class="window" id="popup">
        <div class="window-header">
            TrackSite Portal
            <button class="close-btn" onclick="togglePopup()">×</button>
        </div>
        <div class="window-body">
            <div class="message">
                <div class="time-msg">OoOoOo, you've just traveled back in time!</div>
                <p>This is just an Easter egg thing I wanted to do, where the home page looks like Vista.</p>
            </div>
            <p style="font-style:italic;color:#333">Click on the icons to navigate through the site</p>
        </div>
    </div>

    <script>
        function togglePopup() {
            const w = document.getElementById('popup');
            w.style.display = (w.style.display === 'block') ? 'none' : 'block';
        }

        // Close popup when clicking outside
        document.addEventListener('click', function(e) {
            const w = document.getElementById('popup');
            if (w.style.display === 'block' &&
                !w.contains(e.target) &&
                !e.target.closest('.start-button')) {
                w.style.display = 'none';
            }
        });
    </script>
</body>
</html>


Now that you know I've done this, I think its time to add the function where the links take us to the other places like how I've made the desktop icons take us places. Also here's what I've done to the index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrackSite - Digital Collection</title>
    <link rel="icon" href="images/TrackSite.png" type="image/png">
    <style>
        :root {
            --primary-red: #e53935;
            --dark-bg: #121212;
            --light-bg: #1d1d1d;
            --text-primary: #f0f0f0;
            --text-secondary: #a0a0a0;
            --border-color: #333333;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            color: var(--text-primary);
            background: #000;
            overflow-x: hidden;
        }

        /* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 15px 30px;
            background: rgba(18, 18, 18, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-logo {
            height: 30px;
            cursor: pointer;
        }

        .info-icon {
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .info-icon:hover {
            border-color: var(--primary-red);
            color: #fff;
            transform: scale(1.1);
        }

        /* Hero Section */
        .hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            min-height: 100vh;
            position: relative;
            background: linear-gradient(145deg, var(--light-bg) 0%, var(--dark-bg) 100%);
        }

        .fade-to-black {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 250px;
            background: linear-gradient(to top, #000 0%, transparent 100%);
            pointer-events: none;
            z-index: 5;
        }

        .logo-container, .prompt, .category-buttons {
            position: relative;
            z-index: 6;
        }

        .main-logo {
            width: 100px;
            margin-bottom: 15px;
        }

        .brand-name {
            font-size: 2.5rem;
            font-weight: 800;
            letter-spacing: -1px;
            animation: fadeInUp 0.8s ease-out 0.1s both;
        }

        .brand-name span {
            color: var(--primary-red);
        }

        .prompt {
            color: var(--text-secondary);
            font-size: 1.1rem;
            margin: 35px 0 25px;
            animation: fadeInUp 0.8s ease-out 0.2s both;
        }

        .category-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            max-width: 700px;
            animation: fadeInUp 0.8s ease-out 0.3s both;
        }

        .btn {
            padding: 12px 30px;
            font-size: 1rem;
            font-weight: 500;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn:hover {
            background: var(--primary-red);
            border-color: var(--primary-red);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(229, 57, 53, 0.4);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 40px;
            border: 2px solid #555;
            border-radius: 20px;
            cursor: pointer;
            transition: border-color 0.3s ease;
            z-index: 10;
        }

        .scroll-indicator::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 50%;
            width: 4px;
            height: 4px;
            background: var(--text-secondary);
            border-radius: 50%;
            transform: translateX(-50%);
            animation: scroll-down 2.2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

        .scroll-indicator:hover {
            border-color: var(--primary-red);
        }

        .bottom-content {
            background-color: #000;
            padding: 80px 20px 0;
        }

        .content-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .content-container h2 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-red);
            margin-bottom: 15px;
        }

        .content-container p {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--text-primary);
            margin-bottom: 30px;
        }

        .content-container a {
            color: var(--primary-red);
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

        .content-container a:hover {
            opacity: 0.8;
        }

        /* Kinetic Footer with Wave Animation */
        .kinetic-footer {
            width: 100%;
            padding: 80px 0 60px;
            overflow: hidden;
            position: relative;
        }

        .binary-wave-container {
            position: relative;
            height: 140px;
            width: 100%;
        }

        .wave-line {
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            white-space: nowrap;
        }

        .wave-line span {
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;
            color: var(--primary-red);
            opacity: 0.6;
            margin: 0 1px;
            will-change: transform, opacity;
        }

        .wave-line:nth-child(1) { bottom: 60px; }
        .wave-line:nth-child(2) { bottom: 40px; }
        .wave-line:nth-child(3) { bottom: 20px; }

        .duck {
            position: absolute;
            width: 60px;
            pointer-events: none;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes scroll-down {
            0% { transform: translate(-50%, 0); opacity: 0; }
            40% { opacity: 1; }
            80% { transform: translate(-50%, 15px); opacity: 0; }
            100% { opacity: 0; }
        }

        /* Mobile Responsiveness */
        @media (max-width: 600px) {
            .header { padding: 12px 15px; }
            .header-logo { height: 24px; }
            .info-icon { 
                width: 26px;
                height: 26px;
                font-size: 12px;
            }
            .main-logo { width: 70px; }
            .brand-name { font-size: 1.8rem; }
            .prompt { font-size: 0.9rem; }
            .btn { padding: 8px 20px; font-size: 0.85rem; }
            .category-buttons { 
                gap: 10px; 
                margin-bottom: 30px;
            }
            .kinetic-footer { padding: 60px 0 50px; }
            .wave-line span { font-size: 14px; margin: 0 0.5px; }
            .duck { width: 40px; bottom: 70px; }
        }
    </style>
</head>
<body>
    <header class="header">
        <img src="images/TrackSite.png" alt="TrackSite Logo" class="header-logo" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
        <div class="info-icon" onclick="showInfo()">i</div>
    </header>

    <main class="hero">
        <div class="logo-container">
            <img src="images/TrackSite.png" alt="TrackSite Logo" class="main-logo">
            <h1 class="brand-name">TRACK<span>SITE</span></h1>
        </div>
        <p class="prompt">Looking For:</p>
        <div class="category-buttons">
            <button class="btn" onclick="selectCategory('gaming')">🎮 Gaming</button>
            <button class="btn" onclick="selectCategory('extensions')">🧩 Extensions</button>
            <button class="btn" onclick="selectCategory('streaming')">📺 Streaming</button>
            <button class="btn" onclick="selectCategory('literature')">📚 Literature</button>
            <button class="btn" onclick="selectCategory('windows')">💻 Windows Utilities</button>
            <button class="btn" onclick="selectCategory('android')">📱 Android Utilities</button>
            <button class="btn" onclick="selectCategory('other')">📦 Other</button>
        </div>
        <div class="scroll-indicator" onclick="scrollToBottom()"></div>
        <div class="fade-to-black"></div>
    </main>

    <section class="bottom-content">
        <div class="content-container">
            <h2>What is TrackSite?</h2>
            <p>Welcome to TrackSite. This website was made for myself to track things, that's why it's called TrackSite. This site was designed to track things like modlists I made for games, extensions that're useful, and other apps and tweaks that're otherwise noteworthy.</p>
            <h2>What are similar sites to TrackSite?</h2>
            <p>There are certainly other sites out there similar to this one but the only one that I personally know as of now is <a href="https://fmhy.net/" target="_blank">fmhy</a>.</p>
            <h2>Why are you still reading?</h2>
            <p>This is the end of the Homepage. <a href="vista.html" target="_blank">Or is it?</a></p>
        </div>

        <footer class="kinetic-footer">
            <div class="binary-wave-container" id="binary-wave-container">
                <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.pngall.com%2Fwp-content%2Fuploads%2F11%2FRubber-Duck-PNG-HD-Image.png&f=1&nofb=1&ipt=abb491d925741f38a4e41ffcfde5244f0e87d7f29fcfa438a957b356ff785cdd" class="duck" id="duck">
            </div>
        </footer>
    </section>

    <script>
        function selectCategory(category) {
            console.log('Navigating to:', category);
        }

        function scrollToBottom() {
            document.querySelector('.bottom-content').scrollIntoView({ behavior: 'smooth' });
        }

        function showInfo() {
            alert(`Tracksite Info

Site Creation Started Early 2024`);
        }

        // Wave Animation
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('binary-wave-container');
            const duck = document.getElementById('duck');

            const lines = 3;
            const charCount = 120;
            const waveHeight = 10;
            const waveLength = 0.25;
            const waveSpeed = 0.05;
            const ampOp = 0.2;
            const lineSpacing = 20;

            const rows = [];

            for (let r = 0; r < lines; r++) {
                const line = document.createElement('div');
                line.className = 'wave-line';
                line.style.bottom = `${60 - r * lineSpacing}px`;
                container.appendChild(line);

                const spans = [];
                for (let i = 0; i < charCount; i++) {
                    const s = document.createElement('span');
                    s.textContent = Math.random() > 0.5 ? '1' : '0';
                    line.appendChild(s);
                    spans.push(s);
                }

                rows.push({ spans, offset: r * 0.7 });
            }

            let t = 0;
            function anim() {
                rows.forEach(({ spans, offset }) => {
                    spans.forEach((s, i) => {
                        const y = Math.sin(t + offset + i * waveLength) * waveHeight;
                        s.style.transform = `translateY(${y}px)`;
                        s.style.opacity = 0.6 + Math.sin(t + offset + i * waveLength) * ampOp;
                    });
                });

                // Duck bobbing animation
                const duckIndex = 60;
                const dy = Math.sin(t + rows[1].offset + duckIndex * waveLength) * (waveHeight - 4);
                duck.style.transform = `translate(-50%, ${dy - 12}px)`;

                t += waveSpeed;
                requestAnimationFrame(anim);
            }

            anim();
        });
    </script>
</body>
</html>