From 511710ee78959e80b577cbef6642d59dd3376c27 Mon Sep 17 00:00:00 2001
From: Philippe Loctaux <p@philippeloctaux.com>
Date: Sat, 3 Jun 2023 01:17:55 +0200
Subject: [PATCH] experience card: ability to display image on left or right

---
 src/components/experience-card.astro | 6 +++---
 src/components/projects.astro        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/experience-card.astro b/src/components/experience-card.astro
index a4a3dbd..8b6a15f 100644
--- a/src/components/experience-card.astro
+++ b/src/components/experience-card.astro
@@ -8,7 +8,7 @@ interface Props {
     title: string;
     link?: { label: string; uri: string };
     notAvailable?: boolean;
-    image?: string;
+    image?: {src: string, rightPosition: boolean };
     tech?: string[];
 }
 const {
@@ -30,9 +30,9 @@ const logoCss = `h-16 w-16 rounded-xl mr-4 ${
 }`;
 ---
 
-<div class={`${image ? "2xl:flex 2xl:flex-row-reverse items-stretch justify-between" : "" } w-full rounded-2xl ${backgroundColor}`}>
+<div class={`${image ? `2xl:flex ${image.rightPosition ? "2xl:flex-row-reverse" : "" } items-stretch justify-between` : "" } w-full rounded-2xl ${backgroundColor}`}>
     <!-- Optional image on the side -->
-    {image && <img loading="lazy" src={image} class="flex w-full 2xl:w-1/2 grow 2xl:rounded-tl-none 2xl:rounded-r-2xl rounded-t-2xl object-cover" />}
+    {image && <img loading="lazy" src={image.src} class={`flex w-full 2xl:w-1/2 grow ${image.rightPosition ? "2xl:rounded-tl-none 2xl:rounded-r-2xl" : "2xl:rounded-tr-none 2xl:rounded-l-2xl"} rounded-t-2xl object-cover`} />}
 
     <!-- Main content -->
     <div class=`p-6 ${image ? "flex flex-col grow-0" : ""} justify-between h-full`>
diff --git a/src/components/projects.astro b/src/components/projects.astro
index c3d9803..eb58b79 100644
--- a/src/components/projects.astro
+++ b/src/components/projects.astro
@@ -100,7 +100,7 @@ import ExperienceCard from "./experience-card.astro";
             dates="September 2020 - January 2023"
             title="Epitech Innovative Project"
             notAvailable={true}
-            image="/images/naviarent.jpg"
+            image={{ src: "/images/naviarent.jpg", rightPosition: true }}
             tech={[
                 "NodeJS",
                 "Angular",
@@ -181,7 +181,7 @@ import ExperienceCard from "./experience-card.astro";
             dates="April 2017 - January 2020"
             title="Timelapse"
             link={{ uri: "https://timelapse.canvas.place", label: "Website" }}
-            image="/images/canvas.png"
+            image={{ src: "/images/canvas.png", rightPosition: false }}
             tech={["FFmpeg", "Shell scripting", "nginx"]}
         >
             <p>canvas.place is a shared place to express creativity.</p>