JFRA-01: Add translations and implement Wibx page.

public/lang/en.json

@@ -100,5 +100,19 @@
     "f-project": "Subject",
     "f-msg": "Message",
     "btn": "Send message",
-    "copyright": "Radapls. All right reserved"
+    "copyright": "Radapls. All right reserved",
+    "wibx": {
+        "title": "My experience at Wiboo Company",
+        "content1": "My experience at Wibx was a one hundred and eighty degree turn. It was the first company I joined after making my career transition. At Wibx, I learned a lot, not only about technology but also about relationships, living in a new country, learning a new language, and, of course, programming in this decade.",
+        "content2": "For me, Wibx was a space for co-creation. There was never a 'no' to trying something new. From Augmented Reality filters, to system design, to the administrative backoffice, application refactoring, and several, if not many, landing pages.",
+        "content3": "My experience as a frontend developer was based on understanding how Angular works as a framework and optimizing its development to work with TypeScript and SCSS as a CSS preprocessor. It was a great challenge, especially because I was not familiar with frameworks and had more experience with HTML, CSS, and JavaScript. This challenge was of great scalability, even more so when coming from a completely different area.",
+        "content4": "However, I believe that being close to complex concepts such as reactive state, asynchrony, state management, and clean code for architecture made that path an enjoyable experience. I was always accompanied by teamwork, which I consider crucial at the beginning of a programmer's career. While inherent curiosity is great, having a group-guided approach will always be appreciated.",
+        "subtitle": "Among my main responsibilities were:",
+        "resp-1": "Creating new functionalities, as well as maintaining the base code for the backoffice (Business) and the application (Wibx App).",
+        "resp-2": "Working together with the design team to efficiently deliver new functionalities to the core business.",
+        "resp-3": "Managing HTTPS requests with RESTful APIs for the different integration modules.",
+        "resp-4": "Modular refactoring of the business (WBSC).",
+        "resp-5": "Creating landing pages in alignment with the marketing team for the launch of strategies and campaigns.",
+        "stack": "The stack:"
+    }
 }

public/lang/es.json

@@ -100,5 +100,19 @@
     "f-project": "Asunto",
     "f-msg": "Mensaje",
     "btn": "Enviar mensaje",
-    "copyright": "Radapls. Todos los derechos reservados"
+    "copyright": "Radapls. Todos los derechos reservados",
+    "wibx": {
+        "title": "Mi experiencia en Wiboo Company",
+        "content1": "Mi experiencia en Wibx fue un giro de ciento ochenta grados. Fue la primera empresa a la que llegué después de hacer mi transición de carrera. En Wibx, aprendí muchísimo, no solo sobre tecnología, sino también sobre relaciones, vivir en un nuevo país, aprender un nuevo idioma y, por supuesto, programar en esta década.",
+        "content2": "Wibx para mí fue un espacio de co-creación. Nunca hubo un 'no' para intentar algo nuevo. Desde filtros con Realidad Aumentada, pasando por el diseño de sistemas, hasta el backoffice administrativo, la refactorización de la aplicación y varias, por no decir muchas, landing pages.",
+        "content3": "Mi experiencia como desarrollador frontend se basó en entender el funcionamiento de Angular como framework y en optimizar su desarrollo para trabajar con TypeScript y SCSS como preprocesador de CSS. Fue un gran desafío, especialmente porque no estaba familiarizado con frameworks y tenía más experiencia con HTML, CSS y JavaScript. Este reto fue de gran escalabilidad, más aún cuando venía de un área completamente ajena.",
+        "content4": "Sin embargo, creo que la proximidad a conceptos tan complejos como el estado reactivo, la asincronía, la gestión del estado y el clean code para la arquitectura hicieron de ese camino una experiencia amena. Siempre estuve acompañado del trabajo en equipo, que considero crucial al inicio de la carrera como programador. Si bien la curiosidad inherente es grande, el poder tener un enfoque guiado por un grupo siempre será grato.",
+        "subtitle": "Entre mis principales responsabilidades estuvieron:",
+        "resp-1": "La creación de nuevas funcionalidades, así como el mantenimiento del código base para el backoffice (Business) y la aplicación (Wibx App).",
+        "resp-2": "Trabajo conjunto con el equipo de diseño para la entrega eficiente de nuevas funcionalidades al core del negocio.",
+        "resp-3": "Gestión de peticiones HTTPS con APIs RESTful para los diferentes módulos de integración.",
+        "resp-4": "Refactorización modular del negocio (WBSC).",
+        "resp-5": "Creación de landing pages en alineamiento con el equipo de marketing para el lanzamiento de estrategias y campañas.",
+        "stack": "Principales herramientas:"
+    }
 }

public/lang/pt.json

@@ -100,5 +100,19 @@
     "f-project": "Assunto",
     "f-msg": "Mensagem",
     "btn": "Enviar mensagem",
-    "copyright": "Radapls. Todos os direitos reservados"
+    "copyright": "Radapls. Todos os direitos reservados",
+    "wibx": {
+        "title": "Minha experiência na Wiboo Company",
+        "content1": "Minha experiência na Wibx foi uma virada de cento e oitenta graus. Foi a primeira empresa em que entrei após fazer minha transição de carreira. Na Wibx, aprendi muito, não só sobre tecnologia, mas também sobre relacionamentos, viver em um novo país, aprender um novo idioma e, claro, programar nesta década.",
+        "content2": "Para mim, a Wibx foi um espaço de co-criação. Nunca houve um 'não' para tentar algo novo. Desde filtros de Realidade Aumentada, passando pelo design de sistemas, até o backoffice administrativo, a refatoração da aplicação e várias, senão muitas, landing pages.",
+        "content3": "Minha experiência como desenvolvedor frontend foi baseada em entender como o Angular funciona como framework e otimizar seu desenvolvimento para trabalhar com TypeScript e SCSS como preprocessador de CSS. Foi um grande desafio, especialmente porque eu não estava familiarizado com frameworks e tinha mais experiência com HTML, CSS e JavaScript. Este desafio foi de grande escalabilidade, ainda mais vindo de uma área completamente diferente.",
+        "content4": "No entanto, acredito que a proximidade a conceitos tão complexos como estado reativo, assincronia, gerenciamento de estado e código limpo para arquitetura tornaram esse caminho uma experiência agradável. Sempre estive acompanhado pelo trabalho em equipe, que considero crucial no início da carreira de programador. Embora a curiosidade inerente seja grande, ter uma abordagem guiada por um grupo sempre será apreciado.",
+        "subtitle": "Entre minhas principais responsabilidades estavam:",
+        "resp-1": "Criação de novas funcionalidades, bem como a manutenção do código base para o backoffice (Business) e a aplicação (Wibx App).",
+        "resp-2": "Trabalho conjunto com a equipe de design para a entrega eficiente de novas funcionalidades ao core do negócio.",
+        "resp-3": "Gerenciamento de requisições HTTPS com APIs RESTful para os diferentes módulos de integração.",
+        "resp-4": "Refatoração modular do negócio (WBSC).",
+        "resp-5": "Criação de landing pages em alinhamento com a equipe de marketing para o lançamento de estratégias e campanhas.",
+        "stack": "Principales tecnologias:"
+    }
 }

src/pages/wibx.astro

@@ -0,0 +1,46 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Slider from "@components/Slider.astro";
+import TechList from "@components/TechList.astro";
+import { wibxPhotos } from "@data/slider";
+---
+
+<Layout title="JFRA / Wibx" variant="wibx" withFooter={false}>
+    <section class="section" id="wibx">
+        <h2 class="section__title" i18n="wibx.title"></h2>
+        <div class="wibx__container container grid">
+            <p class="wibx__content" i18n="wibx.content1"></p>
+            <p class="wibx__content" i18n="wibx.content2"></p>
+            <p class="wibx__content" i18n="wibx.content3"></p>
+            <p class="wibx__content" i18n="wibx.content4"></p>
+
+            <h3 i18n="wibx.subtitle"></h3>
+            <ul>
+                <li class="wibx__content" i18n="wibx.resp-1"></li>
+                <li class="wibx__content" i18n="wibx.resp-2"></li>
+                <li class="wibx__content" i18n="wibx.resp-3"></li>
+                <li class="wibx__content" i18n="wibx.resp-4"></li>
+                <li class="wibx__content" i18n="wibx.resp-5"></li>
+            </ul>
+
+            <h3 i18n="wibx.stack"></h3>
+            <TechList company="wibx" />
+            <Slider format="image" data={wibxPhotos} type="wibx" />
+        </div>
+    </section>
+</Layout>
+
+<style>
+    .wibx__container {
+        padding: 0.75rem 1rem 0.25rem;
+    }
+
+    p.wibx__content {
+        text-align: start;
+        text-wrap: pretty;
+    }
+
+    ul {
+        list-style-type: disc;
+    }
+</style>

src/scripts/main.js

@@ -55,27 +55,7 @@ skillsHeader.forEach((el) => {
 });
 
 
-/*==================== QUALIFICATION TABS ====================*/
-  const tabs = document.querySelectorAll('[data-target]'),
-        tabContents = document.querySelectorAll('[data-content]')
 
-        tabs.forEach(tab =>{
-            tab.addEventListener('click', () =>{
-                const target = document.querySelector(tab.dataset.target)
-
-                tabContents.forEach(tabContent =>{
-                    tabContent.classList.remove('qualification__active')
-
-                })
-                target.classList.add('qualification__active')
-
-                tabs.forEach(tab =>{
-                        tab.classList.remove('qualification__active')
-                })
-                tab.classList.add('qualification__active')
-
-            })
-        })
 
 /*==================== SERVICES MODAL ====================*/
 const modalViews = document.querySelectorAll('.services__modal'),