Add multi-language support (English, Spanish, French) by google-labs-jules[bot] · Pull Request #2 · juliendcna/juliendcna.github.io

google-labs-jules · 2025-12-02T10:28:58Z

This PR adds multi-language support to the website, including English, French, and Spanish. It features auto-detection of the user's language and a manual language switcher in the navbar. The implementation uses JSON files for translations and a custom JavaScript class to handle the switching logic and DOM updates. It also ensures the dynamic typing effect in the hero section is correctly synchronized with the selected language.

PR created automatically by Jules for task 14198645015781419099 started by @juliendcna

- 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

google-labs-jules · 2025-12-02T10:29:00Z

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

For security, I will only act on instructions from the user who triggered this task.

New to Jules? Learn more at jules.google/docs.

Copilot

Pull request overview

This PR implements multi-language support for the personal portfolio website, adding English, Spanish, and French translations with automatic language detection and a manual switcher in the navigation bar. The implementation uses a custom JavaScript Translator class that loads translations from JSON files and updates the DOM using data-i18n attributes, with special handling for the dynamic typing effect in the hero section.

Custom translation system using data attributes and JSON files
Auto-detection based on browser language with localStorage persistence
Language switcher dropdown in navbar with active state indication

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 16 comments.

Show a summary per file

File	Description
js/translations.js	New file implementing the `Translator` class that handles language detection, translation loading from JSON, DOM updates, and integration with the text rotation animation
js/main.js	Modified `TxtRotate` initialization to be callable globally and added logic to handle language switching by attempting to update existing animation instances
index.html	Added `data-i18n` attributes throughout the page for translatable content, language switcher dropdown in navbar, fixed missing parentheses in button onclick, and included translations.js script
data/fr.json	French translations for all website content with 87 translation keys
data/es.json	Spanish translations for all website content with 87 translation keys
data/en.json	English translations for all website content with 87 translation keys

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-02T15:41:48Z

+  "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.",


Spelling error in French: "hypervision" should be "hyperviseur" (the correct French term for hypervisor/hypervisor system).

Suggested change

"exp_4_desc": "Administrateur Système : - Migration de serveur de monitoring. - Projet de Migration du système d'hypervision & Migration de domaine Active directory pour un client.",

"exp_4_desc": "Administrateur Système : - Migration de serveur de monitoring. - Projet de Migration du système d'hyperviseur & Migration de domaine Active directory pour un client.",

Copilot · 2025-12-02T15:41:49Z

+  "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.",


Spelling error in French: "specifiquement" should be "spécifiquement" (missing the accent on the é).

Suggested change

"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_desc": "Derrière un clavier depuis tout petit, je suis passionné par l'informatique en général et plus spécifiquement des Réseaux IP, du Cloud et de la Virtualisation.",

Copilot · 2025-12-02T15:41:49Z

+  "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.",


Spelling error in French: "installtion" should be "installation".

Suggested change

"exp_3_desc": "Intégration d'une plateforme VOIP en Cloud Privé (IaaS) : - Architecture des réseaux virtuels. - Provisionning automatisé avec API Vra & Provider Terraform. - Orchestration de l'installtion & Configuration de l'applicatif via Consul. - Mise en place d'un Pipeline CI / CD.",

"exp_3_desc": "Intégration d'une plateforme VOIP en Cloud Privé (IaaS) : - Architecture des réseaux virtuels. - Provisionning automatisé avec API Vra & Provider Terraform. - Orchestration de l'installation & Configuration de l'applicatif via Consul. - Mise en place d'un Pipeline CI / CD.",

Copilot · 2025-12-02T15:41:49Z

+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Language


The language dropdown button lacks an accessible label. The text "Language" doesn't change when a different language is selected, making it unclear to users which language is currently active. Consider updating the dropdown label to show the current language or adding an aria-label that reflects the current selection.

Suggested change

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

Language

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Language: Français">

Français

Copilot · 2025-12-02T15:41:50Z

+
+  async translate() {
+    try {
+      const response = await fetch(`data/${this._lang}.json`);


Missing HTTP response status check: The code doesn't verify if the fetch was successful (e.g., checking response.ok or response.status). A 404 or 500 error could still call response.json() and fail silently or with a confusing error. Add a check like if (!response.ok) throw new Error('Failed to load translations'); before parsing the JSON.

Suggested change

const response = await fetch(`data/${this._lang}.json`);

const response = await fetch(`data/${this._lang}.json`);

if (!response.ok) {

throw new Error(`Failed to load translations: ${response.status} ${response.statusText}`);

}

Copilot · 2025-12-02T15:41:51Z

+class Translator {
+  constructor() {
+    this._lang = this.getLanguage();
+    this._elements = document.querySelectorAll("[data-i18n]");


The _elements property is only queried once in the constructor, which means dynamically added elements with data-i18n attributes won't be translated. Consider re-querying elements in the translate() method or providing a method to refresh the element list.

Copilot · 2025-12-02T15:41:51Z

              <script>
                function pascv() {
-                  alert("Le CV publique arrive bientôt!");
+                  alert(window.translator.getTranslation("cv_coming_soon_alert") || "Le CV publique arrive bientôt!");


The alert message retrieval could fail silently if window.translator is not initialized yet. Consider adding a fallback or checking if window.translator exists before calling getTranslation().

Suggested change

alert(window.translator.getTranslation("cv_coming_soon_alert") || "Le CV publique arrive bientôt!");

var message = (window.translator && typeof window.translator.getTranslation === "function")

? window.translator.getTranslation("cv_coming_soon_alert")

: null;

alert(message || "Le CV publique arrive bientôt!");

Copilot · 2025-12-02T15:41:52Z

+  "about_cv_button": "Le CV publique arrive bientôt!",
+  "cv_coming_soon_alert": "Le CV publique arrive bientôt!",


Spelling error in French: "publique" should be "public" in this context. In French, "CV" is masculine, so the adjective should be "public" not "publique".

Suggested change

"about_cv_button": "Le CV publique arrive bientôt!",

"cv_coming_soon_alert": "Le CV publique arrive bientôt!",

"about_cv_button": "Le CV public arrive bientôt!",

"cv_coming_soon_alert": "Le CV public arrive bientôt!",

Copilot · 2025-12-02T15:41:52Z

+  "about_cv_button": "Le CV publique arrive bientôt!",
+  "cv_coming_soon_alert": "Le CV publique arrive bientôt!",


Spelling error in French: "publique" should be "public" in this context. In French, "CV" is masculine, so the adjective should be "public" not "publique".

Suggested change

"about_cv_button": "Le CV publique arrive bientôt!",

"cv_coming_soon_alert": "Le CV publique arrive bientôt!",

"about_cv_button": "Le CV public arrive bientôt!",

"cv_coming_soon_alert": "Le CV public arrive bientôt!",

Copilot · 2025-12-02T15:41:52Z

+  "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.",


Spelling error in French: "Provisionning" should be "Provisionnement" (the correct French term) or "Provisioning" (if using the English term).

Suggested change

"exp_3_desc": "Intégration d'une plateforme VOIP en Cloud Privé (IaaS) : - Architecture des réseaux virtuels. - Provisionning automatisé avec API Vra & Provider Terraform. - Orchestration de l'installtion & Configuration de l'applicatif via Consul. - Mise en place d'un Pipeline CI / CD.",

"exp_3_desc": "Intégration d'une plateforme VOIP en Cloud Privé (IaaS) : - Architecture des réseaux virtuels. - Provisionnement automatisé avec API Vra & Provider Terraform. - Orchestration de l'installtion & Configuration de l'applicatif via Consul. - Mise en place d'un Pipeline CI / CD.",

juliendcna requested a review from Copilot December 2, 2025 15:34

Copilot started reviewing on behalf of juliendcna December 2, 2025 15:34 View session

Copilot finished reviewing on behalf of juliendcna December 2, 2025 15:38

juliendcna approved these changes Dec 2, 2025

View reviewed changes

juliendcna merged commit a53fe09 into main Dec 2, 2025
7 checks passed

Copilot AI reviewed Dec 2, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add multi-language support (English, Spanish, French)#2

Add multi-language support (English, Spanish, French)#2
juliendcna merged 1 commit into
mainfrom
feature/multi-language-support

google-labs-jules Bot commented Dec 2, 2025

Uh oh!

google-labs-jules Bot commented Dec 2, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	"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_4_desc": "Administrateur Système : <br> - Migration de serveur de monitoring. <br> - Projet de Migration du système d'hyperviseur & Migration de domaine Active directory pour un client.",

	"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_desc": "Derrière un clavier depuis tout petit, je suis passionné par l'informatique en général et plus spécifiquement des Réseaux IP, du Cloud et de la Virtualisation.",

	"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_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'installation & Configuration de l'applicatif via Consul. <br>- Mise en place d'un Pipeline CI / CD.",

		<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Language

-                  alert(window.translator.getTranslation("cv_coming_soon_alert") || "Le CV publique arrive bientôt!");
+                  var message = (window.translator && typeof window.translator.getTranslation === "function")
+                    ? window.translator.getTranslation("cv_coming_soon_alert")
+                    : null;
+                  alert(message || "Le CV publique arrive bientôt!");

		"about_cv_button": "Le CV publique arrive bientôt!",
		"cv_coming_soon_alert": "Le CV publique arrive bientôt!",

Conversation

google-labs-jules Bot commented Dec 2, 2025

Uh oh!

google-labs-jules Bot commented Dec 2, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants