From c5f84780da09f2fc0be7f4574a7a4d44254ecd9c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 2 Dec 2025 10:28:56 +0000
Subject: [PATCH] Add multi-language support (EN, FR, ES)

- Created data/en.json, data/fr.json, data/es.json for translations
- Implemented js/translations.js to handle language detection and switching
- Updated index.html with data-i18n attributes and language switcher UI
- Modified js/main.js to expose TxtRotate for dynamic text updates
- Updated hardcoded alert in index.html to use translated text
---
 data/en.json       |  87 +++++++++++++++++++++++
 data/es.json       |  87 +++++++++++++++++++++++
 data/fr.json       |  87 +++++++++++++++++++++++
 index.html         | 171 ++++++++++++++++++++++++---------------------
 js/main.js         |  29 +++++++-
 js/translations.js |  87 +++++++++++++++++++++++
 6 files changed, 465 insertions(+), 83 deletions(-)
 create mode 100644 data/en.json
 create mode 100644 data/es.json
 create mode 100644 data/fr.json
 create mode 100644 js/translations.js

diff --git a/data/en.json b/data/en.json
new file mode 100644
index 0000000..7f0f8d1
--- /dev/null
+++ b/data/en.json
@@ -0,0 +1,87 @@
+{
+  "nav_home": "Home",
+  "nav_about": "About Me",
+  "nav_resume": "Resume",
+  "nav_contact": "Contact",
+  "hero_subheading": "Welcome to my Site!",
+  "hero_name": "Julien Da Cunha",
+  "hero_intro": "I am",
+  "hero_roles": ["Passionate!", "System Engineer", "Network Engineer", "Cloud & DevOps Engineer"],
+  "about_heading_big": "About",
+  "about_heading": "About Me",
+  "about_desc": "Behind a keyboard since I was little, I am passionate about IT in general and more specifically IP Networks, Cloud and Virtualization.",
+  "about_name_label": "Name:",
+  "about_name_value": "Julien Da Cunha",
+  "about_age_label": "Age:",
+  "about_age_value": "26 Years",
+  "about_address_label": "Address:",
+  "about_address_value": "Geneva, Switzerland",
+  "about_email_label": "Email:",
+  "about_availability_text": "% Availability rate of the <a href=\"https://status.goneix.net\" target=\"_blank\">Lab!</a>",
+  "about_cv_button": "Public CV coming soon!",
+  "cv_coming_soon_alert": "Public CV coming soon!",
+  "resume_nav_education": "Education",
+  "resume_nav_experience": "Experience",
+  "resume_nav_skills": "Skills",
+  "resume_nav_certification": "Certification",
+  "education_heading": "Education",
+  "edu_1_date": "2019-2022",
+  "edu_1_title": "Computer Science and Communication Networks Engineer",
+  "edu_1_desc": "",
+  "edu_2_date": "2017-2019",
+  "edu_2_title": "University Diploma in Networks & Telecommunications",
+  "edu_2_desc": "Training in Telecommunications and System & Network Administration.",
+  "edu_3_date": "2015-2017",
+  "edu_3_title": "Baccalaureate STI2D (SIN)",
+  "edu_3_desc": "Specialization: Information Systems and Digital (SIN). <br>With Honors.",
+  "experience_heading": "Experience",
+  "exp_1_date": "September 2023 - Present",
+  "exp_1_title": "Cloud & DevOps Engineer",
+  "exp_2_date": "September 2022 - August 2023",
+  "exp_2_title": "Technical Manager VOIP Service Platforms",
+  "exp_3_date": "September 2019 - August 2022",
+  "exp_3_title": "Apprentice Operations & Expertise Engineer for Voice and Messaging Service Platforms",
+  "exp_3_desc": "Integration of a VOIP platform in Private Cloud (IaaS): <br>- Virtual network architecture. <br>- Automated provisioning with Vra API & Terraform Provider. <br>- Orchestration of application installation & Configuration via Consul. <br>- Implementation of a CI / CD Pipeline.",
+  "exp_4_date": "June 2019 - July 2019",
+  "exp_4_title": "Junior System Administrator",
+  "exp_4_desc": "System Administrator: <br> - Monitoring server migration. <br> - Hypervision system migration project & Active Directory domain migration for a client.",
+  "exp_5_date": "April 2019 - June 2019",
+  "exp_5_title": "System Administrator Intern",
+  "exp_5_desc": "Modernizing the monitoring system of the company and its clients: <br>- Automated migration to <a href=\"https://centreon.com/\" target=\"_blank\" style=\"color: #a0f669; font-weight: 900\">Centreon</a> 19.04. <br>- Automation of configuration export.<br>- Automated deployment of a monitoring server.",
+  "skills_heading": "Skills",
+  "skill_linux": "Linux Administration",
+  "skill_network": "Network Administration",
+  "skill_windows": "Windows Administration",
+  "skill_pfsense": "Pfsense",
+  "skill_cisco": "Cisco CLI",
+  "skill_vmware": "VMware Esxi & Vcenter",
+  "skill_mikrotik": "Mikrotik CLI",
+  "skill_ansible": "Ansible",
+  "skill_terraform": "Terraform",
+  "certification_heading": "Certification",
+  "cert_view": "View Certification",
+  "cert_1_date": "2023",
+  "cert_1_title": "Google Cloud Certified: Professional Cloud Architect",
+  "cert_1_desc": "",
+  "cert_2_date": "2022",
+  "cert_2_title": "Microsoft Certified: Azure Fundamentals (AZ-900)",
+  "cert_2_desc": "",
+  "cert_3_date": "2019",
+  "cert_3_title": "Cisco CCNA2 Routing & Switching",
+  "cert_3_desc": "Cisco CCNA2 Certification obtained as part of my DUT R&T training.",
+  "hire_title_prefix": "I am",
+  "hire_title_suffix": "Available",
+  "hire_desc": "Need IT advice? <br> Or just want to chat?",
+  "hire_button": "Send me a message!",
+  "contact_heading_big": "Contact",
+  "contact_heading": "Contact Me",
+  "contact_address_title": "Address",
+  "contact_github_title": "Github",
+  "contact_email_title": "Email Address",
+  "contact_linkedin_title": "LinkedIn",
+  "footer_links_title": "Links",
+  "footer_lab_link": "LAB - GoneIX",
+  "footer_docs_link": "Docs - GoneIX",
+  "footer_questions_title": "Questions?",
+  "footer_made_with": "Made with"
+}
diff --git a/data/es.json b/data/es.json
new file mode 100644
index 0000000..6e23ea5
--- /dev/null
+++ b/data/es.json
@@ -0,0 +1,87 @@
+{
+  "nav_home": "Inicio",
+  "nav_about": "Sobre mí",
+  "nav_resume": "CV",
+  "nav_contact": "Contacto",
+  "hero_subheading": "¡Bienvenido a mi sitio!",
+  "hero_name": "Julien Da Cunha",
+  "hero_intro": "Soy",
+  "hero_roles": ["¡Apasionado!", "Ingeniero de Sistemas", "Ingeniero de Redes", "Ingeniero Cloud y DevOps"],
+  "about_heading_big": "Sobre mí",
+  "about_heading": "Sobre mí",
+  "about_desc": "Detrás de un teclado desde pequeño, me apasiona la informática en general y más específicamente las Redes IP, el Cloud y la Virtualización.",
+  "about_name_label": "Nombre:",
+  "about_name_value": "Julien Da Cunha",
+  "about_age_label": "Edad:",
+  "about_age_value": "26 Años",
+  "about_address_label": "Dirección:",
+  "about_address_value": "Geneva, Switzerland",
+  "about_email_label": "Correo:",
+  "about_availability_text": "% Tasa de disponibilidad del <a href=\"https://status.goneix.net\" target=\"_blank\">Lab!</a>",
+  "about_cv_button": "¡El CV público llegará pronto!",
+  "cv_coming_soon_alert": "¡El CV público llegará pronto!",
+  "resume_nav_education": "Formación",
+  "resume_nav_experience": "Experiencia",
+  "resume_nav_skills": "Habilidades",
+  "resume_nav_certification": "Certificación",
+  "education_heading": "Formación",
+  "edu_1_date": "2019-2022",
+  "edu_1_title": "Ingeniero en Informática y Redes de Comunicación",
+  "edu_1_desc": "",
+  "edu_2_date": "2017-2019",
+  "edu_2_title": "D.U.T Redes y Telecomunicaciones",
+  "edu_2_desc": "Formación en Telecomunicaciones y Administración de Sistemas y Redes Informáticas.",
+  "edu_3_date": "2015-2017",
+  "edu_3_title": "Bachillerato STI2D (SIN)",
+  "edu_3_desc": "Especialización: Sistemas de Información y Digital (SIN). <br>Mención Bien.",
+  "experience_heading": "Experiencia",
+  "exp_1_date": "Septiembre 2023 - Actualidad",
+  "exp_1_title": "Ingeniero Cloud y DevOps",
+  "exp_2_date": "Septiembre 2022 - Agosto 2023",
+  "exp_2_title": "Responsable Técnico de Plataformas de Servicios VOIP",
+  "exp_3_date": "Septiembre 2019 - Agosto 2022",
+  "exp_3_title": "Aprendiz de Ingeniero de Operaciones y Experiencia en Plataformas de Servicios de Voz y Mensajería",
+  "exp_3_desc": "Integración de una plataforma VOIP en Nube Privada (IaaS): <br>- Arquitectura de redes virtuales. <br>- Aprovisionamiento automatizado con API Vra y Provider Terraform. <br>- Orquestación de la instalación y configuración de la aplicación vía Consul. <br>- Implementación de un Pipeline CI / CD.",
+  "exp_4_date": "Junio 2019 - Julio 2019",
+  "exp_4_title": "Administrador de Sistemas Junior",
+  "exp_4_desc": "Administrador de Sistemas: <br> - Migración de servidor de monitoreo. <br> - Proyecto de Migración del sistema de hipervisión y Migración de dominio Active Directory para un cliente.",
+  "exp_5_date": "Abril 2019 - Junio 2019",
+  "exp_5_title": "Pasante Administrador de Sistemas",
+  "exp_5_desc": "Modernizar el sistema de monitoreo de la empresa y sus clientes: <br>- Migración automatizada a <a href=\"https://centreon.com/\" target=\"_blank\" style=\"color: #a0f669; font-weight: 900\">Centreon</a> 19.04. <br>- Automatización de la exportación de configuración.<br>- Despliegue automatizado de un servidor de monitoreo.",
+  "skills_heading": "Habilidades",
+  "skill_linux": "Administración Linux",
+  "skill_network": "Administración de Redes",
+  "skill_windows": "Administración Windows",
+  "skill_pfsense": "Pfsense",
+  "skill_cisco": "Cisco CLI",
+  "skill_vmware": "VMware Esxi & Vcenter",
+  "skill_mikrotik": "Mikrotik CLI",
+  "skill_ansible": "Ansible",
+  "skill_terraform": "Terraform",
+  "certification_heading": "Certificación",
+  "cert_view": "Ver certificación",
+  "cert_1_date": "2023",
+  "cert_1_title": "Google Cloud Certified: Professional Cloud Architect",
+  "cert_1_desc": "",
+  "cert_2_date": "2022",
+  "cert_2_title": "Microsoft Certified: Azure Fundamentals (AZ-900)",
+  "cert_2_desc": "",
+  "cert_3_date": "2019",
+  "cert_3_title": "Cisco CCNA2 Routing & Switching",
+  "cert_3_desc": "Certificación Cisco CCNA2 obtenida como parte de mi formación DUT R&T.",
+  "hire_title_prefix": "Estoy",
+  "hire_title_suffix": "Disponible",
+  "hire_desc": "¿Necesitas consejo informático? <br> ¿O simplemente charlar?",
+  "hire_button": "¡Envíame un mensaje!",
+  "contact_heading_big": "Contacto",
+  "contact_heading": "Contactarme",
+  "contact_address_title": "Dirección",
+  "contact_github_title": "Github",
+  "contact_email_title": "Correo electrónico",
+  "contact_linkedin_title": "LinkedIn",
+  "footer_links_title": "Enlaces",
+  "footer_lab_link": "LAB - GoneIX",
+  "footer_docs_link": "Docs - GoneIX",
+  "footer_questions_title": "¿Preguntas?",
+  "footer_made_with": "Hecho con"
+}
diff --git a/data/fr.json b/data/fr.json
new file mode 100644
index 0000000..7e8802b
--- /dev/null
+++ b/data/fr.json
@@ -0,0 +1,87 @@
+{
+  "nav_home": "Accueil",
+  "nav_about": "À propos de moi",
+  "nav_resume": "CV",
+  "nav_contact": "Contact",
+  "hero_subheading": "Bienvenue sur mon Site !",
+  "hero_name": "Julien Da Cunha",
+  "hero_intro": "Je suis",
+  "hero_roles": ["Passionné!", "Ingénieur Système", "Ingénieur Réseau", "Ingénieur Cloud & DevOps"],
+  "about_heading_big": "À propos",
+  "about_heading": "À propos de moi",
+  "about_desc": "Derrière un clavier depuis tout petit, je suis passionné par l'informatique en général et plus specifiquement des Réseaux IP, du Cloud et de la Virtualisation.",
+  "about_name_label": "Nom:",
+  "about_name_value": "Julien Da Cunha",
+  "about_age_label": "Age:",
+  "about_age_value": "26 Ans",
+  "about_address_label": "Adresse:",
+  "about_address_value": "Geneva, Switzerland",
+  "about_email_label": "Email:",
+  "about_availability_text": "% Taux de disponibilité du <a href=\"https://status.goneix.net\" target=\"_blank\">Lab!</a>",
+  "about_cv_button": "Le CV publique arrive bientôt!",
+  "cv_coming_soon_alert": "Le CV publique arrive bientôt!",
+  "resume_nav_education": "Formation",
+  "resume_nav_experience": "Experience",
+  "resume_nav_skills": "Compétences",
+  "resume_nav_certification": "Certification",
+  "education_heading": "Formation",
+  "edu_1_date": "2019-2022",
+  "edu_1_title": "Ingénieur en informatique et réseaux de communication",
+  "edu_1_desc": "",
+  "edu_2_date": "2017-2019",
+  "edu_2_title": "D.U.T Réseaux & Télécommunications",
+  "edu_2_desc": "Formation dans les Télécommunications et en Administrations Système & Réseaux Informatiques.",
+  "edu_3_date": "2015-2017",
+  "edu_3_title": "Baccalauréat STI2D (SIN)",
+  "edu_3_desc": "Spécialisation : Systèmes d'Information et Numérique (SIN). <br>Mention Bien.",
+  "experience_heading": "Experience",
+  "exp_1_date": "Septembre 2023 - Aujourd'hui",
+  "exp_1_title": "Cloud & DevOps Engineer",
+  "exp_2_date": "Septembre 2022 - Août 2023",
+  "exp_2_title": "Responsable Technique plateformes de services VOIP",
+  "exp_3_date": "Septembre 2019 - Août 2022",
+  "exp_3_title": "Apprenti Ingénieur d'Exploitation & Expertise des Plateformes de Service Voice and Messaging",
+  "exp_3_desc": "Intégration d'une plateforme VOIP en Cloud Privé (IaaS) : <br>- Architecture des réseaux virtuels. <br>- Provisionning automatisé avec API Vra & Provider Terraform. <br>- Orchestration de l'installtion & Configuration de l'applicatif via Consul. <br>- Mise en place d'un Pipeline CI / CD.",
+  "exp_4_date": "Juin 2019 - Juillet 2019",
+  "exp_4_title": "Administrateur Système Junior",
+  "exp_4_desc": "Administrateur Système : <br> - Migration de serveur de monitoring. <br> - Projet de Migration du système d'hypervision & Migration de domaine Active directory pour un client.",
+  "exp_5_date": "Avril 2019 - Juin 2019",
+  "exp_5_title": "Stage Administrateur Système",
+  "exp_5_desc": "Moderniser le système de monitoring de l'entreprise et de ses clients : <br>- Migration automatisé vers <a href=\"https://centreon.com/\" target=\"_blank\" style=\"color: #a0f669; font-weight: 900\">Centreon</a> 19.04. <br>- Automatisation de l'export de configuration.<br>- Déploiement automatisé d'un serveur de monitoring.",
+  "skills_heading": "Compétences",
+  "skill_linux": "Administration Linux",
+  "skill_network": "Administration Réseau",
+  "skill_windows": "Administration Windows",
+  "skill_pfsense": "Pfsense",
+  "skill_cisco": "Cisco CLI",
+  "skill_vmware": "VMware Esxi & Vcenter",
+  "skill_mikrotik": "Mikrotik CLI",
+  "skill_ansible": "Ansible",
+  "skill_terraform": "Terraform",
+  "certification_heading": "Certification",
+  "cert_view": "Voir la certification",
+  "cert_1_date": "2023",
+  "cert_1_title": "Google Cloud Certified: Professional Cloud Architect",
+  "cert_1_desc": "",
+  "cert_2_date": "2022",
+  "cert_2_title": "Microsoft Certified: Azure Fundamentals (AZ-900)",
+  "cert_2_desc": "",
+  "cert_3_date": "2019",
+  "cert_3_title": "Cisco CCNA2 Routing & Switching",
+  "cert_3_desc": "Certification Cisco CCNA2 Obtenue dans le cadre de ma formation DUT R&T.",
+  "hire_title_prefix": "Je suis",
+  "hire_title_suffix": "Disponible",
+  "hire_desc": "Besoin d'un conseil IT ? <br> Ou tout simplement discuter ?",
+  "hire_button": "Envoyez-moi un message !",
+  "contact_heading_big": "Contact",
+  "contact_heading": "Me Contacter",
+  "contact_address_title": "Adresse",
+  "contact_github_title": "Github",
+  "contact_email_title": "Adresse email",
+  "contact_linkedin_title": "LinkedIn",
+  "footer_links_title": "Liens",
+  "footer_lab_link": "LAB - GoneIX",
+  "footer_docs_link": "Docs - GoneIX",
+  "footer_questions_title": "Des questions?",
+  "footer_made_with": "Made with"
+}
diff --git a/index.html b/index.html
index 10c349d..6bead53 100644
--- a/index.html
+++ b/index.html
@@ -44,10 +44,20 @@
       </button>
       <div class="collapse navbar-collapse" id="ftco-nav">
         <ul class="navbar-nav nav ml-auto">
-          <li class="nav-item"><a href="#home-section" class="nav-link active"><span>Accueil</span></a></li>
-          <li class="nav-item"><a href="#about-section" class="nav-link"><span>À propos de moi</span></a></li>
-          <li class="nav-item"><a href="#resume-section" class="nav-link "><span>CV</span></a></li>
-          <li class="nav-item"><a href="#contact-section" class="nav-link"><span>Contact</span></a></li>
+          <li class="nav-item"><a href="#home-section" class="nav-link active"><span data-i18n="nav_home">Accueil</span></a></li>
+          <li class="nav-item"><a href="#about-section" class="nav-link"><span data-i18n="nav_about">À propos de moi</span></a></li>
+          <li class="nav-item"><a href="#resume-section" class="nav-link "><span data-i18n="nav_resume">CV</span></a></li>
+          <li class="nav-item"><a href="#contact-section" class="nav-link"><span data-i18n="nav_contact">Contact</span></a></li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Language
+            </a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <a class="dropdown-item lang-switch" href="#" data-lang="en" onclick="window.translator.setLanguage('en'); return false;">English</a>
+              <a class="dropdown-item lang-switch" href="#" data-lang="fr" onclick="window.translator.setLanguage('fr'); return false;">Français</a>
+              <a class="dropdown-item lang-switch" href="#" data-lang="es" onclick="window.translator.setLanguage('es'); return false;">Español</a>
+            </div>
+          </li>
         </ul>
       </div>
     </div>
@@ -59,10 +69,10 @@
         style="height: 184px;">
         <div class="col-lg-8 col-md-6 ftco-animate d-flex align-items-center fadeInUp ftcoprogress-bar">
           <div class="text text-center">
-            <span class="subheading">Bienvenue sur mon Site !</span>
-            <h1>Julien Da Cunha</h1>
-            <h2>Je suis
-              <span class="txt-rotate" data-period="2000"
+            <span class="subheading" data-i18n="hero_subheading">Bienvenue sur mon Site !</span>
+            <h1 data-i18n="hero_name">Julien Da Cunha</h1>
+            <h2><span data-i18n="hero_intro">Je suis</span>
+              <span class="txt-rotate" data-period="2000" data-i18n="hero_roles"
                 data-rotate="[ &quot;Passionné!&quot;, &quot;Ingénieur Système&quot;, &quot;Ingénieur Réseau&quot;, &quot;Ingénieur Cloud & DevOps&quot; ]"><span
                   class="wrap"></span></span>
             </h2>
@@ -91,15 +101,15 @@ <h2>Je suis
         <div class="col-md-6 col-lg-6 pl-md-5 py-5">
           <div class="row justify-content-start pb-3">
             <div class="col-md-12 heading-section ftco-animate fadeInUp ftcoprogress-bar">
-              <h1 class="big">À propos</h1>
-              <h2 class="mb-4">À propos de moi</h2>
-              <p>Derrière un clavier depuis tout petit, je suis passionné par l'informatique en général et plus
+              <h1 class="big" data-i18n="about_heading_big">À propos</h1>
+              <h2 class="mb-4" data-i18n="about_heading">À propos de moi</h2>
+              <p data-i18n="about_desc">Derrière un clavier depuis tout petit, je suis passionné par l'informatique en général et plus
                 specifiquement des Réseaux IP, du Cloud et de la Virtualisation.</p>
               <ul class="about-info mt-4 px-md-0 px-2">
-                <li class="d-flex"><span>Nom:</span> <span>Julien Da Cunha</span></li>
-                <li class="d-flex"><span>Age:</span> <span>26 Ans</span></li>
-                <li class="d-flex"><span>Adresse:</span> <span>Geneva, Switzerland</span></li>
-                <li class="d-flex"><span>Email:</span> <span><a
+                <li class="d-flex"><span data-i18n="about_name_label">Nom:</span> <span data-i18n="about_name_value">Julien Da Cunha</span></li>
+                <li class="d-flex"><span data-i18n="about_age_label">Age:</span> <span data-i18n="about_age_value">26 Ans</span></li>
+                <li class="d-flex"><span data-i18n="about_address_label">Adresse:</span> <span data-i18n="about_address_value">Geneva, Switzerland</span></li>
+                <li class="d-flex"><span data-i18n="about_email_label">Email:</span> <span><a
                       href="mailto:julien@dacunha.ovh">julien@dacunha.ovh</a></span></li>
               </ul>
             </div>
@@ -108,12 +118,12 @@ <h2 class="mb-4">À propos de moi</h2>
             <div class="text">
               <p class="mb-4">
                 <span class="number" data-number="100">100</span>
-                <span>% Taux de disponibilité du <a href="https://status.goneix.net" target="_blank">Lab!</a></span>
+                <span data-i18n="about_availability_text">% Taux de disponibilité du <a href="https://status.goneix.net" target="_blank">Lab!</a></span>
               </p>
-              <p><button onclick="pascv" class="btn btn-primary py-3 px-3">Le CV publique arrive bientôt!</button></p>
+              <p><button onclick="pascv()" class="btn btn-primary py-3 px-3" data-i18n="about_cv_button">Le CV publique arrive bientôt!</button></p>
               <script>
                 function pascv() {
-                  alert("Le CV publique arrive bientôt!");
+                  alert(window.translator.getTranslation("cv_coming_soon_alert") || "Le CV publique arrive bientôt!");
                 }
               </script>
             </div>
@@ -154,25 +164,25 @@ <h2 class="mb-4">À propos de moi</h2>
         <div class="col-md-3">
           <nav id="navi">
             <ul>
-              <li><a href="#page-1" class="">Formation</a></li>
-              <li><a href="#page-2" class="">Experience</a></li>
-              <li><a href="#page-3" class="current">Compétences</a></li>
-              <li><a href="#page-4" class="">Certification</a></li>
+              <li><a href="#page-1" class="" data-i18n="resume_nav_education">Formation</a></li>
+              <li><a href="#page-2" class="" data-i18n="resume_nav_experience">Experience</a></li>
+              <li><a href="#page-3" class="current" data-i18n="resume_nav_skills">Compétences</a></li>
+              <li><a href="#page-4" class="" data-i18n="resume_nav_certification">Certification</a></li>
             </ul>
           </nav>
         </div>
         <div class="col-md-9">
           <div id="page-1" class="page one">
-            <h2 class="heading">Formation</h2>
+            <h2 class="heading" data-i18n="education_heading">Formation</h2>
             <div class="resume-wrap d-flex ftco-animate fadeInUp ftcoprogress-bar">
               <div class="icon d-flex align-items-center justify-content-center">
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">2019-2022</span>
-                <h2>Ingénieur en informatique et réseaux de communication</h2>
+                <span class="date" data-i18n="edu_1_date">2019-2022</span>
+                <h2 data-i18n="edu_1_title">Ingénieur en informatique et réseaux de communication</h2>
                 <span class="position"><a href="https://www.cpe.fr/" target="_blank">CPE Lyon</a></span>
-                <p></p>
+                <p data-i18n="edu_1_desc"></p>
               </div>
             </div>
             <div class="resume-wrap d-flex ftco-animate fadeInUp ftcoprogress-bar">
@@ -180,10 +190,10 @@ <h2>Ingénieur en informatique et réseaux de communication</h2>
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">2017-2019</span>
-                <h2>D.U.T Réseaux & Télécommunications</h2>
+                <span class="date" data-i18n="edu_2_date">2017-2019</span>
+                <h2 data-i18n="edu_2_title">D.U.T Réseaux & Télécommunications</h2>
                 <span class="position"><a href="https://www.iut-acy.univ-smb.fr/" target="_blank">IUT d'Annecy</a> | Université Savoie Mont-Blanc</span>
-                <p>Formation dans les Télécommunications et en Administrations Système & Réseaux Informatiques.</p>
+                <p data-i18n="edu_2_desc">Formation dans les Télécommunications et en Administrations Système & Réseaux Informatiques.</p>
               </div>
             </div>
             <div class="resume-wrap d-flex ftco-animate fadeInUp ftcoprogress-bar">
@@ -191,22 +201,22 @@ <h2>D.U.T Réseaux & Télécommunications</h2>
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">2015-2017</span>
-                <h2>Baccalauréat STI2D (SIN)</h2>
+                <span class="date" data-i18n="edu_3_date">2015-2017</span>
+                <h2 data-i18n="edu_3_title">Baccalauréat STI2D (SIN)</h2>
                 <span class="position"><a href="http://www.lycee-benjamin-franklin.fr/" target="_blank">Lycée Benjamin Franklin</a> | Orléans, France</span>
-                <p>Spécialisation : Systèmes d'Information et Numérique (SIN). <br>Mention Bien.</p>
+                <p data-i18n="edu_3_desc">Spécialisation : Systèmes d'Information et Numérique (SIN). <br>Mention Bien.</p>
               </div>
             </div>
           </div>
           <div id="page-2" class="page two">
-            <h2 class="heading">Experience</h2>
+            <h2 class="heading" data-i18n="experience_heading">Experience</h2>
             <div class="resume-wrap d-flex ftco-animate fadeInUp ftcoprogress-bar">
               <div class="icon d-flex align-items-center justify-content-center">
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">Septembre 2023 - Aujourd'hui</span>
-                <h2>Cloud & DevOps Engineer</h2>
+                <span class="date" data-i18n="exp_1_date">Septembre 2023 - Aujourd'hui</span>
+                <h2 data-i18n="exp_1_title">Cloud & DevOps Engineer</h2>
                 <span class="position"><a href="https://alpian.com" target="new_blank">Alpian</a></span>
               </div>
             </div>            
@@ -215,8 +225,8 @@ <h2>Cloud & DevOps Engineer</h2>
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">Septembre 2022 - Août 2023</span>
-                <h2>Responsable Technique plateformes de services VOIP</h2>
+                <span class="date" data-i18n="exp_2_date">Septembre 2022 - Août 2023</span>
+                <h2 data-i18n="exp_2_title">Responsable Technique plateformes de services VOIP</h2>
                 <span class="position"><a href="https://orange.com" target="new_blank">Orange France</a></span>
               </div>
             </div>
@@ -225,10 +235,10 @@ <h2>Responsable Technique plateformes de services VOIP</h2>
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">Septembre 2019 - Août 2022</span>
-                <h2>Apprenti Ingénieur d'Exploitation & Expertise des Plateformes de Service Voice and Messaging</h2>
+                <span class="date" data-i18n="exp_3_date">Septembre 2019 - Août 2022</span>
+                <h2 data-i18n="exp_3_title">Apprenti Ingénieur d'Exploitation & Expertise des Plateformes de Service Voice and Messaging</h2>
                 <span class="position"><a href="https://orange.com" target="new_blank">Orange France</a></span>
-                <p>Intégration d'une plateforme VOIP en Cloud Privé (IaaS) : <br>- Architecture des réseaux virtuels.
+                <p data-i18n="exp_3_desc">Intégration d'une plateforme VOIP en Cloud Privé (IaaS) : <br>- Architecture des réseaux virtuels.
                   <br>- Provisionning automatisé avec API Vra & Provider Terraform. <br>- Orchestration de l'installtion
                   & Configuration de l'applicatif via Consul. <br>- Mise en place d'un Pipeline CI / CD.</p>
               </div>
@@ -238,10 +248,10 @@ <h2>Apprenti Ingénieur d'Exploitation & Expertise des Plateformes de Service Vo
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">Juin 2019 - Juillet 2019</span>
-                <h2>Administrateur Système Junior</h2>
+                <span class="date" data-i18n="exp_4_date">Juin 2019 - Juillet 2019</span>
+                <h2 data-i18n="exp_4_title">Administrateur Système Junior</h2>
                 <span class="position"><a href="https://new.ilemgroup.com" target="new_blank">Ilem Group</a></span>
-                <p>Administrateur Système : <br> - Migration de serveur de monitoring. <br> - Projet de Migration du
+                <p data-i18n="exp_4_desc">Administrateur Système : <br> - Migration de serveur de monitoring. <br> - Projet de Migration du
                   système d'hypervision & Migration de domaine Active directory pour un client.</p>
               </div>
             </div>
@@ -250,21 +260,21 @@ <h2>Administrateur Système Junior</h2>
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">Avril 2019 - Juin 2019</span>
-                <h2>Stage Administrateur Système</h2>
+                <span class="date" data-i18n="exp_5_date">Avril 2019 - Juin 2019</span>
+                <h2 data-i18n="exp_5_title">Stage Administrateur Système</h2>
                 <span class="position"><a href="https://new.ilemgroup.com" target="new_blank">Ilem Group</a></span>
-                <p>Moderniser le système de monitoring de l'entreprise et de ses clients : <br>- Migration automatisé
+                <p data-i18n="exp_5_desc">Moderniser le système de monitoring de l'entreprise et de ses clients : <br>- Migration automatisé
                   vers <a href="https://centreon.com/" target="_blank" style="color: #a0f669; font-weight: 900">Centreon</a> 19.04. <br>- Automatisation de l'export de configuration.<br>- Déploiement automatisé d'un
                   serveur de monitoring.</p>
               </div>
             </div>
           </div>
           <div id="page-3" class="page three">
-            <h2 class="heading">Compétences</h2>
+            <h2 class="heading" data-i18n="skills_heading">Compétences</h2>
             <div class="row progress-circle mb-5">
               <div class="col-lg-4 mb-4">
                 <div class="bg-white rounded-lg shadow p-4">
-                  <h2 class="h5 font-weight-bold text-center mb-4">Administration Linux</h2>
+                  <h2 class="h5 font-weight-bold text-center mb-4" data-i18n="skill_linux">Administration Linux</h2>
 
                   <div class="progress mx-auto" data-value="80">
                     <span class="progress-left">
@@ -282,7 +292,7 @@ <h2 class="h5 font-weight-bold text-center mb-4">Administration Linux</h2>
               </div>
               <div class="col-lg-4 mb-4">
                 <div class="bg-white rounded-lg shadow p-4">
-                  <h2 class="h5 font-weight-bold text-center mb-4">Administration Réseau</h2>
+                  <h2 class="h5 font-weight-bold text-center mb-4" data-i18n="skill_network">Administration Réseau</h2>
 
                   <div class="progress mx-auto" data-value="75">
                     <span class="progress-left">
@@ -300,7 +310,7 @@ <h2 class="h5 font-weight-bold text-center mb-4">Administration Réseau</h2>
               </div>
               <div class="col-lg-4 mb-4">
                 <div class="bg-white rounded-lg shadow p-4">
-                  <h2 class="h5 font-weight-bold text-center mb-4">Administration Windows</h2>
+                  <h2 class="h5 font-weight-bold text-center mb-4" data-i18n="skill_windows">Administration Windows</h2>
 
                   <div class="progress mx-auto" data-value="70">
                     <span class="progress-left">
@@ -320,7 +330,7 @@ <h2 class="h5 font-weight-bold text-center mb-4">Administration Windows</h2>
             <div class="row">
               <div class="col-md-6 animate-box">
                 <div class="progress-wrap ftco-animate fadeInUp ftcoprogress-bar">
-                  <h3>Pfsense</h3>
+                  <h3 data-i18n="skill_pfsense">Pfsense</h3>
                   <div class="progress">
                     <div class=" progress-bar color-1" role="progressbar" aria-valuenow="90" aria-valuemin="0"
                       aria-valuemax="100" style="width:90%">
@@ -331,7 +341,7 @@ <h3>Pfsense</h3>
               </div>
               <div class="col-md-6 animate-box">
                 <div class="progress-wrap ftco-animate fadeInUp ftcoprogress-bar">
-                  <h3>Cisco CLI</h3>
+                  <h3 data-i18n="skill_cisco">Cisco CLI</h3>
                   <div class="progress">
                     <div class=" progress-bar color-2" role="progressbar" aria-valuenow="85" aria-valuemin="0"
                       aria-valuemax="100" style="width:85%">
@@ -342,7 +352,7 @@ <h3>Cisco CLI</h3>
               </div>
               <div class="col-md-6 animate-box">
                 <div class="progress-wrap ftco-animate fadeInUp ftcoprogress-bar">
-                  <h3>VMware Esxi & Vcenter</h3>
+                  <h3 data-i18n="skill_vmware">VMware Esxi & Vcenter</h3>
                   <div class="progress">
                     <div class=" progress-bar color-3" role="progressbar" aria-valuenow="95" aria-valuemin="0"
                       aria-valuemax="100" style="width:95%">
@@ -353,7 +363,7 @@ <h3>VMware Esxi & Vcenter</h3>
               </div>
               <div class="col-md-6 animate-box">
                 <div class="progress-wrap ftco-animate fadeInUp ftcoprogress-bar">
-                  <h3>Mikrotik CLI</h3>
+                  <h3 data-i18n="skill_mikrotik">Mikrotik CLI</h3>
                   <div class="progress">
                     <div class=" progress-bar color-4" role="progressbar" aria-valuenow="65" aria-valuemin="0"
                       aria-valuemax="100" style="width:65%">
@@ -364,7 +374,7 @@ <h3>Mikrotik CLI</h3>
               </div>
               <div class="col-md-6 animate-box">
                 <div class="progress-wrap ftco-animate fadeInUp ftcoprogress-bar">
-                  <h3>Ansible</h3>
+                  <h3 data-i18n="skill_ansible">Ansible</h3>
                   <div class="progress">
                     <div class=" progress-bar color-5" role="progressbar" aria-valuenow="70" aria-valuemin="0"
                       aria-valuemax="100" style="width:70%">
@@ -375,7 +385,7 @@ <h3>Ansible</h3>
               </div>
               <div class="col-md-6 animate-box">
                 <div class="progress-wrap ftco-animate fadeInUp ftcoprogress-bar">
-                  <h3>Terraform</h3>
+                  <h3 data-i18n="skill_terraform">Terraform</h3>
                   <div class="progress">
                     <div class=" progress-bar color-6" role="progressbar" aria-valuenow="80" aria-valuemin="0"
                       aria-valuemax="100" style="width:80%">
@@ -387,16 +397,16 @@ <h3>Terraform</h3>
             </div>
           </div>
           <div id="page-4" class="page four">
-            <h2 class="heading">Certification</h2>
+            <h2 class="heading" data-i18n="certification_heading">Certification</h2>
             <div class="resume-wrap d-flex ftco-animate fadeInUp ftcoprogress-bar">
               <div class="icon d-flex align-items-center justify-content-center">
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">2023</span>
-                <h2>Google Cloud Certified: Professional Cloud Architect</h2>
-                <span class="position"><a href="https://www.credential.net/bb294605-541c-4bd9-affd-647c54890651" target="_blank">Voir la certification</a></span>
-                <p></p>
+                <span class="date" data-i18n="cert_1_date">2023</span>
+                <h2 data-i18n="cert_1_title">Google Cloud Certified: Professional Cloud Architect</h2>
+                <span class="position"><a href="https://www.credential.net/bb294605-541c-4bd9-affd-647c54890651" target="_blank" data-i18n="cert_view">Voir la certification</a></span>
+                <p data-i18n="cert_1_desc"></p>
               </div>
             </div>
             <div class="resume-wrap d-flex ftco-animate fadeInUp ftcoprogress-bar">
@@ -404,10 +414,10 @@ <h2>Google Cloud Certified: Professional Cloud Architect</h2>
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">2022</span>
-                <h2>Microsoft Certified: Azure Fundamentals (AZ-900)</h2>
-                <span class="position"><a href="https://www.credly.com/badges/15a0481d-6578-4d26-87e4-b6eae713b92c?source=linked_in_profile" target="_blank">Voir la certification</a></span>
-                <p></p>
+                <span class="date" data-i18n="cert_2_date">2022</span>
+                <h2 data-i18n="cert_2_title">Microsoft Certified: Azure Fundamentals (AZ-900)</h2>
+                <span class="position"><a href="https://www.credly.com/badges/15a0481d-6578-4d26-87e4-b6eae713b92c?source=linked_in_profile" target="_blank" data-i18n="cert_view">Voir la certification</a></span>
+                <p data-i18n="cert_2_desc"></p>
               </div>
             </div>
             <div class="resume-wrap d-flex ftco-animate fadeInUp ftcoprogress-bar">
@@ -415,10 +425,10 @@ <h2>Microsoft Certified: Azure Fundamentals (AZ-900)</h2>
                 <span class="flaticon-ideas"></span>
               </div>
               <div class="text pl-3">
-                <span class="date">2019</span>
-                <h2>Cisco CCNA2 Routing & Switching</h2>
+                <span class="date" data-i18n="cert_3_date">2019</span>
+                <h2 data-i18n="cert_3_title">Cisco CCNA2 Routing & Switching</h2>
                 <span class="position"><a href="https://www.iut-acy.univ-smb.fr/" target="_blank">IUT d'Annecy</a></span>
-                <p>Certification Cisco CCNA2 Obtenue dans le cadre de ma formation DUT R&T.</p>
+                <p data-i18n="cert_3_desc">Certification Cisco CCNA2 Obtenue dans le cadre de ma formation DUT R&T.</p>
               </div>
             </div>
           </div>
@@ -432,9 +442,9 @@ <h2>Cisco CCNA2 Routing & Switching</h2>
     <div class="container">
       <div class="row justify-content-center">
         <div class="col-md-7 ftco-animate text-center">
-          <h2>Je suis <span>Disponible</span></h2>
-          <p>Besoin d'un conseil IT ? <br> Ou tout simplement discuter ?</p>
-          <p class="mb-0"><a href="mailto:julien@dacunha.ovh" class="btn btn-primary py-3 px-5">Envoyez-moi un message
+          <h2><span data-i18n="hire_title_prefix">Je suis</span> <span data-i18n="hire_title_suffix">Disponible</span></h2>
+          <p data-i18n="hire_desc">Besoin d'un conseil IT ? <br> Ou tout simplement discuter ?</p>
+          <p class="mb-0"><a href="mailto:julien@dacunha.ovh" class="btn btn-primary py-3 px-5" data-i18n="hire_button">Envoyez-moi un message
               !</a></p>
         </div>
       </div>
@@ -444,8 +454,8 @@ <h2>Je suis <span>Disponible</span></h2>
     <div class="container">
       <div class="row justify-content-center mb-5 pb-3">
         <div class="col-md-7 heading-section text-center ftco-animate">
-          <h1 class="big big-2">Contact</h1>
-          <h2 class="mb-4">Me Contacter</h2>
+          <h1 class="big big-2" data-i18n="contact_heading_big">Contact</h1>
+          <h2 class="mb-4" data-i18n="contact_heading">Me Contacter</h2>
         </div>
       </div>
       <div class="row d-flex contact-info mb-5">
@@ -455,7 +465,7 @@ <h2 class="mb-4">Me Contacter</h2>
               <span class="icon-map-signs"></span>
             </div>
             <div>
-              <h3 class="mb-4">Adresse</h3>
+              <h3 class="mb-4" data-i18n="contact_address_title">Adresse</h3>
               <p><a href="https://www.google.com/maps/search/Geneva" target="new_blank">Geneva, Switzerland</a></p>
             </div>
           </div>
@@ -465,7 +475,7 @@ <h3 class="mb-4">Adresse</h3>
             <div class="icon d-flex align-items-center justify-content-center">
               <span class="icon-github"></span>
             </div>
-            <h3 class="mb-4">Github</h3>
+            <h3 class="mb-4" data-i18n="contact_github_title">Github</h3>
             <p><a href="https://github.com/juliendcna" target="new_blank">juliendcna</a></p>
           </div>
         </div>
@@ -475,7 +485,7 @@ <h3 class="mb-4">Github</h3>
               <span class="icon-paper-plane"></span>
             </div>
             <div>
-              <h3 class="mb-4">Adresse email</h3>
+              <h3 class="mb-4" data-i18n="contact_email_title">Adresse email</h3>
               <p><a href="mailto:julien@dacunha.ovh">julien@dacunha.ovh</a></p>
             </div>
           </div>
@@ -486,7 +496,7 @@ <h3 class="mb-4">Adresse email</h3>
               <span class="icon-linkedin"></span>
             </div>
             <div>
-              <h3 class="mb-4">LinkedIn</h3>
+              <h3 class="mb-4" data-i18n="contact_linkedin_title">LinkedIn</h3>
               <p><a href="https://www.linkedin.com/in/julien-da-cunha">Julien Da Cunha</a></p>
             </div>
           </div>
@@ -502,7 +512,7 @@ <h3 class="mb-4">LinkedIn</h3>
         </div>
         <div class="col-md">
           <div class="ftco-footer-widget mb-4 ml-md-4">
-            <h2 class="ftco-heading-2">Liens</h2>
+            <h2 class="ftco-heading-2" data-i18n="footer_links_title">Liens</h2>
             <ul class="list-unstyled">
               <li><iframe src="https://status.goneix.net/badge?theme=dark" width="250" height="30" frameborder="0" scrolling="no"></iframe></li>
               <li><a href="https://goneix.net" target="new_blank"><span
@@ -516,7 +526,7 @@ <h2 class="ftco-heading-2">Liens</h2>
         </div>
         <div class="col-md">
           <div class="ftco-footer-widget mb-4">
-            <h2 class="ftco-heading-2">Des questions?</h2>
+            <h2 class="ftco-heading-2" data-i18n="footer_questions_title">Des questions?</h2>
             <div class="block-23 mb-3">
               <ul>
                 <li><a href="mailto:julien@dacunha.ovh"><span class="icon icon-envelope"></span><span
@@ -529,7 +539,7 @@ <h2 class="ftco-heading-2">Des questions?</h2>
       </div>
       <div class="row">
         <div class="col-md-12 text-center">
-          <p>Made with <i class="icon-heart color-danger" aria-hidden="true"></i></p>
+          <p><span data-i18n="footer_made_with">Made with</span> <i class="icon-heart color-danger" aria-hidden="true"></i></p>
         </div>
       </div>
     </div>
@@ -553,6 +563,7 @@ <h2 class="ftco-heading-2">Des questions?</h2>
   <script src="js/jquery.animateNumber.min.js"></script>
   <script src="js/scrollax.min.js"></script>
   <script src="js/main.js"></script>
+  <script src="js/translations.js"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag() { dataLayer.push(arguments); }
diff --git a/js/main.js b/js/main.js
index ce948e7..7f3b387 100644
--- a/js/main.js
+++ b/js/main.js
@@ -330,15 +330,38 @@ TxtRotate.prototype.tick = function() {
  }, delta);
 };
 
-window.onload = function() {
+// Expose TxtRotate to global scope so we can access it from translations.js
+window.TxtRotate = TxtRotate;
+
+window.initTxtRotate = function() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
-   if (toRotate) {
-     new TxtRotate(elements[i], JSON.parse(toRotate), period);
+
+   // Clear existing instance if any (rudimentary check, better to store instances)
+   // But since TxtRotate modifies innerHTML, we might just need to restart it or let it handle itself.
+   // The issue is the old loop is still running via setTimeout.
+   // We need a way to stop the old loop.
+
+   if (elements[i]._txtRotate) {
+      elements[i]._txtRotate.isDeleting = false;
+      elements[i]._txtRotate.toRotate = JSON.parse(toRotate);
+      elements[i]._txtRotate.loopNum = 0;
+      elements[i]._txtRotate.txt = '';
+      // We don't need to create a new instance, just update the existing one if possible
+      // But TxtRotate structure above doesn't easily allow stopping.
+      // Let's attach the instance to the element so we can control it.
+   } else {
+       if (toRotate) {
+         elements[i]._txtRotate = new TxtRotate(elements[i], JSON.parse(toRotate), period);
+       }
    }
  }
+};
+
+window.onload = function() {
+ window.initTxtRotate();
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
diff --git a/js/translations.js b/js/translations.js
new file mode 100644
index 0000000..d6c0090
--- /dev/null
+++ b/js/translations.js
@@ -0,0 +1,87 @@
+
+class Translator {
+  constructor() {
+    this._lang = this.getLanguage();
+    this._elements = document.querySelectorAll("[data-i18n]");
+  }
+
+  getLanguage() {
+    var storedLang = localStorage.getItem("language");
+    if (storedLang) {
+      return storedLang;
+    } else {
+      var lang = navigator.language || navigator.userLanguage;
+      if (lang.startsWith("fr")) {
+        return "fr";
+      } else if (lang.startsWith("es")) {
+        return "es";
+      } else {
+        return "en";
+      }
+    }
+  }
+
+  setLanguage(lang) {
+    this._lang = lang;
+    localStorage.setItem("language", lang);
+    this.translate();
+    this.updateActiveLanguage(lang);
+  }
+
+  async translate() {
+    try {
+      const response = await fetch(`data/${this._lang}.json`);
+      const translations = await response.json();
+      this._translations = translations; // Store for later access
+      this._elements.forEach((element) => {
+        const key = element.getAttribute("data-i18n");
+        if (translations[key]) {
+          if (element.hasAttribute("data-i18n-target")) {
+             const target = element.getAttribute("data-i18n-target");
+             element.setAttribute(target, translations[key]);
+          } else {
+             if (key === 'hero_roles') {
+                element.setAttribute('data-rotate', JSON.stringify(translations[key]));
+             } else {
+                element.innerHTML = translations[key];
+             }
+          }
+        }
+      });
+
+      // Update TxtRotate
+      if (translations['hero_roles'] && window.initTxtRotate) {
+         window.initTxtRotate();
+      }
+
+    } catch (error) {
+      console.error("Error loading translations:", error);
+    }
+  }
+
+  getTranslation(key) {
+    return this._translations && this._translations[key] ? this._translations[key] : key;
+  }
+
+  updateActiveLanguage(lang) {
+    document.querySelectorAll('.lang-switch').forEach(btn => {
+        btn.classList.remove('active');
+        if(btn.dataset.lang === lang) {
+            btn.classList.add('active');
+        }
+    });
+  }
+
+  init() {
+    this.translate();
+    this.updateActiveLanguage(this._lang);
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const translator = new Translator();
+  translator.init();
+
+  // Expose to global scope so buttons can use it
+  window.translator = translator;
+});