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>