Actualizar página de inicio con secciones de About, Education, Experi…

…ence, Hero, Projects, Skills y Courses

src/components/indexsections/About.astro

@@ -0,0 +1,13 @@
+---
+import Section from "@/components/Section.astro";
+import { basics } from "@cv";
+const { summary } = basics;
+---
+
+<Section title="">
+  <div class="max-w-4xl mx-auto mb-10">
+    <p class="text-base md:text-lg text-gray-300 leading-relaxed my-4">
+      {summary}
+    </p>
+  </div>
+</Section>

src/components/indexsections/Courses.astro

@@ -0,0 +1,34 @@
+---
+import Section from "@/components/Section.astro";
+import { certificates } from "@cv";
+---
+
+<Section title="Cursos y Certificados">
+  <div class="max-w-4xl mx-auto">
+    <ul class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+      {
+        certificates.map(({ name, date, issuer, url }, index) => (
+          <li class="border border-gray-200 rounded-lg p-4 flex flex-col">
+            <header>
+              <h3 class="text-lg text-gray-200 font-semibold">{name}</h3>
+              <p class="text-sm text-gray-400">Emitido por: {issuer}</p>
+              <p class="text-sm text-gray-400">Fecha: {date}</p>
+            </header>
+            {url && (
+              <footer class="mt-auto">
+                <a
+                  href={url}
+                  class="text-blue-600 hover:text-blue-800 text-sm no-print"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Ver certificado
+                </a>
+              </footer>
+            )}
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</Section>

src/components/indexsections/Education.astro

@@ -0,0 +1,37 @@
+---
+import Section from "@/components/Section.astro";
+import { education } from "@cv";
+---
+
+<Section title="Educación">
+  <div class="max-w-4xl mx-auto">
+    <ul class="flex flex-col gap-8">
+      {
+        education.map(({ institution, startDate, endDate, area, score }) => {
+          const startYear = startDate;
+          const endYear = endDate ? endDate : "Actual";
+          const years = `${startYear} - ${endYear}`;
+
+          return (
+            <li class="border border-gray-200 rounded-lg p-4">
+              <article class="space-y-2">
+                <header class="flex justify-between items-center">
+                  <div>
+                    <h3 class="font-medium text-lg text-gray-200">
+                      {institution}
+                    </h3>
+                    <p class="text-sm text-gray-300">{area}</p>
+                  </div>
+                  <div class="text-right">
+                    <time class="text-sm text-gray-300">{years}</time>
+                    <p class="text-sm text-gray-300">Promedio: {score}</p>
+                  </div>
+                </header>
+              </article>
+            </li>
+          );
+        })
+      }
+    </ul>
+  </div>
+</Section>

src/components/indexsections/Experience.astro

@@ -0,0 +1,41 @@
+---
+import Section from "@/components/Section.astro";
+import { work } from "@cv";
+---
+
+<Section title="Experiencia laboral">
+  <div class="max-w-4xl mx-auto text-center mt-4">
+    <ul class="space-y-8">
+      {
+        work.map(({ name, startDate, endDate, position, summary }) => {
+          const startYear = new Date(
+            startDate.split("-").reverse().join("-"),
+          ).getFullYear();
+          const endYear = endDate
+            ? new Date(endDate.split("-").reverse().join("-")).getFullYear()
+            : "Actual";
+          const years = `${startYear} - ${endYear}`;
+
+          return (
+            <li class="border border-gray-200 rounded-lg p-4 text-left">
+              <article class="space-y-4">
+                <header class="flex justify-between items-start">
+                  <div>
+                    <h3 class="font-medium text-lg text-gray-400">{name}</h3>
+                    <h4 class="font-normal text-md text-gray-300">
+                      {position}
+                    </h4>
+                  </div>
+                  <time class="text-sm text-gray-200">{years}</time>
+                </header>
+                <footer>
+                  <p class="text-base text-gray-200">{summary}</p>
+                </footer>
+              </article>
+            </li>
+          );
+        })
+      }
+    </ul>
+  </div>
+</Section>

src/components/indexsections/Hero.astro

@@ -0,0 +1,86 @@
+---
+import { basics } from "@cv";
+import Section from "@/components/Section.astro";
+import Mail from "@/icons/Mail.astro";
+import Phone from "@/icons/Phone.astro";
+import LinkedIn from "@/icons/LinkedIn.astro";
+import GitHub from "@/icons/GitHub.astro";
+import WorldMap from "@/icons/WorldMap.astro";
+import type { SocialIcon } from "@/types";
+
+const { name, label, image, location, profiles, phone, email } = basics;
+const { city, region } = location;
+
+const SOCIAL_ICONS: SocialIcon = {
+  GitHub,
+  LinkedIn,
+};
+
+---
+
+<Section>
+  <div
+    class="container mx-auto flex flex-col md:flex-row items-center justify-center gap-8 p-4"
+  >
+    <figure class="w-32 h-32 md:w-48 md:h-48">
+      <img
+        src={image}
+        alt={name}
+        class="aspect-square object-cover rounded-lg"
+      />
+    </figure>
+    <div class="flex flex-col items-center md:items-start gap-2">
+      <h1 class="text-4xl font-bold">{name}</h1>
+      <h2 class="text-xl text-gray-400 font-medium">{label}</h2>
+      <div class="flex items-center gap-2 text-sm text-gray-300">
+        <WorldMap class="w-6 h-6" />
+        <span>{city}, {region}</span>
+      </div>
+      <footer class="flex gap-2 mt-2">
+        {
+          email && (
+            <a
+              href={`mailto:${email}`}
+              title={`Enviar un correo electrónico a ${name} al correo ${email}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-gray-500 hover:bg-gray-100 border border-gray-200 p-2 rounded-md transition-colors duration-300"
+            >
+              <Mail class="w-6 h-6" />
+            </a>
+          )
+        }
+        {
+          phone && (
+            <a
+              href={`tel:${phone}`}
+              title={`Llamar por teléfono a ${name} al número ${phone}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-gray-500 hover:bg-gray-100 border border-gray-200 p-2 rounded-md transition-colors duration-300"
+            >
+              <Phone class="w-6 h-6" />
+            </a>
+          )
+        }
+        {
+          profiles.map(({ network, url }) => {
+            const Icon = SOCIAL_ICONS[network];
+
+            return (
+              <a
+                href={url}
+                title={`Visitar el perfil de ${name} en ${network}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-gray-500 hover:bg-gray-100 border border-gray-200 p-2 rounded-md transition-colors duration-300"
+              >
+                <Icon class="w-6 h-6" />
+              </a>
+            );
+          })
+        }
+      </footer>
+    </div>
+  </div>
+</Section>

src/components/indexsections/Projects.astro

@@ -0,0 +1,43 @@
+---
+import Section from "@/components/Section.astro";
+import { projects } from "@cv";
+---
+
+<Section title="Proyectos">
+  <div class="max-w-4xl mx-auto">
+    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-6 text-center">
+      {
+        projects.map(
+          ({ url, description, highlights, name, isActive }, index) => (
+            <li
+              class={`border border-gray-200 rounded-lg p-6 flex flex-col h-full ${projects.length % 2 !== 0 && index === projects.length - 1 ? "sm:col-start-1 sm:col-span-2" : ""}`}
+            >
+              <article class="flex flex-col h-full">
+                <header class="flex-grow">
+                  <h3 class="mb-2 text-xl font-semibold">
+                    <a
+                      href={url}
+                      title={`Ver el proyecto ${name}`}
+                      class="text-gray-200 hover:underline"
+                    >
+                      {name}
+                    </a>
+                    {isActive ? <span class="text-green-500">• Activo</span> : <span class="text-red-500">• Inactivo</span>}
+                  </h3>
+                  <p class="text-base text-gray-300 mb-2">{description}</p>
+                </header>
+                <footer class="flex flex-wrap gap-2 text-sm justify-center pt-4">
+                  {highlights.map((highlight) => (
+                    <span class="bg-gray-200 text-gray-900 rounded-md py-1 px-3">
+                      {highlight}
+                    </span>
+                  ))}
+                </footer>
+              </article>
+            </li>
+          ),
+        )
+      }
+    </ul>
+  </div>
+</Section>

src/components/indexsections/Skills.astro

@@ -0,0 +1,18 @@
+---
+import Section from "@/components/Section.astro";
+import { skills } from "@cv";
+---
+
+<Section title="Habilidades">
+  <div class="max-w-4xl mx-auto mb-32 mt-5">
+    <ul class="flex flex-wrap justify-center gap-2">
+      {
+        skills.map(({ name }) => (
+          <li class="bg-gray-200 text-black text-sm font-medium rounded-md py-1 px-3">
+            <span>{name}</span>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</Section>