Generate project cards from a json, rather than having them hardcoded

index.html

@@ -72,53 +72,7 @@
         <div class="projects-container">
           <h1 data-i18n="projects_title"></h1>
           <div class="projects">
-            <div class="project">
+            <!-- Generated projects go here -->
-              <h1 data-i18n="project_game_engine_title"></h1>
-              <p data-i18n="project_game_engine_description"></p>
-              <ul>
-                <li>C++</li>
-                <li>Lua</li>
-              </ul>
-              <a href="https://git.tarion.org/tarion/Game-Engine"><i class="fa-brands fa-git-alt"></i></a>
-            </div>
-            <div class="project">
-              <h1 data-i18n="project_schwarzer_title"></h1>
-              <p data-i18n="project_schwarzer_description"></p>
-              <ul>
-                <li>HTML</li>
-                <li>CSS</li>
-                <li>JavaScript</li>
-                <li>Hosting</li>
-              </ul>
-              <a href="https://schwarzer-energie.de/"><i class="fa-solid fa-globe"></i></a>
-            </div>
-            <div class="project">
-              <h1 data-i18n="project_tarion_org_title"></h1>
-              <p data-i18n="project_tarion_org_description"></p>
-              <ul>
-                <li>HTML</li>
-                <li>CSS</li>
-                <li>JavaScript</li>
-                <li>Hosting</li>
-              </ul>
-              <a href="https://tarion.org/"><i class="fa-solid fa-globe"></i></a>
-            </div>
-            <div class="project">
-              <h1 data-i18n="project_lov8_title"></h1>
-              <p data-i18n="project_lov8_description"></p>
-              <ul>
-                <li>Lua</li>
-              </ul>
-              <a href="https://git.tarion.org/tarion/LOV-8"><i class="fa-brands fa-git-alt"></i></a>
-            </div>
-            <div class="project">
-              <h1 data-i18n="project_remove_shorts_title"></h1>
-              <p data-i18n="project_remove_shorts_description"></p>
-              <ul>
-                <li>JavaScript</li>
-              </ul>
-              <a href="https://git.tarion.org/tarion/remove-youtube-shorts"><i class="fa-brands fa-git-alt"></i></a>
-            </div>
           </div>
         </div>
       </section>

projects.json

@@ -0,0 +1,50 @@
+{
+    "project_game_engine_title": {
+        "description": "project_game_engine_description",
+        "skills":[
+            "C++",
+            "OpenGL",
+            "Lua"
+        ],
+        "link": "https://git.tarion.org/tarion/Game-Engine",
+        "linkIcon": "fa-brands fa-git-alt"
+    },
+    "project_schwarzer_title": {
+        "description": "project_schwarzer_description",
+        "skills":[
+            "HTML",
+            "CSS",
+            "JavaScript",
+            "Hosting"
+        ],
+        "link": "https://schwarzer-energie.de/",
+        "linkIcon": "fa-solid fa-globe"
+    },
+    "project_tarion_org_title": {
+        "description": "project_tarion_org_description",
+        "skills":[
+            "HTML",
+            "CSS",
+            "JavaScript",
+            "Hosting"
+        ],
+        "link": "https://tarion.org/",
+        "linkIcon": "fa-solid fa-globe"
+    },
+    "project_lov8_title": {
+        "description": "project_lov8_description",
+        "skills":[
+            "Lua"
+        ],
+        "link": "https://git.tarion.org/tarion/LOV-8",
+        "linkIcon": "fa-brands fa-git-alt"
+    },
+    "project_remove_shorts_title": {
+        "description": "project_remove_shorts_description",
+        "skills":[
+            "JavaScript"
+        ],
+        "link": "https://git.tarion.org/tarion/remove-youtube-shorts",
+        "linkIcon": "fa-brands fa-git-alt"
+    }
+}

script.js

@@ -83,10 +83,52 @@ async function getLanguageData(lang){
     return response.json();
 }
 
+
+async function getProjectsData(){
+    const response = await fetch(`projects.json`);
+    return response.json();
+}
+
 document.addEventListener("DOMContentLoaded", async () => {
     const userLang = (navigator.language || navigator.userLanguage).split('-')[0];
     const langData = await getLanguageData(userLang);
 
+    // Load Projects from projects.json
+    const projects = await getProjectsData();
+
+    if (projects != null){
+        console.log(projects);
+        for (var key in projects){
+            var project = projects[key];
+
+            var newProject = document.createElement("div");
+            newProject.setAttribute("class", "project");
+
+            var title = document.createElement("h1");
+            title.setAttribute("data-i18n", key);
+            newProject.appendChild(title);
+
+            var description = document.createElement("p");
+            description.setAttribute("data-i18n", project.description);
+            newProject.appendChild(description);
+
+            var skills = document.createElement("ul");
+            for (var skillKey in project.skills){
+                var newSkill = document.createElement("li");
+                newSkill.innerHTML = project.skills[skillKey];
+                skills.appendChild(newSkill);
+            }
+            newProject.appendChild(skills);
+
+            var button = document.createElement("a");
+            button.setAttribute("href", project.link);
+            button.innerHTML = "<i class='" + project.linkIcon + "'></i>"
+            newProject.appendChild(button);
+
+            document.getElementsByClassName("projects")[0].appendChild(newProject);
+        }
+    }
+
     document.querySelectorAll("[data-i18n]").forEach((element) => {
         const key = element.getAttribute("data-i18n");
         element.innerHTML = langData[key];