added projects to bio page

components/bio/BioProjectCard.vue

@@ -0,0 +1,106 @@
+<template>
+  <UiCard>
+    <div :class="$style.card">
+      <div :class="$style.thumbnail">
+        <img :src="image" :class="$style.image" :alt="name" />
+      </div>
+
+      <div :class="$style.content">
+        <div :class="$style.head">
+          <h3 :class="$style.title">{{ name }}</h3>
+
+          <div :class="$style.url">
+            <NuxtLink :to="url">{{ url }}</NuxtLink>
+          </div>
+        </div>
+
+        <div :class="$style.description">
+          {{ description }}
+        </div>
+      </div>
+
+      <div :class="$style.buttons">
+        <UiActionButton :href="source" variant="outline" _target="blank">
+          View Code
+
+          <template v-slot:prefix>
+            <IconsCode width="22" height="22" fill="currentColor" />
+          </template>
+        </UiActionButton>
+
+        <UiActionButton :href="url" variant="primary" _target="blank">
+          Visit Page
+          <template v-slot:suffix>
+            <IconsArrowRight width="22" height="22" fill="currentColor" />
+          </template>
+        </UiActionButton>
+      </div>
+    </div>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  name: string;
+  description: string;
+  url: string;
+  source: string;
+  image: string;
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss" module>
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.thumbnail {
+  height: 250px;
+  border-radius: 8px 8px 0 0;
+  border-bottom: 1px solid var(--color-line);
+  overflow: hidden;
+}
+
+.image {
+  object-fit: cover;
+  width: 100%;
+  height: auto;
+}
+
+.content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.head {
+  margin-bottom: 16px;
+}
+.title {
+  margin: 0 0 4px 0;
+}
+
+.url {
+  font-size: 0.9em;
+}
+
+.description {
+  font-size: 0.9em;
+  line-height: 1.5em;
+  color: var(--color-text-secondary);
+  white-space: pre-line;
+}
+
+.buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 10px;
+  column-gap: 10px;
+  padding: 16px;
+}
+</style>