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

@@ -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>