From a11b7ce1a0e8a9f52f787898f29a299f5bda14e7 Mon Sep 17 00:00:00 2001
From: Asis Ferrer <aferrer@aferrer.cloud>
Date: Fri, 31 Oct 2025 16:24:44 +0000
Subject: [PATCH] Refactor Skills component layout for improved responsiveness
 and readability

---
 src/components/Skills.astro | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index 5cab74e..81d15f6 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -14,9 +14,9 @@ interface SkillProps {
     <h3 class="text-3xl font-bold text-white text-center mb-10">
         Habilidades
     </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) => (
-        <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">
             <!-- Icono -->
             <Icon
@@ -27,12 +27,12 @@ interface SkillProps {
 
             <!-- 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">
-            <!-- Cuerpo del tooltip -->
-            <div class="bg-gray-800 text-white text-sm px-2 py-1 rounded shadow-lg whitespace-nowrap relative">
-                {skill.name}
-                <!-- Flechita -->
-                <div class="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-gray-800 rotate-45"></div>
-            </div>
+                <!-- Cuerpo del tooltip -->
+                <div class="bg-gray-800 text-white text-sm px-2 py-1 rounded shadow-lg whitespace-nowrap relative">
+                    {skill.name}
+                    <!-- Flechita -->
+                    <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>