[ADD] Available button and academic styles

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>

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>

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>

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>

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"

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>

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>

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

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
+>