generate skills & projects sections instead of hardcoding them

index.html

@@ -79,15 +79,8 @@
       <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",
 

script.js

@@ -88,6 +88,10 @@ 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];
@@ -95,9 +99,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     // Load Projects from projects.json
     const projects = await getProjectsData();
-
     if (projects != null){
-        console.log(projects);
         for (var key in projects){
             var project = projects[key];
 
@@ -112,13 +114,13 @@ document.addEventListener("DOMContentLoaded", async () => {
             description.setAttribute("data-i18n", project.description);
             newProject.appendChild(description);
 
-            var skills = document.createElement("ul");
+            var projectSkills = document.createElement("ul");
             for (var skillKey in project.skills){
                 var newSkill = document.createElement("li");
                 newSkill.innerHTML = project.skills[skillKey];
-                skills.appendChild(newSkill);
+                projectSkills.appendChild(newSkill);
             }
-            newProject.appendChild(skills);
+            newProject.appendChild(projectSkills);
 
             var button = document.createElement("a");
             button.setAttribute("href", project.link);
@@ -129,6 +131,19 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
     }
 
+    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"
+]