Refactor Experience component layout and update experience duration format for consistency

src/components/Experience.astro

@@ -12,32 +12,41 @@ interface ExperienceProps {
 ---
 
 <Section id="experience">
-    <h3 class="text-3xl font-bold text-white text-center mb-10">
+	<h3 class="text-3xl font-bold text-white text-center mb-10">
-        Experiencia
+		Experiencia
-    </h3>
+	</h3>
-    <div class="space-y-12">
+	<!-- Contenedor del timeline -->
-        {experience.map((exp: ExperienceProps) => (
+	<div class="relative">
-            <div class="flex gap-x-3 relative group rounded-lg">
+		<div class="absolute top-8 bottom-8 w-px">
-                <div class="relative last:after:hidden after:absolute after:top-0 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700 dark:group-hover:after:bg-neutral-600">
+		    <!-- Línea vertical única -->
-                    <div class="relative z-10 size-7 flex justify-center items-center">
+            <div class="absolute left-2.25 inset-0 w-px bg-sky-800"></div>
-                        <div class="size-2 rounded-full bg-white border-2 border-gray-300 group-hover:border-gray-600 dark:bg-neutral-800 dark:border-neutral-600 dark:group-hover:border-neutral-600"></div>
+            <!-- Bola que "baja" con el scroll -->
-                    </div>
+            <div class="sticky top-1/2 w-5 h-5 rounded-full bg-sky-400 border-4 border-gray-100 shadow-lg translate-y-[-50%] transition-all duration-300 z-10"></div>
-                </div>
+        </div>
-                <div class="section-card overflow-hidden md:flex">
+		<!-- Contenedor de experiencias con padding para que la línea cubra bien -->
-                    <div class="p-8 flex-1">
+		<div class="space-y-12 pt-8 pb-8">
-                        <span class="text-sm text-sky-400 mb-4 block">
+			{experience.map((exp: ExperienceProps) => (
-                            {exp.duration}
+				<div class="flex gap-x-3 relative group rounded-lg">
-                        </span>
+					<div class="overflow-hidden md:flex">
-                        <h4 class="text-xl font-bold text-gray-200 mb-2">
+						<div class="p-8 flex-1">
-                            {exp.role}
+							<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2">
-                        </h4>
+								<h4 class="text-xl font-bold text-gray-200 mb-2 md:mb-0 md:max-w-1/2 text-pretty">
-                        <h5 class="text-md font-medium text-gray-300 mb-4">
+									{exp.role}
-                            {exp.company}
+								</h4>
-                        </h5>
+								<span class="text-sm text-sky-400 mb-4 block md:mb-0">
-                        <p class="text-gray-300 text-wrap">{exp.description}</p>
+									📅 {exp.duration}
-                    </div>
+								</span>
-                </div>
+							</div>
-            </div>
+							<h5 class="text-md font-medium text-gray-300 mb-4">
-        ))}
+								{exp.company}
-    </div>
+							</h5>
+							<p class="text-gray-300 text-wrap">
+								{exp.description}
+							</p>
+						</div>
+					</div>
+				</div>
+			))}
+		</div>
+	</div>
 </Section>

src/data/index.ts

@@ -27,21 +27,21 @@ export const experience = [
 	{
 		role: "SysAdmin y Desarrollador Web Full Stack",
 		company: "Tenea Tecnologías",
-		duration: "Noviembre 2021 - Presente",
+		duration: "11/2021 - Presente",
 		description:
 			"Administración de servidores Windows y Linux, redes y bases de datos, con implementación de servicios críticos, monitorización, seguridad y automatización. Desarrollo Full Stack y APIs, contenedorización, enfocándose en rendimiento, escalabilidad y mejora continua de infraestructura y aplicaciones.",
 	},
 	{
 		role: "Técnico de Sistemas",
 		company: "Bergé Logistics",
-		duration: "Noviembre 2019 - Octubre 2021",
+		duration: "11/2019 - 10/2021",
 		description:
 			"Mantenimiento de sistemas informáticos, administración y monitorización de servicios, soporte y formación a usuarios.",
 	},
 	{
 		role: "Técnico de Soporte",
 		company: "REVO Systems",
-		duration: "Agosto 2018 - Mayo 2019",
+		duration: "08/2018 - 05/2019",
 		description:
 			"Atención y resolución remota o presencial de incidencias, administración de hardware y redes, y gestión de software en la nube y sistemas iOS, incluyendo mantenimiento y migración.",
 	}