feat: add side project of Juan Palma

UXCorpRangel · Oct 18, 2024 · d20fbe2 · d20fbe2
1 parent 854d7d2
commit d20fbe2
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 27 deletions.
diff --git a/public/assets/images/volunteers/juan-palma.webp b/public/assets/images/volunteers/juan-palma.webp
diff --git a/src/components/BubbleAvatar.astro b/src/components/BubbleAvatar.astro
@@ -1,22 +1,50 @@
 ---
 import LinkButton from './LinkButton.astro';
 
-const { imageSrc, altText, linkedinLink, githubLink } = Astro.props;
+type Props = {
+  imageSrc: string;
+  altText: string;
+  linkedinLink?: string;
+  githubLink: string;
+  webLink?: string;
+};
+
+const { imageSrc, altText, linkedinLink, githubLink, webLink } = Astro.props;
 ---
 
 <div class="bubble">
   <img src={imageSrc} alt={altText} class="avatar-volunteer" />
   <div class="buttons-volunteer">
-    <LinkButton
-      external
-      hideLabel
-      link={linkedinLink}
-      label="LinkedIn"
-      icon="socials/linkedin"
-      shadow="green"
-      bgColor="var(--linkedin-color)"
-      textColor="var(--text-color)"
-    />
+    {
+      linkedinLink && (
+        <LinkButton
+          external
+          hideLabel
+          link={linkedinLink}
+          label="LinkedIn"
+          icon="socials/linkedin"
+          shadow="green"
+          bgColor="var(--linkedin-color)"
+          textColor="var(--text-color)"
+        />
+      )
+    }
+
+    {
+      webLink && (
+        <LinkButton
+          external
+          hideLabel
+          link={webLink}
+          label="Web"
+          icon="socials/website"
+          shadow="green"
+          bgColor="var(--github-color)"
+          textColor="var(--text-color)"
+        />
+      )
+    }
+
     <LinkButton
       external
       hideLabel
@@ -33,6 +61,24 @@ const { imageSrc, altText, linkedinLink, githubLink } = Astro.props;
 <style>
   .bubble {
     width: 131px;
+    position: relative;
+
+    &::before {
+      content: '';
+      z-index: -1;
+      position: absolute;
+      background-color: var(--spring-green-color);
+
+      width: 0.5rem;
+      height: 6rem;
+      inset-block-start: -1.5rem;
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+
+      @media (width < 768px) {
+        display: none;
+      }
+    }
 
     .avatar-volunteer {
       border-radius: 100%;
@@ -42,7 +88,7 @@ const { imageSrc, altText, linkedinLink, githubLink } = Astro.props;
     .buttons-volunteer {
       display: flex;
       justify-content: center;
-      gap: 1rem;
+      gap: 0.25rem;
       position: relative;
       top: -20px;
     }

diff --git a/src/pages/proyectos.astro b/src/pages/proyectos.astro
@@ -1,7 +1,7 @@
 ---
 import LinkButton from '@components/LinkButton.astro';
 import ProjectCard from '@components/ProjectCard.astro';
-/*import BubbleAvatar from '@components/BubbleAvatar.astro';*/
+import BubbleAvatar from '@components/BubbleAvatar.astro';
 import CurveIconLeft from '@sections/Projects/CurveIconLeft.astro';
 import CurveIconRight from '@sections/Projects/CurveIconRight.astro';
 import Layout from '@layouts/Layout.astro';
@@ -128,22 +128,15 @@ import Layout from '@layouts/Layout.astro';
               />
               <LinkButton label="GitHub" link="https://github.com/UXCorpRangel/js-conf-cl-2024" icon="socials/github" external />
             </ProjectCard>
-            {
-              /*           <div class="volunteer">
+            <div class="volunteer">
               <BubbleAvatar
-                imageSrc="./assets/images/volunteers/luis-tenorio.webp"
-                altText="Facu"
-                linkedinLink="https://linkedin.com/in/facu"
-                githubLink="https://github.com/facu"
+                imageSrc="./assets/images/volunteers/juan-palma.webp"
+                altText="Juan Palma"
+                webLink="https://landing-js-conf2024.netlify.app/"
+                linkedinLink="https://www.linkedin.com/in/juan-palma-alvarez/"
+                githubLink="https://github.com/jpalma76/landing-js-conf2024"
               />
-              <BubbleAvatar
-                imageSrc="./assets/images/volunteers/luis-tenorio.webp"
-                altText="Facu"
-                linkedinLink="https://linkedin.com/in/facu"
-                githubLink="https://github.com/facu"
-              />
-            </div> */
-            }
+            </div>
           </div>
         </div>
         <div class="left">
@@ -230,13 +223,23 @@ import Layout from '@layouts/Layout.astro';
           max-width: 600px;
           position: relative;
           right: 6%;
+          z-index: 1;
 
           .volunteer {
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
+            width: 100%;
             gap: 8rem;
             margin: 1rem 0;
+
+            z-index: -1;
+            position: absolute;
+            inset-block-inline: 0;
+
+            @media (width < 768px) {
+              position: relative;
+            }
           }
         }
       }