From 27fae7fd5b42134f3401568eaf335cebf7af9d3c Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Sat, 7 Jun 2025 15:30:14 +0200
Subject: [PATCH] Enhance ImageModal and CompactSteps components for improved
 layout and responsiveness

- Updated ImageModal styles to center the modal and adjust image container dimensions for better visual presentation.
- Refactored CompactSteps to include an icon component for better visual consistency and adjusted layout for improved readability.
- Removed outdated WorkExperience item rendering to streamline the component structure.
- Updated aboutme page to conditionally set icons based on title content for better context.
---
 src/components/ui/ImageModal.astro          | 12 ++++++------
 src/components/widgets/CompactSteps.astro   | 13 +++++++------
 src/components/widgets/WorkExperience.astro | 15 ---------------
 src/pages/[lang]/aboutme.astro              |  2 +-
 4 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/src/components/ui/ImageModal.astro b/src/components/ui/ImageModal.astro
index a139926..6dc4388 100644
--- a/src/components/ui/ImageModal.astro
+++ b/src/components/ui/ImageModal.astro
@@ -16,7 +16,7 @@
   <!-- Modal container with animation -->
   <div
     id="modal-container"
-    class="relative max-w-4xl mx-auto p-4 transform scale-95 transition-all duration-300 ease-in-out flex flex-col items-center"
+    class="fixed top-1/2 left-1/2 z-60 max-w-4xl w-full p-4 transform -translate-x-1/2 -translate-y-1/2 scale-95 transition-all duration-300 ease-in-out flex flex-col items-center"
   >
     <!-- Close button -->
     <button
@@ -37,16 +37,16 @@
 
     <!-- Image container -->
     <div
-      class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden"
-      style="min-height: 300px; max-height: 75vh;"
+      class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden flex flex-col justify-center items-center"
+      style="min-height: 350px; max-height: 75vh; min-width: 320px;"
     >
-      <div class="flex items-center justify-center h-full w-full">
+      <div class="flex flex-1 items-center justify-center w-full min-h-[250px]" style="height: 100%;">
         <img
           id="modal-image"
           src=""
           alt="Enlarged certificate"
-          class="w-auto object-contain"
-          style="max-height: var(--cert-max-height, 75%); vertical-align: middle;"
+          class="w-auto object-contain max-h-[60vh]"
+          style="vertical-align: middle;"
         />
       </div>
     </div>
diff --git a/src/components/widgets/CompactSteps.astro b/src/components/widgets/CompactSteps.astro
index b3f5b52..aaa4db0 100644
--- a/src/components/widgets/CompactSteps.astro
+++ b/src/components/widgets/CompactSteps.astro
@@ -3,6 +3,7 @@ import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import CompactTimeline from '~/components/ui/CompactTimeline.astro';
 import Headline from '~/components/ui/Headline.astro';
 import type { Steps as Props } from '~/types';
+import { Icon } from 'astro-icon/components';
 
 const {
   title = await Astro.slots.render('title'),
@@ -31,12 +32,12 @@ const {
     />
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-6">
       {items.map((item) => (
-        <div class="bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-col gap-2">
-          <div class="flex items-center mb-2">
-            <span class="w-7 h-7 flex items-center justify-center rounded-full bg-green-600 dark:bg-green-700 text-white mr-2">
-              <i class={item.icon}></i>
-            </span>
-            <h3 class="text-base font-semibold">{item.title}</h3>
+        <div class="bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-row items-center min-h-[120px]">
+          <span class="w-11 h-11 flex items-center justify-center rounded-full bg-blue-600 dark:bg-blue-700 text-white mr-4 flex-shrink-0">
+            <Icon name={item.icon || 'tabler:school'} class="w-6 h-6" />
+          </span>
+          <div class="flex flex-col justify-center w-full min-w-0">
+            <div class="font-semibold text-lg leading-snug mb-1 break-words" set:html={item.title} />
           </div>
         </div>
       ))}
diff --git a/src/components/widgets/WorkExperience.astro b/src/components/widgets/WorkExperience.astro
index 0319515..7d91dc3 100644
--- a/src/components/widgets/WorkExperience.astro
+++ b/src/components/widgets/WorkExperience.astro
@@ -71,21 +71,6 @@ const timelineItems = items.map((item) => {
         </div>
       )
     }
-    <div class="grid grid-cols-1 gap-6 mt-6">
-      {items.map((item) => (
-        <div class="bg-white/90 dark:bg-slate-900/90 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-100 dark:border-slate-800 flex flex-col gap-2">
-          <div class="flex flex-col gap-2">
-            <h3 class="text-xl font-semibold">{item.title}</h3>
-            {item.company && <p class="text-sm font-normal text-gray-600 dark:text-gray-400">{item.company}</p>}
-          </div>
-          <div class="flex flex-col gap-2">
-            {item.description && <p class="text-sm text-gray-500 dark:text-gray-400">{item.description}</p>}
-            {item.date && <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">{item.date}</p>}
-            {item.location && <p class="text-sm text-gray-500 dark:text-gray-400">{item.location}</p>}
-          </div>
-        </div>
-      ))}
-    </div>
     <ModernTimeline
       items={timelineItems}
       compact={compact}
diff --git a/src/pages/[lang]/aboutme.astro b/src/pages/[lang]/aboutme.astro
index 592d1e5..6883e1e 100644
--- a/src/pages/[lang]/aboutme.astro
+++ b/src/pages/[lang]/aboutme.astro
@@ -137,7 +137,7 @@ const metadata = {
     title={t.education.title}
     items={t.education.items.map((item) => ({
       title: item.title,
-      icon: 'tabler:school',
+      icon: item.title.includes("Associate") ? 'tabler:certificate' : 'tabler:school',
     }))}
   />
 </Layout>