From c6c9677b0006c4f25ad7cf641785bc3bbe017480 Mon Sep 17 00:00:00 2001
From: becarta <github.devotee752@passmail.net>
Date: Sun, 15 Jun 2025 18:15:03 +0200
Subject: [PATCH] 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.
---
 .../widgets/ModernCertifications.astro        |  9 +++++-
 src/components/widgets/ModernEducation.astro  |  9 +++++-
 src/components/widgets/ModernSkills.astro     |  9 +++++-
 .../widgets/ModernWorkExperience.astro        | 29 +++++++++++++++++--
 src/pages/[lang]/aboutme.astro                | 25 ----------------
 5 files changed, 51 insertions(+), 30 deletions(-)

diff --git a/src/components/widgets/ModernCertifications.astro b/src/components/widgets/ModernCertifications.astro
index 76734b7..9f3f3d5 100644
--- a/src/components/widgets/ModernCertifications.astro
+++ b/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);
       });
     });
diff --git a/src/components/widgets/ModernEducation.astro b/src/components/widgets/ModernEducation.astro
index e14e9c1..67ed3f5 100644
--- a/src/components/widgets/ModernEducation.astro
+++ b/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);
       });
     });
diff --git a/src/components/widgets/ModernSkills.astro b/src/components/widgets/ModernSkills.astro
index 5a93182..8345b87 100644
--- a/src/components/widgets/ModernSkills.astro
+++ b/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);
       });
     });
diff --git a/src/components/widgets/ModernWorkExperience.astro b/src/components/widgets/ModernWorkExperience.astro
index ccbd6de..b4d5767 100644
--- a/src/components/widgets/ModernWorkExperience.astro
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/[lang]/aboutme.astro b/src/pages/[lang]/aboutme.astro
index 5530fa0..df6a85f 100644
--- a/src/pages/[lang]/aboutme.astro
+++ b/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>
\ No newline at end of file