simple collage implementation

nginx/vue/src/components/home/Collage.vue

@@ -1,12 +1,35 @@
+<script setup>
+import { ref } from "vue";
+
+const images = [
+    "/img/memes/fire-woman.gif",
+    "/img/memes/pidgeon.gif",
+    "/img/memes/no_slip.png",
+    "/img/memes/epic.jpeg",
+];
+
+const currentIndex = ref(0);
+
+function nextImage() {
+    currentIndex.value = Math.floor(Math.random() * 100) % images.length;
+}
+
+setInterval(nextImage, 10000);
+</script>
+
 <template>
-    <div class="flex-col center-content">
-        <h2>Pidgeon [will be collage]</h2>
-        <img src="/img/memes/pidgeon.gif" />
+    <div class="image-viewer" @click="nextImage">
+        <img
+            :src="images[currentIndex]"
+            v-on:click="nextImage"
+            alt="Image Viewer"
+        />
     </div>
 </template>
 
 <style scoped>
 img {
     width: 100%;
+    height: 100%;
 }
 </style>

nginx/vue/src/components/home/Links.vue

@@ -1,26 +1,24 @@
 <template>
     <div class="flex-col space-between">
         <div class="flex-col gap">
-            <RouterLink class="bdr-secondary" to="/cv">
+            <RouterLink class="bdr-2" to="/cv">
                 <h1>CV</h1>
             </RouterLink>
-            <RouterLink class="bdr-secondary" to="/admin">
+            <!-- <RouterLink class="bdr-2" to="/shrines/demoman">
+                <h1>Demo</h1>
+            </RouterLink> -->
+            <RouterLink class="bdr-2" to="/admin">
                 <h1>ADMIN</h1>
             </RouterLink>
         </div>
         <div class="flex-col gap">
-            <a
-                class="bdr-secondary"
-                href="https://steamcommunity.com/id/SteveThePug"
+            <a class="bdr-2" href="https://steamcommunity.com/id/SteveThePug"
                 ><h1>Steam</h1></a
             >
-            <a href="https://github.com/SteveThePug" class="bdr-secondary"
+            <a href="https://github.com/SteveThePug" class="bdr-2"
                 ><h1>Github</h1></a
             >
-            <a
-                href="https://open.spotify.com/user/stevethepug"
-                class="bdr-secondary"
-            >
+            <a href="https://open.spotify.com/user/stevethepug" class="bdr-2">
                 <h1>Spotify</h1></a
             >
         </div>

nginx/vue/src/views/shrines/Demoman.vue

@@ -1,27 +1,28 @@
 <template>
-    <div>
-        <video width="600" height="400" controls preload="none">
+    <div class="flex-col">
+        <p><a href="https://wiki.teamfortress.com/wiki/Demoman">The goat</a></p>
+        <video class="bdr-1" width="300" height="400" controls preload="none">
             <source
                 src="/img/demoman/1760582395316219.webm"
                 type="video/webm"
             />
         </video>
-        <video width="600" height="400" controls preload="none">
+        <video class="bdr-1" width="300" height="400" controls preload="none">
             <source
                 src="/img/demoman/1761052136609718.webm"
                 type="video/webm"
             />
         </video>
-        <video width="600" height="400" controls preload="none">
+        <video class="bdr-1" width="600" height="400" controls preload="none">
             <source src="/img/demoman/1761088452011210.mp4" type="video/mp4" />
         </video>
-        <video width="600" height="400" controls preload="none">
+        <video class="bdr-1" width="600" height="400" controls preload="none">
             <source
                 src="/img/demoman/1761570214170465.webm"
                 type="video/webm"
             />
         </video>
-        <video width="600" height="400" controls preload="none">
+        <video class="bdr-1" width="600" height="400" controls preload="none">
             <source
                 src="/img/demoman/1761828457509465.webm"
                 type="video/webm"
@@ -29,3 +30,5 @@
         </video>
     </div>
 </template>
+
+<style scoped></style>