Merge pull request #7 from Radapls/feature/JFRA-05-migrate-portfolio-…

…cards

JFRA-05: Migrate PortfolioCards.

src/components/PortfolioCard.astro

@@ -10,114 +10,104 @@ const { link, bgImage, title, description } = Astro.props;
 ---
 
 <a class="card" href=`${link}`>
-  <div
-    class="card__background"
-    style={{
-      backgroundImage: `url(${bgImage})`,
-    }}
-  >
-  </div>
+  <img class="card__image" src={bgImage} alt={title} />
   <div class="card__content">
-    <h3 class="portafolio__title">
+    <h3 class="card__title">
       {title}
     </h3>
-    <p class="portafolio__description">
+    <p class="card__description">
       {description}
     </p>
   </div>
+  <button>
+    <svg
+      id="Arrow.7"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 18.256 18.256"
+      style="transition:.3s"
+    >
+      <g id="Group_7" data-name="Group 7" transform="translate(5.363 5.325)">
+        <path
+          id="Path_10"
+          data-name="Path 10"
+          d="M14.581,7.05,7.05,14.581"
+          transform="translate(-7.05 -7.012)"
+          fill="none"
+          stroke="var(--container-color)"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"></path>
+        <path
+          id="Path_11"
+          data-name="Path 11"
+          d="M10,7l5.287.037.038,5.287"
+          transform="translate(-7.756 -7)"
+          fill="none"
+          stroke="var(--container-color)"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"></path>
+      </g>
+      <path
+        id="Path_12"
+        data-name="Path 12"
+        d="M0,0H18.256V18.256H0Z"
+        fill="none"></path>
+    </svg>
+  </button>
 </a>
 
 <style>
-  .portafolio__container {
-    overflow: initial;
-  }
-  .portafolio__title {
-    opacity: 0;
-    transition: opacity 500ms ease-in-out;
-    font-size: var(--h3-font-size);
-    margin-bottom: var(--mb-0-5);
-    color: var(--body-color);
-    font-size: var(--h3-font-size);
-    line-height: 1.4;
-  }
-  .portafolio__description {
-    opacity: 0;
-    transition: opacity 500ms ease-in;
-    margin-bottom: var(--mb-0-75);
-    color: var(--body-color);
-    font-size: var(--normal-font-size);
-    margin-bottom: 8px;
-  }
-
   .card {
-    width: 250px;
-    height: 250px;
-    padding: 1rem;
-    cursor: pointer;
-    border-radius: 0.25rem;
-    position: relative;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 0.5rem;
+    padding: 2rem;
+    background-color: var(--container-color);
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    gap: 1rem;
+    transition: all 300ms ease-in-out;
   }
 
-  .card > * + * {
-    margin-top: 1.1em;
-  }
-  /* hover */
-  .card:hover .portafolio__title {
-    opacity: 1;
+  .card:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
 
-  .card:hover .portafolio__description {
-    opacity: 1;
+  .card__image {
+    width: 75px;
+    object-fit: cover;
+    align-self: center;
   }
 
-  .card-grid {
-    display: grid;
-    grid-column-gap: 24px;
-    grid-row-gap: 24px;
-    max-width: 1200px;
-    width: 100%;
-    justify-content: center;
-    justify-items: center;
-  }
-
-  .card {
-    list-style: none;
-    position: relative;
-  }
-
-  .card:before {
-    content: "";
-    display: block;
-    padding-bottom: 150%;
-    width: 100%;
+  .card__title {
+    font-size: var(--h3-font-size);
+    font-weight: var(--font-medium);
   }
 
-  .card__background {
-    background-size: cover;
-    background-position: center;
-    border-radius: 0.25rem;
-    bottom: 0;
-    filter: brightness(0.9) saturate(1) contrast(0.85);
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform-origin: center;
-
-    transition:
-      filter 200ms linear,
-      transform 200ms linear;
+  .card__description {
+    display: inline-block;
+    font-size: var(--small-font-size);
+    text-decoration: none;
+    color: var(--text-color);
   }
 
-  .card:hover .card__background {
-    transform: scale(1.05) translateZ(0);
-    filter: brightness(0.75) saturate(1.2) contrast(0.5);
+  button {
+    all: unset;
+    background-color: var(--first-color);
+    border-radius: 50%;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem;
+    transition: all 300ms ease-in-out;
   }
 
-  .card__content {
-    left: 0;
-    padding: 24px;
-    position: absolute;
-    top: 0;
+  button:hover {
+    background-color: var(--first-color-alt);
+    rotate: 45deg;
   }
 </style>

src/sections/Portfolio.astro

@@ -186,18 +186,12 @@ const t = useTranslations(Astro.currentLocale as Lang);
     grid-row-gap: 24px;
     max-width: 1200px;
     width: 100%;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     justify-content: center;
     justify-items: center;
   }
 
-  @media screen and (max-width: 1024px) {
-    .card-grid {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media screen and (max-width: 568px) {
+  @media screen and (max-width: 768px) {
     .card-grid {
       grid-template-columns: 1fr;
     }