From b1ec6d3470dad9defa23501842065a41cf7ddb39 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Sun, 20 Oct 2024 18:35:48 +1300
Subject: [PATCH 01/15] :sparkles: add black shadow

---
 next/components/projects/ProjectsImage.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index 4b6527c..9dfb395 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -19,12 +19,17 @@ export default function ImageComponent({
         <Image
           src={src}
           alt={alt || ""}
-          className="absolute inset-0 -z-10 w-full h-full object-cover brightness-50 rounded-[50px]"
+          className="absolute inset-0 -z-10 w-full h-full object-cover brightness-50 rounded-[40px]"
           width={width}
           height={100}
         />
       </div>
-      <div>{title}</div>
+
+      <div className="absolute top-[15%] bottom-[15%] right-[15%] w-[35%] bg-black opacity-60 rounded-[20px]"></div>
+
+      <div className="">
+        <div>{title}</div>
+      </div>
     </div>
   );
 }

From 4be3fe0833b7d7392d59d2a7b334165ae7f3e908 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Sun, 20 Oct 2024 19:18:03 +1300
Subject: [PATCH 02/15] :lipstick: fix image sizing

---
 next/components/projects/ProjectsImage.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index 9dfb395..fd84d35 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -11,17 +11,17 @@ export default function ImageComponent({
   title: string;
   type: "current" | "old";
 }) {
-  const width = type === "current" ? 150 : 100;
+  const height = type === "current" ? 150 : 100;
 
   return (
-    <div className={`w-[${width}px] h-[100px] relative`}>
+    <div className={`w-[800px] h-[${height}px] relative`}>
       <div>
         <Image
           src={src}
           alt={alt || ""}
           className="absolute inset-0 -z-10 w-full h-full object-cover brightness-50 rounded-[40px]"
-          width={width}
-          height={100}
+          width={800}
+          height={height}
         />
       </div>
 
@@ -32,4 +32,4 @@ export default function ImageComponent({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file

From 2f2f66d49982176934133af35c749b14de13e3ee Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Sun, 20 Oct 2024 20:12:25 +1300
Subject: [PATCH 03/15] :lipstick: add text styling

---
 next/components/projects/ProjectsImage.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index fd84d35..723d99d 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -14,21 +14,21 @@ export default function ImageComponent({
   const height = type === "current" ? 150 : 100;
 
   return (
-    <div className={`w-[800px] h-[${height}px] relative`}>
+    <div className={`w-[600px] h-[${height}px] relative`}>
       <div>
         <Image
           src={src}
           alt={alt || ""}
           className="absolute inset-0 -z-10 w-full h-full object-cover brightness-50 rounded-[40px]"
-          width={800}
+          width={600}
           height={height}
         />
       </div>
 
-      <div className="absolute top-[15%] bottom-[15%] right-[15%] w-[35%] bg-black opacity-60 rounded-[20px]"></div>
-
-      <div className="">
-        <div>{title}</div>
+      <div className="absolute top-[15%] bottom-[15%] right-[15%] w-[35%] bg-black opacity-70 rounded-[20px] z-10">
+        <div className="text-lg pt-2 pb-3 pl-5 pr-5 z-20 opacity-100 text-right">
+          {title}
+        </div>
       </div>
     </div>
   );

From dac71f3cadec8e0072f8d04c1270fa2508cd4da6 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Sun, 20 Oct 2024 22:14:11 +1300
Subject: [PATCH 04/15] add current project text styling

---
 next/components/projects/ProjectsImage.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index 723d99d..6b6385c 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -19,17 +19,23 @@ export default function ImageComponent({
         <Image
           src={src}
           alt={alt || ""}
-          className="absolute inset-0 -z-10 w-full h-full object-cover brightness-50 rounded-[40px]"
-          width={600}
+          className="absolute inset-0 -z-10 w-full h-full object-cover brightness-50 rounded-[50px]"
+          width={300}
           height={height}
         />
       </div>
 
-      <div className="absolute top-[15%] bottom-[15%] right-[15%] w-[35%] bg-black opacity-70 rounded-[20px] z-10">
-        <div className="text-lg pt-2 pb-3 pl-5 pr-5 z-20 opacity-100 text-right">
+      <div className="absolute top-[30%] bottom-[30%] left-[15%] bg-black opacity-70 rounded-[10px] z-10 flex items-center">
+        <div className="text-lg pt-2 pb-3 pl-5 pr-5 z-20 opacity-100 font-bold">
           {title}
         </div>
       </div>
+
+      {/* <div className="absolute top-[15%] bottom-[15%] right-[15%] w-[35%] bg-black opacity-70 rounded-[15px] z-10">
+        <div className="text-lg pt-2 pb-3 pl-5 pr-4 z-20 opacity-100 text-right font-semibold">
+          {title}
+        </div>
+      </div> */}
     </div>
   );
 }
\ No newline at end of file

From f6a2c6163ee6969144788722c9c948f1233b0895 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Sun, 20 Oct 2024 22:41:43 +1300
Subject: [PATCH 05/15] :sparkles: add switching image styling logic

---
 next/components/projects/ProjectsImage.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index 6b6385c..72080b1 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -25,17 +25,19 @@ export default function ImageComponent({
         />
       </div>
 
-      <div className="absolute top-[30%] bottom-[30%] left-[15%] bg-black opacity-70 rounded-[10px] z-10 flex items-center">
-        <div className="text-lg pt-2 pb-3 pl-5 pr-5 z-20 opacity-100 font-bold">
-          {title}
+      {type === "current" ? (
+        <div className="absolute top-[30%] bottom-[30%] left-[15%] bg-black opacity-70 rounded-[10px] z-10 flex items-center">
+          <div className="text-lg pt-2 pb-3 pl-5 pr-5 z-20 opacity-100 font-semibold">
+            {title}
+          </div>
         </div>
-      </div>
-
-      {/* <div className="absolute top-[15%] bottom-[15%] right-[15%] w-[35%] bg-black opacity-70 rounded-[15px] z-10">
-        <div className="text-lg pt-2 pb-3 pl-5 pr-4 z-20 opacity-100 text-right font-semibold">
-          {title}
+      ) : (
+        <div className="absolute top-[15%] bottom-[15%] right-[15%] w-[35%] bg-black opacity-70 rounded-[15px] z-10">
+          <div className="text-lg pt-2 pb-3 pl-5 pr-4 z-20 opacity-100 text-right font-semibold">
+            {title}
+          </div>
         </div>
-      </div> */}
+      )}
     </div>
   );
 }
\ No newline at end of file

From 375ea98e15b9710f776bee689a36e26450ca07a9 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Sun, 20 Oct 2024 23:02:25 +1300
Subject: [PATCH 06/15] :bug: fix project type passing

---
 next/components/projects/Timeline.tsx | 33 ++++++++++++++++-----------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/next/components/projects/Timeline.tsx b/next/components/projects/Timeline.tsx
index 1ceaa5d..45ed344 100644
--- a/next/components/projects/Timeline.tsx
+++ b/next/components/projects/Timeline.tsx
@@ -9,23 +9,30 @@ const Timeline = ({
   timelineElements: ProjectType[];
 }) => {
 
+  const firstDay = new Date(new Date().getFullYear(), 0, 1);
+
   return (
     <div className="flex flex-col pl-[10%] pt-[5%] pb-[5%]">
       <div className="h-4 w-4 bg-white rounded-full"></div>
       <div>
-        {timelineElements.map((timelineElement, index) => (
-          <div className="flex items-center gap-20">
-            <DateBlob
-              timelineElement={timelineElement}
-              isEven={index % 2 == 0}
-            />
-            <ImageComponent
-              src={getLargestImageUrl(timelineElement.image)}
-              title={timelineElement.title}
-              type={"current"}
-            />
-          </div>
-        ))}
+        {timelineElements.map((timelineElement, index) => {
+          const date = new Date(timelineElement.Date);
+          const type = date >= firstDay ? "current" : "old";
+
+          return (
+            <div className="flex items-center gap-20">
+              <DateBlob
+                timelineElement={timelineElement}
+                isEven={index % 2 == 0}
+              />
+              <ImageComponent
+                src={getLargestImageUrl(timelineElement.image)}
+                title={timelineElement.title}
+                type={type}
+              />
+            </div>
+          );
+        })}
       </div>
       <div className="h-4 w-4 bg-white rounded-full"></div>
     </div>

From 57e4523c81c564ca5c8175c5e3bbe90ce8f93f69 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Mon, 21 Oct 2024 00:42:44 +1300
Subject: [PATCH 07/15] :lipstick: fix image styling

---
 next/components/projects/ProjectsImage.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index 72080b1..46d3a43 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -14,26 +14,29 @@ export default function ImageComponent({
   const height = type === "current" ? 150 : 100;
 
   return (
-    <div className={`w-[600px] h-[${height}px] relative`}>
+    <div
+      className="w-[600px] relative flex justify-center"
+      style={{ height: `${height}px` }}
+    >
       <div>
         <Image
           src={src}
           alt={alt || ""}
-          className="absolute inset-0 -z-10 w-full h-full object-cover brightness-50 rounded-[50px]"
+          className="absolute inset-0 -z-10 w-full h-full object-cover brightness-75 opacity-80 rounded-[50px]"
           width={300}
           height={height}
         />
       </div>
 
       {type === "current" ? (
-        <div className="absolute top-[30%] bottom-[30%] left-[15%] bg-black opacity-70 rounded-[10px] z-10 flex items-center">
-          <div className="text-lg pt-2 pb-3 pl-5 pr-5 z-20 opacity-100 font-semibold">
+        <div className="absolute top-[30%] bottom-[30%] w-[60%] bg-black opacity-70 rounded-[15px] z-10 flex justify-center items-center">
+          <div className="text-2xl pt-3 pb-3 pl-5 pr-5 z-20 opacity-100 text-center font-semibold">
             {title}
           </div>
         </div>
       ) : (
-        <div className="absolute top-[15%] bottom-[15%] right-[15%] w-[35%] bg-black opacity-70 rounded-[15px] z-10">
-          <div className="text-lg pt-2 pb-3 pl-5 pr-4 z-20 opacity-100 text-right font-semibold">
+        <div className="absolute top-[15%] bottom-[15%] right-[18%] w-[25%] bg-black opacity-70 rounded-[15px] z-10">
+          <div className="text-2xl pt-1 pb-1 pl-5 pr-5 z-20 opacity-100 text-right font-semibold">
             {title}
           </div>
         </div>

From d3acafeda5cacc3c625945571d1a66aee589401b Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Mon, 21 Oct 2024 01:33:59 +1300
Subject: [PATCH 08/15] :lipstick: add styling touch ups

---
 next/components/projects/ProjectsImage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index 46d3a43..bf63212 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -22,20 +22,20 @@ export default function ImageComponent({
         <Image
           src={src}
           alt={alt || ""}
-          className="absolute inset-0 -z-10 w-full h-full object-cover brightness-75 opacity-80 rounded-[50px]"
+          className="absolute inset-0 -z-10 w-full h-full object-cover brightness-75 opacity-85 rounded-[50px]"
           width={300}
           height={height}
         />
       </div>
 
       {type === "current" ? (
-        <div className="absolute top-[30%] bottom-[30%] w-[60%] bg-black opacity-70 rounded-[15px] z-10 flex justify-center items-center">
+        <div className="absolute top-[30%] bottom-[30%] w-[60%] bg-black bg-opacity-60 rounded-[15px] z-10 flex justify-center items-center">
           <div className="text-2xl pt-3 pb-3 pl-5 pr-5 z-20 opacity-100 text-center font-semibold">
             {title}
           </div>
         </div>
       ) : (
-        <div className="absolute top-[15%] bottom-[15%] right-[18%] w-[25%] bg-black opacity-70 rounded-[15px] z-10">
+        <div className="absolute top-[15%] bottom-[15%] right-[18%] w-[25%] bg-black bg-opacity-50 rounded-[15px] z-10">
           <div className="text-2xl pt-1 pb-1 pl-5 pr-5 z-20 opacity-100 text-right font-semibold">
             {title}
           </div>

From 444d2a4398a58466713c3405c7d0de8f680876f3 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Mon, 21 Oct 2024 01:37:17 +1300
Subject: [PATCH 09/15] :lipstick: fix opacity of current image

---
 next/components/projects/ProjectsImage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index bf63212..b8947c9 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -29,7 +29,7 @@ export default function ImageComponent({
       </div>
 
       {type === "current" ? (
-        <div className="absolute top-[30%] bottom-[30%] w-[60%] bg-black bg-opacity-60 rounded-[15px] z-10 flex justify-center items-center">
+        <div className="absolute top-[30%] bottom-[30%] w-[60%] bg-black bg-opacity-50 rounded-[15px] z-10 flex justify-center items-center">
           <div className="text-2xl pt-3 pb-3 pl-5 pr-5 z-20 opacity-100 text-center font-semibold">
             {title}
           </div>

From 2af3cce53bb9014dcc3121a0b395f18cffd55164 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Mon, 21 Oct 2024 15:01:10 +1300
Subject: [PATCH 10/15] :sparkles: add text overflow feature

---
 next/components/projects/ProjectsImage.tsx | 48 +++++++++++++++++-----
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index b8947c9..02f907d 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -29,18 +29,46 @@ export default function ImageComponent({
       </div>
 
       {type === "current" ? (
-        <div className="absolute top-[30%] bottom-[30%] w-[60%] bg-black bg-opacity-50 rounded-[15px] z-10 flex justify-center items-center">
-          <div className="text-2xl pt-3 pb-3 pl-5 pr-5 z-20 opacity-100 text-center font-semibold">
-            {title}
-          </div>
-        </div>
+        // <div className="overflow-hidden absolute top-[30%] bottom-[30%] w-[60%] bg-black bg-opacity-50 rounded-[15px] z-10">
+        //   <div className="line-clamp-2 text-ellipsis overflow-hidden text-2xl pt-3 pb-3 pl-5 pr-5 z-20 opacity-100 text-center font-semibold">
+        //     {title}
+        //   </div>
+        // </div>
+
+        <TextOverlay
+          title={
+            title.length > 20 ? title.substring(0, 23).concat("...") : title
+          }
+          className="top-[30%] bottom-[30%] w-[60%] flex items-center justify-center"
+        />
       ) : (
-        <div className="absolute top-[15%] bottom-[15%] right-[18%] w-[25%] bg-black bg-opacity-50 rounded-[15px] z-10">
-          <div className="text-2xl pt-1 pb-1 pl-5 pr-5 z-20 opacity-100 text-right font-semibold">
-            {title}
-          </div>
-        </div>
+        // <div className="overflow-hidden absolute top-[15%] bottom-[15%] right-[18%] w-[25%] bg-black bg-opacity-50 rounded-[15px] z-10">
+        //   <div className="text-ellipsis overflow-hidden text-2xl pt-1 pb-1 pl-5 pr-5 z-20 opacity-100 text-right font-semibold">
+        //     {title}
+        //   </div>
+        // </div>
+
+        <TextOverlay
+          title={title}
+          className="top-[15%] bottom-[15%] right-[18%] w-[25%] text-right"
+        />
       )}
     </div>
   );
+}
+
+function TextOverlay({
+  title,
+  className = "",
+}: {
+  title: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`absolute text-ellipsis overflow-hidden text-2xl py-1 px-5 font-semibold bg-black bg-opacity-50 rounded-[15px]  ${className}`}
+    >
+      {title}
+    </div>
+  );
 }
\ No newline at end of file

From da797ab557520121d2a11765b5e899a7e51057fb Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Mon, 21 Oct 2024 15:26:02 +1300
Subject: [PATCH 11/15] :lipstick: fix image sizing with timeline

---
 next/components/projects/DateBlob.tsx      |  2 +-
 next/components/projects/ProjectModal.tsx  |  2 +-
 next/components/projects/ProjectsImage.tsx | 18 +++---------------
 3 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/next/components/projects/DateBlob.tsx b/next/components/projects/DateBlob.tsx
index 58fbacb..be682bd 100644
--- a/next/components/projects/DateBlob.tsx
+++ b/next/components/projects/DateBlob.tsx
@@ -17,7 +17,7 @@ const DateBlob = ({
 }) => {
   return (
     // change outer height element to allow for photo height etc
-    <div className="flex flex-row items-center pl-[6px] h-48">
+    <div className="flex flex-row items-center pl-[6px] h-96">
       <div className="bg-white w-1 h-full mt-0"></div>
       <div className="flex flex-row items-center h-8">
         <div className={`bg-white h-1 ${isEven ? "w-32" : "w-20"}`}></div>
diff --git a/next/components/projects/ProjectModal.tsx b/next/components/projects/ProjectModal.tsx
index 0d5121e..a451507 100644
--- a/next/components/projects/ProjectModal.tsx
+++ b/next/components/projects/ProjectModal.tsx
@@ -27,7 +27,7 @@ const ProjectModal: React.FC<ModalProps> = ({ title, description, imageUrl, sign
               &#x2715;
             </button>
 
-          <div className="relative w-full h-[7rem] relative z-20 ">
+          <div className="relative w-full h-[7rem] z-20 ">
             <Image
               src={imageUrl}
               alt="Project Image"
diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index 02f907d..9342a33 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -11,7 +11,7 @@ export default function ImageComponent({
   title: string;
   type: "current" | "old";
 }) {
-  const height = type === "current" ? 150 : 100;
+  const height = type === "current" ? 350 : 100;
 
   return (
     <div
@@ -29,25 +29,13 @@ export default function ImageComponent({
       </div>
 
       {type === "current" ? (
-        // <div className="overflow-hidden absolute top-[30%] bottom-[30%] w-[60%] bg-black bg-opacity-50 rounded-[15px] z-10">
-        //   <div className="line-clamp-2 text-ellipsis overflow-hidden text-2xl pt-3 pb-3 pl-5 pr-5 z-20 opacity-100 text-center font-semibold">
-        //     {title}
-        //   </div>
-        // </div>
-
         <TextOverlay
           title={
-            title.length > 20 ? title.substring(0, 23).concat("...") : title
+            title.length >= 25 ? title.substring(0, 25).concat("...") : title
           }
-          className="top-[30%] bottom-[30%] w-[60%] flex items-center justify-center"
+          className="top-[35%] bottom-[35%] w-[75%] flex items-center justify-center"
         />
       ) : (
-        // <div className="overflow-hidden absolute top-[15%] bottom-[15%] right-[18%] w-[25%] bg-black bg-opacity-50 rounded-[15px] z-10">
-        //   <div className="text-ellipsis overflow-hidden text-2xl pt-1 pb-1 pl-5 pr-5 z-20 opacity-100 text-right font-semibold">
-        //     {title}
-        //   </div>
-        // </div>
-
         <TextOverlay
           title={title}
           className="top-[15%] bottom-[15%] right-[18%] w-[25%] text-right"

From 19bfd3758e61576a6be3e8291245060bcdf28238 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Mon, 21 Oct 2024 15:34:06 +1300
Subject: [PATCH 12/15] :lipstick: fix past project image spacing

---
 next/components/projects/DateBlob.tsx | 6 +++++-
 next/components/projects/Timeline.tsx | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/next/components/projects/DateBlob.tsx b/next/components/projects/DateBlob.tsx
index be682bd..e721f4d 100644
--- a/next/components/projects/DateBlob.tsx
+++ b/next/components/projects/DateBlob.tsx
@@ -11,13 +11,17 @@ const options = {
 const DateBlob = ({
   timelineElement,
   isEven,
+  type,
 }: {
   timelineElement: DateBlobProps;
   isEven: boolean;
+  type: "current" | "old";
 }) => {
   return (
     // change outer height element to allow for photo height etc
-    <div className="flex flex-row items-center pl-[6px] h-96">
+    <div
+      className={`flex flex-row items-center pl-[6px] ${type === "current" ? "h-96" : "h-48"}`}
+    >
       <div className="bg-white w-1 h-full mt-0"></div>
       <div className="flex flex-row items-center h-8">
         <div className={`bg-white h-1 ${isEven ? "w-32" : "w-20"}`}></div>
diff --git a/next/components/projects/Timeline.tsx b/next/components/projects/Timeline.tsx
index 45ed344..29e699d 100644
--- a/next/components/projects/Timeline.tsx
+++ b/next/components/projects/Timeline.tsx
@@ -24,6 +24,7 @@ const Timeline = ({
               <DateBlob
                 timelineElement={timelineElement}
                 isEven={index % 2 == 0}
+                type={type}
               />
               <ImageComponent
                 src={getLargestImageUrl(timelineElement.image)}

From dc5d8712f45185c0bd74a7c5ea613af498bf0d64 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Mon, 21 Oct 2024 15:45:41 +1300
Subject: [PATCH 13/15] :lipstick: add styling touch ups

---
 next/components/projects/DateBlob.tsx      | 1 -
 next/components/projects/ProjectsImage.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/next/components/projects/DateBlob.tsx b/next/components/projects/DateBlob.tsx
index e721f4d..f7dcda6 100644
--- a/next/components/projects/DateBlob.tsx
+++ b/next/components/projects/DateBlob.tsx
@@ -18,7 +18,6 @@ const DateBlob = ({
   type: "current" | "old";
 }) => {
   return (
-    // change outer height element to allow for photo height etc
     <div
       className={`flex flex-row items-center pl-[6px] ${type === "current" ? "h-96" : "h-48"}`}
     >
diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index 9342a33..ab56971 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -31,7 +31,7 @@ export default function ImageComponent({
       {type === "current" ? (
         <TextOverlay
           title={
-            title.length >= 25 ? title.substring(0, 25).concat("...") : title
+            title.length >= 28 ? title.substring(0, 25).concat("...") : title
           }
           className="top-[35%] bottom-[35%] w-[75%] flex items-center justify-center"
         />

From 9050740e3e5df8521a0b11727d38b742382c623f Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Mon, 21 Oct 2024 16:30:01 +1300
Subject: [PATCH 14/15] :lipstick: fix layout of image compnent

---
 next/components/projects/ProjectsImage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index caa77db..236db46 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -32,7 +32,7 @@ export default function ImageComponent({
   type,
   openModal,
 }: ImageComponentProps) {
-  const height = type === "current" ? 350 : 100;
+  const height = type === "current" ? 300 : 100;
 
   return (
     <div
@@ -54,7 +54,7 @@ export default function ImageComponent({
           title={
             title.length >= 28 ? title.substring(0, 25).concat("...") : title
           }
-          className="top-[35%] bottom-[35%] w-[75%] flex items-center justify-center"
+          className="top-[35%] bottom-[35%] left-[12%] w-[75%] flex items-center justify-center"
         />
       ) : (
         <TextOverlay

From 124303a12237487b22319deddabc75ddf3beaa87 Mon Sep 17 00:00:00 2001
From: unknown <annlowe789@gmail.com>
Date: Mon, 21 Oct 2024 17:08:52 +1300
Subject: [PATCH 15/15] :lipstick: fix image height

---
 next/components/projects/ProjectsImage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/next/components/projects/ProjectsImage.tsx b/next/components/projects/ProjectsImage.tsx
index 236db46..ed4e5a8 100644
--- a/next/components/projects/ProjectsImage.tsx
+++ b/next/components/projects/ProjectsImage.tsx
@@ -32,11 +32,13 @@ export default function ImageComponent({
   type,
   openModal,
 }: ImageComponentProps) {
+  const heightstyle = type === "current" ? "h-[300px]" : "h-[100px]";
   const height = type === "current" ? 300 : 100;
 
   return (
     <div
-      className={`h-[${height}px] w-[600px] relative ml-8`}
+      // className={`h-96 w-[600px] relative ml-8`}
+      className={`${heightstyle} w-[600px] relative ml-8`}
       onClick={openModal}
     >
       <div>