Enhance interactivity and mobile responsiveness in widget components

- Added touchend event listeners to certification, education, and skills cards for improved mobile compatibility.
- Updated click event listeners to prevent default actions, ensuring modals display correctly on both desktop and mobile devices.
- Enhanced mobile-specific styles in the Work Experience component for better usability, including adjustments to padding, gap, and text sizing.

src/components/widgets/ModernCertifications.astro

@@ -253,7 +253,14 @@ const getImageSrc = (imagePath: string) => {
     // Add click listeners to cert cards
     const certCards = document.querySelectorAll('.cert-card');
     certCards.forEach(card => {
-      card.addEventListener('click', function() {
+      // Add both click and touchend for mobile compatibility
+      card.addEventListener('click', function(e) {
+        e.preventDefault();
+        showCertModal(this);
+      });
+      
+      card.addEventListener('touchend', function(e) {
+        e.preventDefault();
         showCertModal(this);
       });
     });

src/components/widgets/ModernEducation.astro

@@ -235,7 +235,14 @@ const getEducationStyle = (title: string) => {
     // Add click listeners to education cards
     const educationCards = document.querySelectorAll('.education-card');
     educationCards.forEach(card => {
-      card.addEventListener('click', function() {
+      // Add both click and touchend for mobile compatibility
+      card.addEventListener('click', function(e) {
+        e.preventDefault();
+        showEducationModal(this);
+      });
+      
+      card.addEventListener('touchend', function(e) {
+        e.preventDefault();
         showEducationModal(this);
       });
     });

src/components/widgets/ModernSkills.astro

@@ -210,7 +210,14 @@ if (uncategorizedSkills.length > 0) {
     // Add click listeners to skill pills
     const skillPills = document.querySelectorAll('.skill-pill');
     skillPills.forEach(pill => {
-      pill.addEventListener('click', function() {
+      // Add both click and touchend for mobile compatibility
+      pill.addEventListener('click', function(e) {
+        e.preventDefault();
+        showSkillModal(this);
+      });
+      
+      pill.addEventListener('touchend', function(e) {
+        e.preventDefault();
         showSkillModal(this);
       });
     });

src/components/widgets/ModernWorkExperience.astro

@@ -195,6 +195,21 @@ const getYearRange = (dateStr: string = '') => {
     max-height: 300px;
   }
 
+  /* Mobile-specific description styling */
+  @media (max-width: 768px) {
+    .work-description {
+      max-height: 100px;
+    }
+    
+    .work-card:hover .work-description {
+      max-height: 400px; /* More room on mobile */
+    }
+    
+    .work-card:active .work-description {
+      max-height: 400px; /* Also trigger on touch */
+    }
+  }
+
   /* Responsive adjustments */
   @media (max-width: 1024px) {
     .work-card {
@@ -204,11 +219,11 @@ const getYearRange = (dateStr: string = '') => {
 
   @media (max-width: 640px) {
     .work-card {
-      padding: 1.25rem;
+      padding: 1.5rem; /* More padding on mobile */
     }
     
     .work-card .flex {
-      gap: 0.75rem;
+      gap: 1rem; /* More gap on mobile */
     }
     
     .work-card .w-12.h-12 {
@@ -220,5 +235,15 @@ const getYearRange = (dateStr: string = '') => {
       width: 1.25rem;
       height: 1.25rem;
     }
+    
+    /* Better mobile text sizing */
+    .work-card h3 {
+      font-size: 1rem;
+      line-height: 1.3;
+    }
+    
+    .work-card .text-sm {
+      font-size: 0.8rem;
+    }
   }
 </style>

src/pages/[lang]/aboutme.astro

@@ -522,29 +522,4 @@ const metadata = {
       }}
     />
   </div>
-
-  <!-- Enhanced Call to Action -->
-  <div class="content-section stagger-animation">
-    <CallToAction
-      title={t.about.callToAction.title}
-      subtitle={t.about.callToAction.subtitle}
-      actions={[
-        {
-          variant: 'primary',
-          text: t.about.callToAction.actions.getInTouch,
-          href: '/contact',
-          icon: 'tabler:mail'
-        },
-        {
-          variant: 'secondary',
-          text: t.about.callToAction.actions.viewPortfolio,
-          href: '/portfolio',
-          icon: 'tabler:briefcase'
-        }
-      ]}
-      classes={{
-        container: 'glass-enhanced'
-      }}
-    />
-  </div>
 </Layout>