build fixes

src/components/bannerbar.vue

@@ -1,14 +1,20 @@
 <template>
     <div id="holder">
         <div id="marquee">
-            <img v-for="(item, path) in banners" :src="path" />
+            <img v-for="(item, path) in banners" :src="getBannerUrl(path)" />
-            <img v-for="(item, path) in banners" :src="path" />
+            <img v-for="(item, path) in banners" :src="getBannerUrl(path)" />
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
 const banners = import.meta.glob("@/assets/images/banners/*")
+function getBannerUrl(path: string) {
+    // return new URL(`${path}`, import.meta.url).href
+    const modules = import.meta.glob("/src/assets/images/banners/*", { eager: true });
+    const mod = modules[path] as { default: string };
+    return mod.default;
+}
 </script>
 
 <style lang="css" scoped>

src/components/blinkiebar.vue

@@ -1,14 +1,20 @@
 <template>
     <div id="holder">
         <div id="marquee">
-            <img v-for="(item, path) in blinkies" :src="path" />
+            <img v-for="(item, path) in blinkies" :src="getBlinkieUrl(path)" />
-            <img v-for="(item, path) in blinkies" :src="path" />
+            <img v-for="(item, path) in blinkies" :src="getBlinkieUrl(path)" />
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
 const blinkies = import.meta.glob("@/assets/images/blinkies/*")
+function getBlinkieUrl(path: string) {
+    // return new URL(`${path}`, import.meta.url).href
+    const modules = import.meta.glob("/src/assets/images/blinkies/*", { eager: true });
+    const mod = modules[path] as { default: string };
+    return mod.default;
+}
 </script>
 
 <style lang="css" scoped>

src/components/link.vue

@@ -0,0 +1,109 @@
+<template>
+    <a :href="props.url" target="_blank">
+        <div class="link highlight">
+            <div class="linkTitle">
+                <h3>{{ title }}</h3>
+            </div>
+            <div class="linkImage">
+                <img :src="getSocialUrl()">
+            </div>
+            <div class="linkDesc">
+                <p>{{ desc }}</p>
+            </div>
+        </div>
+    </a>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    title: String,
+    url: String,
+    image: String,
+    desc: String
+})
+
+function getSocialUrl() {
+    return new URL(`../assets/images/socials/${props.image}.svg`, import.meta.url).href
+}
+</script>
+<style scoped>
+h3 {
+    margin: 0;
+    color: black;
+    font-size: 24px;
+}
+
+p {
+    text-align: center;
+    margin: 0;
+    color: #efefef;
+}
+
+a {
+    /* color: #efefef; */
+    width: 100%;
+    max-width: 800px;
+    text-decoration: none;
+}
+
+img {
+    width: 100%;
+    height: 100%;
+    color: #efefef;
+}
+
+.link {
+    display: grid;
+    grid-template-columns: 150px 1fr;
+    grid-template-rows: 1fr 150px;
+    gap: 0px 0px;
+    grid-template-areas:
+        "linkTitle linkTitle"
+        "linkImage linkDesc";
+
+    @media screen and (max-width: 600px) {
+        grid-template-columns: 75px 1fr;
+        grid-template-rows: 1fr 75px;
+
+        .linkImage {
+            padding: 6px;
+        }
+        .linkTitle {
+            padding: 4px;
+            background-color: rgba(222, 222, 108, 1);
+            text-align: left;
+        }
+
+        h3,
+        p {
+            font-size: 16px;
+        }
+    }
+}
+
+.linkTitle {
+    grid-area: linkTitle;
+    border: 2px solid;
+    /* padding: .5em; */
+    padding-right: .5em;
+    text-align: right;
+    background: linear-gradient(-90deg, rgba(222, 222, 108, 1) 0%, rgba(222, 222, 108, 1) 25%, rgba(0, 212, 255, 0) 100%);
+    /* color: black; */
+}
+
+.linkImage {
+    grid-area: linkImage;
+    border: 2px solid;
+    padding: .5em;
+
+    background-color: black;
+}
+
+.linkDesc {
+    grid-area: linkDesc;
+    border: 2px solid;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>

src/components/navbar.vue

@@ -112,7 +112,7 @@ li {
     border: 2px solid;
     margin: .5em;
 
-    @media screen and (min-width: 450px) {
+    @media screen and (min-width: 451px) {
         display: none;
     }
 }

src/components/stamps.vue

@@ -2,12 +2,18 @@
     <div>
         <h2>stampbook</h2>
         <div id="stamp">
-            <img v-for="(item, path) in stamps" :src="path" />
+            <img v-for="(item, path) in stamps" :src="getStampUrl(path)" />
         </div>
     </div>
 </template>
 <script setup lang="ts">
 const stamps = import.meta.glob("@/assets/images/stamps/*")
+function getStampUrl(path: string) {
+    // return new URL(`${path}`, import.meta.url).href
+    const modules = import.meta.glob("/src/assets/images/stamps/*", { eager: true });
+    const mod = modules[path] as { default: string };
+    return mod.default;
+}
 </script>
 <style scoped>
 h2 {

src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
 import HomeView from '@/views/HomeView.vue'
-import SocialsView from '@/views/SocialsView.vue'
+import LinksView from '@/views/LinksView.vue'
 import PetsView from '@/views/PetsView.vue'
 import PortfolioView from '@/views/PortfolioView.vue'
 
@@ -14,9 +14,9 @@ const router = createRouter({
       component: HomeView,
     },
     {
-      path: '/socials',
+      path: '/links',
-      name: 'socials',
+      name: 'links',
-      component: SocialsView,
+      component: LinksView,
     },
     {
       path: '/pets',

src/views/LinksView.vue

@@ -0,0 +1,45 @@
+<template>
+    <div id="links">
+        <h1>LINKS</h1>
+        <h2>Socials</h2>
+        <Link :title="'https://x.com/angelgenki'" :url="'https://x.com/angelgenki'" :image="'twitter'" :desc="'my twitter, i mostly just tweet silly stuff'"/>
+        <Link :title="'discord'" :image="'discord'" :desc="'genki_angel'"/>
+        <Link :title="'https://www.roblox.com'" :url="'https://www.roblox.com/users/1757381'" :image="'roblox'" :desc="'@genki_angel'"/>
+        <h2>Development</h2>
+        <Link :title="'https://git.banii.cafe/'" :url="'https://git.banii.cafe/'" :image="'git'" :desc="'i upload all my public repos here'"/>
+        <Link :title="'https://github.com/genki-angel'" :url="'https://github.com/genki-angel'" :image="'github'" :desc="'my github, not very active'"/>
+        <Link :title="'https://x.com/genki_rbxdev'" :url="'https://x.com/genki_rbxdev'" :image="'twitter'" :desc="'i post roblox dev stuff here'"/>
+    </div>
+</template>
+<script setup lang="ts">
+import Underconstruction from '@/components/underconstruction.vue';
+import Link from '@/components/link.vue';
+
+</script>
+<style scoped>
+#links {
+    display: flex;
+    flex-direction: column;
+
+    justify-content: center;
+    align-items: center;
+
+    gap: 1em;
+}
+h1 {
+    margin: 0;
+    margin-top: 1em;
+}
+h2 {
+    margin-bottom: 0;
+}
+
+@media screen and (max-width: 600px) {
+    h1, h2 {
+        margin: 0;
+    }
+    h2 {
+        font-size: 32px;
+    }
+}
+</style>

src/views/PetsView.vue

@@ -30,8 +30,8 @@
         <pet :name="'???'" :image="'tarantula3'">
             <div>
                 <h4 class="highlight">Venezuelan Suntiger</h4>
-                <p>currently my biggest tarantula!<br>they have not been here for long, but they love to climb around in
+                <p>currently my biggest tarantula!<br>they have not been here for long, but they love to climb around
-                    their enclosure and hide behind their wall<br><span class="info">picture coming soon!</span></p>
+                    and eat bugs</p>
             </div>
         </pet>
         <h2>ISOPODS</h2>
@@ -76,7 +76,10 @@ p {
 }
 
 @media screen and (max-width: 800px) {
-    h1, h2, h4 {
+
+    h1,
+    h2,
+    h4 {
         font-size: 32px;
         margin: 0;
     }
@@ -84,7 +87,8 @@ p {
     h4 {
         text-align: center;
         margin-top: 0;
-}
+    }
+
     p {
         text-align: center;
         font-size: 20px;

src/views/SocialsView.vue

@@ -1,8 +0,0 @@
-<template>
-    <Underconstruction />
-</template>
-<script setup lang="ts">
-import Underconstruction from '@/components/underconstruction.vue';
-
-</script>
-<style scoped></style>

vite.config.ts

@@ -12,7 +12,16 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      // '@/assets': fileURLToPath(new URL('./assets', import.meta.url))
     },
   },
+  assetsInclude: ["**/*.GIF"],
+  build: {
+    rollupOptions: {
+      output: {
+        assetFileNames: `assets/[name].[ext]`
+      }
+    }
+  }
 })