Web/scripts/projects.js

const projects = [{
        '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.',
        'links': {
            'Website': 'https://rockbottom.ellpeck.de',
            'API on GitHub': 'https://github.com/RockBottomGame/API'
        },
        'status': 'In development',
        'icon': 'rb'
    },
    {
        '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': 'Grammar',
        'desc': 'The name is temporary, but this is a context-free grammar parser, form converter, word parser and a-lot-of-other-grammar-stuff-doer that I\'m working on with <a href="https://zettelnet.com">Zettelkasten</a>.',
        'links': {
            'Check it out': 'https://ellpeck.github.io/Grammar'
        },
        'status': 'In development',
        'icon': 'grammar'
    },
    {
        'name': 'Sudoku',
        'desc': 'A simple game of sudoku. Fill in the board with numbers one through nine, making sure each row, column and three by three field only ever has one of the same number. A board is randomly generated for you every time you refresh the page. Use the scroll wheel to input numbers into a selected field.',
        'links': {
            'Play it here': 'https://ellpeck.de/sudoku',
            'Check the source': 'https://github.com/Ellpeck/Sudoku'
        },
        'status': 'Finished',
        'icon': 'sudoku'
    },
    {
        'name': 'Memory',
        'desc': 'A game of memory. Turn over fields to see the numbers they have. Try to combine all of the same-numbered fields to uncover the board!',
        'links': {
            'Play it here': 'https://ellpeck.de/memory',
            'Check the source': 'https://github.com/Ellpeck/Memory'
        },
        'status': 'Finished',
        'icon': 'memory'
    },
    {
        'name': 'Crossword Puzzle Generator',
        'desc': 'This was the first thing I made in JavaScript. It generates a crossword puzzle based on a predefined list of hints and words that you can fill out. You can also check if your answers are correct. It\'s a bit sloppy and sometimes it generates really small puzzles, but I think it\'s alright for a first project.',
        'links': {
            'Play it here': 'https://www.ellpeck.de/crossword/'
        },
        'status': 'On hold',
        'icon': 'crossword'
    },
    {
        'name': 'Poem Generator',
        'desc': 'This was a bit of a failed experiment. It was supposed to generate poems in the style of the ones that I write based on a list of predefined words, but I noticed quickly that it\'s just to random to generate anything nice.',
        'links': {
            'Check it out here': 'https://www.ellpeck.de/poemgen/'
        },
        'status': 'Cancelled',
        'icon': 'poem'
    }
];

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'];
    for (let name in links) {
        p += '<a href="' + links[name] + '" class="card-link btn btn-outline-info rounded-0">' + name + '</a>';
    }

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