🚧 Adds terminal

src/components/Terminal.vue

@@ -0,0 +1,104 @@
+<template>
+    <p v-html="text" class="p-4"/>
+
+</template>
+
+<style>
+p {
+    color: #ffffff;
+    line-height: normal;
+    font-size: 1.15rem;
+}
+
+.s-white {
+    color: #ffffff;
+}
+
+.s-green {
+    color: #2ec27e;
+}
+
+.s-blue {
+    color: #1e78e4;
+}
+</style>
+
+<script lang="ts" setup>
+import {onMounted, ref} from "vue";
+
+const text = ref("")
+
+interface Part {
+    pre?: string;
+    content: string;
+    post?: string;
+}
+
+const prompt: Part[] = [
+    {
+        pre: `<span class="s-white">`,
+        content: `╭─`,
+        post: `</span>`
+    },
+    {
+        pre: `<span class="s-green font-bold">`,
+        content: `guest@svitan.dev`,
+        post: `</span>`
+    },
+    {
+        content: ` `
+    },
+    {
+        pre: `<span class="s-blue">`,
+        content: `~`,
+        post: `</span><br>`
+    },
+    {
+        pre: `<span class="s-white">`,
+        content: `╰─$ `,
+        post: `</span>`
+    }
+]
+
+const target: Part[] = [
+    ...prompt,
+    {
+        content: "./portfolio",
+        post: `<br>`
+    },
+    {
+        content: `
+ ____              _      _   ____       _ _        \\\\//
+|  _ \\  __ _ _ __ (_) ___| | / ___|_   _(_) |_ __ _ _\\/_
+| | | |/ _\` | '_ \\| |/ _ \\ | \\___ \\ \\ / / | __/ _\` | '_ \\
+| |_| | (_| | | | | |  __/ |  ___) \\ V /| | || (_| | | | |
+|____/ \\__,_|_| |_|_|\\___|_| |____/ \\_/ |_|\\__\\__,_|_| |_|
+`
+    }
+]
+
+onMounted(() => {
+    let i = 0;
+    let j = 0;
+    const id = setInterval(() => {
+        if (i === target[j].content.length) {
+            text.value += target[j].post ?? "";
+            i = 0;
+            j++;
+            text.value += target[j].pre ?? "";
+        }
+        if (i === 0 && j === 0) {
+            text.value += target[j].pre ?? "";
+        }
+
+        text.value += target[j].content[i]
+            .replaceAll("\n", "<br>")
+            .replaceAll(" ", "&nbsp;");
+        if (j === target.length - 1 && i === target[j].content.length - 1) {
+            text.value += target[j].post ?? "";
+            clearTimeout(id);
+        }
+        i++;
+    }, 5)
+})
+</script>