From 1ae77b82707d881fea2ea2d40a80b31deac78319 Mon Sep 17 00:00:00 2001 From: Claire Schwarzer Date: Tue, 20 Jan 2026 11:52:06 +0100 Subject: [PATCH 1/2] Generate project cards from a json, rather than having them hardcoded --- index.html | 48 +----------------------------------------------- projects.json | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 42 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 93 insertions(+), 47 deletions(-) create mode 100644 projects.json diff --git a/index.html b/index.html index 6c3bb55..4a0c5c3 100644 --- a/index.html +++ b/index.html @@ -72,53 +72,7 @@

-
-

-

-
    -
  • C++
    • -
  • Lua
    • -
- -
-
-

-

-
    -
  • HTML
    • -
  • CSS
    • -
  • JavaScript
    • -
  • Hosting
    • -
- -
-
-

-

-
    -
  • HTML
    • -
  • CSS
    • -
  • JavaScript
    • -
  • Hosting
    • -
- -
-
-

-

-
    -
  • Lua
    • -
- -
-
-

-

-
    -
  • JavaScript
    • -
- -
+
diff --git a/projects.json b/projects.json new file mode 100644 index 0000000..2250e03 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/script.js b/script.js index 5f29c86..4c74158 100644 --- a/script.js +++ b/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 = "" + 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]; From 9c9e3b6c30fbda463b16b6fd268fa2cdb525c7a5 Mon Sep 17 00:00:00 2001 From: Claire Schwarzer Date: Tue, 20 Jan 2026 14:39:24 +0100 Subject: [PATCH 2/2] generate skills & projects sections instead of hardcoding them --- index.html | 11 ++--------- languages/en.json | 2 +- script.js | 25 ++++++++++++++++++++----- skills.json | 10 ++++++++++ 4 files changed, 33 insertions(+), 15 deletions(-) create mode 100644 skills.json diff --git a/index.html b/index.html index 4a0c5c3..edbacae 100644 --- a/index.html +++ b/index.html @@ -79,15 +79,8 @@

-
    -
  • C#
    • -
  • C++
    • -
  • Lua
    • -
  • Python
    • -
  • HTML
    • -
  • CSS
    • -
  • JavaScript
    • -
  • Git
    • +
      +
diff --git a/languages/en.json b/languages/en.json index 3b036a3..e3c8cde 100644 --- a/languages/en.json +++ b/languages/en.json @@ -8,7 +8,7 @@ "home_greeting": "Hey 👋 I'm Tarion.", "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", diff --git a/script.js b/script.js index 4c74158..7299385 100644 --- a/script.js +++ b/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]; diff --git a/skills.json b/skills.json new file mode 100644 index 0000000..80fe6f0 --- /dev/null +++ b/skills.json @@ -0,0 +1,10 @@ +[ + "C#", + "C++", + "Lua", + "Python", + "HTML", + "CSS", + "JavaScript", + "Git" +] \ No newline at end of file