new colors

nginx/vue/src/assets/styles.css

@@ -116,12 +116,12 @@ h4 {
 
 h3,
 h4 {
-    @apply text-base;
-}
-h2 {
     @apply text-lg;
 }
 h1 {
+    @apply text-2xl;
+}
+h2 {
     @apply text-xl;
 }
 
@@ -260,7 +260,7 @@ td {
 }
 
 .background {
-    @apply fixed inset-0 z-0;
+    @apply fixed;
 }
 
 .halftone {

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

@@ -1,10 +1,11 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, useTemplateRef, onUnmounted } from "vue";
 
-const container = ref(null);
-const item1 = ref(null);
-const item2 = ref(null);
-const offset = ref(0);
+const container = useTemplateRef("container");
+const item1 = useTemplateRef("item1");
+const item2 = useTemplateRef("item2");
+
+let offset = 0;
 
 let rafId;
 
@@ -17,14 +18,14 @@ function animate() {
 
     const width = Math.max(ctnr.offsetWidth, it1.scrollWidth);
 
-    offset.value -= speed;
+    offset -= speed;
 
-    if (offset.value <= -width) {
-        offset.value += width;
+    if (offset <= -width) {
+        offset += width;
     }
 
-    it1.style.transform = `translateX(${offset.value}px)`;
-    it2.style.transform = `translateX(${width + offset.value}px)`;
+    it1.style.transform = `translateX(${offset}px)`;
+    it2.style.transform = `translateX(${width + offset}px)`;
 
     rafId = requestAnimationFrame(animate);
 }
@@ -39,9 +40,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="marquee" ref="container">
-        <p class="item" ref="item1"><slot /></p>
-        <p class="item item2" ref="item2"><slot /></p>
+    <div class="marquee">
+        <div class="container" ref="container">
+            <div class="item" ref="item1"><slot /></div>
+            <div class="item item2" ref="item2"><slot /></div>
+        </div>
     </div>
 </template>
 
@@ -49,16 +52,27 @@ onUnmounted(() => {
 .marquee {
     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;
 }
 
+.item1 {
+    left: 0px;
+}
+
 .item2 {
     position: absolute;
 }

nginx/vue/src/components/util/Time.vue

@@ -24,7 +24,7 @@ setInterval(updateDateTime, 60000);
 </script>
 
 <template>
-    <div class="items-center flex flex-col bg-bg_primary border-primary border">
+    <div class="items-center flex flex-col">
         <h1>{{ time }}</h1>
         <h1>{{ weekday }} {{ day }}, {{ month }}</h1>
     </div>

nginx/vue/src/components/util/Timer.vue

@@ -63,9 +63,7 @@ function playFinishedSound() {
 </script>
 
 <template>
-    <div
-        class="flex flex-col gap-1 items-center border-primary border p-1 bg-bg_primary"
-    >
+    <div class="flex flex-col gap-1 p-1 items-center">
         <h2 class="items-center">Timer</h2>
         <div v-if="finished && paused" class="flex flex-col">
             <div class="flex flex-row p-2 place-content-around">

nginx/vue/src/js/utils.js

@@ -6,3 +6,12 @@ export function shuffleArray(array) {
     array[j] = temp;
   }
 }
+
+export function getRandomColor() {
+  var letters = "0123456789ABCDEF";
+  var color = "#";
+  for (var i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}

nginx/vue/src/views/CV.vue

@@ -15,9 +15,10 @@
             <p>
                 Recently graduated from the University of Leeds with a BSc
                 Computer Science with Mathematics (International) degree.
-                Currently self-studying <i>Complex Analysis</i> and
-                <i>"An Introduction to Statistical Learning"</i>. Also building
-                personal projects aligned with the type of roles I am seeking.
+                Currently self-studying and building projects aligned with the
+                type of roles I am seeking. I have a strong background across a
+                variety of programming languages and will be able to quickly get
+                on board with any codebase.
             </p>
             <p>
                 I am most keen to work for a company with altruistic values and
@@ -71,8 +72,8 @@
                         <td>C++, Soldering, Embedded Systems</td>
                         <td>2022 - 2025</td>
                         <td class="row-leftalign">
-                            Created room decorations using salvaged components
-                            from discarded electronics.
+                            Created decorations using salvaged components from
+                            discarded electronics.
                         </td>
                     </tr>
                     <tr>
@@ -401,6 +402,7 @@
     --font-text: CreatoDisplay;
     --font-size-text: 90%;
     --font-size-heading: 2.5em;
+    --font-size-subheading: 1.5em;
     --font-size-tableheading: 1.2em;
 }
 
@@ -469,6 +471,7 @@ h2 {
     margin: 0px;
     margin-bottom: 3px;
     border-bottom: 1px solid var(--primary);
+    font-size: var(--font-size-subheading);
 }
 
 p {

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

@@ -1,5 +1,6 @@
 <script setup>
 import Timer from "@/components/util/Timer.vue";
+import Elle from "@/components/elle/Elle.vue";
 import Time from "@/components/util/Time.vue";
 import Chat from "@/components/util/Chat.vue";
 import MusicPlayer from "@/components/util/MusicPlayer.vue";
@@ -32,11 +33,12 @@ import UtenaFrame from "@/components/borders/UtenaFrame.vue";
                 <Gym class="gym" />
             </div>
             <div
-                class="sidebar border-primary 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">
-                    <Time />
-                    <Timer />
+                <div class="flex flex-col flex-1">
+                    <Time class="bg-bg_primary border-primary border-b" />
+                    <Timer class="border-primary border-b bg-bg_primary" />
+                    <Elle class="flex-1" />
                     <!-- <Chat class="bdr-2 bg-bg_primary" /> -->
                     <!-- <MusicPlayer /> -->
                 </div>