icon updates

src/components/achievementCard/AchievementCard.js

@@ -10,7 +10,13 @@ export default function AchievementCard({cardInfo, isDark}) {
   return (
     <div className={isDark ? "dark-mode certificate-card" : "certificate-card"}>
       <div className="certificate-image-div">
-        <img src={cardInfo.image} alt="PWA" className="card-image"></img>
+        <img
+          src={cardInfo.image}
+          alt="PWA"
+          className={["card-image", cardInfo.imageClassName]
+            .filter(Boolean)
+            .join(" ")}
+        ></img>
       </div>
       <div className="certificate-detail-div">
         <h5 className={isDark ? "dark-mode card-title" : "card-title"}>

src/components/achievementCard/AchievementCard.scss

@@ -1,9 +1,13 @@
 @import "../../_globalColor";
 
 .card-image {
-  max-width: 100%;
-  height: auto;
-  width: 250px;
+  width: min(110px, 45%);
+  max-height: 110px;
+  object-fit: contain;
+}
+.card-image-large {
+  width: min(150px, 62%);
+  max-height: 125px;
 }
 .card-title {
   color: $titleColor;
@@ -38,7 +42,7 @@
 }
 .certificate-image-div {
   position: relative;
-  height: 250px;
+  height: 130px;
   overflow: hidden;
   text-align: center;
   display: flex;

src/portfolio.js

@@ -221,6 +221,7 @@ const achievementSection = {
       title: "MongoDB for JavaScript Developers",
       subtitle: "MongoDB",
       image: mongodbLogo,
+      imageClassName: "card-image-large",
       footerLink: [
         {
           name: "Certification",
@@ -232,6 +233,7 @@ const achievementSection = {
       title: "Web Development for E-Commerce",
       subtitle: "Academia Colon Tres S.A. Madrid",
       image: csaLogo,
+      imageClassName: "card-image-large",
       footerLink: [
         {
           name: "Certification",