added projects to bio page

components/bio/BioHeading.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :class="$style.grid">
+  <div :class="$style.grid">
     <div>
       <img src="~/assets/svg/howdy.svg" />
     </div>
@@ -17,7 +17,7 @@
         of doing <b>Typescript</b> and <b>Golang</b> backend.
       </p>
     </div>
-  </section>
+  </div>
 </template>
 
 <script lang="ts" setup></script>

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>

components/bio/BioProjects.vue

@@ -1,20 +1,30 @@
 <template>
-  <section :class="$style.projects">
-    <h2>My Projects</h2>
+  <div :class="$style.projects">
+    <h2>Projects</h2>
 
-    <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat natus
-      perspiciatis ad voluptatum nisi saepe, molestiae autem dolores est modi
-      quod inventore similique omnis asperiores. Qui beatae magnam ab
-      consequatur.
-    </p>
-  </section>
+    <div :class="$style.grid">
+      <BioProjectCard
+        v-for="project in projects"
+        :key="project.name"
+        :name="project.name"
+        :description="project.description"
+        :url="project.pageUrl"
+        :source="project.codeUrl"
+        :image="project.image"
+      />
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { projects } from "~~/constants/projects";
+</script>
 
 <style lang="scss" module>
-.projects {
-  text-align: center;
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  column-gap: 16px;
+  row-gap: 16px;
 }
 </style>

components/bio/BioSkills.vue

@@ -3,7 +3,7 @@
     <h2>Skills</h2>
 
     <div :class="$style.list">
-      <SkillsCard
+      <BioSkillsCard
         :title="skill.title"
         :level="skill.level"
         :description="skill.description ?? ''"
@@ -11,7 +11,7 @@
         v-for="skill in skills"
       >
         <img :src="skill.icon" width="48" height="48" />
-      </SkillsCard>
+      </BioSkillsCard>
     </div>
   </div>
 </template>

components/bio/BioSkillsCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.card">
+  <UiCard>
     <div :class="$style.grid">
       <div :class="$style.icon">
         <slot />
@@ -14,7 +14,7 @@
     <div :class="$style.description">
       {{ description }}
     </div>
-  </div>
+  </UiCard>
 </template>
 
 <script lang="ts" setup>
@@ -28,21 +28,6 @@ defineProps<Props>();
 </script>
 
 <style lang="scss" module>
-.card {
-  border-radius: 8px;
-  border: 1px solid var(--color-line);
-  transition: all 0.25s;
-
-  &:hover {
-    background-color: var(--color-line);
-
-    &,
-    & > .grid {
-      border-color: var(--color-text-secondary);
-    }
-  }
-}
-
 .grid {
   display: grid;
   grid-template-columns: 48px 1fr;

components/icons/IconsCode.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="48"
+    width="48"
+    viewBox="0 0 48 48"
+  >
+    <path
+      xmlns="http://www.w3.org/2000/svg"
+      d="m16 35.9-12-12 12.1-12.1 2.15 2.15L8.3 23.9l9.85 9.85Zm15.9.1-2.15-2.15 9.95-9.95-9.85-9.85L32 11.9l12 12Z"
+    />
+  </svg>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module></style>

components/ui/UiActionButton.vue

@@ -30,7 +30,7 @@
 interface Props {
   href: string;
   size?: "md";
-  variant?: "outline";
+  variant?: "outline" | "text" | "primary";
 }
 
 withDefaults(defineProps<Props>(), {
@@ -44,11 +44,15 @@ withDefaults(defineProps<Props>(), {
   color: white;
   border-radius: 8px;
   text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.variant-primary {
+    background-color: var(--color-primary);
+  }
 
   &.variant-outline {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
     box-shadow: var(--color-text) 0 0 0 1px;
     color: var(--color-text);
     overflow: hidden;
@@ -68,7 +72,6 @@ withDefaults(defineProps<Props>(), {
     }
 
     &:hover {
-      color: var(--color-background);
       box-shadow: var(--color-background) 0 0 0 1px;
 
       &::after {
@@ -96,6 +99,8 @@ withDefaults(defineProps<Props>(), {
 .title {
   z-index: 1;
   position: relative;
+  flex: 1;
+  text-align: center;
 
   .size-md.prefixed & {
     padding-left: 10px;

components/ui/UiCard.vue

@@ -0,0 +1,20 @@
+<template>
+  <div :class="[$style.card, $attrs.class]">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module>
+.card {
+  border-radius: 8px;
+  border: 1px solid var(--color-line);
+  transition: all 0.25s;
+
+  &:hover {
+    background-color: var(--color-code-background);
+    border-color: var(--color-text-secondary);
+  }
+}
+</style>