light mode and a few improvements

2024-04-08 22:52:47 -05:00
parent 66ad112d8c
commit ca1283d5a8
42 changed files with 14514 additions and 9654 deletions
--- a/.gitignore
+++ b/.gitignore
--- a/0
+++ b/0
--- a/README.md
+++ b/README.md
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -7,13 +7,7 @@

 html,
 body {
-	background-color: #191819;
-	color: white;
-	z-index: 0;
-}
-
-a {
-	@apply text-rose-500 hover:underline visited:bg-rose-700;
+	@apply bg-soft-lavender dark:bg-midnight text-deep-indigo dark:text-white;
 }

 .font-jetbrains {
@@ -27,18 +21,6 @@ samp {
 	font-family: 'JetBrains Mono', monospace;
 }

-.text-overflow:before {
-	content: "";
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	left: 0;
-	top: 0;
-	--tw-bg-opacity: 1;
-	background: linear-gradient(transparent 150px,
-			rgba(39, 39, 42, var(--tw-bg-opacity)));
-}
-
 .love {
 	text-decoration: underline;
 	text-decoration-color: #EB0066;
--- a/assets/images/header.jpg
+++ b/assets/images/header.jpg
--- a/assets/images/juls07.png
+++ b/assets/images/juls07.png
--- a/components/IconTag.vue
+++ b/components/IconTag.vue
@@ -1,10 +1,8 @@
 <template>
    <div :aria-label="name"
-        class="font-inter md:text-lg w-fit max-h-9 min-w-fit bg-zinc-800 border border-zinc-700/30 py-1 px-2 rounded shadow flex items-center"
-        :class="(isTag) ? 'select-none' : 'select-text'"
-        :style="(size) ? 'font-size: ' + size + 'px;' : ''">
-        <Icon :size="(size) ? size : '20'"
-            class="mr-2"
+        class="font-inter md:text-lg w-fit max-h-9 min-w-fit dark:bg-obsidian-night bg-[hsl(270,68%,95.47%)] border border-soft-lilac dark:border-midnight-slate/30 py-1 px-2 rounded shadow flex items-center"
+        :class="(isTag) ? 'select-none' : 'select-text'" :style="(size) ? 'font-size: ' + size + 'px;' : ''">
+        <Icon :size="(size) ? size : '20'" class="mr-2"
            :name="(isTag) ? ('logos:' + (tagMap[iconName.toLowerCase().split(' ').join('-')] || iconName.toLowerCase())) : iconName" />
        {{ name }}
    </div>
@@ -12,7 +10,7 @@

 <style scoped>
 .font-inter {
-	font-family: 'Inter', arial, helvetica, sans-serif;
+    font-family: 'Inter', arial, helvetica, sans-serif;
 }
 </style>

--- a/components/Nav.vue
+++ b/components/Nav.vue
@@ -1,9 +1,97 @@
+<script setup lang="ts">
+let colorMode = useColorMode();
+
+const changeTheme = () => {
+	if (colorMode.preference === "dark") {
+		// from dark => light
+		colorMode.preference = "light"
+		document.documentElement.classList.remove("dark");
+	} else if (colorMode.preference === "light") {
+		// from light => system
+		colorMode.preference = "system";
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			document.documentElement.classList.add("dark");
+		} else {
+			document.documentElement.classList.remove("dark");
+		}
+	} else {
+		// from system => dark
+		colorMode.preference = "dark";
+		document.documentElement.classList.add("dark");
+	}
+
+	return;
+}
+
+</script>
+
 <template>
-	<nav class="px-2 py-4 w-full">
-		<ul class="flex gap-x-3 font-semibold">
-			<li class="absolute w-fit -translate-x-full top-0 px-2 py-4 bg-[#191819] opacity-0 focus-within:translate-x-0 focus-within:opacity-100"><a class="text-white" href="#main">Skip to content</a></li>
-			<li><nuxt-link class="text-white" to="/">Home</nuxt-link></li>
-			<li><nuxt-link class="text-white" to="/blog">Blog</nuxt-link></li>
-		</ul>
+	<nav class="h-16 z-10 w-full">
+		<div class="px-6 max-w-7xl grid gap-2 grid-cols-12 ms-auto me-auto h-full justify-evenly">
+			<div class="ml-0 col-span-6 sm:col-span-4 flex items-center">
+				<ul class="flex gap-x-8">
+					<li
+						class="absolute w-fit -translate-x-full top-0 px-2 py-4 bg-soft-lavender dark:bg-midnight text-deep-indigo dark:text-white opacity-0 focus-within:translate-x-0 focus-within:opacity-100">
+						<a href="#main">Skip to content</a>
+					</li>
+					<li>
+						<NuxtLink to="/">
+							Home
+						</NuxtLink>
+					</li>
+					<li>
+						<NuxtLink to="/blog">
+							Blog
+						</NuxtLink>
+					</li>
+				</ul>
+			</div>
+			<div class="mr-0 col-span-4 items-center hidden sm:flex"> </div>
+			<div class="mr-0 col-span-6 sm:col-span-4 flex items-center justify-end">
+				<ul class="flex gap-x-4">
+					<li>
+						<a href="https://www.github.com/juls0730">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+								<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21" />
+							</svg>
+						</a>
+					</li>
+					<li>
+						<a href="https://x.com/julie4055_">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+								<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+									stroke-width="2" d="m4 4l11.733 16H20L8.267 4zm0 16l6.768-6.768m2.46-2.46L20 4" />
+							</svg>
+						</a>
+					</li>
+					<li>
+						<button @click="changeTheme">
+							<div v-if="$colorMode.preference === 'dark'">
+								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+									<path fill="none" stroke="currentColor" stroke-linecap="round"
+										stroke-linejoin="round" stroke-width="2"
+										d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z" />
+								</svg>
+							</div>
+							<div v-else-if="$colorMode.preference === 'light'">
+								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+									<path fill="none" stroke="currentColor" stroke-linecap="round"
+										stroke-linejoin="round" stroke-width="2"
+										d="M14.828 14.828a4 4 0 1 0-5.656-5.656a4 4 0 0 0 5.656 5.656m-8.485 2.829l-1.414 1.414M6.343 6.343L4.929 4.929m12.728 1.414l1.414-1.414m-1.414 12.728l1.414 1.414M4 12H2m10-8V2m8 10h2m-10 8v2" />
+								</svg>
+							</div>
+							<div v-else>
+								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
+									<path fill="currentColor"
+										d="M208 36H48a28 28 0 0 0-28 28v112a28 28 0 0 0 28 28h160a28 28 0 0 0 28-28V64a28 28 0 0 0-28-28Zm4 140a4 4 0 0 1-4 4H48a4 4 0 0 1-4-4V64a4 4 0 0 1 4-4h160a4 4 0 0 1 4 4Zm-40 52a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12Z" />
+								</svg>
+							</div>
+						</button>
+					</li>
+				</ul>
+			</div>
+		</div>
 	</nav>
-</template>
+</template>
--- a/components/ProjectCard.vue
+++ b/components/ProjectCard.vue
@@ -6,39 +6,26 @@ export default {

 <template>
 	<div
-		class="bg-[#201F20] relative border p-6 col-span-12 sm:col-span-10 sm:col-start-2 md:col-start-auto md:col-span-6 xl:!col-span-4 h-[60vw] max-h-[425px] min-h-[375px] border-zinc-700/30 shadow-md rounded-lg">
-		<div class="flex mb-4 items-center"
-			v-if="headerIcon">
-			<Icon size="64"
-				class="text-[#00FFC2]"
-				:name="headerIcon" />
+		class="dark:bg-dark-slate bg-touched-lavender relative border p-6 col-span-12 sm:col-span-10 sm:col-start-2 md:col-start-auto md:col-span-6 xl:!col-span-4 h-[60vw] max-h-[425px] min-h-[375px] border-soft-lilac dark:border-midnight-slate/30 shadow-md rounded-lg">
+		<div class="flex mb-4 items-center" v-if="headerIcon">
+			<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="text-zinc-300/80 hover:text-zinc-200 focus:text-zinc-200 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-[#EB0066]">
-					<Icon size="38"
-						name="tabler:brand-github" />
+				<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">
+					<Icon size="38" name="tabler:brand-github" />
 				</a>
-				<a v-if="externalLink"
-					:href="externalLink"
-					class="text-zinc-300/80 hover:text-zinc-200 focus:text-zinc-200 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-[#EB0066]">
-					<Icon size="38"
-						name="tabler:external-link" />
+				<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">
+					<Icon size="38" name="tabler:external-link" />
 				</a>
 			</div>
 		</div>
 		<h3 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h3>
-		<div id="body"
-			class="mb-4">
+		<div id="body" class="mb-4">
 			<slot />
 		</div>
-		<div class="flex flex-wrap gap-2 absolute bottom-6"
-			v-if="icons">
-			<IconTag v-for="icon in icons"
-				size="16"
-				:name="icon.name"
-				:iconName="icon.icon"></IconTag>
+		<div class="flex flex-wrap gap-2 absolute bottom-6" v-if="icons">
+			<IconTag v-for="icon in icons" size="16" :name="icon.name" :iconName="icon.icon"></IconTag>
 		</div>
 	</div>
 </template>
--- a/components/content/ProseCode.vue
+++ b/components/content/ProseCode.vue
@@ -1,31 +1,26 @@
 <template>
-	<div
-		class="container my-2 bg-neutral-900">
-		<span v-if="filename"
-			class="filename-text text-xs leading-none tracking-tight text-gray-400 font-jetbrains">
+	<div class="container my-2 dark:bg-[#1d1b1d] bg-[hsl(270,26.89%,94.47%)]">
+		<span v-if="filename" class="filename-text text-xs leading-none tracking-tight text-gray-400 font-jetbrains">
 			{{ filename }}
 		</span>
-			<slot />
+		<slot />
 		<div class="bottom-container">
 			<div class="copy-container">
-				<button class="rounded hover:bg-zinc-800/60 transition-colors duration-200 flex p-1"
+				<button
+					class="rounded hover:bg-zinc-300/70 dark:hover:bg-zinc-800/60 transition-colors duration-200 flex p-1"
 					@click="copy(code)" @keypress.space="copy(code)">
-					<div class="h-6"
-						v-if="copied">
-						<Icon size="24"
-							name="tabler:check" />
+					<div class="h-6" v-if="copied">
+						<Icon size="24" name="tabler:check" />
 					</div>
-					<div class="h-6"
-						v-else>
-						<Icon size="24"
-							name="tabler:copy" />
+					<div class="h-6" v-else>
+						<Icon size="24" name="tabler:copy" />
 					</div>
 				</button>
 			</div>
 		</div>
 	</div>
 </template>
-  
+
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core';
 const { copy, copied } = useClipboard();
@@ -39,7 +34,7 @@ const props = withDefaults(
 	{ code: '', language: null, filename: null, highlights: undefined }
 );
 </script>
-  
+
 <style scoped>
 .icon {
 	display: block;
--- a/components/content/ProseCodeInline.vue
+++ b/components/content/ProseCodeInline.vue
@@ -1,12 +1,11 @@
 <template>
-	<code>
+	<code class="dark:bg-[#1d1b1d] bg-[hsl(270,26.89%,94.47%)]">
 		<slot />
 	</code>
 </template>

 <style scoped>
 code {
-	background-color: #252425;
 	border-radius: 0.375rem;
 	font-size: 0.875rem;
 	font-weight: 400;
--- a/components/content/ProseH2.vue
+++ b/components/content/ProseH2.vue
--- a/components/newsletterSignup.vue
+++ b/components/newsletterSignup.vue
@@ -1,9 +0,0 @@
-<template>
-	<div class="bg-[#1f1d1f] px-4 py-4 md:py-6 rounded-lg border border-neutral-800 flex flex-col">
-		<h1 class="mb-2 text-2xl">Get notified</h1>
-			<input type="email"
-				placeholder="Email..."
-				name="email"
-				class="px-4 py-2 my-2 w-full sm:w-4/5 border shadow-sm rounded-md resize-none border-neutral-700 transition-colors bg-zinc-800 focus:border-neutral-500 focus:outline-none placeholder:italic placeholder:text-gray-300 text-white" />
-	</div>
-</template>
--- a/content/blog/100DaysOfCode-challenge.md
+++ b/content/blog/100DaysOfCode-challenge.md
@@ -15,12 +15,15 @@ head:
    - name: 'copyright'
      content: '© 2022 juls07'
 date: 2023-01-01
+# _draft: true
 tags:
  - web dev
  - nodejs
 ---

-For my #100DaysOfCode challenge on [twitter](https://twitter.com/julie4055_) I decided to make a UI framework similar to vue.js (terrible idea). For day 1 it started simple with learning about reactivity, a short read of this [great blog post](https://lihautan.com/reactivity-in-web-frameworks-the-when/) by Tan Li Hau I had a basic trackable object function in the script.js file. For day 2 I had covered a few more things in the UI framework world, I had a templating system, a basic virtualDOM-like implementation,<!--more--> a [different reactive prop function](https://dev.to/siddharthshyniben/implementing-reactivity-from-scratch-51op) from siddharth, and we had a basic click directive working, great work so far. Day 3 and 4 are kinda lame, on day 3 I added a model directive similar to vue.js' v-model and on day 4 I changed the way templates were handled so I could have text before the template and I started trying to be like JSX (lmao), kinda lame and basic IMO. Now day 5 I learned about SPA routing, very simple routing that just changed the page link and rendered the template from the new page. Day 6-9 is more boring shit, simple things like a once attribute, an html attribute, etc etc. But on day 10 I learned about conditional rendering, this was an amazing learning experience for me, it taught me loads about recursive functions and how recursive functions should be used.  skipping over day 11 because I added a few more directives on day 12 I made a mounted function similar to vue.js' mounted function except for the fact that it was made by me so it was terrible XD. On day 13 crazy thing happened, I decided to stop pretending to be JSX and made template files using SSR, SSR was very simple to get working, basically I just pre-rendered the page and sent the page to the client, pretty simple, but SSR would give me many more opportunities in the future of this project. skipping over day 14-20 (can you tell I was loosing motivation fast or what?) on day 21 we actually got some code gen on the server side, very simple but still pretty cool in my opinion, here's the code I shared on day 21
+For my #100DaysOfCode challenge on [twitter](https://twitter.com/julie4055_) I decided to make a UI framework similar to vue.js (terrible idea). For day 1 it started simple with learning about reactivity, a short read of this [great blog post](https://lihautan.com/reactivity-in-web-frameworks-the-when/) by Tan Li Hau I had a basic trackable object function in the script.js file. For day 2 I had covered a few more things in the UI framework world, I had a templating system, a basic virtualDOM-like implementation, a [different reactive prop function](https://dev.to/siddharthshyniben/implementing-reactivity-from-scratch-51op) from siddharth, and we had a basic click directive working, great work so far. 
+<!--more--> 
+Day 3 and 4 are kinda lame, on day 3 I added a model directive similar to vue.js' v-model and on day 4 I changed the way templates were handled so I could have text before the template and I started trying to be like JSX (lmao), kinda lame and basic IMO. Now day 5 I learned about SPA routing, very simple routing that just changed the page link and rendered the template from the new page. Day 6-9 is more boring shit, simple things like a once attribute, an html attribute, etc etc. But on day 10 I learned about conditional rendering, this was an amazing learning experience for me, it taught me loads about recursive functions and how recursive functions should be used.  skipping over day 11 because I added a few more directives on day 12 I made a mounted function similar to vue.js' mounted function except for the fact that it was made by me so it was terrible XD. On day 13 crazy thing happened, I decided to stop pretending to be JSX and made template files using SSR, SSR was very simple to get working, basically I just pre-rendered the page and sent the page to the client, pretty simple, but SSR would give me many more opportunities in the future of this project. skipping over day 14-20 (can you tell I was loosing motivation fast or what?) on day 21 we actually got some code gen on the server side, very simple but still pretty cool in my opinion, here's the code I shared on day 21

 ```ts[index.ts]
 template = template.replace('<script async src="/src/entry-client.ts" type="module"></script>', '');
--- a/content/blog/how-i-made-my-site-fast.md
+++ b/content/blog/how-i-made-my-site-fast.md
@@ -15,6 +15,7 @@ head:
    - name: 'copyright'
      content: '© 2022 juls07'
 date: 2022-05-22
+# _draft: true
 tags:
  - web dev
  - fullstack development
@@ -22,7 +23,9 @@ tags:
  - nodejs
  - redis
 ---
-So yesterday I talked about my social media site that I'm working on. Today I implemented redis, a memory store that I used to reduce requests at most by 48ms. First when I tried to use redis I just used the `redis` package off of npmjs because it only makes sense but when I tried to get a key with the name of `user-cache-[userId]` It failed for some reason, I still dont know why it failed but using the `ioredis` package and<!--more--> everything started working, not user data processing, what I used redis to cache since it's a terrible for loop that executes database requests for every post, but now it's all stored in memory. I still want to add TTL since my VPS that I intend on deploying my site on for production only has 1GB of RAM but I'm not sure how to do that. If you saw my blog post from [yesterday](/blog/what-ive-been-doing) then you'll know what my user code used to look like, now it looks like this.
+So yesterday I talked about my social media site that I'm working on. Today I implemented redis, a memory store that I used to reduce requests at most by 48ms. First when I tried to use redis I just used the `redis` package off of npmjs because it only makes sense but when I tried to get a key with the name of `user-cache-[userId]` It failed for some reason, I still dont know why it failed but using the `ioredis` package and everything started working, not user data processing, what I used redis to cache since it's a terrible for loop that executes database requests for every post, but now it's all stored in memory.
+<!--more-->
+I still want to add TTL since my VPS that I intend on deploying my site on for production only has 1GB of RAM but I'm not sure how to do that. If you saw my blog post from [yesterday](/blog/what-ive-been-doing) then you'll know what my user code used to look like, now it looks like this.

 ```js[post.js]
 for (let i = 0; i < replies.length; i++) {
--- a/content/blog/nuxtjs-trpc-fullstack.md
+++ b/content/blog/nuxtjs-trpc-fullstack.md
--- a/content/blog/portfolio-site-rebuild.md
+++ b/content/blog/portfolio-site-rebuild.md
@@ -15,11 +15,14 @@ head:
    - name: 'copyright'
      content: '© 2022 juls07'
 date: 2023-01-01
+# _draft: true
 tags:
  - web dev
  - nuxtjs 3
 ---

-For the past month I've been quietly rebuilding my portfolio site, designing and building a new site. My previous site was bland and dull, this one is like a whole new world. The old site was just a two colors that don't even go well together, it was clear to me that was no way to present myself. So about halfway though november I started fresh, with Nuxt3 and a whole lot of insomnia in my possession I went to figma to design my new site. <!--more--> After a couple days of making a design in figma I setup a new nuxt3 project and went to work, after just a few weeks I had almost everything completed, but the last few things I had to do were to make the blogs page and finish the project cards. After a few weeks of designing and getting feedback from the [web dev and design]( https://discord.gg/web) discord server, mainly feedback from aqil#7927 an absolute machine in the visual design help channel. However, rebuilding the site still wasn't done, so about halfway through december I decided to change a few things, the typing animation on the home page was added that day and a few accessibility things here and there.
+For the past month I've been quietly rebuilding my portfolio site, designing and building a new site. My previous site was bland and dull, this one is like a whole new world. The old site was just a two colors that don't even go well together, it was clear to me that was no way to present myself. So about halfway though november I started fresh, with Nuxt3 and a whole lot of insomnia in my possession I went to figma to design my new site.
+<!--more--> 
+After a couple days of making a design in figma I setup a new nuxt3 project and went to work, after just a few weeks I had almost everything completed, but the last few things I had to do were to make the blogs page and finish the project cards. After a few weeks of designing and getting feedback from the [web dev and design]( https://discord.gg/web) discord server, mainly feedback from aqil#7927 an absolute machine in the visual design help channel. However, rebuilding the site still wasn't done, so about halfway through december I decided to change a few things, the typing animation on the home page was added that day and a few accessibility things here and there.
 <br />
 Once 2023 hit I started working on this much more, with my [100DaysOfCode Challenge](/blog/100daysofcode-challenge) completed I had much more time to work on this site. Mostly I just had to finish writing a few blog posts, and I would be able to finally publish the new site. So I got to writing this blog post and here we are right now. This post is just an update with the new site, here's the sites [github](https://github.com/juls0730/juls07.dev-v2) and that's all, checkout my [twitter](https://twitter.com/julie4055_) if you want to hear more about what I do, have a great 2023!
--- a/content/blog/running-bittorent-webserver.md
+++ b/content/blog/running-bittorent-webserver.md
@@ -15,6 +15,7 @@ head:
    - name: 'copyright'
      content: '© 2022 juls07'
 date: 2022-03-07
+# _draft: true
 tags:
  - Linux
  - Bittorrent
@@ -22,7 +23,9 @@ tags:
  - Web server
 ---

-Recently, I started running a qbittorrent webserver on my raspberry pi 4B+ using [this docker image](https://hotio.dev/containers/qbittorrent/), It has been quite a journey. First, I started looking for a way to run a qbittorrent in a container, this is how I run all the applications on my raspberry pi and I inevibly asked in the [Arch linux discord server](https://discord.gg/3m6dbPR) and I got a reply from @runsamok on discord and they reccomend the docker image I mentioned earlier.<!--more--> Then I started seeding linux distros (obviously) and I started with a batch of about 7 give or take, Ubuntu 18.04, Ubuntu 20.04, Ubuntu 21.04, Arch Linux (duh), Rocky Linux, and tails linux. I shotly realized that Rocky and tails are baren wastelands when it comes to people wanting to torrent them so I eventually Scrapped them.
+Recently, I started running a qbittorrent webserver on my raspberry pi 4B+ using [this docker image](https://hotio.dev/containers/qbittorrent/), It has been quite a journey. First, I started looking for a way to run a qbittorrent in a container, this is how I run all the applications on my raspberry pi and I inevibly asked in the [Arch linux discord server](https://discord.gg/3m6dbPR) and I got a reply from @runsamok on discord and they reccomend the docker image I mentioned earlier.
+<!--more--> 
+Then I started seeding linux distros (obviously) and I started with a batch of about 7 give or take, Ubuntu 18.04, Ubuntu 20.04, Ubuntu 21.04, Arch Linux (duh), Rocky Linux, and tails linux. I shotly realized that Rocky and tails are baren wastelands when it comes to people wanting to torrent them so I eventually Scrapped them.
 <br />
 So after about 10 or so days I wanted to automatically download Arch linux and ubuntu updates using RSS, the qbittorrent webserver has thought of that so you can easily so so in the RSS tab. However, When downloading the latest Arch Linux version it worked fine but I added an ubuntu feed that I accidentally downloaded the 10 most recent torrents, but I deleted them and moved on. Later down the road I was trying to download the march patch of the Arch Linux torrent but I could not, after a while of wondering why I realized my storage was full, my raspberry pi doesnt have a lot of storage but not a little, it turns out that the torrents I deleted from the Ubuntu RSS were still on the raspberry pi, this isnt the fault of the developers because I didnt check the "delete on disk" button but there was not "not enough space warning" message when I tried to download the Arch Linux torrent.
 <br />
--- a/content/blog/what-ive-been-doing.md
+++ b/content/blog/what-ive-been-doing.md
@@ -15,6 +15,7 @@ head:
    - name: 'copyright'
      content: '© 2022 juls07'
 date: 2022-05-21
+# _draft: true
 tags:
  - web dev
  - fullstack development
@@ -23,7 +24,9 @@ tags:
  - mongodb
 ---

-So I have been working on a social media site I am currently calling snowballsocial, so far I have users, posts, replies, and likes. Expressjs not having HTTP/2 is slightly annoying and I have kind of thought migrating all of my code to hapi but I'm too lazy to migrate all my code right now, especially since I just "asyncified" it, remaking my code rather than making all new code would probably be easier but I'll do that later.<!--more--> This project I again used mongoDB, I fist used mongodb in my [vuefullstack](https://github.com/juls0730/vuefullstack) app, and I loved it, it's much easier for the kind of projects I use than mySQL. Actually targeting a production site rather than just having fun like with my vuefullstack app or my rails-forum, etc. make me worry about alot more thigs like SEO, I tried to add OG tags to the post-show tag just showing post data but it doesnt work because the tags are added after the data loads.
+So I have been working on a social media site I am currently calling snowballsocial, so far I have users, posts, replies, and likes. Expressjs not having HTTP/2 is slightly annoying and I have kind of thought migrating all of my code to hapi but I'm too lazy to migrate all my code right now, especially since I just "asyncified" it, remaking my code rather than making all new code would probably be easier but I'll do that later.
+<!--more--> 
+This project I again used mongoDB, I fist used mongodb in my [vuefullstack](https://github.com/juls0730/vuefullstack) app, and I loved it, it's much easier for the kind of projects I use than mySQL. Actually targeting a production site rather than just having fun like with my vuefullstack app or my rails-forum, etc. make me worry about alot more thigs like SEO, I tried to add OG tags to the post-show tag just showing post data but it doesnt work because the tags are added after the data loads.
 <br />
 I've gotten a VPS from [linode](https://linode.com) so I could expose my non-static only page to the internet without exposing my home IP address, making me vulnerable to being doxxed and DDoS attacks. Using nignx I have reverse-proxied my api from port 3001 to 2087, and added ssl certs, and I have used it to server my static site on port 80, I have used nginx before and it's pretty simple to use. Optimizing has been the bain of development so far, making api requests faster, and reducing bundle size, I'm going to focus on api optimizations since its the harder one. My main worry for more than a couple requests is getting posts, since I do a for loop to change userId's to usernames
 ```js
--- a/content/blog/why-i-chose-arch.md
+++ b/content/blog/why-i-chose-arch.md
@@ -15,12 +15,15 @@ head:
    - name: 'copyright'
      content: '© 2022 juls07'
 date: 2022-03-07
+# _draft: true
 tags:
  - Linux
  - archlinux
 ---

-I started using linux about 3 years ago, I started with Pop!_OS but after that I switched to fedora, then Zorin which is still the most beautiful out of the box linux distro I have ever used. After that howerver, I switched to arch and I've been on my misadventure's with arch for about 2 years now. I have a very minimalist approach to linux, trying to save as much space as possible save as much computer power as possible, arch being an extremely minimal install of linux was great for me.<!--more--> Next, being able to customize the install of arch is great, dont like systemd because of the company behind it, try runit or openrc, want btrfs so you can compress your files, go ahead, dont want grub, try systemdboot, etc. It's just the way arch lets you do whatever you want. Then, its the support from the [community discord](https://discord.gg/3m6dbPR) or the [arch wiki](https://wiki.archlinux.org/title/Main_page) if someone has had that problem theres a good chance you can get it fixed.
+I started using linux about 3 years ago, I started with Pop!_OS but after that I switched to fedora, then Zorin which is still the most beautiful out of the box linux distro I have ever used. After that howerver, I switched to arch and I've been on my misadventure's with arch for about 2 years now. I have a very minimalist approach to linux, trying to save as much space as possible save as much computer power as possible, arch being an extremely minimal install of linux was great for me.
+<!--more-->
+Next, being able to customize the install of arch is great, dont like systemd because of the company behind it, try runit or openrc, want btrfs so you can compress your files, go ahead, dont want grub, try systemdboot, etc. It's just the way arch lets you do whatever you want. Then, its the support from the [community discord](https://discord.gg/3m6dbPR) or the [arch wiki](https://wiki.archlinux.org/title/Main_page) if someone has had that problem theres a good chance you can get it fixed.
 <br />
 Overall, I know that arch isnt good for industrial applications since it doesnt scale well, its definitely for enthusiasts who have the time to work on their computer and not for linux novices. I love arch for its simplicity and flexibility and I think you should try it if your used to linux and want something new to play with. Using arch over the years has taught me so much about linux in general and if your a seasoned linux user give it a change, maybe you'll find the same love for it I did all the years ago.
 <br />
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,11 +1,10 @@
 import { defineNuxtConfig } from 'nuxt/config';
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-	target: 'static',
-
 	app: {
 		head: {
 			title: 'Juls07',
+
 			meta: [
 				{ charset: 'utf-8' },
 				{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -22,7 +21,46 @@ export default defineNuxtConfig({
 		},
 	},

-	css: ['~/assets/css/main.css'],
+	colorMode: {
+		classSuffix: ''
+	},
+
+	content: {
+		highlight: {
+			theme: {
+				dark: 'min-dark',
+				default: 'min-light'
+			},
+			preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'svelte', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini'],
+		},
+	},
+
+	css: [
+		'@/assets/css/main.css',
+	],
+
+
+	devtools: {
+		enabled: true
+	},
+
+	experimental: {
+		payloadExtraction: true
+	},
+
+	image: {
+		provider: 'ipx'
+	},
+
+	modules: ['nuxt-icon', '@nuxt/content', '@nuxtjs/color-mode', '@nuxt/image'],
+
+	nitro: {
+		preset: 'static',
+		prerender: {
+			crawlLinks: true,
+			routes: ['/sitemap.xml', '/rss.xml']
+		},
+	},

 	postcss: {
 		plugins: {
@@ -31,28 +69,11 @@ export default defineNuxtConfig({
 		},
 	},

-	modules: ['nuxt-icon', '@nuxt/content'],
-
-	image: {
-		provider: 'ipx'
-	},
-
-	nitro: {
-		prerender: {
-			crawlLinks: true,
-			routes: ['/sitemap.xml', '/rss.xml']
-		},
-		experimental: {
-			payloadExtraction: true
+	router: {
+		options: {
+			strict: false
 		}
 	},

-	content: {
-		highlight: {
-			theme: {
-				default: 'github-dark'
-			},
-			preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'svelte', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini'],
-		},
-	},
+	sourcemap: false,
 })
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,25 +1,29 @@
 {
+  "name": "nuxt-app",
  "private": true,
  "scripts": {
-    "build": "nuxt build --prerender true",
+    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
-    "@nuxt/content": "^2.2.2",
-    "@nuxt/image-edge": "^1.0.0-27840416.dc1ed65",
-    "@vueuse/core": "^9.6.0",
-    "autoprefixer": "^10.4.13",
-    "nuxt": "3.0.0",
-    "nuxt-icon": "^0.1.7",
-    "postcss": "^8.4.19",
+    "@nuxt/devtools": "^1.1.5",
+    "@nuxt/image": "^1.5.0",
+    "@nuxtjs/color-mode": "^3.3.3",
+    "@types/rss": "^0.0.32",
+    "autoprefixer": "^10.4.15",
+    "nuxt": "^3.7.0",
+    "nuxt-icon": "^0.6.10",
+    "postcss": "^8.4.29",
    "rss": "^1.2.2",
    "sitemap": "^7.1.1",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.3.3"
  },
  "dependencies": {
+    "@nuxt/content": "^2.8.2",
+    "@vueuse/core": "^10.9.0",
    "xml": "^1.0.1"
  }
 }
--- a/pages/blog/[...slug].vue
+++ b/pages/blog/[...slug].vue
@@ -1,42 +1,46 @@
+<script setup lang="ts">
+let year = new Date().getFullYear();
+</script>
+
 <template>
-	<Nav />
-	<div class="grid grid-cols-12 gap-5 justify-center">
-		<div class="pt-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
-			<ContentDoc v-slot="{ doc }">
-				<img :src="doc.image.src"
-					class="mb-2 rounded-md drop-shadow" />
-				<h1 class="text-3xl text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
-				<p class="mb-1 text-zinc-400">
-					{{ doc.description }}
-				</p>
-				<p class="mb-2 text-zinc-500">
-					{{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }}
-				</p>
-				<div class="flex flex-wrap w-full gap-2 justify-start mb-3">
-					<IconTag v-for="tag in doc.tags"
-						:name="tag"
-						:iconName='tag'
-						isTag="true" />
-				</div>
-				<main id="main">
-				<ContentRenderer
-					class="text-gray-200"
-					:value="doc" />
-				</main>
-			</ContentDoc>
+	<div class="min-h-screen">
+		<Nav />
+		<div class="grid grid-cols-12 gap-5 justify-center">
+			<div class="pt-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
+				<ContentDoc v-slot="{ doc }">
+					<img :src="doc.image.src" class="mb-2 rounded-md drop-shadow" />
+					<h1 class="text-3xl dark:text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
+					<p class="mb-1 dark:text-zinc-400 text-zinc-600">
+						{{ doc.description }}
+					</p>
+					<p class="mb-2 text-zinc-500">
+						{{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }}
+					</p>
+					<div class="flex flex-wrap w-full gap-2 justify-start mb-3">
+						<IconTag v-for="tag in doc.tags" :name="tag" :iconName='tag' isTag="true" />
+					</div>
+					<main id="main" class="leading-relaxed">
+						<ContentRenderer class="dark:text-gray-200 text-gray-800" :value="doc" />
+					</main>
+				</ContentDoc>
 			</div>
 		</div>
 		<footer class="grid grid-cols-12 gap-5 justify-center">
 			<div class="py-2 mb-4 !col-start-3 md:!col-start-4 xl:!col-start-5 xl:col-span-4 md:col-span-6 col-span-8">
 				<!-- <NewsletterSignup class="mb-2" /> -->
-				© 2022 Juls07 - GPL v3.0 License
+				© {{ year }} Juls07 - GPL v3.0 License
 			</div>
 		</footer>
+	</div>
 </template>

 <style>
 br {
-  @apply my-3;
-  display: block;
+	@apply my-3;
+	display: block;
+}
+
+#main a {
+	@apply text-fuschia hover:underline visited:bg-rose-700;
 }
 </style>
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -1,52 +1,48 @@
 <template>
-	<div class="h-screen text-white">
+	<div class="min-h-screen">
 		<Nav />
 		<main>
-			<div id="main"
-				class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
-				<div v-for="article in articles"
-					:key="article._path"
-					class="mb-5 px-1.5">
-					<div
-						class="text-white bg-[#201F20] max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-zinc-700/30 shadow-md">
-						<img v-if="article.image.src"
-							:src="article.image.src"
-							class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
+			<div id="main" class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
+				<ContentQuery path="blog" :only="['image', '_path', 'title', 'description', 'date', 'tags', 'excerpt']"
+					:sort="{
+					date: -1
+				}" :where="{
+					_draft: false
+				}" v-slot="{ data }">
+					<div v-for="article in data" :key="article._path" class="mb-5 px-1.5">
 						<div
-							class="p-3 overflow-hidden pt-2 text-fade mb-1 pb-1 relative">
-							<h3>
-								<nuxt-link tabindex="0"
-									class="text-lg"
-									:to="article._path">
-									{{ article.title }}
-								</nuxt-link>
-							</h3>
-							<p class="text-zinc-400">
-								{{ article.description }}
-							</p>
-							<p class="text-zinc-500">
-								{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
-							</p>
-							<p class="text-zinc-200 max-h-[13.75rem]">
-								<ContentDoc :head="false"
-									:value="article"
-									:path="article._path"
-									v-slot="{ doc }">
-									<div class="flex flex-wrap w-full gap-2 justify-start my-1">
-										<IconTag v-for="tag in doc.tags"
-											:name="tag"
-											:iconName='tag'
-											isTag="true" />
-									</div>
-									<div class="max-h-full">
-										<ContentRenderer :value="doc"
-											:excerpt="true" />
-									</div>
-								</ContentDoc>
-							</p>
+							class="dark:bg-dark-slate bg-touched-lavender max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-soft-lilac dark:border-midnight-slate/30 shadow-md">
+							<NuxtImg v-if="article.image.src" :src="article.image.src"
+								class="w-full rounded-tl-lg rounded-tr-lg aspect-video" loading="lazy" />
+							<div
+								class="p-3 overflow-hidden pt-2 text-fade dark:before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#0C0B0C_95%,#0C0B0C)] before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#F5EDFE_95%,#F5EDFE)] mb-1 pb-1 relative">
+								<h3>
+									<nuxt-link tabindex="0" class="text-lg" :to="article._path">
+										{{ article.title }}
+									</nuxt-link>
+								</h3>
+								<p class="dark:text-zinc-400 text-zinc-600">
+									{{ article.description }}
+								</p>
+								<p class="text-zinc-500">
+									{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
+								</p>
+								<p class="dark:text-zinc-200 text-zinc-800 max-h-[13.75rem]">
+									<ContentDoc :head="false" :value="article" :path="article._path" v-slot="{ doc }">
+										<div class="flex flex-wrap w-full gap-2 justify-start my-1">
+											<IconTag v-for="tag in doc.tags" :name="tag" :iconName='tag' isTag="true" />
+										</div>
+										<div class="max-h-full leading-relaxed">
+											<ContentRenderer :value="doc">
+												<ContentRendererMarkdown :value="doc" :excerpt="true" />
+											</ContentRenderer>
+										</div>
+									</ContentDoc>
+								</p>
+							</div>
 						</div>
 					</div>
-				</div>
+				</ContentQuery>
 			</div>
 		</main>
 	</div>
@@ -60,18 +56,14 @@
 	height: 33.333333%;
 	left: 0px;
 	bottom: 0px;
-	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(12,12,12,0) 36%, rgba(32,31,32,1) 95%, rgba(32,31,32,1) 100%);
+}
+
+#main a {
+	@apply text-fuschia hover:underline visited:bg-rose-700;
 }
 </style>

 <script setup lang="ts">
-const { data: articles } = await useAsyncData('posts-list', () => queryContent('/blog')
-	.only(['image', '_path', 'title', 'description', 'date'])
-	.where({ _draft: false })
-	.sort({ date: -1, $numeric: true, })
-	.find()
-);
-
 useHead({
 	title: 'Juls07',
 })
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,164 +1,11 @@
-<template>
-	<div class="h-screen text-white">
-		<Nav class="absolute z-10" />
-		<header class="w-full h-3/6 sm:h-2/5 md:h-3/5">
-			<div
-				class="p-6 bg-[#1212121A] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full blur-background">
-				<div
-					class="sm:h-32 sm:!col-start-2 sm:col-span-8 md:col-span-6 lg:col-span-5 w-32 sm:w-fit max-h-full md:h-40 items-center grid grid-rows-1 grid-cols-1 sm:grid-cols-2 drop-shadow-md">
-					<img alt="juls07 profile picture"
-						src="~/assets/images/juls07.png"
-						class="h-32 md:h-40 max-h-full rounded-full mb-3 sm:mb-0 sm:mr-2" />
-					<div class="grid grid-rows-5 grid-cols-1 h-fit">
-						<h1 class="text-4xl md:text-5xl row-span-3 font-jetbrains">Juls07</h1>
-						<p class="text-[#00FFC2] row-span-2 md:text-lg h-fit">
-							<span
-								class="after:border after:h-[1.0em] after:border-current after:inline-block after:ml-0.5 after:animate-blink">
-								{{ tagLine }}
-							</span>
-						</p>
-					</div>
-				</div>
-			</div>
-		</header>
-		<main id="main"
-			class="grid grid-cols-12 gap-5 justify-center">
-			<section
-				class="py-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
-				<h2 class="md:text-4xl text-3xl mb-1">About me</h2>
-				<hr
-					class="border-2 my-1.5 border-[#EB0066] rounded-md w-7/12 min-w-[200px] max-w-xs lg:max-w-sm mb-1" />
-				<p class="max-w-md sm:max-w-xl md:max-w-3xl lg:max-w-4xl mb-4">
-					Hi there, I'm juls07, I am 14 years old and I <span tabindex="0"
-						class="love">love</span> web
-					development. I first dabbled in web development
-					when I was ten, and here we are today! I mainly use
-					<a href="https://nuxtjs.org">NuxtJs</a> to
-					build my websites since I absolutely
-					adore Vuejs. For me, I love being able to imagine anything and it to come to life. Finally, go
-					checkout my <a href="https://github.com/juls0730">Github</a> and also my <a
-						href="https://twitter.com/julie4055_">Twitter</a>.
-				</p>
-				<h3 class="text-2xl md:text-3xl mb-1.5 ml-0.5">Skills</h3>
-				<section class="flex flex-wrap w-full gap-2 justify-start ml-1">
-					<IconTag name="TypeScript"
-						iconName="skill-icons:typescript" />
-					<IconTag name="Nuxt.js"
-						iconName="skill-icons:nuxtjs-dark" />
-					<IconTag name="Vue.js"
-						iconName="skill-icons:vuejs-dark" />
-					<IconTag name="Ruby on rails"
-						iconName="skill-icons:rails" />
-					<IconTag name="php"
-						iconName="skill-icons:php-dark" />
-					<IconTag name="React"
-						iconName="skill-icons:react-dark" />
-					<IconTag name="Bash"
-						iconName="skill-icons:bash-dark" />
-					<IconTag name="Tailwindcss"
-						iconName="skill-icons:tailwindcss-dark" />
-					<IconTag name="Rust"
-						iconName="skill-icons:rust" />
-					<IconTag name="Node.js"
-						iconName="skill-icons:nodejs-dark" />
-					<IconTag name="Svelte"
-						iconName="skill-icons:svelte" />
-					<IconTag name="Figma"
-						iconName="skill-icons:figma-dark" />
-					<IconTag name="Electron"
-						iconName="skill-icons:electron" />
-					<IconTag name="Cypress"
-						iconName="logos:cypress-icon" />
-					<IconTag name="Prisma"
-						iconName="skill-icons:prisma" />
-					<IconTag name="Docker"
-						icon-name="skill-icons:docker" />
-				</section>
-			</section>
-			<div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
-				<h2 class="md:text-4xl text-3xl mb-1">Projects</h2>
-			</div>
-			<section
-				class="pb-6 grid mb-4 col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 grid-cols-12 gap-y-6 sm:gap-x-6 max-w-full">
-				<ProjectCard name="Juls07.dev V2"
-					headerIcon="tabler:brand-nuxt"
-					githubLink="https://github.com/juls0730/juls07.dev-v2"
-					:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v3' }]">
-					this is a small forum project I made to mock my ruby on rails forum I am
-					working on but in vuejs.
-				</ProjectCard>
-				<ProjectCard name="PHP Forum"
-					headerIcon="mdi:language-php"
-					githubLink="https://github.com/juls0730/php-forum"
-					:icons="[{ 'icon': 'logos:laravel', 'name': 'php' }]">
-					This is my attempt at a forum written in php, its not great but it works.
-				</ProjectCard>
-				<ProjectCard name="Cyansplash.net"
-					headerIcon="tabler:brand-nuxt"
-					githubLink="https://github.com/juls0730/cyansplash.net"
-					:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }]">
-					This is the old cyansplash.net site, not amazing but taught me a lot about web
-					development.
-				</ProjectCard>
-				<ProjectCard name="Discord.js bot"
-					headerIcon="mdi:robot-excited-outline"
-					githubLink="https://github.com/juls0730/Echo"
-					:icons="[{ 'icon': 'logos:javascript', 'name': 'Javascript' }]">
-					This is one of the first projects that wasn't just a dinky website, this project brought me to where
-					I am today.
-				</ProjectCard>
-				<ProjectCard name="juls07.dev V1"
-					headerIcon="tabler:brand-nuxt"
-					githubLink="https://github.com/juls0730/juls07.dev"
-					:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }, { 'icon': 'logos:tailwindcss-icon', 'name': 'tailwindcss' }]">
-					This stie is the site you are currently on, this site is just a place to show
-					off my projects and my skills.
-				</ProjectCard>
-				<ProjectCard name="vuefullstack"
-					headerIcon="tabler:brand-vue"
-					githubLink="https://github.com/juls0730/vuefullstack"
-					:icons="[{ 'icon': 'logos:vue', 'name': 'vue v3' }, { 'icon': 'logos:nodejs-icon', 'name': 'nodejs' }]">
-					this is a small forum project I made to mock my ruby on rails forum I am
-					working on but in vuejs.
-				</ProjectCard>
-				<ProjectCard name="100DaysOfCode"
-					headerIcon="mdi:nodejs"
-					githubLink="https://github.com/juls0730/vuefullstack"
-					:icons="[{ 'icon': 'logos:nodejs-icon', 'name': 'nodejs' }]">
-					This is my #100DaysOfCode challenge, my challenge was to create my own UI framework thing, check out a <nuxt-link to="/blog/100daysofcode-challenge">large overview of my 100DaysOfCode challenge</nuxt-link> on my blog.
-				</ProjectCard>
-			</section>
-		</main>
-	</div>
-</template>
-  
-<style scoped>
-.blur-background {
-	position: relative;
-	overflow: hidden;
-}
-
-.blur-background::before {
-	content: '';
-	margin: -35px;
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	filter: blur(16px) saturate(125%);
-}
-
-header,
-.blur-background::before {
-	background-image: url(~/assets/images/header.jpg);
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-}
-</style>
-
 <script setup lang="ts">
+let today = new Date();
+let age = today.getFullYear() - 2008;
+
+if (new Date(today.getFullYear() + "-07-30") > today) {
+	age--;
+}
+
 useHead({
 	title: 'Juls07',
 })
@@ -211,4 +58,144 @@ export default {
 		setTimeout(this.typeText, 2200);
 	},
 }
-</script>
+</script>
+
+<template>
+	<div class="min-h-screen">
+		<Nav class="absolute z-10 text-white" />
+		<header class="w-full h-[50vh] sm:h-[40vh] md:h-[60vh]">
+			<div
+				class="p-6 bg-[#1212121A] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full blur-background">
+				<div
+					class="sm:h-32 sm:!col-start-2 sm:col-span-8 md:col-span-6 lg:col-span-5 w-32 sm:w-fit max-h-full md:h-40 items-center grid grid-rows-1 grid-cols-1 sm:grid-cols-2 drop-shadow-md">
+					<img alt="juls07 profile picture" src="~/assets/images/juls07.png"
+						class="h-32 md:h-40 max-h-full rounded-full mb-3 sm:mb-0 sm:mr-2" />
+					<div class="grid grid-rows-5 grid-cols-1 h-fit">
+						<h1 class="text-4xl md:text-5xl row-span-3 font-jetbrains text-white">Juls07</h1>
+						<p class="text-sea-green row-span-2 md:text-lg h-fit">
+							<span
+								class="after:border after:h-[1.0em] after:border-current after:inline-block after:ml-0.5 after:animate-blink">
+								{{ tagLine }}
+							</span>
+						</p>
+					</div>
+				</div>
+			</div>
+		</header>
+		<main id="main" class="grid grid-cols-12 gap-5 justify-center">
+			<section
+				class="py-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
+				<h2 class="md:text-4xl text-3xl mb-1">About me</h2>
+				<hr class="border-2 my-1.5 border-fuschia rounded-md w-7/12 min-w-[200px] max-w-xs lg:max-w-sm mb-1" />
+				<p class="max-w-md sm:max-w-xl md:max-w-3xl lg:max-w-4xl mb-4">
+					Hi there, I'm juls07, I am {{ age }} years old and I <span tabindex="0" class="love">love</span> web
+					development. I first dabbled in web development
+					when I was ten, and here we are today! I mainly use
+					<a href="https://nuxt.com">NuxtJs</a> to
+					build my websites since I absolutely
+					adore Vuejs. For me, I love being able to imagine anything and it to come to life. Finally, go
+					checkout my <a href="https://github.com/juls0730">Github</a> and also my <a
+						href="https://twitter.com/julie4055_">Twitter</a>.
+				</p>
+				<h3 class="text-2xl md:text-3xl mb-1.5 ml-0.5">Skills</h3>
+				<section class="flex flex-wrap w-full gap-2 justify-start ml-1">
+					<IconTag name="TypeScript" iconName="skill-icons:typescript" />
+					<IconTag name="Nuxt.js" iconName="skill-icons:nuxtjs-dark" />
+					<IconTag name="Vue.js" iconName="skill-icons:vuejs-dark" />
+					<IconTag name="Ruby on rails" iconName="skill-icons:rails" />
+					<IconTag name="php" iconName="skill-icons:php-dark" />
+					<IconTag name="React" iconName="skill-icons:react-dark" />
+					<IconTag name="Bash" iconName="skill-icons:bash-dark" />
+					<IconTag name="Tailwindcss" iconName="skill-icons:tailwindcss-dark" />
+					<IconTag name="Rust" iconName="skill-icons:rust" />
+					<IconTag name="Node.js" iconName="skill-icons:nodejs-dark" />
+					<IconTag name="Svelte" iconName="skill-icons:svelte" />
+					<IconTag name="Figma" iconName="skill-icons:figma-dark" />
+					<IconTag name="Electron" iconName="skill-icons:electron" />
+					<IconTag name="Cypress" iconName="skill-icons:cypress-dark" />
+					<IconTag name="Prisma" iconName="skill-icons:prisma" />
+					<IconTag name="Docker" icon-name="skill-icons:docker" />
+				</section>
+			</section>
+			<div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
+				<h2 class="md:text-4xl text-3xl mb-1">Projects</h2>
+			</div>
+			<section
+				class="pb-6 grid mb-4 col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 grid-cols-12 gap-y-6 sm:gap-x-6 max-w-full">
+				<ProjectCard name="Juls07.dev V2" headerIcon="tabler:brand-nuxt"
+					githubLink="https://github.com/juls0730/juls07.dev-v2"
+					:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v3' }]">
+					This is the site you're currently on, a simple but decent looking portfolio and blog site.
+				</ProjectCard>
+				<ProjectCard name="PHP Forum" headerIcon="mdi:language-php"
+					githubLink="https://github.com/juls0730/php-forum"
+					:icons="[{ 'icon': 'logos:laravel', 'name': 'php' }]">
+					This is my attempt at a forum written in php, its not great but it works.
+				</ProjectCard>
+				<ProjectCard name="Cyansplash.net" headerIcon="tabler:brand-nuxt"
+					githubLink="https://github.com/juls0730/cyansplash.net"
+					:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }]">
+					This is the old cyansplash.net site, not amazing but taught me a lot about web
+					development.
+				</ProjectCard>
+				<ProjectCard name="Discord.js bot" headerIcon="mdi:robot-excited-outline"
+					githubLink="https://github.com/juls0730/Echo"
+					:icons="[{ 'icon': 'logos:javascript', 'name': 'Javascript' }]">
+					This is one of the first projects that wasn't just a dinky website, this project brought me to where
+					I am today.
+				</ProjectCard>
+				<ProjectCard name="juls07.dev V1" headerIcon="tabler:brand-nuxt"
+					githubLink="https://github.com/juls0730/juls07.dev"
+					:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }, { 'icon': 'logos:tailwindcss-icon', 'name': 'tailwindcss' }]">
+					This is my original portfolio website, it isn't much and it definitely isn't the best thing I've
+					ever written, but it's something.
+				</ProjectCard>
+				<ProjectCard name="vuefullstack" headerIcon="tabler:brand-vue"
+					githubLink="https://github.com/juls0730/vuefullstack"
+					:icons="[{ 'icon': 'logos:vue', 'name': 'vue v3' }, { 'icon': 'logos:nodejs-icon', 'name': 'nodejs' }]">
+					This is a small forum project I made to mock my ruby on rails forum I am
+					working on but in vuejs.
+				</ProjectCard>
+				<ProjectCard name="100DaysOfCode" headerIcon="mdi:nodejs"
+					githubLink="https://github.com/juls0730/vuefullstack"
+					:icons="[{ 'icon': 'logos:nodejs-icon', 'name': 'nodejs' }]">
+					This is my #100DaysOfCode challenge, my challenge was to create my own UI framework thing, check out
+					a
+					<nuxt-link to="/blog/100daysofcode-challenge">large overview of my 100DaysOfCode
+						challenge</nuxt-link> on my
+					blog.
+				</ProjectCard>
+			</section>
+		</main>
+	</div>
+</template>
+
+<style>
+.blur-background {
+	position: relative;
+	overflow: hidden;
+}
+
+#main a {
+	@apply text-fuschia hover:underline visited:bg-rose-700;
+}
+
+.blur-background::before {
+	content: '';
+	margin: -35px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	filter: blur(16px) saturate(125%);
+}
+
+header,
+.blur-background::before {
+	background-image: url(~/assets/images/header.jpg);
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+</style>
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/images/100DaysOfCode-overview.webp
+++ b/public/images/100DaysOfCode-overview.webp
--- a/public/images/archlinux.webp
+++ b/public/images/archlinux.webp
--- a/public/images/how-i-made-my-site-fast.webp
+++ b/public/images/how-i-made-my-site-fast.webp
--- a/public/images/qbittorrent-web.webp
+++ b/public/images/qbittorrent-web.webp
--- a/public/images/website-rebuild.webp
+++ b/public/images/website-rebuild.webp
--- a/public/images/what-ive-been-doing.webp
+++ b/public/images/what-ive-been-doing.webp
--- a/public/robots.txt
+++ b/public/robots.txt
--- a/server/routes/rss.xml.ts
+++ b/server/routes/rss.xml.ts
--- a/server/routes/sitemap.xml.ts
+++ b/server/routes/sitemap.xml.ts
--- a/supabase/.gitignore
+++ b/supabase/.gitignore
@@ -1,3 +0,0 @@
-# Supabase
-.branches
-.temp
--- a/supabase/config.toml
+++ b/supabase/config.toml
@@ -1,71 +0,0 @@
-# A string used to distinguish different Supabase projects on the same host. Defaults to the working
-# directory name when running `supabase init`.
-project_id = "juls07.dev-rebuild"
-
-[api]
-# Port to use for the API URL.
-port = 54321
-# Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
-# endpoints. public and storage are always included.
-schemas = []
-# Extra schemas to add to the search_path of every request.
-extra_search_path = ["extensions"]
-# The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
-# for accidental or malicious requests.
-max_rows = 1000
-
-[db]
-# Port to use for the local database URL.
-port = 54322
-# The database major version to use. This has to be the same as your remote database's. Run `SHOW
-# server_version;` on the remote database to check.
-major_version = 14
-
-[studio]
-# Port to use for Supabase Studio.
-port = 54323
-
-# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
-# are monitored, and you can view the emails that would have been sent from the web interface.
-[inbucket]
-# Port to use for the email testing server web interface.
-port = 54324
-smtp_port = 54325
-pop3_port = 54326
-
-[storage]
-# The maximum file size allowed (e.g. "5MB", "500KB").
-file_size_limit = "50MiB"
-
-[auth]
-# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
-# in emails.
-site_url = "http://localhost:3000"
-# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
-additional_redirect_urls = ["https://localhost:3000"]
-# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 seconds (one
-# week).
-jwt_expiry = 3600
-# Allow/disallow new user signups to your project.
-enable_signup = true
-
-[auth.email]
-# Allow/disallow new user signups via email to your project.
-enable_signup = true
-# If enabled, a user will be required to confirm any email change on both the old, and new email
-# addresses. If disabled, only the new email is required to confirm.
-double_confirm_changes = true
-# If enabled, users need to confirm their email address before signing in.
-enable_confirmations = false
-
-# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
-# `discord`, `facebook`, `github`, `gitlab`, `google`, `twitch`, `twitter`, `slack`, `spotify`.
-[auth.external.apple]
-enabled = false
-client_id = ""
-secret = ""
-# Overrides the default auth redirectUrl.
-redirect_uri = ""
-# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
-# or any other third-party OIDC providers.
-url = ""
--- a/supabase/functions/newsletter/index.ts
+++ b/supabase/functions/newsletter/index.ts
@@ -1,36 +0,0 @@
-// Follow this setup guide to integrate the Deno language server with your editor:
-// https://deno.land/manual/getting_started/setup_your_environment
-// This enables autocomplete, go to definition, etc.
-
-import { serve } from "https://deno.land/std@0.131.0/http/server.ts"
-import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
-
-console.log("Hello from functions!")
-const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-
-serve(async (req) => {
-  if (req.method === 'OPTIONS') {
-    return new Response('ok')
-  }
-
-  const supabase = createClient(Deno.env.get('SUPABASE_URL'), Deno.env.get('SUPABASE_ANON_KEY'))
-
-  const { email, name } = await req.json()
-  if (!email || !emailRegex.test(email)) throw new Error(
-    'Please provide a valid email address or name'
-  )
-
-  const name = email.split('@')[0]
-
-  const { data, error } = await supabase
-    .from('subscribers')
-    .upsert({ name: name, email: email })
-    .select()
-
-  if (error) throw new Error(error.message)
-
-  return new Response(
-    JSON.stringify(data),
-    { headers: { "Content-Type": "application/json" } },
-  )
-})
--- a/supabase/seed.sql
+++ b/supabase/seed.sql
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
@@ -11,6 +12,18 @@ module.exports = {
  ],
  theme: {
    extend: {
+      colors: {
+        'sea-green': '#00FFC2',
+        'fuschia': '#EB0066',
+        'soft-lavender': '#F6EEFE',
+        'touched-lavender': '#F5EDFE',
+        'midnight': '#080908',
+        'dark-slate': '#0C0B0C',
+        'deep-indigo': '#393041',
+        'midnight-slate': '#2F353D',
+        'obsidian-night': '#131316',
+        'soft-lilac': '#E4DDEE',
+      },
      screens: {
        'xs': '512px',
        '3xl': '1792px'
--- a/tsconfig.json
+++ b/tsconfig.json