new components

backend/main.go

@@ -14,7 +14,6 @@ import (
 )
 
 func main() {
-
 	logsDir := "/backend/logs"
 	logFile, err := os.OpenFile(logsDir+"/go.log", os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0644)
 	if err != nil {

nginx/vue/src/components/Navbar.vue

@@ -49,14 +49,10 @@ const faces_string = faces.join("      ");
         <RouterLink class="bdr-2 bg-bg_primary" to="/" v-if="!inHome">
             <a>HOME</a>
         </RouterLink>
-        <RouterLink
+        <RouterLink class="bdr-2 bg-bg_primary" v-if="parentPath" :to="parentPath">
-            class="bdr-2 bg-bg_primary"
-            v-if="parentPath"
-            :to="parentPath"
-        >
             <a>UP</a>
         </RouterLink>
-        <Headline class="border flex-1">
+        <Headline class="border flex-1 max-w-full">
             <code class="whitespace-pre">{{ faces_string }}</code>
         </Headline>
     </nav>

nginx/vue/src/components/text/Headline.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { ref, onMounted, useTemplateRef, onUnmounted } from "vue";
+import { onMounted, useTemplateRef, onUnmounted } from "vue";
 
 const container = useTemplateRef("container");
 const item1 = useTemplateRef("item1");
-const item2 = useTemplateRef("item2");
 
 let offset = 0;
 
@@ -14,7 +13,6 @@ const speed = 0.5; // pixels per frame
 function animate() {
     const ctnr = container.value;
     const it1 = item1.value;
-    const it2 = item2.value;
 
     const width = Math.max(ctnr.offsetWidth, it1.scrollWidth);
 
@@ -24,8 +22,7 @@ function animate() {
         offset += width;
     }
 
-    it1.style.transform = `translateX(${offset}px)`;
+    ctnr.style.transform = `translateX(${offset}px)`;
-    it2.style.transform = `translateX(${width + offset}px)`;
 
     rafId = requestAnimationFrame(animate);
 }
@@ -40,40 +37,32 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="marquee">
+    <div class="root">
         <div class="container" ref="container">
-            <div class="item" ref="item1"><slot /></div>
+            <div ref="item1">
-            <div class="item item2" ref="item2"><slot /></div>
+                <slot />
+            </div>
+            <div>
+                <slot />
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped>
-.marquee {
+.root {
     overflow: hidden;
-    width: 100%;
 }
 
 .container {
-    width: 100%;
-    height: fit-content;
-    position: relative;
-    will-change: transform;
-}
-
-.item {
-    height: fit-content;
-    top: 0px;
-    padding-right: 3em;
     width: fit-content;
-    white-space: nowrap;
+    height: fit-content;
-}
+    display: grid;
-
+    grid-auto-flow: column;
-.item1 {
+    grid-auto-columns: max-content;
-    left: 0px;
+    /* Each column fits its content */
-}
+    overflow-x: visible;
-
+    will-change: transform;
-.item2 {
+    gap: 10em;
-    position: absolute;
 }
 </style>

nginx/vue/src/views/home/Home.vue

@@ -1,11 +1,12 @@
 <script setup>
 import Timer from "@/components/util/Timer.vue";
-import Elle from "@/components/elle/Elle.vue";
 import Time from "@/components/util/Time.vue";
+import Elle from "@/components/elle/Elle.vue";
 import Chat from "@/components/util/Chat.vue";
 import MusicPlayer from "@/components/util/MusicPlayer.vue";
 
 import Intro from "./Intro.vue";
+import Intro2 from "./Intro2.vue";
 import Stamps from "./Stamps.vue";
 import Listening from "./Listening.vue";
 import Links from "./Links.vue";
@@ -14,15 +15,14 @@ import Collage from "./Collage.vue";
 import Favorites from "./Favorites.vue";
 import Gym from "./Gym.vue";
 import Consumption from "./Consumption.vue";
-
-import UtenaFrame from "@/components/borders/UtenaFrame.vue";
 </script>
 
 <template>
     <main class="halftone justify-center flex flex-row w-full h-full">
         <div class="h-fit flex flex-row">
             <div class="a4page-portrait homeGrid relative bdr-1">
-                <Intro class="intro" />
+                <!-- <Intro class="intro" /> -->
+                <Intro2 class="intro" />
                 <Listening class="listening" />
                 <Stamps class="stamps" />
                 <Feed class="feed" />
@@ -32,21 +32,16 @@ import UtenaFrame from "@/components/borders/UtenaFrame.vue";
                 <Favorites class="favorites" />
                 <Gym class="gym" />
             </div>
-            <div
+            <div class="sidebar border-quaternary place-content-between flex-1 flex flex-col m-10 w-60 ">
-                class="sidebar border-quaternary place-content-between flex-1 flex flex-col m-10 w-60 border-2"
-            >
                 <div class="flex flex-col flex-1">
-                    <Time class="bg-bg_primary border-primary border-b" />
+                    <Time class="bg-bg_primary border-primary border" />
-                    <Timer class="border-primary border-b bg-bg_primary" />
+                    <Timer class="border-primary border bg-bg_primary" />
                     <!-- <Elle class="flex-1" /> -->
                     <!-- <Chat class="bdr-2 bg-bg_primary" /> -->
                     <!-- <MusicPlayer /> -->
                 </div>
                 <div>
-                    <img
+                    <img src="/img/memes/fire-woman.gif" class="border-tertiary border" />
-                        src="/img/memes/fire-woman.gif"
-                        class="border-tertiary border"
-                    />
                 </div>
             </div>
         </div>
@@ -54,7 +49,7 @@ import UtenaFrame from "@/components/borders/UtenaFrame.vue";
 </template>
 
 <style scoped>
-.homeGrid > * {
+.homeGrid>* {
     border: 2px solid var(--quaternary);
     border-color: var(--quaternary);
     background-color: var(--bg_primary);
@@ -76,6 +71,7 @@ import UtenaFrame from "@/components/borders/UtenaFrame.vue";
 }
 
 @media (max-width: 1200px) {
+
     .tr,
     .br,
     .sidebar {
@@ -117,6 +113,7 @@ import UtenaFrame from "@/components/borders/UtenaFrame.vue";
     grid-column: span 4;
     grid-row: span 2;
 }
+
 .gym {
     grid-column: span 3;
     grid-row: span 2;

nginx/vue/src/views/home/Intro.vue

@@ -4,34 +4,28 @@ import Paragraph from "@/components/text/Paragraph.vue";
 </script>
 
 <template>
-    <div
+    <div class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start">
-        class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start"
+        <Header>Yo</Header>
-    >
+
-        <Header>Intro</Header>
+        <!-- <Header>Intro</Header> -->
-        <Paragraph>
+        <!-- <Paragraph> -->
-            Hi, I'm Adam, thank you for visiting my website. I'm currently a 20
+        <!--     Hi, I'm Adam, thank you for visiting my website. -->
-            something graduate looking for work. I like to game, listen to lots
+        <!-- </Paragraph> -->
-            of music and occasionally watch anime.
+        <!-- <Header>Getting around</Header> -->
-        </Paragraph>
+        <!-- <Paragraph> -->
-        <Header>Getting around</Header>
+        <!--     Pages available can be traversed through links below. I am hoping to -->
-        <Paragraph>
+        <!--     add some shrines, code-walkthoughs, live chat and page transitions -->
-            Pages available can be traversed through links below. I am hoping to
+        <!--     at a later date. -->
-            add some shrines, code-walkthoughs, live chat and page transitions
+        <!-- </Paragraph> -->
-            at a later date.
+        <!-- <Header>Contact</Header> -->
-        </Paragraph>
+        <!-- <Paragraph> -->
-        <Header>Contact</Header>
+        <!--     Please email me <a href="mailto:adam.a.french@outlook.com">here</a>, -->
-        <Paragraph>
+        <!--     or contact me though any of the social medias linked. -->
-            Please email me <a href="mailto:adam.a.french@outlook.com">here</a>,
+        <!-- </Paragraph> -->
-            or contact me though any of the social medias linked.
+        <!-- <Header>A Quote</Header> -->
-        </Paragraph>
+        <!-- <Paragraph> -->
-        <Header>A Quote</Header>
+        <!--     One crossed wire, one wayward pinch of potassium chlorate, one -->
-        <!-- <p>
+        <!--     errant twitch, and KA-BLOOIE! -->
-            What makes me a good demoman? If I were a bad demoman, I wouldn't be
+        <!-- </Paragraph> -->
-            sittin' here discussin' it with you, now would I?!
-        </p> -->
-        <Paragraph>
-            One crossed wire, one wayward pinch of potassium chlorate, one
-            errant twitch, and KA-BLOOIE!
-        </Paragraph>
     </div>
 </template>

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

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