[FIX] Available button to header and darkmode colors

src/components/Academic.astro

@@ -28,7 +28,7 @@ const EXPERIENCE = [
 ---
 
 <div class={`${className}`}>
-  <h3 class="flex items-center gap-x-2 text-2xl font-semibold text-white py-4">
+  <h3 class="flex items-center gap-x-2 text-2xl font-semibold py-4 text-gray-700  dark:text-white">
     <BookIcon class="size-8" /> Educación
   </h3>
 

src/components/AcademicItem.astro

@@ -13,46 +13,43 @@ const { date, title, company, description, index } = Astro.props;
 <li
   class={`
   border-l-2
-  ${index == 0 ? "border-purple-600" : "border-green-600"}`}
+  ${index == 0 ? "border-purple-600" : "border-marrsgreen"}`}
 >
   <div class="md:flex flex-start">
     <div
       class={`${
-        index == 0 ? "bg-purple-600" : "bg-green-600"
+        index == 0 ? "bg-purple-600" : "bg-marrsgreen"
       } 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={`
+      block p-6 rounded-lg shadow-lg bg-gray-600/10 max-w-md ml-6 mb-10
+      dark:bg-white/30
+      `}
+    >
       <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
+        <p
+          class={`
+          basis-4/6 text-sm text-marrsgreen font-bold 
+          md:text-lg 
+          dark:text-carrigreen`}
         >
+          {title}
+        </p>
+        <p class="font-medium text-marrsgreen dark:text-carrigreen">
+          {date}
+        </p>
       </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"
+        class="text-sm md:text-md font-semibold text-marrsgreen/60 mb-3 dark:text-carrigreen/60"
       >
         {company}
       </p>
-      <p class="text-gray-700 mb-6">
+      <p class="text-gray-700 mb-3 dark:text-white">
         {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

@@ -41,7 +41,7 @@ const EXPERIENCE = [
 ---
 
 <div class={`${className}`}>
-  <h3 class="flex items-center gap-x-2 text-2xl font-semibold text-white py-4">
+  <h3 class="flex items-center gap-x-2 text-2xl font-semibold py-4 text-gray-700  dark:text-white">
     <ToolIcon class="size-8" /> Experiencia Laboral
   </h3>
   <ol class={`relative border-s border-gray-200 dark:border-gray-700 ml-3`}>

src/components/Footer.astro

@@ -5,8 +5,8 @@ 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 `}
+md:mb-6
+rounded-2xl shadow m-4 bg-black/20 backdrop-blur-lg `}
 >
   <div
     class={`

src/components/Header.astro

@@ -4,62 +4,70 @@ import CodeIcon from "../icons/Code.astro";
 import BlogIcon from "../icons/Blog.astro";
 import MessageIcon from "../icons/Message.astro";
 import { ThemeChanger } from "./ThemeChanger";
+import LinkButton from "../components/LinkButton.astro";
 ---
 
 <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 max-w-6xl bg-bglight bg-opacity-50 
-    sm:px-8 md:mt-3 md:w-11/12 md:rounded-lg
+    sm:px-8 md:w-11/12 rounded-b-2xl
     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:md:rounded-lg`}
+    after:rounded-b-2xl`}
   >
     <div
       class="w-full h-full mx-auto max-w-6xl flex items-center justify-between"
     >
-      <a
-        class={`text-black-200 text-2xl 
+      <div class="flex justify-center items-center gap-x-4">
+        <a
+          class={`text-black-200 text-2xl 
         md:hover:text-marrsgreen  
         dark:text-white dark:md:hover:text-carrigreen`}
-        href="#banner"
-        >eolunas<span class="text-marrsgreen dark:text-carrigreen">.dev</span
-        ></a
-      >
+          href="#banner"
+          >eolunas<span class="text-marrsgreen dark:text-carrigreen">.dev</span
+          ></a
+        >
+        <LinkButton href="https://www.linkedin.com/in/eolunas">
+          Disponible
+        </LinkButton>
+      </div>
       <nav class="flex items-center">
         <div
-          class={`flex justify-evenly items-center py-2 w-11/12 fixed bottom-4 transform -translate-x-1/2 z-30 left-1/2 bg-clip-padding bg-bglight rounded-2xl drop-shadow-lg backdrop-filter backdrop-blur-xl !bg-opacity-50 
+          class={`
+          flex justify-evenly items-center py-2 w-11/12 fixed bottom-4 
+          transform -translate-x-1/2 z-30 left-1/2 bg-clip-padding bg-bglight rounded-2xl drop-shadow-lg backdrop-filter backdrop-blur-xl !bg-opacity-50 
         dark:bg-carddark dark:text-textlight
           md:bg-transparent md:dark:bg-transparent md:backdrop-blur-none md:static md:left-auto 
           md:transform-none md:drop-shadow-none`}
         >
           <a
             href="#aboutme"
-            class="text-sm md:text-lg flex flex-col items-center w-[4.5rem] md:w-auto dark:fill-textlight md:mr-6 md:hover:text-marrsgreen md:dark:hover:text-carrigreen link-outline false"
+            class="text-sm md:text-lg flex flex-col items-center w-[4.5rem] md:w-auto dark:fill-textlight md:mr-4 md:hover:text-marrsgreen md:dark:hover:text-carrigreen"
             ><PerfilIcon class="md:hidden size-6 mb-1" />
             <span class="whitespace-nowrap">Sobre mi</span></a
           >
 
           <a
             href="#projects"
-            class="text-sm md:text-lg flex flex-col items-center w-[4.5rem] md:w-auto dark:fill-textlight md:mr-6 md:hover:text-marrsgreen md:dark:hover:text-carrigreen link-outline false"
+            class="text-sm md:text-lg flex flex-col items-center w-[4.5rem] md:w-auto dark:fill-textlight md:mr-4 md:hover:text-marrsgreen md:dark:hover:text-carrigreen"
           >
             <CodeIcon class="md:hidden size-6 mb-1" />
             <span class="whitespace-nowrap">Proyectos</span></a
           >
 
           <a
             href="#blog"
-            class="text-sm md:text-lg flex flex-col items-center w-[4.5rem] md:w-auto dark:fill-textlight md:mr-6 md:hover:text-marrsgreen md:dark:hover:text-carrigreen link-outline false"
+            class="text-sm md:text-lg flex flex-col items-center w-[4.5rem] md:w-auto dark:fill-textlight md:mr-4 md:hover:text-marrsgreen md:dark:hover:text-carrigreen"
           >
             <BlogIcon class="md:hidden size-6 mb-1" />
             <span class="whitespace-nowrap">Blog</span></a
           >
 
           <a
             href="#contact"
-            class="text-sm md:text-lg flex flex-col items-center w-[4.5rem] md:w-auto dark:fill-textlight md:mr-6 md:hover:text-marrsgreen md:dark:hover:text-carrigreen link-outline false"
+            class="text-sm md:text-lg flex flex-col items-center w-[4.5rem] md:w-auto dark:fill-textlight md:mr-4 md:hover:text-marrsgreen md:dark:hover:text-carrigreen"
           >
             <MessageIcon class="md:hidden size-6 mb-1" />
             <span class="whitespace-nowrap">Contacto</span></a

src/components/LinkButton.astro

@@ -4,25 +4,27 @@ const { class: aditionalClass, href } = Astro.props;
 
 <a
   class={`
-  rounded-lg shadow-lg shadow-green-500/50 
+  rounded-full shadow-sm 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
+ 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%)]"
+    class={`
+    absolute inset-[-1000%] animate-[spin_2s_linear_infinite]
+    bg-[conic-gradient(from_90deg_at_50%_50%,#51E4B8_0%,#21554E_50%,#51E4B8_100%)]
+    dark: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
+      h-full w-full rounded-full p-2.5 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 
+      text-black/70 text-sm font-semibold text-center
       dark:text-green-100 dark:bg-gradient-to-br dark:from-green-400 dark:to-blue-600/50`}
   >
     <slot />

src/icons/Avatar.js

@@ -7,23 +7,34 @@ export default function Avatar(props) {
   });
 
   const calcDiff = (cx, cy, ex, ey, radius = 10) => {
-    const y = ey - cy;
-    const x = ex - cx;
-    const rad = Math.atan2(y, x);
-    const dx = radius * Math.cos(rad);
-    const dy = radius * Math.sin(rad);
+    const rad = Math.atan2(ey - cy, ex - cx);
+    let dx = radius * Math.abs(Math.cos(rad)) * ((cx - ex) / ex);
+    dx = dx > radius ? radius : dx;
+    let dy = radius * Math.abs(Math.sin(rad)) * ((cy - ey) / ey);
+    dy = dy > radius ? radius : dy;
     return { dx, dy };
   };
-  useEffect(() => {
+
+  const getPosition = () => {
     const avatar = document.getElementById("avatar");
+    const { top, left, height, width } = avatar.getBoundingClientRect();
+    //in expresion (0.5 +/- X) adjust X to find the center Y
+    const y = top + (0.5 - 0.13) * height;
+    const xl = left + (0.5 - 0.1) * width;
+    const xr = left + (0.5 + 0.1) * width;
+    return { y, xl, xr };
+  };
+
+  useEffect(() => {
+    let eye = getPosition();
+
+    window.addEventListener("resize", () => {
+      eye = getPosition();
+    });
+
     document.addEventListener("mousemove", ({ clientX, clientY }) => {
-      const rect = avatar.getBoundingClientRect();
-      //in expresion (0.5 +/- X) adjust X to find the center Y
-      const posY = rect.top + (0.5 - 0.13) * rect.height;
-      const posELX = rect.left + (0.5 - 0.1) * rect.width;
-      const posERX = rect.left + (0.5 + 0.1) * rect.width;
-      const left = calcDiff(clientX, clientY, posELX, posY);
-      const right = calcDiff(clientX, clientY, posERX, posY);
+      const left = calcDiff(clientX, clientY, eye.xl, eye.y);
+      const right = calcDiff(clientX, clientY, eye.xr, eye.y);
       setDiffEye({
         left,
         right,
@@ -200,14 +211,14 @@ export default function Avatar(props) {
         <g fillOpacity={0.6} fillRule="evenodd" transform="translate(76 90)">
           <circle
             r={6}
-            transform={`translate(${30 - diffEye.left.dx} ${
-              22 - diffEye.left.dy
+            transform={`translate(${30 + diffEye.left.dx} ${
+              22 + diffEye.left.dy
             })`}
           />
           <circle
             r={6}
-            transform={`translate(${82 - diffEye.right.dx} ${
-              22 - diffEye.right.dy
+            transform={`translate(${82 + diffEye.right.dx} ${
+              22 + diffEye.right.dy
             })`}
           />
         </g>

src/icons/Download.astro

@@ -0,0 +1,13 @@
+<svg
+  {...Astro.props}
+  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><path
+    d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path><path
+    d="M7 11l5 5l5 -5"></path><path d="M12 4l0 12"></path></svg
+>

src/icons/Mail.astro

@@ -1,16 +1,14 @@
 <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="M10 14l11 -11"></path><path
-    d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"
-    fill="none"
-  ></path></svg
+    d="M12 18h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v7.5"
+  ></path><path d="M3 6l9 6l9 -6"></path><path d="M15 18h6"></path><path
+    d="M18 15l3 3l-3 3"></path></svg
 >

src/icons/SocialPill.astro

@@ -1,11 +1,10 @@
 <a
   class={`
-    bg-white/5
-    border border-white/100  rounded-full
-    flex justify-center items-center
-    my-2 py-2 px-4 gap-x-2
-    transition
-    hover:scale-110 hover:bg-white/10 `}
+  flex justify-center items-center rounded-full p-3 gap-x-2
+  border bg-black/20 border-marrslight 
+  dark:bg-white/10 dark:border-white/100
+  transition
+  hover:scale-110 hover:bg-white/10 hover:dark:bg-black/10 `}
   {...Astro.props}
   target="_blank"
   rel="noopenner noreferrer"