Web/scripts/projects.js

const projects = [{
        'name': "Nature's Aura",
        'desc': "Nature's Aura is a new Minecraft mod about collecting, using and replenishing the Aura naturally present in the world to create useful devices and unique mechanics. It's currently in beta.",
        'status': 'In development',
        'links': {
            'CurseForge page': 'https://minecraft.curseforge.com/projects/natures-aura'
        },
        'icon': 'na'
    },
    {
        'name': 'Actually Additions',
        'desc': 'Actually Additions is a rather popular Minecraft mod that I used to work on. It\'s become widely known in the modding community and has reached over 10 million downloads by now, which is crazy. I don\'t work on it anymore myself, but it\'s being maintained for current versions by someone else.',
        'links': {
            'CurseForge page': 'https://www.ellpeck.de/actadd',
            'Online manual': 'https://www.ellpeck.de/actaddmanual/'
        },
        'status': 'Handed off',
        'icon': 'aa'
    },
    {
        'name': 'Rock Bottom',
        'desc': 'Rock Bottom is a game I\'ve been working on for a little more than a year now. It\'s a 2D-sidescrolling sandbox game with a storyline that has multiplayer support, a modding API and a lot more fun stuff. It\'s currently still in early development, but I\'m kind of taking a break from it for a while.',
        'links': {
            'Website': 'https://rockbottom.ellpeck.de',
            'API on GitHub': 'https://github.com/RockBottomGame/API'
        },
        'status': 'On hold',
        'icon': 'rb'
    },
];

let p = '';
for (project of projects) {
    p += '<div class="card bg-light project rounded-0">';
    p += '<div class="card-body">';
    p += '<img class="project-image" src="res/projects/' + project['icon'] + '.png" alt="">';

    p += '<h4 class="card-title">' + project['name'] + '</h4>';
    p += '<p class="card-text">' + project['desc'] + '</p>';
    p += '<span class="text-muted project-status">' + project['status'] + '</span>';

    let links = project['links'];
    if (links) {
        for (let name in links) {
            p += '<a href="' + links[name] + '" class="card-link btn ' + (dark ? "btn-outline-light" : "btn-outline-info") + ' rounded-0">' + name + '</a>';
        }
    }

    p += '</div>';
    p += '</div>';
}
$('#project-list').html(p);