eddy fix

nginx/vue/src/views/home/Intro2.vue

@@ -1,27 +1,28 @@
 <script setup lang="ts">
-import { rand } from '@vueuse/core'
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { rand } from "@vueuse/core";
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 
 interface Item {
-    x: number
-    y: number
-    dx: number
-    dy: number
-    content: string
+    x: number;
+    y: number;
+    dx: number;
+    dy: number;
+    content: string;
 }
 
-const container = ref<HTMLDivElement | null>(null)
-const itemEls = ref<HTMLDivElement[]>([])
+const container = ref<HTMLDivElement | null>(null);
+const itemEls = ref<HTMLDivElement[]>([]);
 
 const phrases = [
-    'Welcome to my website',
-    'Thank you for visiting',
+    "Welcome to my website",
+    "Eddy is a top G",
+    "Thank you for visiting",
     "I'd love to know your recommendations",
     "Message me on discord or steam",
     "I like anime, all kinds of music and sci fic",
     "Try to stay away from instagram",
     "Always watching too much youtube",
-]
+];
 
 const items = ref<Item[]>(
     phrases.map((text, i) => ({
@@ -30,50 +31,56 @@ const items = ref<Item[]>(
         dx: rand(0, 100) / 100,
         dy: 0.5,
         content: text,
-    }))
-)
+    })),
+);
 
-let rafId = 0
+let rafId = 0;
 
 function animate() {
-    const c = container.value
-    if (!c) return
+    const c = container.value;
+    if (!c) return;
 
-    const cw = c.clientWidth
-    const ch = c.clientHeight
+    const cw = c.clientWidth;
+    const ch = c.clientHeight;
 
     items.value.forEach((item, i) => {
-        const el = itemEls.value[i]
-        if (!el) return
+        const el = itemEls.value[i];
+        if (!el) return;
 
-        const ew = el.offsetWidth
-        const eh = el.offsetHeight
+        const ew = el.offsetWidth;
+        const eh = el.offsetHeight;
 
-        item.x += item.dx
-        item.y += item.dy
+        item.x += item.dx;
+        item.y += item.dy;
 
-        if (item.x < 0 || item.x > cw - ew) item.dx *= -1
-        if (item.y < 0 || item.y > ch - eh) item.dy *= -1
-    })
+        if (item.x < 0 || item.x > cw - ew) item.dx *= -1;
+        if (item.y < 0 || item.y > ch - eh) item.dy *= -1;
+    });
 
-    rafId = requestAnimationFrame(animate)
+    rafId = requestAnimationFrame(animate);
 }
 
 onMounted(async () => {
-    await nextTick()
-    rafId = requestAnimationFrame(animate)
-})
+    await nextTick();
+    rafId = requestAnimationFrame(animate);
+});
 
 onUnmounted(() => {
-    cancelAnimationFrame(rafId)
-})
+    cancelAnimationFrame(rafId);
+});
 </script>
 
 <template>
     <div ref="container" class="w-full h-full relative overflow-hidden">
-        <div v-for="(item, i) in items" :key="i" ref="itemEls" class=" absolute w-fit h-fit" :style="{
-            transform: `translate(${item.x}px, ${item.y}px)`
-        }">
+        <div
+            v-for="(item, i) in items"
+            :key="i"
+            ref="itemEls"
+            class="absolute w-fit h-fit"
+            :style="{
+                transform: `translate(${item.x}px, ${item.y}px)`,
+            }"
+        >
             <h1>
                 {{ item.content }}
             </h1>