aferrer/portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Skills component layout for improved responsiveness and readability

Browse Source
This commit is contained in:
aferrer committed 2025-10-31 16:24:44 +00:00
1 parent a466104011
commit a11b7ce1a0
1 file changed
+8 -8
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Skills.astro
+8 -8
View File
@@ -14,9 +14,9 @@ interface SkillProps {
<h3 class="text-3xl font-bold text-white text-center mb-10"> <h3 class="text-3xl font-bold text-white text-center mb-10">
Habilidades Habilidades
</h3> </h3>
<div class="flex items-center justify-between flex-wrap gap-6"> <div class="flex flex-wrap gap-6 justify-center md:justify-start">
{skills.map((skill:SkillProps) => ( {skills.map((skill:SkillProps) => (
<div class="flex flex-col items-center justify-center p-6 text-center"> <div class="flex flex-col items-center justify-center w-24 md:w-28 p-6">
<div class="relative group"> <div class="relative group">
<!-- Icono --> <!-- Icono -->
<Icon <Icon
@@ -27,12 +27,12 @@ interface SkillProps {
<!-- Tooltip con flecha --> <!-- Tooltip con flecha -->
<div class="absolute top-full left-1/2 mt-3 -translate-x-1/2 hidden group-hover:flex flex-col items-center"> <div class="absolute top-full left-1/2 mt-3 -translate-x-1/2 hidden group-hover:flex flex-col items-center">
<!-- Cuerpo del tooltip --> <!-- Cuerpo del tooltip -->
<div class="bg-gray-800 text-white text-sm px-2 py-1 rounded shadow-lg whitespace-nowrap relative"> <div class="bg-gray-800 text-white text-sm px-2 py-1 rounded shadow-lg whitespace-nowrap relative">
{skill.name} {skill.name}
<!-- Flechita --> <!-- Flechita -->
<div class="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-gray-800 rotate-45"></div> <div class="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-gray-800 rotate-45"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>