added projects to bio page

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>