Refactor modal components for improved usability and responsiveness

- Updated modal content styles in Certifications, Education, and Skills components to allow for scrollable content on mobile devices.
- Removed body overflow control during modal display, enabling better user experience by allowing background scrolling.
- Enhanced Work Experience component with click-to-expand functionality for mobile users, improving accessibility and interaction.

src/components/widgets/ModernCertifications.astro

@@ -159,7 +159,7 @@ const getImageSrc = (imagePath: string) => {
 
 <!-- Certification Details Modal -->
 <div id="certModal" class="modal fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
-  <div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-2xl w-full mx-4 transform scale-90 opacity-0 transition-all duration-300">
+  <div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto transform scale-90 opacity-0 transition-all duration-300">
     <div class="flex justify-between items-start mb-4">
       <div>
         <h3 id="certModalTitle" class="text-2xl font-bold text-gray-900 dark:text-white mb-1"></h3>
@@ -239,13 +239,13 @@ const getImageSrc = (imagePath: string) => {
     
     const modal = document.getElementById('certModal');
     modal.classList.add('active');
-    document.body.style.overflow = 'hidden';
+    // Don't disable body scroll - let modal content be scrollable
   }
 
   function closeCertModal() {
     const modal = document.getElementById('certModal');
     modal.classList.remove('active');
-    document.body.style.overflow = '';
+    // No need to restore body scroll since we didn't disable it
   }
 
   // Initialize when DOM is loaded