Added links and better column responsiveness

src/components/CardBox.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Project } from '@/lib/types/project'
-import { RouterLink, RouterView } from 'vue-router'
 
 defineProps<{
   projects: Array<Project>
@@ -9,25 +8,31 @@ defineProps<{
 
 <template>
   <div class="row">
-    <q-card v-for="p in projects" :key="p.name" dark bordered class="col p-card bg-primary">
-      <q-card-section class="q-pb-xs">
-        <div class="text-h6">{{ p.name }}</div>
-        <div class="text-subtitle2">{{ p.company }}</div>
-      </q-card-section>
+    <RouterLink
+      class="col-12 col-sm-6 col-md-4 col-lg-3 q-pb-sm q-pl-xs q-pr-xs router-link"
+      v-for="p in projects"
+      :key="p.name"
+      :to="'/projects/' + p.name"
+    >
+      <q-card dark bordered class="full-height bg-primary p-card">
+        <q-card-section class="q-pb-xs">
+          <div class="text-h6">{{ p.name }}</div>
+          <div class="text-subtitle2">{{ p.company }}</div>
+        </q-card-section>
 
-      <q-separator dark inset class="q-mt-none" />
+        <q-separator dark inset class="q-mt-none" />
 
-      <q-card-section class="">
-        {{ p.description }}
-      </q-card-section>
-    </q-card>
+        <q-card-section class="">
+          {{ p.description }}
+        </q-card-section>
+      </q-card>
+    </RouterLink>
   </div>
 </template>
 
 <style scoped>
-.p-card {
-  min-width: 300px;
-  margin: 5px;
+.router-link {
+  text-decoration: none;
 }
 
 .p-card:hover {