add tierlist link to homepage

8 files changed, 62 insertions, 21 deletions

diff --git a/assets/chuni-reaction.gif b/assets/chuni-reaction.gif
new file mode 100644
index 0000000..a660847
--- /dev/null
+++ b/assets/chuni-reaction.gif
diff --git a/assets/don-chan.gif b/assets/don-chan.gif
new file mode 100644
index 0000000..5a42cf7
--- /dev/null
+++ b/assets/don-chan.gif
diff --git a/assets/haruhikage.jpg b/assets/haruhikage.jpg
new file mode 100644
index 0000000..1ee9f09
--- /dev/null
+++ b/assets/haruhikage.jpg
diff --git a/assets/sayo-fries.gif b/assets/sayo-fries.gif
new file mode 100644
index 0000000..ad20b75
--- /dev/null
+++ b/assets/sayo-fries.gif
diff --git a/index.html b/index.html
index d915c26..a9fcd9a 100644
--- a/index.html
+++ b/index.html
@@ -74,11 +74,6 @@
                         alt="sdvx"
                         class="random-float"
                     />
-                    <img
-                    src="assets/chuni.png"
-                    alt="chuni"
-                    class="random-float"
-                />
                     </div>
                 </div>
             </div>
@@ -132,6 +127,8 @@
                     </script>
                 </section>
                 <p id="quote"></p>
+                <div class="random-image-container">
+                </div>
             </div>
 
             <div class="content">
@@ -190,6 +187,18 @@
                     />
                 </div>
                 <div id="clock" class="clock-widget"></div>
+                <div class="general-section" style="display: flex; justify-content: space-between; align-items: center;">
+                    <div style="width: 48%; border-right: 1px solid #000; padding-right: 10px;">
+                        <img src="assets/don-chan.gif" alt="Don-chan from Taiko no Tatsujin" class="border-img" style="width: 50%; height: auto; display: block; margin: 0 auto;" />
+                        <h3 style="text-align: center;">Rhythm Game Tierlist</h3>
+                        <p style="text-align: center;">my personal tierlist for rhythm games. I try to judge a series as a whole since most of them keep the same mechanics in sequels</p>
+                        <a href="/rhythm-games-tierlist.html" style="display: block; text-align: center;">check it out here</a>
+                    </div>
+                    <div style="width: 48%; padding-left: 10px;">
+                     <p style="text-align: center;">can we just pretend there's something cool here?</p>
+                    </div>
+                </div>
+
                 <div class="general-section" style="font-size: 1.1em">
                     <div>
                         <h3>GitHub</h3>
@@ -243,25 +252,29 @@
                     <li><a href="/extras/removed-vtuber-songs-and-covers.html">Externally archived but removed/privated VTuber songs and Covers</a></li>
                 </ul>
             </div>
-            
-  
-
             <div class="footer">
-                <marquee behavior="scroll" direction="right">
-                    pinapelz.moe/ pinapelz.com / phase-tracker.com /
-                    imisserinya.phase-tracker.com / patchwork.moekyun.me /
-                    blog.pinapelz.com / signpost.pinapelz.com /
-                    mojibaka.pinapelz.com / moekyun.me /
-                    vtuber-captcha.moekyun.me /
-                </marquee>
-
-                <a href="https://nekoweb.org/"
+                <div class="footer-links"></div>
+                    <p>
+                        <a href="https://pinapelz.moe">pinapelz.moe</a> /
+                        <a href="https://pinapelz.com">pinapelz.com</a> /
+                        <a href="https://phase-tracker.com">phase-tracker.com</a> /
+                        <a href="https://imisserinya.phase-tracker.com">imisserinya.phase-tracker.com</a> /
+                        <a href="https://patchwork.moekyun.me">patchwork.moekyun.me</a> /
+                        <a href="https://blog.pinapelz.com">blog.pinapelz.com</a> /
+                        <a href="https://signpost.pinapelz.com">signpost.pinapelz.com</a> /
+                        <a href="https://mojibaka.pinapelz.com">mojibaka.pinapelz.com</a> /
+                        <a href="https://moekyun.me">moekyun.me</a> /
+                        <a href="https://vtuber-captcha.moekyun.me">vtuber-captcha.moekyun.me</a>
+                    </p>
+                    <a href="https://nekoweb.org/"
                     ><img src="https://nekoweb.org/assets/buttons/button7.gif"
                 /></a>
                 <a href="https://linux.org/"
                     ><img
                         src="https://adriansblinkiecollection.neocities.org/buttons/a46.jpg"
                 /></a>
+                </div>
+
             </div>
         </div>
     </body>
diff --git a/rhythm-games.html b/rhythm-games-tierlist.html
index 63eb6d0..ef6d9ac 100644
--- a/rhythm-games.html
+++ b/rhythm-games-tierlist.html
@@ -97,6 +97,10 @@ img {
     object-fit: contain;
 }
 
+img:hover {
+	filter: brightness(0.8);
+}
+
 .bottom-container {
 	display: flex;
 	align-items: center;
diff --git a/scripts/index.js b/scripts/index.js
index f258952..e3dc338 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -125,5 +125,23 @@ document.addEventListener('DOMContentLoaded', function() {
   setInterval(fetchNowPlaying, 60000);
 });
 
+document.addEventListener("DOMContentLoaded", () => {
+  const images = [
+      "assets/sayo-fries.gif",
+      "assets/chuni-reaction.gif",
+      "assets/haruhikage.jpg",
+  ];
+
+  function displayRandomImage() {
+      const randomIndex = Math.floor(Math.random() * images.length);
+      const randomImage = images[randomIndex];
+      
+      const imageContainer = document.querySelector('.random-image-container');
+      imageContainer.innerHTML = `<img src="${randomImage}" alt="Random Image" class="border-img">`;
+  }
+
+  displayRandomImage();
+});
+
 setInterval(updateClock, 1000);
 updateClock();
\ No newline at end of file
diff --git a/styles/styles.css b/styles/styles.css
index 00368ec..005472e 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -389,8 +389,14 @@ blink {
     }
 }
 
-marquee {
-    font-size: 1.2em;
-    color: #ff69b4;
-    margin-bottom: 10px;
+.random-image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
+
+.random-image-container img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
\ No newline at end of file