From 173f104f58eda09df1505a912437efa1afc198bc Mon Sep 17 00:00:00 2001
From: Patrick Schwarzer <patrickschwarzer2000@gmail.com>
Date: Mon, 12 May 2025 22:22:12 +0200
Subject: [PATCH] Add language support with english and german supported

---
 index.html           | 51 ++++++++++++++++++++++----------------------
 languages/de-DE.json | 33 ++++++++++++++++++++++++++++
 languages/en.json    | 34 +++++++++++++++++++++++++++++
 script.js            | 16 ++++++++++++++
 4 files changed, 108 insertions(+), 26 deletions(-)
 create mode 100644 languages/de-DE.json
 create mode 100644 languages/en.json
diff --git a/index.html b/index.html
index b5f5af1..dc3bbb7 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,6 @@
 
-
 <!doctype html>
-<html>
+<html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -18,16 +17,16 @@
 
         <ul>
           <li>
-            <a href="#">Home</a>
+            <a data-i18n="nav_home" href="#"></a>
           </li>
           <li>
-            <a href="#projects">Projects</a>
+            <a data-i18n="nav_projects" href="#projects"></a>
           </li>
           <li>
-            <a href="#skills">Skills</a>
+            <a data-i18n="nav_skills" href="#skills"></a>
           </li>
           <li>
-            <a href="#contact">Contact</a>
+            <a data-i18n="nav_contact" href="#contact"></a>
           </li>
         </ul>
         <button id="dark-mode-toggle" class="dark-mode-toggle"><i class="fa-solid fa-sun"></i></button>
@@ -39,16 +38,16 @@
     <nav id="mobile-nav" class="mobile-nav">
       <ul>
         <li>
-          <a href="#">Home</a>
+          <a data-i18n="nav_home" href="#"></a>
         </li>
         <li>
-          <a href="#projects">Projects</a>
+          <a data-i18n="nav_projects" href="#projects"></a>
         </li>
         <li>
-          <a href="#skills">Skills</a>
+          <a data-i18n="nav_skills" href="#skills"></a>
         </li>
         <li>
-          <a href="#contact">Contact</a>
+          <a data-i18n="nav_contact" href="#contact"></a>
         </li>
         <div class="links">
           <button id="dark-mode-toggle-mobile" class="dark-mode-toggle-mobile"><i class="fa-solid fa-sun"></i></button>
@@ -61,9 +60,9 @@
     <main>
       <section id="home">
         <div class="home-container">
-          <h1>Hey <span class="wave">👋</span> I'm <span>Tarion</span>.</h1>
-          <h2>Game Programmer</h2>
-          <p>Currently developing a game using the Unity Engine.</p>
+          <h1 data-i18n="home_greeting"></h1>
+          <h2 data-i18n="home_subtitle"></h2>
+          <p data-i18n="home_description"></p>
           <div class="links">
             <a href="https://git.tarion.org/"><i class="fa-brands fa-git-alt"></i></a>
             <a href="https://github.com/pschwarzer20"><i class="fa-brands fa-github"></i></a>
@@ -71,11 +70,11 @@
       </section>
       <section id="projects">
         <div class="projects-container">
-          <h1>Projects</h1>
+          <h1 data-i18n="projects_title"></h1>
           <div class="projects">
             <div class="project">
-              <h1>Game Engine</h1>
-              <p>A custom C++ game engine with Lua scripting integration.</p>
+              <h1 data-i18n="project_game_engine_title"></h1>
+              <p data-i18n="project_game_engine_description"></p>
               <ul>
                 <li>C++</li>
                 <li>Lua</li>
@@ -83,8 +82,8 @@
               <a href="https://git.tarion.org/tarion/Game-Engine"><i class="fa-brands fa-git-alt"></i></a>
             </div>
             <div class="project">
-              <h1>schwarzer-energie.de</h1>
-              <p>Website for a chimney sweeping and energy certification business.</p>
+              <h1 data-i18n="project_schwarzer_title"></h1>
+              <p data-i18n="project_schwarzer_description"></p>
               <ul>
                 <li>HTML</li>
                 <li>CSS</li>
@@ -94,8 +93,8 @@
               <a href="https://schwarzer-energie.de/"><i class="fa-solid fa-globe"></i></a>
             </div>
             <div class="project">
-              <h1>tarion.org</h1>
-              <p>Personal portfolio showcasing my projects and development work.</p>
+              <h1 data-i18n="project_tarion_org_title"></h1>
+              <p data-i18n="project_tarion_org_description"></p>
               <ul>
                 <li>HTML</li>
                 <li>CSS</li>
@@ -105,8 +104,8 @@
               <a href="https://tarion.org/"><i class="fa-solid fa-globe"></i></a>
             </div>
             <div class="project">
-              <h1>LOV-8</h1>
-              <p>A fantasy console built with LÖVE2D, featuring a sandboxed environment for developing games within strict limitations.</p>
+              <h1 data-i18n="project_lov8_title"></h1>
+              <p data-i18n="project_lov8_description"></p>
               <ul>
                 <li>Lua</li>
               </ul>
@@ -117,7 +116,7 @@
       </section>
       <section id="skills">
         <div class="skills-container">
-          <h1>Skills</h1>
+          <h1 data-i18n="skills_title"></h1>
           <ul>
             <li>C#</li>
             <li>C++</li>
@@ -132,8 +131,8 @@
       </section>
       <section id="contact">
         <div class="contact-container">
-          <h1>Contact</h1>
-          <a href="mailto:patrickschwarzer2000@gmail.com">Interested in working together? Send me an email <i class="fa-solid fa-envelope"></i></a>
+          <h1 data-i18n="contact_title"></h1>
+          <a data-i18n="contact_message" href="mailto:patrickschwarzer2000@gmail.com"></a>
         </div>
       </section>
     </main>
@@ -145,7 +144,7 @@
         <a href="https://git.tarion.org/"><i class="fa-brands fa-git-alt"></i></a>
         <a href="https://steamcommunity.com/profiles/76561198119267753/"><i class="fa-brands fa-steam"></i></a>
       </div>
-      <p>&copy 2025 Tarion. All rights reserved.</p>
+      <p data-i18n="footer_text"></p>
     </footer>
 
     <script src="script.js"></script>
diff --git a/languages/de-DE.json b/languages/de-DE.json
new file mode 100644
index 0000000..cc345c1
--- /dev/null
+++ b/languages/de-DE.json
@@ -0,0 +1,33 @@
+{
+    "site_title": "Tarions Portfolio",
+
+    "nav_home": "Startseite",
+    "nav_projects": "Projekte",
+    "nav_skills": "Fähigkeiten",
+    "nav_contact": "Kontakt",
+
+    "home_greeting": "Hey <span class='wave'>👋</span> Ich bin <span>Tarion</span>.",
+    "home_subtitle": "Spieleentwickler",
+    "home_description": "Derzeit entwickle ich ein Spiel mit der Unity-Engine.",
+
+    "projects_title": "Projekte",
+
+    "skills_title": "Fähigkeiten",
+
+    "contact_title": "Kontakt",
+    "contact_message": "Interesse an einer Zusammenarbeit? Schreib mir eine E-Mail <i class='fa-solid fa-envelope'></i>",
+
+    "footer_text": "© 2025 Tarion. Alle Rechte vorbehalten.",
+
+    "project_game_engine_title": "Game Engine",
+    "project_game_engine_description": "Eine benutzerdefinierte C++-Spiel-Engine mit Lua-Skripting-Integration.",
+
+    "project_schwarzer_title": "schwarzer-energie.de",
+    "project_schwarzer_description": "Website für einen Schornsteinfeger- und Energieausweisbetrieb.",
+
+    "project_tarion_org_title": "tarion.org",
+    "project_tarion_org_description": "Persönliches Portfolio zur Präsentation meiner Projekte und Entwicklungsarbeit.",
+
+    "project_lov8_title": "LOV-8",
+    "project_lov8_description": "Eine Fantasy-Konsole, entwickelt mit LÖVE2D, mit einer abgeschotteten Umgebung zum Entwickeln von Spielen unter strengen Einschränkungen."
+}
\ No newline at end of file
diff --git a/languages/en.json b/languages/en.json
new file mode 100644
index 0000000..f51c262
--- /dev/null
+++ b/languages/en.json
@@ -0,0 +1,34 @@
+{
+    "site_title": "Tarions Portfolio",
+
+    "nav_home": "Home",
+    "nav_projects": "Projects",
+    "nav_skills": "Skills",
+    "nav_contact": "Contact",
+
+    "home_greeting": "Hey <span class='wave'>👋</span> I'm <span>Tarion</span>.",
+    "home_subtitle": "Game Programmer",
+    "home_description": "Currently developing a game using the Unity Engine.",
+
+    "projects_title": "Projects",
+
+    "skills_title": "Skills",
+
+    "contact_title": "Contact",
+    "contact_message": "Interested in working together? Send me an email <i class='fa-solid fa-envelope'></i>",
+
+    "footer_text": "© 2025 Tarion. All rights reserved.",
+
+
+    "project_game_engine_title": "Game Engine",
+    "project_game_engine_description": "A custom C++ game engine with Lua scripting integration.",
+    
+    "project_schwarzer_title": "schwarzer-energie.de",
+    "project_schwarzer_description": "Website for a chimney sweeping and energy certification business.",
+    
+    "project_tarion_org_title": "tarion.org",
+    "project_tarion_org_description": "Personal portfolio showcasing my projects and development work.",
+    
+    "project_lov8_title": "LOV-8",
+    "project_lov8_description": "A fantasy console built with LÖVE2D, featuring a sandboxed environment for developing games within strict limitations."
+}
\ No newline at end of file
diff --git a/script.js b/script.js
index 8181623..6147cb0 100644
--- a/script.js
+++ b/script.js
@@ -72,3 +72,19 @@ document.addEventListener("DOMContentLoaded", () => {
         })
     })
 })
+
+// Language support
+async function getLanguageData(lang){
+    const response = await fetch(`languages/${lang}.json`);
+    return response.json();
+}
+
+document.addEventListener("DOMContentLoaded", async () => {
+    const userLang = navigator.language || navigator.userLanguage;
+    const langData = await getLanguageData(userLang);
+
+    document.querySelectorAll("[data-i18n]").forEach((element) => {
+        const key = element.getAttribute("data-i18n");
+        element.innerHTML = langData[key];
+    });
+})
\ No newline at end of file
