added images

src/components/ProjectCard.astro

@@ -28,14 +28,14 @@ const { name, href, gallery } = Astro.props;
   }
   .content {
     padding: 0;
-    margin: 20px;
+    margin: 20px !important;
     max-width: 40vw;
     transition: border-color 0.3s;
     .gallery {
       img {
-        margin-top: 20px;
-        border-radius: 25px;
-        max-width: 250px;
+        max-height: 250px;
+        margin: 20px 10px;
+        border-radius: 10px;
       }
     }
     h2 {
@@ -50,12 +50,29 @@ const { name, href, gallery } = Astro.props;
       border: 1px solid lighten($highlight, 12%);
     }
   }
+  @media (max-width: $responsive-width) {
+    .gallery {
+      margin-top: -30px;
+      text-align: center;
+      * {
+        margin: 2px !important;
+      }
+    }
+  }
 </style>
 
 <div class={href ? "content" : "content no-hover"}>
   <a class="project-external" target={href ? "_blank" : ""} href={href}>
-    <h2>{name}</h2><slot /><div class="gallery">
-      <img loading="lazy" src={Array.isArray(gallery) ? "" : gallery} />
-    </div></a
+    <h2>{name}</h2><slot /><a
+      ><div class="gallery">
+        {
+          Array.isArray(gallery) ? (
+            gallery.map((src) => <img loading="lazy" src={src} />)
+          ) : (
+            <img loading="lazy" src={gallery as string} />
+          )
+        }
+      </div></a
+    ></a
   >
 </div>

src/pages/projects.astro

@@ -15,7 +15,16 @@ import ProjectCard from "../components/ProjectCard.astro";
   <main>
     <div style="margin-bottom: 20px;">
       <h1 style="text-align: center;">Projects</h1>
-      <ProjectCard name="voicenext" href="https://voicenext.app"
+      <ProjectCard
+        name="voicenext"
+        gallery={[
+          "/img/projects/voicenext/Promo.png",
+          "/img/projects/voicenext/Home.png",
+          "/img/projects/voicenext/Register.png",
+          "/img/projects/voicenext/Settings.png",
+          "/img/projects/voicenext/Settings2.png",
+        ]}
+        href="https://voicenext.app"
         >My team and I are currently working on voicenext, a voice messaging app
         designed to keep communication simple and intuitive. With voicenext, you
         just hold to speak and tap to listen. We are also working on unique

src/styles/main.scss

@@ -180,6 +180,6 @@ button {
 
 @media (max-width: $responsive-width) {
   .content{
-    min-width: 65vw !important;
+    min-width: 90vw !important;
   }
 }