From 37f9aeea1bbec7d26b67f48ef5771baa9325a377 Mon Sep 17 00:00:00 2001
From: natsu <orlando.natsu@gmail.com>
Date: Thu, 1 Feb 2024 01:16:35 +0000
Subject: [PATCH] Moviendo todos los Sections al index

---
 src/components/sections/About.astro      |  11 +--
 src/components/sections/Education.astro  |  64 +++++++-------
 src/components/sections/Experience.astro |  60 ++++++-------
 src/components/sections/Hero.astro       | 105 +++++++++++------------
 src/components/sections/Projects.astro   |  56 ++++++------
 src/components/sections/Skills.astro     |  22 ++---
 src/pages/index.astro                    |  14 +--
 7 files changed, 156 insertions(+), 176 deletions(-)

diff --git a/src/components/sections/About.astro b/src/components/sections/About.astro
index 0e5e4aa3..a6392ae5 100644
--- a/src/components/sections/About.astro
+++ b/src/components/sections/About.astro
@@ -1,12 +1,9 @@
 ---
-import Section from "../Section.astro"
-
 import { basics } from "@cv"
 const { summary } = basics
 ---
 
-<Section title="Sobre mí">
-  <p>
-    {summary}
-  </p>
-</Section>
+<p>
+  {summary}
+</p>
+
diff --git a/src/components/sections/Education.astro b/src/components/sections/Education.astro
index c04f75b9..b78a1bfa 100644
--- a/src/components/sections/Education.astro
+++ b/src/components/sections/Education.astro
@@ -1,41 +1,37 @@
 ---
-import Section from "../Section.astro"
-
 import { education } from "@cv"
 ---
 
-<Section title="Educación">
-  <ul>
-    {
-      education.map(
-        ({ institution, startDate, endDate, area }) => {
-          const startYear = new Date(startDate).getFullYear()
-          const endYear =
-            endDate != null ? new Date(endDate).getFullYear() : "Actual"
-          const years = `${startYear} - ${endYear}`
-
-          return (
-            <li>
-              <article>
-                <header>
-                  <div>
-                    <h3>{institution}</h3>
-                  </div>
-
-                  <time>{years}</time>
-                </header>
-
-                <footer>
-                  <p>{area}</p>
-                </footer>
-              </article>
-            </li>
-          )
-        }
-      )
-    }
-  </ul>
-</Section>
+<ul>
+  {
+    education.map(
+      ({ institution, startDate, endDate, area }) => {
+        const startYear = new Date(startDate).getFullYear()
+        const endYear =
+          endDate != null ? new Date(endDate).getFullYear() : "Actual"
+        const years = `${startYear} - ${endYear}`
+
+        return (
+          <li>
+            <article>
+              <header>
+                <div>
+                  <h3>{institution}</h3>
+                </div>
+
+                <time>{years}</time>
+              </header>
+
+              <footer>
+                <p>{area}</p>
+              </footer>
+            </article>
+          </li>
+        )
+      }
+    )
+  }
+</ul>
 
 <style>
   ul {
diff --git a/src/components/sections/Experience.astro b/src/components/sections/Experience.astro
index ebc89dda..a06f8971 100644
--- a/src/components/sections/Experience.astro
+++ b/src/components/sections/Experience.astro
@@ -1,42 +1,38 @@
 ---
-import Section from "../Section.astro"
-
 import { work } from "@cv"
 ---
 
-<Section title="Experiencia laboral">
-  <ul>
-    {
-      work.map(
-        ({ name, startDate, endDate, position, summary, highlights }) => {
-          const startYear = new Date(startDate).getFullYear()
-          const endYear =
-            endDate != null ? new Date(endDate).getFullYear() : "Actual"
-          const years = `${startYear} - ${endYear}`
+<ul>
+  {
+    work.map(
+      ({ name, startDate, endDate, position, summary, highlights }) => {
+        const startYear = new Date(startDate).getFullYear()
+        const endYear =
+          endDate != null ? new Date(endDate).getFullYear() : "Actual"
+        const years = `${startYear} - ${endYear}`
 
-          return (
-            <li>
-              <article>
-                <header>
-                  <div>
-                    <h3>{name}</h3>
-                    <h4>{position}</h4>
-                  </div>
+        return (
+          <li>
+            <article>
+              <header>
+                <div>
+                  <h3>{name}</h3>
+                  <h4>{position}</h4>
+                </div>
 
-                  <time>{years}</time>
-                </header>
+                <time>{years}</time>
+              </header>
 
-                <footer>
-                  <p>{summary}</p>
-                </footer>
-              </article>
-            </li>
-          )
-        }
-      )
-    }
-  </ul>
-</Section>
+              <footer>
+                <p>{summary}</p>
+              </footer>
+            </article>
+          </li>
+        )
+      }
+    )
+  }
+</ul>
 
 <style>
   ul {
diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
index 32f09971..5b78ef38 100644
--- a/src/components/sections/Hero.astro
+++ b/src/components/sections/Hero.astro
@@ -1,6 +1,5 @@
 ---
 import { basics } from "@cv"
-import Section from "@/components/Section.astro"
 import Mail from "@/icons/Mail.astro"
 import Phone from "@/icons/Phone.astro"
 import X from "@/icons/X.astro"
@@ -24,66 +23,64 @@ const linkedUrl = linkedInfo?.url
 const printInfo = [email, phone, linkedUrl].filter(Boolean).join(" • ")
 ---
 
-<Section>
-  <div class="container">
-    <div class="info">
-      <h1>{name}</h1>
-      <h2>{label}</h2>
-      <span>
-        <WorldMap />
-        {city}, {region}
-      </span>
-      <footer class="print">
-        {printInfo}
-      </footer>
-      <footer class="no-print">
-        {
-          email && (
-            <a
-              href={`mailto:${email}`}
-              title={`Enviar un correo electrónico a ${name} al correo ${email}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Mail />
-            </a>
-          )
-        }
-        {
-          phone && (
+<div class="container">
+  <div class="info">
+    <h1>{name}</h1>
+    <h2>{label}</h2>
+    <span>
+      <WorldMap />
+      {city}, {region}
+    </span>
+    <footer class="print">
+      {printInfo}
+    </footer>
+    <footer class="no-print">
+      {
+        email && (
+          <a
+            href={`mailto:${email}`}
+            title={`Enviar un correo electrónico a ${name} al correo ${email}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Mail />
+          </a>
+        )
+      }
+      {
+        phone && (
+          <a
+            href={`tel:${phone}`}
+            title={`Llamar por teléfono a ${name} al número ${phone}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Phone />
+          </a>
+        )
+      }
+      {
+        profiles.map(({ network, url, username }) => {
+          const Icon = SOCIAL_ICONS[network]
+
+          return (
             <a
-              href={`tel:${phone}`}
-              title={`Llamar por teléfono a ${name} al número ${phone}`}
+              href={url}
+              title={`Visitar el perfil de ${name} en ${network}`}
               target="_blank"
               rel="noopener noreferrer"
             >
-              <Phone />
+              <Icon />
             </a>
           )
-        }
-        {
-          profiles.map(({ network, url, username }) => {
-            const Icon = SOCIAL_ICONS[network]
-
-            return (
-              <a
-                href={url}
-                title={`Visitar el perfil de ${name} en ${network}`}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Icon />
-              </a>
-            )
-          })
-        }
-      </footer>
-    </div>
-    <figure>
-      <img src={image} alt={name} />
-    </figure>
+        })
+      }
+    </footer>
   </div>
-</Section>
+  <figure>
+    <img src={image} alt={name} />
+  </figure>
+</div>
 
 <style>
   .container {
diff --git a/src/components/sections/Projects.astro b/src/components/sections/Projects.astro
index cbc9eaf2..ef9b8249 100644
--- a/src/components/sections/Projects.astro
+++ b/src/components/sections/Projects.astro
@@ -1,37 +1,33 @@
 ---
-import Section from "../Section.astro"
-
 import { projects } from "@cv"
 ---
 
-<Section title="Proyectos">
-  <ul>
-    {
-      projects.map(({ url, description, highlights, name, isActive }) => {
-        return (
-          <li>
-            <article>
-              <header>
-                <h3>
-                  <a href={url} title={`Ver el proyecto ${name}`}>
-                    {name}
-                  </a>
-                  {isActive && <span>•</span>}
-                </h3>
-                <p>{description}</p>
-              </header>
-              <footer>
-                {highlights.map((highlight) => {
-                  return <span>{highlight}</span>
-                })}
-              </footer>
-            </article>
-          </li>
-        )
-      })
-    }
-  </ul>
-</Section>
+<ul>
+  {
+    projects.map(({ url, description, highlights, name, isActive }) => {
+      return (
+        <li>
+          <article>
+            <header>
+              <h3>
+                <a href={url} title={`Ver el proyecto ${name}`}>
+                  {name}
+                </a>
+                {isActive && <span>•</span>}
+              </h3>
+              <p>{description}</p>
+            </header>
+            <footer>
+              {highlights.map((highlight) => {
+                return <span>{highlight}</span>
+              })}
+            </footer>
+          </article>
+        </li>
+      )
+    })
+  }
+</ul>
 
 <style>
   ul {
diff --git a/src/components/sections/Skills.astro b/src/components/sections/Skills.astro
index 1bafd4fc..98bc71e7 100644
--- a/src/components/sections/Skills.astro
+++ b/src/components/sections/Skills.astro
@@ -1,20 +1,16 @@
 ---
-import Section from "../Section.astro"
-
 import { skills } from "@cv"
 ---
 
-<Section title="Habilidades">
-  <ul>
-    {
-      skills.map(({ name }) => (
-        <li>
-          <span>{name}</span>
-        </li>
-      ))
-    }
-  </ul>
-</Section>
+<ul>
+  {
+    skills.map(({ name }) => (
+      <li>
+        <span>{name}</span>
+      </li>
+    ))
+  }
+</ul>
 
 <style>
   ul {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 752b19ec..e0afaf5b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from "@/layouts/Layout.astro"
+import Section from "@/components/Section.astro"
 
 import About from "@/components/sections/About.astro"
 import Education from "@/components/sections/Education.astro"
@@ -10,17 +11,18 @@ import Skills from "@/components/sections/Skills.astro"
 import KeyboardManager from "@/components/KeyboardManager.astro"
 
 import { basics } from "@cv"
+
 const { name, label } = basics
 ---
 
 <Layout title={`Portafolio de ${name} - ${label}`}>
   <main>
-    <Hero />
-    <About />
-    <Experience />
-    <Education />
-    <Projects />
-    <Skills />
+    <Section><Hero /></Section>
+    <Section title="Sobre mí"><About /></Section>
+    <Section title="Experiencia laboral"><Experience /></Section>
+    <Section title="Educación"><Education /></Section>
+    <Section title="Proyectos"><Projects /></Section>
+    <Section title="Habilidades"><Skills /></Section>
   </main>
 
   <KeyboardManager />