slight refactors

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>

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>

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>

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;