From 53fe2087c69fe84907f92120660d73a7168f01ce Mon Sep 17 00:00:00 2001
From: juls0730 <juliangarner240@gmail.com>
Date: Wed, 14 Dec 2022 23:36:34 -0600
Subject: [PATCH] slight refactors

---
 assets/css/main.css                        | 26 +++++++-
 components/{IconButton.vue => IconTag.vue} |  9 +--
 components/Nav.vue                         |  2 +-
 components/ProjectCard.vue                 | 17 ++---
 components/content/ProseCode.vue           |  2 +-
 content/blog/how-i-made-my-site-fast.md    |  2 +-
 content/blog/portfolio-site-rebuild.md     |  7 +--
 pages/blog/[...slug].vue                   |  8 +--
 pages/blog/index.vue                       | 40 ++++++------
 pages/index.vue                            | 72 ++++++++++------------
 tailwind.config.js                         |  7 ++-
 11 files changed, 103 insertions(+), 89 deletions(-)
 rename components/{IconButton.vue => IconTag.vue} (86%)

diff --git a/assets/css/main.css b/assets/css/main.css
index 2583bb7..dde5d69 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Inter&display=swap');
 
@@ -10,15 +9,33 @@ html,
 body {
 	background-color: #191819;
 	color: white;
+	z-index: 0;
 }
 
-header {
+header,
+.blur-background::before {
 	background-image: url(~/assets/pictues/header.min.jpg);
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
 }
 
+.blur-background {
+	position: relative;
+	overflow: hidden;
+}
+
+.blur-background::before {
+	content: '';
+	margin: -35px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	filter: blur(12px) saturate(115%);
+}
+
 a {
 	@apply text-rose-500 hover:underline visited:bg-rose-700;
 }
@@ -27,7 +44,10 @@ a {
 	font-family: 'JetBrains Mono', monospace;
 }
 
-code, kbd, pre, samp {
+code,
+kbd,
+pre,
+samp {
 	font-family: 'JetBrains Mono', monospace;
 }
 
diff --git a/components/IconButton.vue b/components/IconTag.vue
similarity index 86%
rename from components/IconButton.vue
rename to components/IconTag.vue
index f4500d6..467bc1c 100644
--- a/components/IconButton.vue
+++ b/components/IconTag.vue
@@ -23,12 +23,13 @@ export default {
 }
 </script>
 <template>
-    <button :aria-label="name"
+    <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;' : ''">
+        :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>
+        {{ name }}
+    </div>
 </template>
\ No newline at end of file
diff --git a/components/Nav.vue b/components/Nav.vue
index 7e24357..c3d7217 100644
--- a/components/Nav.vue
+++ b/components/Nav.vue
@@ -1,6 +1,6 @@
 <template>
 	<nav class="px-2 py-4">
-		<ul class="flex gap-3 font-semibold">
+		<ul class="flex gap-x-3 font-semibold">
 			<li><nuxt-link class="text-white" to="/">Home</nuxt-link></li>
 			<li><nuxt-link class="text-white" to="/blog">Blog</nuxt-link></li>
 		</ul>
diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
index 377f81e..2e75294 100644
--- a/components/ProjectCard.vue
+++ b/components/ProjectCard.vue
@@ -5,7 +5,8 @@ export default {
 </script>
 
 <template>
-	<div class="bg-[#201F20] 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-[494px] border-zinc-700/30 shadow-md rounded-lg">
+	<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"
@@ -28,16 +29,16 @@ export default {
 			</div>
 		</div>
 		<h4 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h4>
-		<div id="body" class="mb-4">
+		<div id="body"
+			class="mb-4">
 			<slot />
 		</div>
-		<div class="flex flex-wrap gap-2"
+		<div class="flex flex-wrap gap-2 absolute bottom-6"
 			v-if="icons">
-			<div v-for="icon in icons">
-				<IconButton size="16"
-					:name="icon.name"
-					:iconName="icon.icon"></IconButton>
-			</div>
+			<IconTag v-for="icon in icons"
+				size="16"
+				:name="icon.name"
+				:iconName="icon.icon"></IconTag>
 		</div>
 	</div>
 </template>
\ No newline at end of file
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
index eb56b15..fb7c099 100644
--- a/components/content/ProseCode.vue
+++ b/components/content/ProseCode.vue
@@ -25,7 +25,7 @@
   
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core';
-const { copy, copied, text } = useClipboard();
+const { copy, copied } = useClipboard();
 const props = withDefaults(
 	defineProps<{
 		code?: string;
diff --git a/content/blog/how-i-made-my-site-fast.md b/content/blog/how-i-made-my-site-fast.md
index 33ce844..9dfa6ec 100644
--- a/content/blog/how-i-made-my-site-fast.md
+++ b/content/blog/how-i-made-my-site-fast.md
@@ -22,7 +22,7 @@ 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 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.
+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.
 
 ```js[post.js]
 for (let i = 0; i < replies.length; i++) {
diff --git a/content/blog/portfolio-site-rebuild.md b/content/blog/portfolio-site-rebuild.md
index c123425..0cff29d 100644
--- a/content/blog/portfolio-site-rebuild.md
+++ b/content/blog/portfolio-site-rebuild.md
@@ -2,8 +2,8 @@
 title: Rebuilding my personal website!
 description: My experiences with nuxtjs 3 and tRPC
 image: 
-    src: '/images/website-rebuild-draft-1.avif'
-    alt: 'Why I chose archlinux'
+    src: 'https://via.placeholder.com/1920x1080.png?text=placeholder'
+    alt: 'placeholder'
 head:
   meta:
     - name: 'keywords'
@@ -18,9 +18,8 @@ date: 2022-09-20
 _draft: false
 tags:
   - web dev
-  - fullstack development
   - nuxtjs 3
   - supabase
 ---
 
-Recently I've been working with nuxtjs 3 and tTRPC. I've heard a lot of things about nuxtjs 3 and tRPC lately, mostly bad with nuxtjs 3 and mostly good with trpc. These are not technoligies I've been interested in working with for a while
+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 
\ No newline at end of file
diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue
index 1a79d3f..9a15cfc 100644
--- a/pages/blog/[...slug].vue
+++ b/pages/blog/[...slug].vue
@@ -5,20 +5,20 @@
 			<ContentDoc v-slot="{ doc }">
 				<img :src="doc.image.src"
 					class="mb-2" />
-				<h1 class="text-3xl md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
+				<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-600 dark:text-zinc-400">
+				<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-7">
-					<IconButton v-for="tag in doc.tags"
+					<IconTag v-for="tag in doc.tags"
 						:name="tag"
 						:iconName='tag'
 						isTag="true" />
 				</div>
-				<ContentRenderer :value="doc" />
+				<ContentRenderer class="text-gray-200" :value="doc" />
 			</ContentDoc>
 		</div>
 	</main>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index 511a9fd..e334209 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -5,35 +5,37 @@
 			<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] h-[563.25px] overflow-hidden rounded-lg border border-neutral-700 shadow-md">
+				<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" />
-					<div class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-zinc-800 mb-1 pb-1 relative">
+						class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
+					<div
+						class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-[#201F20] mb-1 pb-1 relative">
 						<h3>
 							<nuxt-link class="text-lg"
 								:to="article._path">
 								{{ article.title }}
 							</nuxt-link>
 						</h3>
-						<p class="text-zinc-600 dark:text-zinc-500">
-							{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
-						</p>
-						<p class="text-zinc-400 dark:text-zinc-400">
+						<p class="text-zinc-400">
 							{{ article.description }}
 						</p>
-						<p
-							class="text-zinc-200 max-h-56">
-							<ContentDoc :value="article"
+						<p class="text-zinc-500">
+							{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
+						</p>
+						<p class="text-zinc-200 max-h-56">
+							<ContentDoc :head="false" :value="article"
 								:path="article._path"
 								v-slot="{ doc }">
-								<div class="flex flex-wrap w-full gap-2 justify-start mb-2">
-									<IconButton v-for="tag in doc.tags"
+								<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>
-								<ContentRenderer :value="doc" :excerpt="true" />
+								<ContentRenderer :value="doc"
+									:excerpt="true" />
 							</ContentDoc>
 						</p>
 					</div>
@@ -49,12 +51,8 @@ const { data: articles } = await useAsyncData('posts-list', () => queryContent('
 	.sort({ date: -1, $numeric: true, })
 	.find()
 );
-</script>
 
-<script lang="ts">
-export default {
-	head: {
-		title: 'Juls07'
-	}
-}
-</script>
\ No newline at end of file
+useHead({
+	title: 'Juls07',
+})
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index e3e43cf..064dd86 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
 		<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-[#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]">
+				class="p-6 bg-[#12121233] 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"
@@ -35,94 +35,79 @@
 				</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">
-					<IconButton name="Javascript"
+					<IconTag name="Javascript"
 						iconName='logos:javascript' />
-					<IconButton name="Nuxt.js"
+					<IconTag name="Nuxt.js"
 						iconName="logos:nuxt-icon" />
-					<IconButton name="Ruby on rails"
+					<IconTag name="Ruby on rails"
 						iconName="logos:ruby" />
-					<IconButton name="php"
+					<IconTag name="php"
 						iconName="logos:laravel" />
-					<IconButton name="Angular"
+					<IconTag name="Angular"
 						iconName="logos:angular-icon" />
-					<IconButton name="React"
+					<IconTag name="React"
 						iconName="logos:react" />
-					<IconButton name="Bash"
+					<IconTag name="Bash"
 						iconName="logos:bash-icon" />
-					<IconButton name="Tailwindcss"
+					<IconTag name="Tailwindcss"
 						iconName="logos:tailwindcss-icon" />
-					<IconButton name="Rust"
+					<IconTag name="Rust"
 						iconName="logos:rust" />
-					<IconButton name="Node.js"
+					<IconTag name="Node.js"
 						iconName="logos:nodejs-icon" />
-					<IconButton name="Svelte"
+					<IconTag name="Svelte"
 						iconName="logos:svelte-icon" />
-					<IconButton name="Supabase"
+					<IconTag name="Supabase"
 						iconName="logos:supabase-icon" />
-					<IconButton name="tRPC"
+					<IconTag name="tRPC"
 						iconName="logos:trpc" />
-					<IconButton name="Python"
+					<IconTag name="Python"
 						iconName="logos:python" />
-					<IconButton name="Deno"
+					<IconTag name="Deno"
 						iconName="logos:deno" />
 				</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-3 col-span-8 grid-cols-12 gap-6 max-w-full">
+			<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="mdi:nuxt"
 					githubLink="https://github.com/juls0730/vuefullstack"
-					:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v3' }, { 'icon': 'logos:supabase-icon', 'name': 'supabase' }]"
-					link1="https://github.com/juls0730/vuefullstack"
-					button1="Github">
+					:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v3' }, { 'icon': 'logos:supabase-icon', 'name': 'supabase' }]">
 					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' }]"
-					link1="https://github.com/juls0730/php-forum"
-					button1="Github">
+					: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="mdi:nuxt"
 					githubLink="https://github.com/juls0730/cyansplash.net"
-					:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }]"
-					link1="https://github.com/juls0730/cyansplash.net"
-					button1="Github">
+					: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 bot 'Echo'"
+				<ProjectCard name="Discord.js bot"
 					headerIcon="mdi:robot-excited-outline"
 					githubLink="https://github.com/juls0730/Echo"
-					:icons="[{ 'icon': 'logos:javascript', 'name': 'Javascript' }]"
-					link1="https://github.com/juls0730/Echo"
-					button1="Github">
-					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.
+					: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="mdi:nuxt"
 					githubLink="https://github.com/juls0730/juls07.dev"
-					:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }, { 'icon': 'logos:tailwindcss-icon', 'name': 'tailwindcss' }]"
-					link1="https://github.com/juls0730/juls07.dev"
-					button1="Github">
+					: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="mdi:vuejs"
 					githubLink="https://github.com/juls0730/vuefullstack"
-					:icons="[{ 'icon': 'logos:vue', 'name': 'vue v3' }]"
-					link1="https://github.com/juls0730/vuefullstack"
-					button1="Github">
+					: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>
@@ -130,4 +115,9 @@
 		</main>
 	</div>
 </template>
-  
\ No newline at end of file
+  
+<script setup lang="ts">
+useHead({
+	title: 'Juls07',
+})
+</script>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 7909570..4b12ab6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,12 @@ module.exports = {
     "./app.vue",
   ],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        'xs': '512px',
+        '3xl': '1792px'
+      }
+    },
   },
   plugins: [],
 }