hobbies.html

<!DOCTYPE html>

<html lang="en" s>

    <!-- Head Wrapper -->
    <head>

        <!-- Encoding & Controll -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap Framework -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

        <!-- CSS Scripts -->
        <!-- <link rel="stylesheet" href="/styles/details.css"> -->
        <link rel="stylesheet" href="./styles/main.css">
        <link rel="stylesheet" href="./styles/media.css">

        <!-- Tab Bar Details -->
        <title> Welcome to my site! </title>

    </head>

    <!-- Body Wrapper -->
    <body id="HobbiesPage" class="mb-body">

        <!-- Navigation Bar -->
        <nav class="mb-navbar d-flex justify-content-evenly align-items-center">
            <a href="index.html"><button type="button" class="btn mb-navbar-button"> Home </button></a> 
            <button type="button" class="btn mb-navbar-button"> W.I.P. </button>
            <a href="hobbies.html"><button type="button" class="btn mb-navbar-button" > Hobbies </button></a> 
            <button type="button" class="btn mb-navbar-button"> W.I.P. </button>
        </nav>

        <!-- Back-to-Top Button -->
        <button type="button" id="mb-back-to-top-btn" class="btn" onclick="scrollToTop('mb-back-to-top-btn', 'HobbiesPage')">
            Back to Top
        </button>

        <!-- Body Content -->
        <div class="mb-body-container container-fluid" style="--bs-gutter-x: 0rem">

            <!-- Music -->
            <div class="mb-body-container-row">
                <section class="mb-card-container-100 mb-card-visual mb-ci-list-container"> 
                    <header class="mb-body-section-title"> My Music Playlist </header>
                    <div class="mb-body-text"> 
                        In my downtime, I love listening to pop, blues, and a variety of rock from the 60s to the 90s.<br>
                        <br>
                        On top of just listening, each year I create a new Spotify playlist and add to it all the songs I currently enjoy listening to. For me, it has been fun seeing how my music taste has evolved over time.<br>
                        <br>
                        Below is the playlist I've created and added to this year. Feel free to check it out!
                    </div>
                    
                    <iframe data-testid="embed-iframe" class="spotify-embed" src="https://open.spotify.com/embed/playlist/4vaowZ4FLVnLqrKpQ3nKG7?utm_source=generator&si=3f515258fcea4d74" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
                </section>
            </div>
        </div>

        <script>

            // Global Variables
            let disableScrollListener = false;
            let lastScrollY = window.scrollY;
            let scrollUpDist = 0;
            const toTopBtnScrollThresh = 100;

            function scrollToSection(id) {
                document.getElementById(id).scrollIntoView(
                {
                    behavior: 'smooth',
                    block: 'start'
                });
            }

            function scrollToTop(selfId, targetId) {
                disableScrollListener = true;
                scrollToSection(targetId);
                scrollUpDist = 0;
                document.getElementById(selfId).classList.remove('visible');

                setTimeout(() => {
                    disableScrollListener = false;
                    lastScrollY = window.scrollY;
                }, 500);
            }

            // Back-to-Top button appears after user scrolls up
            window.addEventListener('scroll', () => {
                if (disableScrollListener) return;

                const toTopBtn = document.querySelector('#mb-back-to-top-btn');
                const curScrollY = window.scrollY;

                if (curScrollY < lastScrollY) {
                    scrollUpDist += lastScrollY - curScrollY;
                }
                else {
                    scrollUpDist = 0;
                    toTopBtn.classList.remove('visible');
                }

                if ((scrollUpDist > toTopBtnScrollThresh) && (curScrollY > 100)) {
                    toTopBtn.classList.add('visible');
                }

                if (curScrollY <= 100) {
                    scrollUpDist = 0;
                    toTopBtn.classList.remove('visible');
                }

                lastScrollY = curScrollY;
            });
        </script>   
    </body>



</html>