Fixing project thumbnails for tall aspect ratios, so it crops the thumbnail…

Fixing project thumbnails for tall aspect ratios, so it crops the thumbnail image instead of stretching out the row.

src/components/Projects.vue

@@ -12,7 +12,7 @@
 
   <!-- Project thumbnails -->
   <div class="row gy-2 gx-2 mb-2">
-    <div v-for="project in thumbnailedProjects" :key="project.id" class="col-sm-12 col-md-6 col-lg-3" style="position: relative;">
+    <div v-for="project in thumbnailedProjects" :key="project.id" class="col-sm-12 col-md-6 col-lg-3 project-card" style="position: relative;">
 
       <!-- Project name badge -->
       <span class="project-badge badge">{{ project.name }}</span>
@@ -223,11 +223,14 @@ export default {
     ...mapMutations(['setProject', 'clearErrors'])
   },
   computed: {
-    ...mapGetters(['thumbnailedProjects']),
+    ...mapGetters(['thumbnailedProjects', 'isAuthenticated']),
   },
   async mounted() {
+    console.log("Projects component mounted")
     this.show_spinner = true
+    if (this.isAuthenticated) {
       await this.loadProjects()
+    }
     this.show_spinner = false
   }
 }
@@ -259,6 +262,8 @@ export default {
   .project-thumbnail {
     cursor: pointer;
     width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
   .profile-label {
     color: #ffffff;
@@ -272,6 +277,9 @@ export default {
     padding: 3px;
     opacity: 0.75;
   }
+  .project-card {
+    height: 184px;
+  }
   .project-badge {
     position: absolute;
     bottom: 5%;