eddy fix

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

@@ -1,27 +1,28 @@
 <script setup lang="ts">
-import { rand } from '@vueuse/core'
+import { rand } from "@vueuse/core";
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 
 interface Item {
-    x: number
+    x: number;
-    y: number
+    y: number;
-    dx: number
+    dx: number;
-    dy: number
+    dy: number;
-    content: string
+    content: string;
 }
 
-const container = ref<HTMLDivElement | null>(null)
+const container = ref<HTMLDivElement | null>(null);
-const itemEls = ref<HTMLDivElement[]>([])
+const itemEls = ref<HTMLDivElement[]>([]);
 
 const phrases = [
-    'Welcome to my website',
+    "Welcome to my website",
-    'Thank you for visiting',
+    "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
+    const c = container.value;
-    if (!c) return
+    if (!c) return;
 
-    const cw = c.clientWidth
+    const cw = c.clientWidth;
-    const ch = c.clientHeight
+    const ch = c.clientHeight;
 
     items.value.forEach((item, i) => {
-        const el = itemEls.value[i]
+        const el = itemEls.value[i];
-        if (!el) return
+        if (!el) return;
 
-        const ew = el.offsetWidth
+        const ew = el.offsetWidth;
-        const eh = el.offsetHeight
+        const eh = el.offsetHeight;
 
-        item.x += item.dx
+        item.x += item.dx;
-        item.y += item.dy
+        item.y += item.dy;
 
-        if (item.x < 0 || item.x > cw - ew) item.dx *= -1
+        if (item.x < 0 || item.x > cw - ew) item.dx *= -1;
-        if (item.y < 0 || item.y > ch - eh) item.dy *= -1
+        if (item.y < 0 || item.y > ch - eh) item.dy *= -1;
-    })
+    });
 
-    rafId = requestAnimationFrame(animate)
+    rafId = requestAnimationFrame(animate);
 }
 
 onMounted(async () => {
-    await nextTick()
+    await nextTick();
-    rafId = requestAnimationFrame(animate)
+    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="{
+        <div
-            transform: `translate(${item.x}px, ${item.y}px)`
+            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>