JFRA-02: Add BirdiRx page.

src/data/slider.ts

@@ -3,7 +3,9 @@ import Wibx2 from "@assets/img/wibx/wbx_2.webp";
 import Wibx3 from "@assets/img/wibx/wbx_3.webp";
 import Wibx4 from "@assets/img/wibx/wbx_4.webp";
 
-import Birdi1 from "@assets/img/birdi/birdi_1.png";
+import Birdi2 from "@assets/img/birdi/birdi_2.png";
+import Birdi3 from "@assets/img/birdi/birdi_3.png";
+
 
 export const wibxPhotos = [
     Wibx1.src,
@@ -13,5 +15,6 @@ export const wibxPhotos = [
 ]
 
 export const birdiPhotos = [
-    Birdi1.src
+    Birdi2.src,
+    Birdi3.src
 ]

src/pages/[lang]/birdi.astro

@@ -3,57 +3,183 @@ import Layout from "@layouts/Layout.astro";
 import Slider from "@components/Slider.astro";
 import TechList from "@components/TechList.astro";
 import { birdiPhotos } from "@data/slider";
-import BirdiGif from '@assets/gifs/birdi.gif';
+import BirdiGif from "@assets/gifs/birdi.gif";
 
+import { LOCALES, useTranslations, type Lang } from "src/i18n";
+
+const t = useTranslations(Astro.currentLocale as Lang);
+
+export const getStaticPaths = () =>
+  Object.keys(LOCALES).map((lang) => ({
+    params: { lang },
+  }));
 ---
 
 <Layout title="JFRA | BirdiRx" variant="birdi" withFooter={false}>
-    <section class="section" id="birdi">
-        <div class="birdi__container container grid">
-            <div
-            class="birdi-container"
-        >
+  <section class="section" id="birdi">
+    <div class="birdi__container container grid">
+        <div class="birdi__image__container">
             <img
-                id="img"
-                src={BirdiGif.src}
-                alt="Wibx Coin"
-                class="wibx-coin"
-                draggable="false"
+              id="img"
+              src={BirdiGif.src}
+              alt="BirdiRx Lottie"
+              class="birdi-gif"
+              draggable="false"
             />
         </div>
-            <h2 class="section__title" i18n="wibx.title"></h2>
-            <p class="birdi__content" i18n="wibx.content1"></p>
-            <p class="birdi__content" i18n="wibx.content2"></p>
-            <p class="birdi__content" i18n="wibx.content3"></p>
-            <p class="birdi__content" i18n="wibx.content4"></p>
-
-            <h3 i18n="wibx.subtitle"></h3>
-            <ul>
-                <li class="birdi__content" i18n="wibx.resp-1"></li>
-                <li class="birdi__content" i18n="wibx.resp-2"></li>
-                <li class="birdi__content" i18n="wibx.resp-3"></li>
-                <li class="birdi__content" i18n="wibx.resp-4"></li>
-                <li class="birdi__content" i18n="wibx.resp-5"></li>
-            </ul>
-
-            <h3 i18n="wibx.stack"></h3>
-            <TechList company="birdi" />
-            <Slider format="image" data={birdiPhotos} type="wibx" />
-        </div>
-    </section>
+      <h2 class="section__title">
+        {
+          t({
+            en: "My Experience at BirdiRx",
+            es: "Mi experiencia en BirdiRx",
+            "pt-br": "Minha experiência na BirdiRx",
+          })
+        }
+      </h2>
+      <p class="birdi__content">
+        {
+          t({
+            en: "Birdi was a significant challenge in my career, not only because it was my first English-language project but also because it involved navigating a new and unfamiliar area: healthcare in the United States. From having no knowledge of the systems to understanding patient policies and HIPAA regulations, Birdi provided a space where I could grow both personally and professionally.",
+            es: "Birdi fue un desafío significativo en mi carrera, no solo porque fue mi primer proyecto en inglés, sino también porque implicó navegar en un área nueva y desconocida: el sector salud en los Estados Unidos. Desde no tener conocimiento de los sistemas hasta comprender las políticas relacionadas con los pacientes y las regulaciones de HIPAA, Birdi me brindó un espacio donde pude crecer tanto personal como profesionalmente.",
+            "pt-br":
+              "Birdi foi um grande desafio na minha carreira, não apenas por ter sido meu primeiro projeto em inglês, mas também por envolver a navegação em uma área nova e desconhecida: o setor de saúde nos Estados Unidos. Desde não saber nada sobre os sistemas até compreender as políticas relacionadas aos pacientes e as regulamentações da HIPAA, Birdi me ofereceu um espaço onde pude crescer tanto pessoal quanto profissionalmente.",
+          })
+        }
+      </p>
+      <p class="birdi__content">
+        {
+          t({
+            en: "As contractors, we don't always have a complete picture of what our clients want, but Birdi was an excellent experience that showed me the value of embracing challenges. From PCM to the main site, it was a wonderful journey, supported by a highly collaborative team.",
+            es: "Como contratistas, no siempre tenemos una imagen completa de lo que nuestros clientes quieren, pero Birdi fue una experiencia excelente que me mostró el valor de aceptar desafíos. Desde PCM hasta el sitio principal, fue un viaje maravilloso, apoyado por un equipo altamente colaborativo.",
+            "pt-br":
+              "Como contratados, nem sempre temos uma visão completa do que nossos clientes desejam, mas Birdi foi uma experiência excelente que me mostrou o valor de enfrentar desafios. Desde o PCM até o site principal, foi uma jornada maravilhosa, apoiada por uma equipe altamente colaborativa.",
+          })
+        }
+      </p>
+      <p class="birdi__content">
+        {
+          t({
+            en: "Working with GatsbyJS and Drupal for the first time was both rewarding and demanding, especially learning to code in PHP. I created my first custom module in Drupal—perhaps a small achievement to some, but a meaningful milestone for me. Alongside this, I had the opportunity to contribute to several new features, including:",
+            es: "Trabajar con GatsbyJS y Drupal por primera vez fue tanto gratificante como exigente, especialmente aprender a programar en PHP. Creé mi primer módulo personalizado en Drupal, quizás un logro pequeño para algunos, pero un hito significativo para mí. Además, tuve la oportunidad de contribuir a varias funciones nuevas, incluyendo:",
+            "pt-br":
+              "Trabalhar com GatsbyJS e Drupal pela primeira vez foi ao mesmo tempo recompensador e desafiador, especialmente ao aprender a programar em PHP. Criei meu primeiro módulo personalizado no Drupal – talvez um pequeno feito para alguns, mas um marco significativo para mim. Além disso, tive a oportunidade de contribuir para várias novas funcionalidades, incluindo:",
+          })
+        }
+      </p>
+
+
+      <ul>
+        <li class="birdi__content">
+          {
+            t({
+              en: "Medicine Cabinet Redesign",
+              es: "Redisño del Medicine Cabinet",
+              "pt-br":
+                "Redesenho do Medicine Cabinet",
+            })
+          }
+        </li>
+        <li class="birdi__content">
+          {
+            t({
+              en: "Family Account Release",
+              es: "Lanzamiento de la Cuenta Familiar",
+              "pt-br":
+                "Lançamento da Conta Familiar",
+            })
+          }
+        </li>
+        <li class="birdi__content">
+          {
+            t({
+              en: "Membership Program",
+              es: "Programa de Membresías",
+              "pt-br":
+                "Programa de Assinaturas",
+            })
+          }
+        </li>
+        <li class="birdi__content">
+          {
+            t({
+              en: "Discount Card",
+              es: "Tarjeta de Descuento",
+              "pt-br": "Cartão de Desconto",
+            })
+          }
+        </li>
+        <li class="birdi__content">
+          {
+            t({
+              en: "Payment History Redesign",
+              es: "Rediseño del Historial de Pagos",
+              "pt-br":
+                "Redesenho do Histórico de Pagamentos",
+            })
+          }
+        </li>
+      </ul>
+
+      <p class="birdi__content">
+        {
+          t({
+            en: "Birdi was an invaluable experience, allowing me to gain knowledge and develop skills while collaborating across different cultures, time zones, and languages. Our team communicated in Spanish, Portuguese, and formal English, which enriched the experience further. As part of the web team, my role was to understand the client's needs and translate them into impactful features. I take great pride in knowing that my work contributed to the thousands of users who rely on the platform daily",
+            es: "Birdi fue una experiencia invaluable, que me permitió adquirir conocimientos y desarrollar habilidades mientras colaboraba con personas de diferentes culturas, zonas horarias e idiomas. Nuestro equipo se comunicaba en español, portugués y un inglés formal, lo cual enriqueció aún más la experiencia. Como parte del equipo web, mi función era entender las necesidades del cliente y traducirlas en características impactantes. Me siento muy orgulloso de saber que mi trabajo contribuyó a los miles de usuarios que usan la plataforma diariamente.",
+            "pt-br":
+              "Birdi foi uma experiência inestimável, que me permitiu adquirir conhecimento e desenvolver habilidades enquanto colaborava com pessoas de diferentes culturas, fusos horários e idiomas. Nossa equipe se comunicava em espanhol, português e inglês formal, o que enriqueceu ainda mais a experiência. Como parte da equipe web, minha função era entender as necessidades do cliente e traduzi-las em funcionalidades impactantes. Tenho muito orgulho em saber que meu trabalho contribuiu para os milhares de usuários que utilizam a plataforma diariamente.",
+          })
+        }
+      </p>
+      <p>
+        {
+          t({
+            en: "Of course, there were challenges, especially in prioritizing tasks amidst acquisitions and new high-priority requests emerging weekly. However, our work was organized and focused on delivering valuable improvements. We evolved from a small group of developers into a multidisciplinary team dedicated to identifying and solving problems more effectively.",
+            es: "Por supuesto, hubo desafíos, especialmente al priorizar tareas en medio de adquisiciones y nuevas solicitudes de alta prioridad que surgían semanalmente. Sin embargo, nuestro trabajo se organizó y se centró en ofrecer mejoras valiosas. Evolucionamos de un pequeño grupo de desarrolladores a un equipo multidisciplinario dedicado a identificar y resolver problemas de manera más efectiva.",
+            "pt-br": "Claro, houve desafios, especialmente na priorização de tarefas em meio a aquisições e novas solicitações de alta prioridade que surgiam semanalmente. No entanto, nosso trabalho foi organizado e focado em entregar melhorias valiosas. Evoluímos de um pequeno grupo de desenvolvedores para uma equipe multidisciplinar dedicada a identificar e resolver problemas de forma mais eficaz.",
+          })
+        }
+      </p>
+
+
+      <h3>
+        {
+          t({
+            en: "The stack:",
+            es: "Principales herramientas:",
+            "pt-br": "Principales tecnologias:",
+          })
+        }
+      </h3>
+      <TechList company="birdi" />
+      <Slider format="image" data={birdiPhotos} type="birdi" />
+    </div>
+  </section>
 </Layout>
 
 <style>
-    .birdi__container {
-        padding: 0.75rem 1rem 0.25rem;
-    }
-
-    p.birdi__content {
-        text-align: start;
-        text-wrap: pretty;
-    }
-
-    ul {
-        list-style-type: disc;
-    }
+  .birdi__container {
+    padding: 0.75rem 1rem 0.25rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .birdi__image__container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  p.birdi__content {
+    text-align: start;
+    text-wrap: pretty;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  .birdi-gif {
+    max-width: 400px;
+    min-width: 250px;
+  }
 </style>

src/styles/client-colors.css

@@ -0,0 +1,6 @@
+:root {
+    --marker-color-wibx: gray;
+    --marker-active-color-wibx: #00efa5;
+    --marker-color-birdi: #03a4dc;
+    --marker-active-color-birdi: #9caaba;
+  }

src/styles/global.css

@@ -1 +1,2 @@
 @import "base";
+@import "client-colors";