added skills and improved gallery

src/components/ProjectCard.astro

@@ -5,9 +5,10 @@ interface Props {
   name: string;
   href?: string;
   gallery?: string | string[];
+  center?: true;
 }
 
-const { name, href, gallery } = Astro.props;
+const { name, href, gallery, center } = Astro.props;
 ---
 
 <style lang="scss">
@@ -18,7 +19,6 @@ const { name, href, gallery } = Astro.props;
     &.project-external {
       text-decoration: none;
       &::after {
-        background-color: white;
         width: 20px;
         position: absolute;
         right: 20px;
@@ -33,25 +33,14 @@ const { name, href, gallery } = Astro.props;
     transition: border-color 0.3s;
     .gallery {
       margin-top: -30px;
-      margin-bottom: 20px;
-      height: 260px;
       img {
-        position: static;
         max-height: 250px;
         margin: 20px 10px;
         border-radius: 10px;
-        transition: all 0.3s;
+        transition: transform 0.3s;
         cursor: pointer;
         &:hover {
-          &.single {
-            position: relative;
-            height: inherit !important;
-          }
-          & {
-            margin: 0 !important;
-            max-height: 260px;
-            height: 280px;
-          }
+          transform: scale(1.1);
         }
       }
     }
@@ -69,9 +58,11 @@ const { name, href, gallery } = Astro.props;
   }
   @media (max-width: $responsive-width) {
     .gallery {
-      height: initial !important;
       margin-top: -4px;
       text-align: center;
+      img {
+        max-height: 15vh !important;
+      }
       * {
         margin: 2px !important;
       }
@@ -87,7 +78,10 @@ const { name, href, gallery } = Astro.props;
   <a class="project-external" target={href ? "_blank" : ""} href={href}>
     <h2>{name}</h2><slot />
     <a>
-      <div class={gallery ? "gallery" : ""}>
+      <div
+        style={center ? "text-align: center;" : ""}
+        class={gallery ? "gallery" : ""}
+      >
         {
           Array.isArray(gallery) ? (
             gallery.map((src) => (