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

This commit is contained in:
Claire Schwarzer 2026-01-20 11:52:06 +01:00
parent 6a193eb3ec
commit 1ae77b8270
3 changed files with 93 additions and 47 deletions

View file

@ -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];