updated cards slightly, just need to pull on a remote

components/IconButton.vue

@@ -0,0 +1,34 @@
+<script>
+export default {
+    data() {
+        return {
+            tagMap: {
+                'nuxtjs': 'nuxt-icon',
+                'nuxt': 'nuxt-icon',
+                'nuxtjs-3': 'nuxt-icon',
+                'web-dev': 'web-dev-icon',
+                'fullstack-development': 'jamstack-icon',
+                'angular': 'angular-icon',
+                'nodejs': 'nodejs-icon',
+                'mongodb': 'mongodb-icon',
+                'docker': 'docker-icon',
+                'linux': 'linux-tux',
+                'bittorrent': 'webtorrent',
+                'web-server': 'nginx',
+                'supabase': 'supabase-icon'
+            },
+        }
+    },
+    props: ['iconName', 'name', 'isTag', 'size']
+}
+</script>
+<template>
+    <button :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"
+            :name="(isTag) ? ('logos:' + (tagMap[iconName.toLowerCase().split(' ').join('-')] || iconName.toLowerCase())) : iconName" />
+        {{name}}
+    </button>
+</template>

components/ProjectCard.vue

@@ -0,0 +1,27 @@
+<script>
+import { LOGICAL_OPERATORS } from '@babel/types';
+import { Icon } from '@iconify/vue';
+
+export default {
+    props: ["name", "body", "icons", "headerIcon"],
+}
+</script>
+
+<template>
+	<div class="bg-[#1a191a] border p-6 col-span-1 md:col-span-2 border-zinc-700/70 shadow-md rounded-lg">
+		<div class="flex" v-if="headerIcon">
+			<!-- <Icon size="64" :name="logo.name" :iconName="logo.icon" /> -->
+			<Icon size="64" :iconName="headerIcon.src" :name="headerIcon.name" />
+		</div>
+		<h4 class="text-xl md:text-2xl mb-1 font-semibold">{{ name }}</h4>
+		<p>{{ body }}</p>
+		<div class="ml-1 my-1.5 flex flex-wrap gap-2"
+			v-if="icons">
+			<div v-for="icon in icons">
+				<IconButton size="16"
+					:name="icon.name"
+					:iconName="icon.icon"></IconButton>
+			</div>
+		</div>
+	</div>
+</template>

components/TagButton.vue

@@ -1,34 +0,0 @@
-<script>
-export default {
-	data() {
-		return {
-			iconMap: {
-				'nuxtjs': 'nuxt-icon',
-				'nuxt': 'nuxt-icon',
-				'nuxtjs-3': 'nuxt-icon',
-				'web-dev': 'web-dev-icon',
-				'fullstack-development': 'jamstack-icon',
-				'angular': 'angular-icon',
-				'nodejs': 'nodejs-icon',
-				'mongodb': 'mongodb-icon',
-				'docker': 'docker-icon',
-				'linux': 'linux-tux',
-				'bittorrent': 'webtorrent',
-				'web-server': 'nginx',
-				'supabase': 'supabase-icon'
-			},
-		}
-	},
-	props: ['iconName', 'name']
-}
-</script>
-
-<template>
-	<div :aria-label="name"
-		class="font-inter select-none 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">
-		<Icon size="20"
-			class="mr-2"
-			:name="('logos:' + (iconMap[iconName.toLowerCase().split(' ').join('-')] || iconName.toLowerCase()))" />
-		{{ name }}
-	</div>
-</template>

components/skillButton.vue

@@ -1,10 +0,0 @@
-<script>
-export default {
-    props: ['iconName', 'name']
-}
-</script>
-<template>
-    <button :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">
-        <Icon size="20" class="mr-2" :name="iconName" />
-        {{name}}</button>
-</template>

content/blog/portfolio-site-rebuild.md

@@ -2,7 +2,7 @@
 title: Rebuilding my personal website!
 description: My experiences with nuxtjs 3 and tRPC
 image: 
-    src: '/images/archlinux.png'
+    src: '/images/website-rebuild-draft-1.avif'
     alt: 'Why I chose archlinux'
 head:
   meta:

nuxt.config.ts

@@ -34,8 +34,6 @@ export default defineNuxtConfig({
 	},
 
 	content: {		
-		documentDriven: true,
-		
 		highlight: {
 			theme: {
 				default: 'github-dark'

pages/blog/[...slug].vue

@@ -1,7 +1,7 @@
 <template>
 	<Nav />
 	<main class="grid grid-cols-12 gap-5 justify-center">
-		<div class="py-6 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
+		<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" />
@@ -13,9 +13,10 @@
 					{{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }}
 				</p>
 				<div class="flex flex-wrap w-full gap-2 justify-start mb-7">
-					<tagButton v-for="tag in doc.tags"
+					<IconButton v-for="tag in doc.tags"
 						:name="tag"
-						:iconName='tag' />
+						:iconName='tag'
+						isTag="true" />
 				</div>
 				<ContentRenderer :value="doc" />
 			</ContentDoc>
@@ -23,7 +24,7 @@
 	</main>
 	<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" />
+			<!-- <NewsletterSignup class="mb-2" /> -->
 			© 2022 Juls07 - GPL v3.0 License
 		</div>
 	</footer>

pages/blog/index.vue

@@ -5,7 +5,7 @@
 			<div v-for="article in articles"
 				:key="article._path"
 				class="mb-5 px-1.5">
-				<div class="text-white bg-zinc-800 max-h-[563.25px] overflow-hidden rounded-lg border border-neutral-700 shadow-md">
+				<div class="text-white bg-zinc-800 max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-neutral-700 shadow-md">
 					<img v-if="article.image.src"
 						:src="article.image.src"
 						class="w-full rounded-tl-lg rounded-tr-lg" />
@@ -28,9 +28,10 @@
 								:path="article._path"
 								v-slot="{ doc }">
 								<div class="flex flex-wrap w-full gap-2 justify-start mb-2">
-									<tagButton v-for="tag in doc.tags"
+									<IconButton v-for="tag in doc.tags"
 										:name="tag"
-										:iconName='tag' />
+										:iconName='tag'
+										isTag="true" />
 								</div>
 								<ContentRenderer :value="doc" :excerpt="true" />
 							</ContentDoc>

pages/index.vue

@@ -1,12 +1,13 @@
 <template>
 	<div class="h-screen text-white">
 		<Nav class="absolute z-10" />
-		<header class="w-screen h-3/6 sm:h-2/5 md:h-3/5">
+		<header class="w-full h-3/6 sm:h-2/5 md:h-3/5">
 			<div
 				class="p-6 bg-[#12121233] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full backdrop-blur-md backdrop-saturate-[1.15]">
 				<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/pictues/juls07.png"
+					<img alt="juls07 profile picture"
+						src="~/assets/pictues/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>
@@ -19,54 +20,84 @@
 			<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 border-[#EB0066] rounded-md w-7/12 min-w-[200px] max-w-xs lg:max-w-sm mb-1" />
+				<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
+					<a href="https://nuxtjs.org">NuxtJs</a> to
-						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
+					checkout my <a href="https://github.com/juls0730">Github</a> and also 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">Skills</h3>
 				<section class="flex flex-wrap w-full gap-2 justify-start">
-					<SkillButton name="Javascript"
+					<IconButton name="Javascript"
 						iconName='logos:javascript' />
-					<SkillButton name="Nuxt.js"
+					<IconButton name="Nuxt.js"
 						iconName="logos:nuxt-icon" />
-					<SkillButton name="Ruby on rails"
+					<IconButton name="Ruby on rails"
 						iconName="logos:ruby" />
-					<SkillButton name="php"
+					<IconButton name="php"
 						iconName="logos:laravel" />
-					<SkillButton name="Angular"
+					<IconButton name="Angular"
 						iconName="logos:angular-icon" />
-					<SkillButton name="React"
+					<IconButton name="React"
 						iconName="logos:react" />
-					<SkillButton name="Bash"
+					<IconButton name="Bash"
 						iconName="logos:bash-icon" />
-					<SkillButton name="Tailwindcss"
+					<IconButton name="Tailwindcss"
 						iconName="logos:tailwindcss-icon" />
-					<SkillButton name="Rust"
+					<IconButton name="Rust"
 						iconName="logos:rust" />
-					<SkillButton name="Node.js"
+					<IconButton name="Node.js"
 						iconName="logos:nodejs-icon" />
-					<SkillButton name="Svelte"
+					<IconButton name="Svelte"
 						iconName="logos:svelte-icon" />
-					<SkillButton name="Supabase"
+					<IconButton name="Supabase"
 						iconName="logos:supabase-icon" />
-					<SkillButton name="tRPC"
+					<IconButton name="tRPC"
 						iconName="logos:trpc" />
-					<SkillButton name="Python"
+					<IconButton name="Python"
 						iconName="logos:python" />
-					<SkillButton name="Deno"
+					<IconButton name="Deno"
 						iconName="logos:deno" />
 				</section>
 			</section>
+			<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">Projects</h2>
+				<section class="w-11/12 sm:w-full mx-auto grid sm:grid-cols-2 md:grid-cols-4 gap-3">
+					<ProjectCard name="PHP Forum"
+						body="This is my attempt at a forum written in php, its not great but it works."
+						:icons="[{ 'icon': 'logos:laravel', 'name': 'php' }]"
+						link1="https://github.com/juls0730/php-forum"
+						button1="Github" />
+					<ProjectCard name="Old Cyansplash.net site"
+						:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }]"
+						body="This is the old cyansplash.net site, not amazing but taught me a lot about web development."
+						link1="https://github.com/juls0730/cyansplash.net"
+						button1="Github" />
+					<ProjectCard name="Discord bot 'Echo'"
+						:icons="[{ 'icon': 'logos:javascript', 'name': 'Javascript' }]"
+						body="This is an old discord bot that taught me about the discord API how to make a bot and led me to learning alot about JavaScript, without Echo I most likely would not be a web developer."
+						link1="https://github.com/juls0730/Echo"
+						button1="Github" />
+					<ProjectCard name="juls07.dev"
+						:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }, { 'icon': 'logos:tailwindcss-icon', 'name': 'tailwindcss'}]"
+						body="This stie is the site you are currently on, this site is just a place to show off my projects and my skills."
+						link1="https://github.com/juls0730/juls07.dev"
+						button1="Github" />
+					<ProjectCard name="vuefullstack"
+						:icons="[{ 'icon': 'logos:vue', 'name': 'vue v3' }]"
+						body="this is a small forum project I made to mock my ruby on rails forum I am working on but in vuejs."
+						link1="https://github.com/juls0730/vuefullstack"
+						button1="Github" />
+				</section>
+			</section>
 		</main>
 	</div>
 </template>

supabase/functions/newsletter/index.ts

@@ -16,10 +16,12 @@ serve(async (req) => {
   const supabase = createClient(Deno.env.get('SUPABASE_URL'), Deno.env.get('SUPABASE_ANON_KEY'))
 
   const { email, name } = await req.json()
-  if (!name || !email || !emailRegex.test(email)) throw new Error(
+  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 })