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

Refactor Experience component layout and update experience duration format for consistency

Browse Source
This commit is contained in:
Asis ferrer
2025-10-31 22:53:20 +00:00
parent e266f96416
commit 5130cb9412
2 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Experience.astro
+37 -28
View File
@@ -12,32 +12,41 @@ interface ExperienceProps {
---
<Section id="experience">
<h3 class="text-3xl font-bold text-white text-center mb-10">
Experiencia
</h3>
<div class="space-y-12">
{experience.map((exp: ExperienceProps) => (
<div class="flex gap-x-3 relative group rounded-lg">
<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">
<div class="relative z-10 size-7 flex justify-center items-center">
<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>
</div>
</div>
<div class="section-card overflow-hidden md:flex">
<div class="p-8 flex-1">
<span class="text-sm text-sky-400 mb-4 block">
{exp.duration}
</span>
<h4 class="text-xl font-bold text-gray-200 mb-2">
{exp.role}
</h4>
<h5 class="text-md font-medium text-gray-300 mb-4">
{exp.company}
</h5>
<p class="text-gray-300 text-wrap">{exp.description}</p>
</div>
</div>
</div>
))}
</div>
<h3 class="text-3xl font-bold text-white text-center mb-10">
Experiencia
</h3>
<!-- Contenedor del timeline -->
<div class="relative">
<div class="absolute top-8 bottom-8 w-px">
<!-- Línea vertical única -->
<div class="absolute left-2.25 inset-0 w-px bg-sky-800"></div>
<!-- Bola que "baja" con el scroll -->
<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>
<!-- Contenedor de experiencias con padding para que la línea cubra bien -->
<div class="space-y-12 pt-8 pb-8">
{experience.map((exp: ExperienceProps) => (
<div class="flex gap-x-3 relative group rounded-lg">
<div class="overflow-hidden md:flex">
<div class="p-8 flex-1">
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2">
<h4 class="text-xl font-bold text-gray-200 mb-2 md:mb-0 md:max-w-1/2 text-pretty">
{exp.role}
</h4>
<span class="text-sm text-sky-400 mb-4 block md:mb-0">
📅 {exp.duration}
</span>
</div>
<h5 class="text-md font-medium text-gray-300 mb-4">
{exp.company}
</h5>
<p class="text-gray-300 text-wrap">
{exp.description}
</p>
</div>
</div>
</div>
))}
</div>
</div>
</Section>
src/data/index.ts
+3 -3
View File
@@ -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.",
}