fix build and darken light mode border color

app.vue

@@ -1,5 +0,0 @@
-<template>
-    <NuxtLayout>
-        <NuxtPage />
-    </NuxtLayout>
-</template>

components/ProjectCard.vue

@@ -11,11 +11,11 @@ export default {
 			<Icon size="64" class="text-sea-green" :name="headerIcon" />
 			<div class="ml-auto flex">
 				<a v-if="githubLink" :href="githubLink" :aria-label="`${name}'s Gtihub`"
-					class="dark:text-zinc-300/80 text-deep-indigo/75 dark:hover:text-zinc-200 hover:text-deep-indigo/95 dark:focus:text-zinc-200 focus:text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
+					class="dark:!text-zinc-300/80 !text-deep-indigo/75 dark:hover:!text-zinc-200 hover:!text-deep-indigo/95 dark:focus:!text-zinc-200 focus:!text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
 					<Icon size="38" name="tabler:brand-github" />
 				</a>
 				<a v-if="externalLink" :href="externalLink"
-					class="dark:text-zinc-300/80 text-deep-indigo/75 dark:hover:text-zinc-200 hover:text-deep-indigo/95 dark:focus:text-zinc-200 focus:text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
+					class="dark:!text-zinc-300/80 !text-deep-indigo/75 dark:hover:!text-zinc-200 hover:!text-deep-indigo/95 dark:focus:!text-zinc-200 focus:!text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
 					<Icon size="38" name="tabler:external-link" />
 				</a>
 			</div>

package-lock.json

@@ -7,7 +7,7 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
-        "@nuxt/content": "^2.8.2",
+        "@nuxt/content": "^2.12.1",
         "@vueuse/core": "^10.9.0",
         "xml": "^1.0.1"
       },

package.json

@@ -22,7 +22,7 @@
     "tailwindcss": "^3.3.3"
   },
   "dependencies": {
-    "@nuxt/content": "^2.8.2",
+    "@nuxt/content": "^2.12.1",
     "@vueuse/core": "^10.9.0",
     "xml": "^1.0.1"
   }

pages/index.vue

@@ -6,60 +6,53 @@ if (new Date(today.getFullYear() + "-07-30") > today) {
 	age--;
 }
 
+let tagLine = ref("");
+let typeStatus = ref(false);
+let displayTextArray = ["Fullstack dev", "Designer", "Blogger", "Freelancer"];
+let displayTextArrayIndex = ref(0);
+let charIndex = ref(0);
+
+const typeText = () => {
+	if (charIndex.value < displayTextArray[displayTextArrayIndex.value].length) {
+		if (!typeStatus.value) typeStatus.value = true;
+		tagLine.value += displayTextArray[displayTextArrayIndex.value].charAt(
+			charIndex.value
+		);
+		charIndex.value += 1;
+		setTimeout(typeText, 100);
+	} else {
+		typeStatus.value = false;
+		setTimeout(eraseText, Math.min(Math.floor(Math.random() * 2001), 1750));
+	}
+}
+
+const eraseText = () => {
+	if (charIndex.value > 0) {
+		if (!typeStatus.value) typeStatus.value = true;
+		tagLine.value = displayTextArray[displayTextArrayIndex.value].substring(
+			0,
+			charIndex.value - 1
+		);
+		charIndex.value -= 1;
+		setTimeout(eraseText, 50);
+	} else {
+		typeStatus.value = false;
+		displayTextArrayIndex.value += 1;
+		if (displayTextArrayIndex.value >= displayTextArray.length)
+			displayTextArrayIndex.value = 0;
+		setTimeout(typeText, 1100);
+	}
+}
+
+onMounted(() => {
+	setTimeout(typeText, 2200);
+})
+
 useHead({
 	title: 'Juls07',
 })
 </script>
 
-<script lang="ts">
-export default {
-	data: () => {
-		return {
-			tagLine: "",
-			typeStatus: false,
-			displayTextArray: ["Fullstack dev", "Designer", "Blogger", "Freelancer"],
-			displayTextArrayIndex: 0,
-			charIndex: 0,
-		};
-	},
-	methods: {
-		typeText() {
-			if (this.charIndex < this.displayTextArray[this.displayTextArrayIndex].length) {
-				if (!this.typeStatus) this.typeStatus = true;
-				this.tagLine += this.displayTextArray[this.displayTextArrayIndex].charAt(
-					this.charIndex
-				);
-				this.charIndex += 1;
-				setTimeout(this.typeText, 100);
-			} else {
-				this.typeStatus = false;
-				setTimeout(this.eraseText, Math.min(Math.floor(Math.random() * 2001), 1750));
-			}
-		},
-		eraseText() {
-			if (this.charIndex > 0) {
-				if (!this.typeStatus) this.typeStatus = true;
-				this.tagLine = this.displayTextArray[this.displayTextArrayIndex].substring(
-					0,
-					this.charIndex - 1
-				);
-				this.charIndex -= 1;
-				setTimeout(this.eraseText, 50);
-			} else {
-				this.typeStatus = false;
-				this.displayTextArrayIndex += 1;
-				if (this.displayTextArrayIndex >= this.displayTextArray.length)
-					this.displayTextArrayIndex = 0;
-				setTimeout(this.typeText, 1100);
-			}
-		},
-	},
-	created() {
-		setTimeout(this.typeText, 2200);
-	},
-}
-</script>
-
 <template>
 	<div class="min-h-screen">
 		<Nav class="absolute z-10 text-white" />

tailwind.config.js

@@ -22,7 +22,7 @@ module.exports = {
         'deep-indigo': '#393041',
         'midnight-slate': '#2F353D',
         'obsidian-night': '#131316',
-        'soft-lilac': '#E4DDEE',
+        'soft-lilac': '#DCD6E6',
       },
       screens: {
         'xs': '512px',