Revert "Revert "idk what I changed""

This reverts commit 0d32333c0c.

nginx/vue/src/assets/styles.css

@@ -279,8 +279,8 @@ td {
     background-position: 0 0;
 
     mask-image: linear-gradient(
-        30deg,
+        -180deg,
         rgba(1, 1, 1, 1) 0%,
-        rgba(1, 1, 1, 0.9) 100%
+        rgba(1, 1, 1, 0.92) 100%
     );
 }

nginx/vue/src/views/home/BadApple.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useTemplateRef, ref, onMounted, onUnmounted } from 'vue';
+
+const display = useTemplateRef('display')
+const displayText = ref("");
+
+const charHeight: number = 14;
+const charWidth: number = charHeight * 0.6;
+let n: number;
+let m: number;
+
+function setup() {
+    display.value.style.fontSize = `${charHeight}px`;
+    display.value.style.lineHeight = `${charHeight}px`;
+    fillDisplay()
+}
+
+function fillDisplay() {
+    // M rows N columns
+    m = Math.floor(display.value.offsetHeight / charHeight);
+    n = Math.floor(display.value.offsetWidth / charWidth);
+    const row = ' '.repeat(n);
+    displayText.value = (row + '\n').repeat(m - 1) + row
+}
+
+function close() {
+    displayText.value = ""
+}
+
+onMounted(() => {
+    setup()
+})
+
+onUnmounted(() => {
+    close()
+})
+</script>
+
+<template>
+    <pre class="overflow-scroll w-full h-full bg-black text-white m-0 p-0" id="container" ref="display">{{ displayText
+    }}</pre>
+</template>

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

@@ -7,6 +7,7 @@ import MusicPlayer from "@/components/util/MusicPlayer.vue";
 
 import Intro from "./Intro.vue";
 import Intro2 from "./Intro2.vue";
+import BadApple from "./BadApple.vue";
 import Stamps from "./Stamps.vue";
 import Listening from "./Listening.vue";
 import Links from "./Links.vue";
@@ -22,7 +23,8 @@ import Consumption from "./Consumption.vue";
         <div class="h-fit flex flex-row">
             <div class="a4page-portrait homeGrid relative bdr-1">
                 <!-- <Intro class="intro" /> -->
-                <Intro2 class="intro" />
+                <!-- <Intro2 class="intro" /> -->
+                <BadApple class="intro" />
                 <Listening class="listening" />
                 <Stamps class="stamps" />
                 <Feed class="feed" />

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

@@ -6,7 +6,6 @@ import Paragraph from "@/components/text/Paragraph.vue";
 <template>
     <div class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start">
         <Header>Yo</Header>
-
         <!-- <Header>Intro</Header> -->
         <!-- <Paragraph> -->
         <!--     Hi, I'm Adam, thank you for visiting my website. -->

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

@@ -10,19 +10,20 @@ interface Item {
     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',
     '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"
+    "Always watching too much youtube",
 ]
 
-const items = ref < Item[] > (
+const items = ref<Item[]>(
     phrases.map((text, i) => ({
         x: i * 20,
         y: i * 20,
@@ -73,9 +74,9 @@ onUnmounted(() => {
         <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>
+            <h1>
                 {{ item.content }}
-            </p>
+            </h1>
         </div>
     </div>
 </template>

nginx/vue/src/views/home/Links.vue

@@ -1,7 +1,6 @@
 <script setup>
 import RouterTable from "@/components/util/RouterTable.vue";
 import LinkTable from "@/components/util/LinkTable.vue";
-import Markdown from "@/components/util/Markdown.vue";
 
 const site_links = [
     { name: "CV", link: "/cv" },