365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update shimmer effect styles in ModernCertifications, ModernEducation, and ModernWorkExperience components for improved dark mode support

Browse Source 
- Changed shimmer effect gradient from white to black for better visibility in light mode.
- Ensured consistent styling across all three components to enhance user experience and visual appeal.
This commit is contained in:
Richard Bergsma
2025-06-15 19:28:38 +02:00
parent d9a1b04f89
commit 78b37b169c
3 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/widgets/ModernCertifications.astro
View File

@@ -141,7 +141,7 @@ const getImageSrc = (imagePath: string) => {
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div> <div class="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
<!-- Shimmer effect --> <!-- Shimmer effect -->
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></div> <div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/10 to-transparent dark:via-white/10 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></div>
</div> </div>
); );
}) })

2
src/components/widgets/ModernEducation.astro
View File

@@ -89,7 +89,7 @@ const getEducationStyle = (title: string) => {
</div> </div>
<!-- Shimmer effect --> <!-- Shimmer effect -->
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></div> <div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/10 to-transparent dark:via-white/10 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></div>
</div> </div>
); );
})} })}

2
src/components/widgets/ModernWorkExperience.astro
View File

@@ -160,7 +160,7 @@ const getYearRange = (dateStr: string = '') => {
)} )}
<!-- Shimmer effect --> <!-- Shimmer effect -->
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></div> <div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/10 to-transparent dark:via-white/10 /* Smart theme-aware shimmer */ to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out"></div>
</div> </div>
); );
})} })}