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

@@ -0,0 +1,62 @@
+<template>
+  <UiCard>
+    <div :class="$style.grid">
+      <div :class="$style.icon">
+        <slot />
+      </div>
+
+      <div :class="$style.text">
+        <h3 :class="$style.title">{{ title }}</h3>
+        <UiStars :count="level" />
+      </div>
+    </div>
+
+    <div :class="$style.description">
+      {{ description }}
+    </div>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  title: string;
+  description: string;
+  level: number;
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss" module>
+.grid {
+  display: grid;
+  grid-template-columns: 48px 1fr;
+  grid-column-gap: 16px;
+  align-items: center;
+  border-bottom: 1px solid var(--color-line);
+  padding: 10px;
+  transition: all 0.25s;
+}
+
+.title {
+  margin: 0 0 4px 0;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 4px;
+}
+
+.description {
+  font-size: 0.9rem;
+  line-height: 1.4rem;
+  color: var(--color-text-secondary);
+  padding: 10px;
+}
+</style>