From 754de2b03d75bf0db2f9f02418789b7a5c69beeb Mon Sep 17 00:00:00 2001
From: Eduardo Luna <eolunas@gmail.com>
Date: Tue, 30 Jan 2024 23:58:33 -0500
Subject: [PATCH] [ADD] Available button and academic styles

---
 public/favicon.svg                    |   6 +-
 src/components/Academic.astro         |  42 ++++
 src/components/AcademicItem.astro     |  58 ++++++
 src/components/Experience.astro       | 134 ++----------
 src/components/Footer.astro           |  37 ++--
 src/components/Header.astro           |  11 +-
 src/components/LinkButton.astro       |  30 +++
 src/components/SectionContainer.astro |   2 +-
 src/icons/Avatar.js                   |   2 +-
 src/icons/Book.astro                  |  19 ++
 src/icons/Calendar.astro              |  14 ++
 src/icons/Heart.astro                 |  15 ++
 src/layouts/Layout.astro              |   5 +-
 src/pages/index.astro                 | 289 ++++++--------------------
 14 files changed, 294 insertions(+), 370 deletions(-)
 create mode 100644 src/components/Academic.astro
 create mode 100644 src/components/AcademicItem.astro
 create mode 100644 src/components/LinkButton.astro
 create mode 100644 src/icons/Book.astro
 create mode 100644 src/icons/Calendar.astro
 create mode 100644 src/icons/Heart.astro

diff --git a/public/favicon.svg b/public/favicon.svg
index f157bd1..026762e 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 12h.01" /><path d="M12 12h.01" /><path d="M9 12h.01" /><path d="M6 19a2 2 0 0 1 -2 -2v-4l-1 -1l1 -1v-4a2 2 0 0 1 2 -2" /><path d="M18 19a2 2 0 0 0 2 -2v-4l1 -1l-1 -1v-4a2 2 0 0 0 -2 -2" />
+ <style>
         path { fill: #000; }
         @media (prefers-color-scheme: dark) {
             path { fill: #FFF; }
         }
     </style>
 </svg>
+
diff --git a/src/components/Academic.astro b/src/components/Academic.astro
new file mode 100644
index 0000000..78f3b3e
--- /dev/null
+++ b/src/components/Academic.astro
@@ -0,0 +1,42 @@
+---
+import AcademicItem from "./AcademicItem.astro";
+import BookIcon from "../icons/Book.astro";
+const { class: className } = Astro.props;
+const EXPERIENCE = [
+  {
+    date: "2023 - en curso",
+    title: "Certified Tech Developer",
+    company: "Digital House",
+    description:
+      "Carrera técnica desarrollador Full Stack diseñada en conjunto con Globant y Mercado Libre [Front End - Back End - Infraestructura - Bases de datos - Soft Skills].",
+  },
+  {
+    date: "2020 - 2021",
+    title: "Diploma Machine Learning and Data Science",
+    company: "Universidad Nacional de Colombia",
+    description:
+      "Diplomado compuesto por las materias [Análisis y visualización de datos con Python, Introducción a machine learning con Python, Big Data].",
+  },
+  {
+    date: "2011 - 2016",
+    title: "Ingeniería Mecatrónica",
+    company: "Universidad Nacional de Colombia",
+    description:
+      "Carrera profesional con énfasis en automatización industrial y desarrollo de software.",
+  },
+];
+---
+
+<div class={`${className}`}>
+  <h3 class="flex items-center gap-x-2 text-2xl font-semibold text-white py-4">
+    <BookIcon class="size-8" /> Educación
+  </h3>
+
+  <ol class={`relative border-s border-gray-200 dark:border-gray-700 ml-3`}>
+    {
+      EXPERIENCE.map((study, index) => {
+        return <AcademicItem {...{ ...study, index }} />;
+      })
+    }
+  </ol>
+</div>
diff --git a/src/components/AcademicItem.astro b/src/components/AcademicItem.astro
new file mode 100644
index 0000000..8e49808
--- /dev/null
+++ b/src/components/AcademicItem.astro
@@ -0,0 +1,58 @@
+---
+import CalendarIcon from "../icons/Calendar.astro";
+interface Props {
+  date: string;
+  title: string;
+  company: string;
+  description: string;
+  index: number;
+}
+const { date, title, company, description, index } = Astro.props;
+---
+
+<li
+  class={`
+  border-l-2
+  ${index == 0 ? "border-purple-600" : "border-green-600"}`}
+>
+  <div class="md:flex flex-start">
+    <div
+      class={`${
+        index == 0 ? "bg-purple-600" : "bg-green-600"
+      } w-6 h-6 flex items-center justify-center rounded-full -ml-2.5 `}
+    >
+      <CalendarIcon class="text-white w-3 h-3" />
+    </div>
+    <div class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10">
+      <div class="flex justify-between items-center mb-1">
+        <a
+          href="#!"
+          class="basis-4/6 text-sm md:text-lg font-bold text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out"
+          >{title}</a
+        >
+        <span
+          class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm"
+          >{date}</span
+        >
+      </div>
+      <p
+        class="text-sm md:text-md font-semibold text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out mb-3"
+      >
+        {company}
+      </p>
+      <p class="text-gray-700 mb-6">
+        {description}
+      </p>
+      <button
+        type="button"
+        class="inline-block px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
+        data-mdb-ripple="true">Preview</button
+      >
+      <button
+        type="button"
+        class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
+        data-mdb-ripple="true">See demo</button
+      >
+    </div>
+  </div>
+</li>
diff --git a/src/components/Experience.astro b/src/components/Experience.astro
index 129abdf..2907d85 100644
--- a/src/components/Experience.astro
+++ b/src/components/Experience.astro
@@ -1,5 +1,8 @@
 ---
 import ExperienceItem from "./ExperienceItem.astro";
+import ToolIcon from "../icons/Tool.astro";
+
+const { class: className } = Astro.props;
 
 const EXPERIENCE = [
   {
@@ -37,120 +40,17 @@ const EXPERIENCE = [
 ];
 ---
 
-<ol class="relative border-s border-gray-200 dark:border-gray-700 ml-3">
-  {
-    EXPERIENCE.map((experience) => (
-      <li class="mb-10 ms-6">
-        <ExperienceItem {...experience} />
-      </li>
-    ))
-  }
-</ol>
-
-<!--  <li class="mb-10 ms-6">
-    <span
-      class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3 ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900"
-    >
-      <svg
-        class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-      >
-        <path
-          d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
-        ></path>
-      </svg>
-    </span>
-    <h3
-      class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white"
-    >
-      Flowbite Application UI v2.0.0 <span
-        class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300 ms-3"
-        >Latest</span
-      >
-    </h3>
-    <time
-      class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-      >Released on January 13th, 2022</time
-    >
-    <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
-      Get access to over 20+ pages including a dashboard layout, charts, kanban
-      board, calendar, and pre-order E-commerce & Marketing pages.
-    </p>
-    <a
-      href="#"
-      class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-      ><svg
-        class="w-3.5 h-3.5 me-2.5"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-      >
-        <path
-          d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z"
-        ></path>
-        <path
-          d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-        ></path>
-      </svg> Download ZIP</a
-    >
-  </li>
-  <li class="mb-10 ms-6">
-    <span
-      class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3 ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900"
-    >
-      <svg
-        class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-      >
-        <path
-          d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
-        ></path>
-      </svg>
-    </span>
-    <h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">
-      Flowbite Figma v1.3.0
-    </h3>
-    <time
-      class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-      >Released on December 7th, 2021</time
-    >
-    <p class="text-base font-normal text-gray-500 dark:text-gray-400">
-      All of the pages and components are first designed in Figma and we keep a
-      parity between the two versions even as we update the project.
-    </p>
-  </li>
-  <li class="ms-6">
-    <span
-      class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3 ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900"
-    >
-      <svg
-        class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-      >
-        <path
-          d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
-        ></path>
-      </svg>
-    </span>
-    <h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">
-      Flowbite Library v1.2.2
-    </h3>
-    <time
-      class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-      >Released on December 2nd, 2021</time
-    >
-    <p class="text-base font-normal text-gray-500 dark:text-gray-400">
-      Get started with dozens of web components and interactive elements built
-      on top of Tailwind CSS.
-    </p>
-  </li> -->
+<div class={`${className}`}>
+  <h3 class="flex items-center gap-x-2 text-2xl font-semibold text-white py-4">
+    <ToolIcon class="size-8" /> Experiencia Laboral
+  </h3>
+  <ol class={`relative border-s border-gray-200 dark:border-gray-700 ml-3`}>
+    {
+      EXPERIENCE.map((experience) => (
+        <li class="mb-10 ms-6">
+          <ExperienceItem {...experience} />
+        </li>
+      ))
+    }
+  </ol>
+</div>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 98cef30..5d41a34 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,22 +1,25 @@
-<footer class="max-w-6xl rounded-lg shadow m-4 bg-black/20 backdrop-blur-lg w-3/4 mx-auto mb-6">
+---
+import Heart from "../icons/Heart.astro";
+---
+
+<footer
+  class={`
+w-11/12 max-w-6xl mx-auto mb-24
+sm:mb-6
+rounded-lg shadow m-4 bg-black/20 backdrop-blur-lg `}
+>
   <div
-    class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between"
+    class={`
+    max-w-screen-xl p-4 
+    text-sm md:text-md  text-yellow-200/90
+    flex items-center justify-center`}
   >
-    <span class="text-sm sm:text-center text-yellow-200/90"
-      >© 2024 <a
-        href="https://www.linkedin.com/in/eolunas"
-        class="hover:underline">eolunas</a
-      >. All Rights Reserved.
-    </span>
-    <ul
-      class="flex flex-wrap items-center mt-3 text-sm font-medium text-white/90 sm:mt-0"
+    Coded with
+    <Heart />
+    by 
+    <a class="hover:underline pl-1" href="https://www.linkedin.com/in/eolunas"
+    target="_blank"
+      >eolunas</a
     >
-      <li>
-        <a href="#" class="hover:underline me-4 md:me-6">Sobre mi</a>
-      </li>
-      <li>
-        <a href="#" class="hover:underline">Contacto</a>
-      </li>
-    </ul>
   </div>
 </footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index dcd4880..8dd3a0c 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -6,12 +6,15 @@ import MessageIcon from "../icons/Message.astro";
 import { ThemeChanger } from "./ThemeChanger";
 ---
 
-<header class="md:flex">
+<header class="md:flex md:items-center md:justify-center">
   <div
-    class={`z-30 top-0 shadow-sm fixed duration-400 px-4 h-16 w-full bg-bglight bg-opacity-50 
-    sm:px-8
+    class={`
+    z-30 top-0 shadow-sm fixed duration-400 px-4 h-16 w-full max-w-6xl bg-bglight bg-opacity-50 
+    sm:px-8 md:mt-3 md:w-11/12 md:rounded-lg
     dark:bg-opacity-60 dark:bg-bgdark
-    after:backdrop-blur-xl after:w-full after:h-full after:absolute after:top-0 after:left-0 after:-z-10`}
+    after:backdrop-blur-xl after:w-full after:h-full 
+    after:absolute after:top-0 after:left-0 after:-z-10
+    after:md:rounded-lg`}
   >
     <div
       class="w-full h-full mx-auto max-w-6xl flex items-center justify-between"
diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro
new file mode 100644
index 0000000..acff4f8
--- /dev/null
+++ b/src/components/LinkButton.astro
@@ -0,0 +1,30 @@
+---
+const { class: aditionalClass, href } = Astro.props;
+---
+
+<a
+  class={`
+  rounded-lg shadow-lg shadow-green-500/50 
+  relative flex justify-center items-center overflow-hidden p-[2px]
+  transition duration-200 
+  dark:shadow-lg dark:shadow-green-800/80
+  hover:scale-110
+  ${aditionalClass}`}
+  href={href}
+  target="_blank"
+  rel="noopener"
+>
+  <span
+    class="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]"
+  ></span>
+  <span
+    class={`
+      h-full w-full rounded-lg p-2 backdrop-blur-3xl
+      bg-gradient-to-r from-teal-700 to-lime-100
+      text-black/70 text-lg font-semibold text-center
+      md:text-xl 
+      dark:text-green-100 dark:bg-gradient-to-br dark:from-green-400 dark:to-blue-600/50`}
+  >
+    <slot />
+  </span>
+</a>
diff --git a/src/components/SectionContainer.astro b/src/components/SectionContainer.astro
index 89b4549..13312d6 100644
--- a/src/components/SectionContainer.astro
+++ b/src/components/SectionContainer.astro
@@ -2,6 +2,6 @@
 const { class: className, id } = Astro.props;
 ---
 
-<section id={id} class={`w-full mx-auto md:w-5/6 px-6 sm:px-10 ${className}`}>
+<section id={id} class={`w-full mx-auto px-8 sm:px-20 ${className}`}>
   <slot />
 </section>
diff --git a/src/icons/Avatar.js b/src/icons/Avatar.js
index 25b5c44..7ce5661 100644
--- a/src/icons/Avatar.js
+++ b/src/icons/Avatar.js
@@ -34,12 +34,12 @@ export default function Avatar(props) {
   return (
     <svg
       id="avatar"
+      class={props.class}
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       shapeRendering="geometricPrecision"
       textRendering="geometricPrecision"
       viewBox="0 0 264 280"
-      {...props}
     >
       <defs>
         <path
diff --git a/src/icons/Book.astro b/src/icons/Book.astro
new file mode 100644
index 0000000..6d26a2e
--- /dev/null
+++ b/src/icons/Book.astro
@@ -0,0 +1,19 @@
+<svg
+  {...Astro.props}
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  stroke-width="2"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+    d="M5 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"
+  ></path><path
+    d="M9 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"
+  ></path><path d="M5 8h4"></path><path d="M9 16h4"></path><path
+    d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041z"
+  ></path><path d="M14 9l4 -1"></path><path d="M16 16l3.923 -.98"></path></svg
+>
diff --git a/src/icons/Calendar.astro b/src/icons/Calendar.astro
new file mode 100644
index 0000000..09b3c90
--- /dev/null
+++ b/src/icons/Calendar.astro
@@ -0,0 +1,14 @@
+<svg
+  {...Astro.props}
+  aria-hidden="true"
+  focusable="false"
+  data-prefix="fas"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 448 512"
+>
+  <path
+    fill="currentColor"
+    d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
+  ></path>
+</svg>
diff --git a/src/icons/Heart.astro b/src/icons/Heart.astro
new file mode 100644
index 0000000..3a8dd4f
--- /dev/null
+++ b/src/icons/Heart.astro
@@ -0,0 +1,15 @@
+<svg
+  {...Astro.props}
+  xmlns="http://www.w3.org/2000/svg"
+  class="h-5 w-5 mx-1 inline-block mb-1"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="currentColor"
+  aria-hidden="true"
+  stroke-width="2"
+  ><path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+  ></path></svg
+>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 1687efc..09b59f0 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -18,13 +18,14 @@ const { title, description } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="description" content={description} />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/eolunas-dev/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <ViewTransitions />
   </head>
   <body
-    class={`bg-emerald-900/20
+    class={`
+    bg-emerald-900/20
     bg-[radial-gradient(100%_50%_at_50%_0%,rgba(0,163,255,0.13)_0,rgba(0,163,255,0)_50%,rgba(0,163,255,0)_100%)]
     dark:bg-black/90`}
   >
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0ed1481..c8d8bb1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,16 +1,16 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Badge from "../components/Badge.astro";
 import SocialPill from "../icons/SocialPill.astro";
 import LinkedInIcon from "../icons/LinkedIn.astro";
 import GitHubIcon from "../icons/GitHub.astro";
 import MailIcon from "../icons/Mail.astro";
 import Experience from "../components/Experience.astro";
 import SectionContainer from "../components/SectionContainer.astro";
-import ToolIcon from "../icons/Tool.astro";
 import CodeIcon from "../icons/Code.astro";
 import Projects from "../components/Projects.astro";
 import Avatar from "../icons/Avatar";
+import LinkButton from "../components/LinkButton.astro";
+import Academic from "../components/Academic.astro";
 ---
 
 <Layout
@@ -18,65 +18,75 @@ import Avatar from "../icons/Avatar";
   description="Contrata el mejor talento par desarrollar tus paginas web y tener un despliegue exitoso."
 >
   <main class="max-w-6xl mx-auto">
-    <SectionContainer id="banner" class="pt-20 md:pt-28">
-      <article
-        class="flex flex-col lg:flex-row lg:items-center lg:justify-evenly"
-      >
-        <Avatar
-          class="w-2/3 max-w-[280px] mx-auto pb-5 text-marrsgreen dark:text-carrigreen drop-shadow-2xl dark:drop-shadow-none"
-          client:visible
-          transition:persist
-        />
+    <SectionContainer id="banner" class="pt-20 lg:pt-28">
+      <article class="flex flex-col items-center justify-evenly lg:flex-row">
+        <div class="w-2/3 flex flex-col justify-center items-center">
+          <Avatar
+            class={`
+            w-full max-w-[280px] mx-auto pb-5 text-marrsgreen shadow-black drop-shadow-2xl
+            md:pb-0
+          dark:text-carrigreen  dark:shadow-white`}
+            client:visible
+            transition:persist
+          />
+          <LinkButton
+            class="w-3/5 hidden p-2 m-4 lg:flex"
+            href="https://www.linkedin.com/in/eolunas"
+          >
+            Desarrollador disponible!
+          </LinkButton>
+        </div>
+
         <div class="lg:basis-4/5">
           <h1
-            class={`text-black/70 text-4xl font-bold flex flex-col sm:flex-row sm:justify-between gap-y-4 pb-4
-            sm:text-5xl
+            class={`
+            text-black/70 text-4xl font-bold gap-y-4 pb-4 flex flex-col 
             dark:text-white`}
           >
-            <div>
-              Hey, soy <span class="text-marrsgreen dark:text-carrigreen"
+            <p
+              class={`flex flex-col gap-3
+            lg:flex-row`}
+            >
+              <span>Hey, soy</span>
+              <span class="text-marrsgreen dark:text-carrigreen"
                 >Eduardo Luna</span
               >
-            </div>
-            <a
+            </p>
+
+            <LinkButton
+              class="p-2 lg:hidden"
               href="https://www.linkedin.com/in/eolunas"
-              target="_blank"
-              rel="noopener"
             >
-              <Badge
-                class={`p-2 mr-2 
-              transition duration-200 
-              hover:scale-105 hover:bg-marrsgreen/20 hover:translate-x-2`}
-              >
-                Desarrollador disponible!
-              </Badge>
-            </a>
+              Desarrollador disponible!
+            </LinkButton>
           </h1>
-          <h2
-            class={`text-2xl text-black/90 opacity-80 text-pretty py-6
-          dark:text-white`}
-          >
-            <span>Ingeniero Mecatronico y desarrollador Web</span>. <span
-              class="opacity-80">Bogotá, Colombia co</span
-            >. Especializado en crear aplicaciones personalizadas y llamativas.
-          </h2>
+          <div>
+            <h2
+              class={`text-2xl text-black/90 opacity-80 text-pretty py-6
+            dark:text-white`}
+            >
+              <span>Ingeniero Mecatronico y desarrollador Web</span>. <span
+                class="opacity-80">Bogotá, Colombia co</span
+              >. Especializado en crear aplicaciones personalizadas y
+              llamativas.
+            </h2>
+          </div>
+          <nav class="flex justify-start items-center gap-x-6 flex-wrap">
+            <SocialPill href="https://www.linkedin.com/in/eolunas">
+              <LinkedInIcon class="size-6 text-white" />
+              <span class="text-white">LinkedIn</span>
+            </SocialPill>
+            <SocialPill href="https://www.github.com/eolunas">
+              <GitHubIcon class="size-6 text-white" />
+              <span class="text-white">GitHub</span>
+            </SocialPill>
+            <SocialPill href="https://www.github.com/eolunas">
+              <MailIcon class="size-6 text-white" />
+              <span class="text-white">eolunas@gmail.com</span>
+            </SocialPill>
+          </nav>
         </div>
       </article>
-
-      <nav class="flex justify-start items-center gap-x-6 flex-wrap">
-        <SocialPill href="https://www.linkedin.com/in/eolunas">
-          <LinkedInIcon class="size-6 text-white" />
-          <span class="text-white">LinkedIn</span>
-        </SocialPill>
-        <SocialPill href="https://www.github.com/eolunas">
-          <GitHubIcon class="size-6 text-white" />
-          <span class="text-white">GitHub</span>
-        </SocialPill>
-        <SocialPill href="https://www.github.com/eolunas">
-          <MailIcon class="size-6 text-white" />
-          <span class="text-white">eolunas@gmail.com</span>
-        </SocialPill>
-      </nav>
     </SectionContainer>
 
     <SectionContainer id="aboutme" class="pt-16">
@@ -88,181 +98,10 @@ import Avatar from "../icons/Avatar";
       <p class="text-white text-lg">
         Decripcion de mi Perfil, ruta academica y experiencia laboral.
       </p>
-      <h3
-        class="flex items-center gap-x-2 text-2xl font-semibold text-white py-4"
-      >
-        <ToolIcon class="size-8" /> Experiencia Laboral
-      </h3>
-      <Experience />
-
-      <>
-        <!-- component -->
-        <h3 class="text-2xl text-gray-700 font-bold mb-6 ml-3">Latest News</h3>
-
-        <ol>
-          <li class="border-l-2 border-purple-600">
-            <div class="md:flex flex-start">
-              <div
-                class="bg-purple-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3.5"
-              >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  data-prefix="fas"
-                  class="text-white w-3 h-3"
-                  role="img"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 448 512"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
-                  ></path>
-                </svg>
-              </div>
-              <div
-                class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10"
-              >
-                <div class="flex justify-between mb-4">
-                  <a
-                    href="#!"
-                    class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm"
-                    >New Web Design</a
-                  >
-                  <a
-                    href="#!"
-                    class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm"
-                    >04 / 02 / 2022</a
-                  >
-                </div>
-                <p class="text-gray-700 mb-6">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Quisque scelerisque diam non nisi semper, et elementum lorem
-                  ornare. Maecenas placerat facilisis mollis. Duis sagittis
-                  ligula in sodales vehicula.
-                </p>
-                <button
-                  type="button"
-                  class="inline-block px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-                  data-mdb-ripple="true">Preview</button
-                >
-                <button
-                  type="button"
-                  class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
-                  data-mdb-ripple="true">See demo</button
-                >
-              </div>
-            </div>
-          </li>
-          <li class="border-l-2 border-green-600">
-            <div class="md:flex flex-start">
-              <div
-                class="bg-green-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3.5"
-              >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  data-prefix="fas"
-                  class="text-white w-3 h-3"
-                  role="img"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 448 512"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
-                  ></path>
-                </svg>
-              </div>
-              <div
-                class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10"
-              >
-                <div class="flex justify-between mb-4">
-                  <a
-                    href="#!"
-                    class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm"
-                    >21 000 Job Seekers</a
-                  >
-                  <a
-                    href="#!"
-                    class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm"
-                    >12 / 01 / 2022</a
-                  >
-                </div>
-                <p class="text-gray-700 mb-6">
-                  Libero expedita explicabo eius fugiat quia aspernatur autem
-                  laudantium error architecto recusandae natus sapiente sit nam
-                  eaque, consectetur porro molestiae ipsam an deleniti.
-                </p>
-                <button
-                  type="button"
-                  class="inline-block px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-                  data-mdb-ripple="true">Preview</button
-                >
-                <button
-                  type="button"
-                  class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
-                  data-mdb-ripple="true">See demo</button
-                >
-              </div>
-            </div>
-          </li>
-          <li class="border-l-2 border-green-600">
-            <div class="md:flex flex-start">
-              <div
-                class="bg-green-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3.5"
-              >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  data-prefix="fas"
-                  class="text-white w-3 h-3"
-                  role="img"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 448 512"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
-                  ></path>
-                </svg>
-              </div>
-              <div
-                class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10"
-              >
-                <div class="flex justify-between mb-4">
-                  <a
-                    href="#!"
-                    class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm"
-                    >Awesome Employers</a
-                  >
-                  <a
-                    href="#!"
-                    class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm"
-                    >21 / 12 / 2021</a
-                  >
-                </div>
-                <p class="text-gray-700 mb-6">
-                  Voluptatibus temporibus esse illum eum aspernatur, fugiat
-                  suscipit natus! Eum corporis illum nihil officiis tempore.
-                  Excepturi illo natus libero sit doloremque, laborum molestias
-                  rerum pariatur quam ipsam necessitatibus incidunt, explicabo.
-                </p>
-                <button
-                  type="button"
-                  class="inline-block px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-                  data-mdb-ripple="true">Preview</button
-                >
-                <button
-                  type="button"
-                  class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
-                  data-mdb-ripple="true">See demo</button
-                >
-              </div>
-            </div>
-          </li>
-        </ol>
-      </>
+      <article class="w-full flex flex-col justify-center items-center lg:flex-row lg:items-start">
+        <Experience class="w-full lg:w-1/2" />
+        <Academic class="w-full lg:w-1/2" />
+      </article>
     </SectionContainer>
 
     <SectionContainer id="projects" class="pt-16">