@@ -17,7 +17,7 @@ <a data-page="about" id="aTitle">
                 <img src="res/gif/text.gif" alt="BiRabittoh's cool website" class="hover-tilt">
             </a>
         </div>
-        <div id="background-orange">
+        <div id="background-orange" class="shadow">
             <h1>My favorite things:</h1>
             <a data-page="earthbound">
                 <div class="menu-item">
@@ -51,7 +51,7 @@ </div>
             </a>
             <a data-page="gf">
                 <div class="menu-item">
-                    <span>My perfect GF</span>
+                    <span>My perfect gf</span>
                     <img src="res/gif/kirby.gif">
                 </div>
             </a>
@@ -59,77 +59,16 @@ </div>
         <!--<iframe id="content-iframe" name="content" src="pages/about.html" onload="this.height = (this.contentWindow.document.body.scrollHeight + 43) + 'px';"></iframe>-->
         <iframe id="content-iframe" name="content" src="pages/about.html"></iframe>
     </div>
-    <div id="music-player-base" onclick="playPause()">
-        <div id="music-player-overlay">
+    <div id="music-player">
+        <div id="music-player-base" onclick="playPause()">
+            <div id="music-player-overlay"></div>
+            <audio controls loop id="music"><source id="music-source" src="res/mus/AwesomeRapBeat.opus"></audio>
+        </div>
+        <div id="music-player-song" style="top: 100%;">
+            <span id="song-text">Jay Tholen - Awesome Rap Beat (Hypnospace Outlaw Original Soundtrack, Vol. 2)</span>
         </div>
-
-        <audio controls loop id="music"><source id="music-source" src="res/mus/AwesomeRapBeat.opus"></audio>
     </div>
-
-    <script>
-        const menu_div = document.getElementById("background-orange");
-        const iframe = document.getElementById("content-iframe");
-        const music = document.getElementById("music");
-        const source = document.getElementById("music-source");
-        const music_base = document.getElementById("music-player-base");
-
-        const tracks = {
-            "about": "AwesomeRapBeat.opus",
-            "anime": "WeFellIntoaDream.opus",
-            "dragonquest": "ForestFeast.opus",
-            "earthbound": "GoodtimeRock.opus",
-            "gf": "KatiesKuddlyKatKorner.opus",
-            "indies": "Earmint.opus",
-            "zelda": "ForestFeast.opus",
-        }
-
-        let play = false;
-        let currentPage = "about"
-
-        function goToPage(page) {
-            if(currentPage == page)
-                return
-            iframe.src = "pages/" + page + ".html";
-
-            const newTrack = tracks[page];
-
-            if(newTrack != tracks[currentPage]){
-                source.src = "res/mus/" + newTrack;
-                music.pause();
-                music.load();
-                if (play)
-                    music.play();
-            }
-                
-            currentPage = page;
-        }
-        const title = document.getElementById("aTitle");
-        title.addEventListener("click", () => goToPage(title.getAttribute("data-page")));
-        [ ...menu_div.childNodes ].forEach(element => {
-            try{
-                const page = element.getAttribute("data-page");
-                if (page){
-                    element.addEventListener("click", () => goToPage(page));
-                }
-            } catch {}
-        });
-
-
-        function playPause() {
-            if (play){
-                music_base.style.backgroundImage = "url('res/img/player_pause.png')";
-                music.pause();
-                play = false
-            }
-            else {
-                music_base.style.backgroundImage = "url('res/img/player_play.png')";
-                music.volume = 0.1;
-                music.play();
-                play = true
-            }
-        }
-        
-    </script>
+    <script src="res/script.js"></script>
 </body>
 
 </html>

@@ -0,0 +1,128 @@
+const menu_div = document.getElementById("background-orange");
+const iframe = document.getElementById("content-iframe");
+const music = document.getElementById("music");
+const source = document.getElementById("music-source");
+const music_base = document.getElementById("music-player-base");
+const music_song = document.getElementById("music-player-song");
+const music_song_text = document.getElementById("song-text");
+
+const tracks = {
+    "awesome": {
+        file_name: "AwesomeRapBeat.opus",
+        track_name: "Awesome Rap Beat",
+        track_author: "Jay Tholen",
+        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
+    },
+    "dream": {
+        file_name: "WeFellIntoaDream.opus",
+        track_name: "We Fell Into a Dream",
+        track_author: "Jay Tholen",
+        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
+    },
+    "earmint": {
+        file_name: "Earmint.opus",
+        track_name: "Earmint",
+        track_author: "Jay Tholen",
+        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
+    },
+    "forest": {
+        file_name: "ForestFeast.opus",
+        track_name: "Forest Feast",
+        track_author: "Jay Tholen",
+        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
+    },
+    "gtrock": {
+        file_name: "GoodtimeRock.opus",
+        track_name: "Goodtime Rock",
+        track_author: "Jay Tholen",
+        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
+    },
+    "katie": {
+        file_name: "KatiesKuddlyKatKorner.opus",
+        track_name: "Katie's Kuddly Kat Korner",
+        track_author: "Jay Tholen",
+        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
+    },
+}
+
+const page_tracks = {
+    "about": "awesome",
+    "anime": "dream",
+    "dragonquest": "forest",
+    "earthbound": "gtrock",
+    "gf": "katie",
+    "indies": "earmint",
+    "zelda": "forest",
+}
+
+let play = false;
+let currentPage = "about";
+let currentTrack = page_tracks[currentPage];
+let timeout;
+
+function firstMusicPlay() {
+    playPause(false);
+    document.removeEventListener('click', firstMusicPlay);
+}
+document.addEventListener('click', firstMusicPlay);
+
+function goToPage(page) {
+    if(currentPage == page)
+        return
+    iframe.src = "pages/" + page + ".html";
+
+    const newTrack = page_tracks[page];
+
+    if(newTrack != currentTrack){
+        currentTrack = newTrack;
+
+        source.src = "res/mus/" + tracks[newTrack].file_name;
+        music.load();
+        if (play) {
+            music.play();
+            showTitle();
+        }
+    }
+        
+    currentPage = page;
+}
+
+function formatTrack(track) {
+    return `${track.track_author} - ${track.track_name} (${track.track_from})`;
+}
+
+function showTitle(){
+    clearTimeout(timeout);
+    music_song_text.textContent = formatTrack(tracks[currentTrack]);
+    music_song.style.top = "0";
+    timeout = setTimeout(() => {
+        music_song.style.top = "100%";
+    }, 3_000);
+}
+
+function playPause(toggle=play) {
+    if (toggle){
+        music_base.classList.remove("player-play");
+        music.pause();
+        play = false
+    }
+    else {
+        music_base.classList.add("player-play");
+        music.volume = 0.1;
+        music.play();
+        play = true
+        showTitle();
+    }
+}
+
+// page logic
+const title = document.getElementById("aTitle");
+title.addEventListener("click", () => goToPage(title.getAttribute("data-page")));
+[ ...menu_div.childNodes ].forEach(element => {
+    try{
+        const page = element.getAttribute("data-page");
+        if (page){
+            element.addEventListener("click", () => goToPage(page));
+        }
+    } catch {}
+});

@@ -1,18 +1,18 @@
 html {
     font-family: "Iosevka Web";
     color: white;
-    cursor: url("cur/cursor2x.png"), auto;
+    cursor: url("cur/cursor2x.cur"), auto;
 }
 
 #content-iframe {
     height: inherit;
     width: 100%;
     border: 0px;
-    cursor: url("cur/cursor2x.png"), auto;
+    cursor: url("cur/cursor2x.cur"), auto;
 }
 
 a {
-    cursor: url("cur/pointer2x.png"), auto;
+    cursor: url("cur/pointer2x.cur"), auto;
 }
 
 img {
@@ -25,7 +25,7 @@ }
 
 .hover-tilt {
     transition: transform .1s ease-in-out;
-    rotate: -3deg;
+    rotate: -1.5deg;
 }
 .hover-tilt:hover {
     transform: rotate(3deg);
@@ -36,6 +36,10 @@ /* width: calc(100% / 2); */
     height: 100%;
     width: 800px;
     margin: auto;
+}
+
+.shadow {
+    text-shadow: 1px 1px #000000;
 }
 
 #background-orange {
@@ -43,7 +47,6 @@ /* background-color: rgb(255, 170, 60); */
     background-image: url("img/orange-banner.jpg");
     background-size: cover;
     color: white;
-    text-shadow: 1px 1px #000000;
     padding-bottom:10px;
 }
 
@@ -69,22 +72,51 @@ margin: auto;
     display: block;
 }
 
-#music-player-base {
+#music-player {
     position: fixed;
     bottom: 0;
     left: 5px;
+    height: 66px;
+    image-rendering: pixelated;
+}
+
+#music-player-base {
+    float: left;
     width: 114px;
     height: 66px;
     background-color: #141414;
     background-image: url("img/player_pause.png");
     background-size: contain;
-    image-rendering: pixelated;
+}
+
+#music-player-song {
+    position: relative;
+    float: right;
+    height: 66px;
+    width: 700px;
+    margin-left: 5px;
+    background-color: #141414;
+    background-image: url("img/player_song.png");
+    background-size: 100% 100%;
+    transition: top .4s ease-in-out;
+}
+
+#song-text {
+    position: relative;
+    font-weight: 700;
+    color: black;
+    margin: 10px;
+    top: 30%;
+}
+
+.player-play {
+    background-image: url("img/player_play.png")!important;
 }
 
 #music-player-overlay {
     width: 100%;
     height: 100%;
     background-image: url(img/player_overlay.png);
-    cursor: url("cur/pointer2x.png"), auto;
+    cursor: url("cur/pointer2x.cur"), auto;
     background-size: contain;
 }