Refactored the multi-language logic.

README.md

@@ -7,33 +7,50 @@
 Academic Portfolio
 =====================================
 
-You can find the LIVE Website [here](https://nicolasmeseguer.github.io).
+HTML5 + CSS3 + JavaScript, responsive, and minimalistic template for academic portfolios (made from scratch, taking in consideration some details from Beautiful Jekyll templates).
 
-This template has been made from scratch taking in consideration some details from Beautiful Jekyll templates.
+You can find the LIVE Website [here](https://nicolasmeseguer.github.io).
 
 Reach me @ [[email protected]](mailto:[email protected]).
 
-Language
---------
-Add the class `language` to the code block to enable language translation.
+How To Use This Template
+=====================================
 
-```html
-<div data-es="Hola" data-en="Hello">
-  <!-- This won't work -->
-</code>
+1. Fork this repository [here](https://github.com/NicolasMeseguer/nicolasmeseguer.github.io/fork). 
+2. Go to the settings of your forked repository and rename it to `yourusername.github.io`.
+3. Create a new branch called `gh-pages`.
+4. Go to the settings of your repository and enable GitHub Pages.
+5. Select the `gh-pages` branch as the source.
+6. Consider giving this repository a star if you liked it 🤍.
+
+
+
+Multi-Language
+--------
+¿Want to add multi-language support? It's easy! Just follow these steps:
+
+1. Add your language to the `assets/js/languages.json` file, according to ISO 3166 alpha-2 standard. For example, for english and spanish:
+```json
+"en": {
+  "flag": "https://flagcdn.com/w20/us.png"
+},
+"es": {
+  "flag": "https://flagcdn.com/w20/es.png"
+}
 ```
 
+2. Add the class `language` to each `<tag>` you would like to translate, and include the `data-` attribute with the translation. For example, for a greeting in english and spanish:
 ```html
-<div class="language" data-es="Hola" data-en="Hello">
-  <!-- This will work -->
-</code>
+<tag class="language" data-en="Hello" data-es="Hola">
+  <!-- You can leave this empty -->
+</tag>
 ```
 
+3. Enjoy your multi-language portfolio! 🌍
+
 Contributing
 ------------
-Feel free to contribute to this project. You can do so by forking the project and submitting a pull request. You can find a list of issues/TODOs in the [issues tab](https://github.com/NicolasMeseguer/nicolasmeseguer.github.io/issues).
-
-Also, if you have any suggestions or feedback, please let me know by creating a new issue.
+Feel free to contribute to this project. You can do so by forking the project and submitting a pull request. Find a list of issues/TODOs in the [issues tab](https://github.com/NicolasMeseguer/nicolasmeseguer.github.io/issues). Suggestions or feedback are well received.
 
 License
 -------

assets/js/languageManager.js

@@ -0,0 +1,43 @@
+class LanguageManager {
+  constructor() {
+    this.loadConfig();
+  }
+
+  async loadConfig() {
+    const response = await fetch("/assets/js/languages.json");
+    this.config = await response.json();
+    this.availableLanguages = Object.keys(this.config.languages);
+    this.setLanguage(localStorage.getItem("lan") || this.config.default);
+  }
+
+  setLanguage(languageCode) {
+    if (!this.config.languages[languageCode]) {
+      console.warn(`Language code ${languageCode} not supported.`);
+      return;
+    }
+
+    localStorage.setItem("lan", languageCode);
+    const languageData = this.config.languages[languageCode];
+
+    $("#lan img").attr("src", languageData.flag);
+    $("body").attr("class", languageCode); // Usa la clase en el body para manejar estilos CSS
+
+    this.updateLanguage();
+  }
+
+  updateLanguage() {
+    const lang = localStorage.getItem("lan");
+    $(".language *").each(function () {
+      const element = $(this);
+      const translation = element.data(lang);
+      element.html(translation);
+    });
+  }
+
+  getNextLanguage() {
+      const currentLang = localStorage.getItem('lan');
+      let currentIndex = this.availableLanguages.indexOf(currentLang);
+      let nextIndex = (currentIndex + 1) % this.availableLanguages.length;
+      return this.availableLanguages[nextIndex];
+  }
+}

assets/js/languages.json

@@ -0,0 +1,11 @@
+{
+    "default": "en",
+    "languages": {
+        "en": {
+            "flag": "https://flagcdn.com/w20/us.png"
+        },
+        "es": {
+            "flag": "https://flagcdn.com/w20/es.png"
+        }
+    }
+}

assets/js/main.js

@@ -30,13 +30,8 @@ $(document).ready(function(){
 			localStorage.theme = "dark";
 	}
 
-	// First time, check the locale
-	let userLang = navigator.language || navigator.userLanguage;
-	if(localStorage.getItem("lan") === null){
-		localStorage.lan = "en";
-		if (userLang.split('-')[0] == "es")
-			localStorage.lan = "es";
-	}
+	// Create the language manager
+	const langManager = new LanguageManager();
 
 	// Maybe first time or not, so load the localStorage value
 	$('<link>').appendTo('head').attr({
@@ -54,12 +49,6 @@ $(document).ready(function(){
 		});
 		$('#theme').empty().append("<i class='fa-duotone fa-lightbulb-slash'></i>");
 	}
-	// Done because light is the one by default
-	if(localStorage.lan == "es") {
-		$('#lan img').attr("src","/assets/img/es_flag.webp");
-		$('#lan').addClass("es");
-	}
-	updateLanguage();
 
 	// Handle 'About Me' content
 	$('#aboutme').click(function(e) {
@@ -316,35 +305,12 @@ $(document).ready(function(){
 		}
 	})
 
-	// Animates the lan button + functionality
-	$('#lan').click(function(e) {
-		if(!$(e.currentTarget).hasClass('es')){
-			$(e.currentTarget).addClass('es');
-
-			$('#lan img').attr("src","/assets/img/es_flag.webp");
-
-			localStorage.lan = "es"
-		}
-		else {
-			$(e.currentTarget).removeClass('es');
-
-			$('#lan img').attr("src","/assets/img/en_flag.webp");
-
-			localStorage.lan = "en"
-		}
-
-		updateLanguage();
-	})
-
+	$('#lan').click(function() {
+        const newLang = langManager.getNextLanguage();
+        langManager.setLanguage(newLang);
+    });
 });
 
-function updateLanguage() {
-	let lang = localStorage.lan;
-	$(".language *").each(function(){
-		$(this).html( $(this).data(lang) );
-	});
-}
-
 function clearActiveLinks() {
 	$('#navbarList .nav-item .nav-link').each(function() {
 		$(this).removeClass('active');

index.html

@@ -1018,6 +1018,7 @@ <h4 class="particular-clickable">📞 <span class="particular-h4" data-es="Conta
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
 		<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
+		<script src="assets/js/languageManager.js"></script>
 		<script src="assets/js/main.js"></script>
 	</body>