generate skills & projects sections instead of hardcoding them

index.html

@@ -72,68 +72,15 @@
         <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>
       <section class="skills-section" id="skills">
         <div class="skills-container">
           <h1 data-i18n="skills_title"></h1>
-          <ul>
+          <ul id="skills-list">
-            <li>C#</li>
+            <!-- Generated skills go here -->
-            <li>C++</li>
-            <li>Lua</li>
-            <li>Python</li>
-            <li>HTML</li>
-            <li>CSS</li>
-            <li>JavaScript</li>
-            <li>Git</li>
           </ul>
         </div>
       </section>

languages/en.json

@@ -8,7 +8,7 @@
 
     "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.",
+    "home_description": "Currently working on adding new features to this website.",
 
     "projects_title": "Projects",
 

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,67 @@ async function getLanguageData(lang){
     return response.json();
 }
 
+
+async function getProjectsData(){
+    const response = await fetch(`projects.json`);
+    return response.json();
+}
+async function getSkillsData(){
+    const response = await fetch(`skills.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){
+        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 projectSkills = document.createElement("ul");
+            for (var skillKey in project.skills){
+                var newSkill = document.createElement("li");
+                newSkill.innerHTML = project.skills[skillKey];
+                projectSkills.appendChild(newSkill);
+            }
+            newProject.appendChild(projectSkills);
+
+            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);
+        }
+    }
+
+    const skills = await getSkillsData();
+    if (skills != null){
+        var skillsList = document.getElementById("skills-list");
+
+        for (var key in skills){
+            var skillName = skills[key];
+            
+            var newSkill = document.createElement("li");
+            newSkill.innerHTML = skillName;
+            skillsList.appendChild(newSkill);
+        }
+    }
+
     document.querySelectorAll("[data-i18n]").forEach((element) => {
         const key = element.getAttribute("data-i18n");
         element.innerHTML = langData[key];

skills.json

@@ -0,0 +1,10 @@
+[
+    "C#",
+    "C++",
+    "Lua",
+    "Python",
+    "HTML",
+    "CSS",
+    "JavaScript",
+    "Git"
+]