From 544ad70d875b441945a6ab193d69c2eae909dcaf Mon Sep 17 00:00:00 2001
From: angbur <41025473+angbur@users.noreply.github.com>
Date: Tue, 31 Jan 2023 14:38:40 +0100
Subject: [PATCH] fix: change portfolio image height (#190)

Co-authored-by: hoolek77 <szymon.kin@gmail.com>
---
 src/types/sections/portfolio-section.types.ts |  4 +--
 src/web/sections/portfolio/project.astro      | 35 +++++++++++--------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/types/sections/portfolio-section.types.ts b/src/types/sections/portfolio-section.types.ts
index ef9a0db..5722ee5 100644
--- a/src/types/sections/portfolio-section.types.ts
+++ b/src/types/sections/portfolio-section.types.ts
@@ -11,9 +11,9 @@ export interface Project {
    *
    * **Ratio**: 1:1
    *
-   * **Display size**: 120x120px
+   * **Display size**: 56x56px
    */
-  image: Photo;
+  image?: Photo;
 
   /**
    * Date range when you were working on the project.
diff --git a/src/web/sections/portfolio/project.astro b/src/web/sections/portfolio/project.astro
index 9f86223..9621f90 100644
--- a/src/web/sections/portfolio/project.astro
+++ b/src/web/sections/portfolio/project.astro
@@ -18,24 +18,29 @@ const alt = `${name} project thumbnail`;
 <div class="flex flex-col gap-6">
   <div class="flex flex-col gap-4">
     <div class="flex gap-6">
-      <Photo
-        src={image}
-        alt={alt}
-        width={200}
-        height={200}
-        class="rounded-lg object-cover max-w-[120px] overflow-hidden sm:block hidden"
-      />
       <div class="flex w-full flex-col gap-4">
-        <div class="flex justify-between">
-          <div>
-            <Typography variant="item-title">{name}</Typography>
-            <Timestamp dates={dates} />
-          </div>
-          <div class="flex gap-2">
-            {links.map((link) => <LinkButton {...link} />)}
+        <div class="flex gap-4">
+          {
+            image && (
+              <Photo
+                src={image}
+                alt={alt}
+                width={108}
+                height={108}
+                class="hidden h-14 w-14 flex-shrink-0 rounded-lg object-cover sm:block"
+              />
+            )
+          }
+          <div class="flex w-full justify-between">
+            <div>
+              <Typography variant="item-title">{name}</Typography>
+              <Timestamp dates={dates} />
+            </div>
+            <div class="flex gap-2">
+              {links.map((link) => <LinkButton {...link} />)}
+            </div>
           </div>
         </div>
-        <Photo class="rounded-lg object-cover max-w-[120px] sm:hidden" src={image} alt={alt} />
         <div class="inline-grid w-full xl:grid-cols-[auto_auto]">
           {details.map((detail) => <LabelledValue {...detail} />)}
         </div>