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; + } } \ 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 = { }} /> - - -