Adding the right images and changing some descriptions.

Improved UI
Updated text
2026-10-14 12:48:25 +02:00 · 2026-10-12 17:18:17 +02:00 · 2026-10-01 14:50:51 +02:00 · 2026-10-01 14:45:25 +02:00 · 2026-09-25 11:59:43 +02:00 · 2026-09-25 09:51:08 +00:00
37 changed files with 1215 additions and 135 deletions
@@ -9,7 +9,7 @@ Pure static front-end site served by nginx. No build step required.

 ```
 public/               Site root (served by nginx)
-├── index.html        Single page: home, about, apps, games
+├── index.html        Single page: home, about, apps, hosted, games
 ├── favicon.ico
 └── assets/
    ├── css/          douwco.css (branding), style.css (layout)
@@ -23,6 +23,10 @@
    --blue-clr: #47bcdf;
    --green-clr: #6ede9a;
    --white-clr: #ffffff;
+    --card-border-radius: 25px;
+    --dark-green: #1a3d2e;
+    --dark-teal: #2c5f5f;
+    --orange-clr: #f39c12;
 }

 body {
@@ -72,6 +72,17 @@ footer > div > p {
 .scroll_section {
    min-height: 100vh;
    scroll-snap-align: start;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.scroll_section > h1 {
+    color: var(--white-clr);
+    font-size: 48px;
+    margin: 20px 0;
+    text-align: center;
+    width: 100%;
 }

 /* ===== Navigationbar ===== */
@@ -81,7 +92,7 @@ footer > div > p {
    font-weight: bold;
    color: var(--white-clr);
    text-decoration: none;
-    font-size: 36px;
+    font-size: 28px;

    border: none;
    border-radius: 20px;
@@ -89,7 +100,7 @@ footer > div > p {

    display: flex;
    align-items: center;
-    margin: 10px;
+    margin: 8px;
    padding-right: 10px;
 }

@@ -191,6 +202,452 @@ footer > div > p {
    float: left;
 }

+/* About Me grid layout */
+.about-me-projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 20px;
+    width: 100%;
+    max-width: 1200px;
+    margin: 20px auto;
+}
+
+/* ===== Apps & Hosted Sections - vertical selector + detail ===== */
+
+.service-section {
+    width: 100%;
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 0 20px 20px;
+    box-sizing: border-box;
+    display: flex;
+    gap: 30px;
+    align-items: stretch;
+}
+
+.service-selector {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 260px;
+    flex-shrink: 0;
+    max-height: 480px;
+    overflow-y: auto;
+    padding: 5px;
+}
+
+.service-selector-item {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 12px 16px;
+    border: 2px solid transparent;
+    border-radius: 18px;
+    background-color: var(--background-accent-clr);
+    color: var(--white-clr);
+    font-family: 'Montserrat', sans-serif;
+    font-size: 22px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    text-align: left;
+}
+
+.service-selector-item:hover {
+    transform: translateY(-2px);
+    background-color: #3a5c5c;
+}
+
+.service-selector-item.selected {
+    border-color: var(--green-clr);
+    background-color: var(--dark-teal, #2c5f5f);
+}
+
+.service-selector-icon {
+    width: 48px;
+    height: 48px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background-color: var(--icon-bg, #888);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+}
+
+.service-selector-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.service-selector-item.selected .service-selector-icon {
+    transform: scale(1.1);
+}
+
+.service-selector-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.service-detail {
+    flex: 1;
+    background-color: var(--dark-green, #1a3d2e);
+    border-radius: var(--card-border-radius, 25px);
+    padding: 30px;
+    box-sizing: border-box;
+    display: flex;
+    gap: 30px;
+    align-items: center;
+    min-width: 0;
+}
+
+.service-visual {
+    flex: 1 1 45%;
+    height: clamp(240px, 45vh, 420px);
+    border-radius: 15px;
+    overflow: hidden;
+    background: linear-gradient(145deg, #2c5f5f, #1a3d2e);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+}
+
+.service-visual-img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    padding: 24px;
+    box-sizing: border-box;
+    opacity: 1;
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.service-visual-img.fading {
+    opacity: 0;
+}
+
+.service-info {
+    flex: 1 1 55%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    min-width: 0;
+}
+
+.service-title {
+    color: var(--green-clr);
+    font-size: 42px;
+    margin: 0;
+}
+
+.service-description {
+    color: var(--white-clr);
+    font-size: 24px;
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* Go to App Button */
+.go-to-app-button {
+    display: inline-block;
+    background-color: var(--green-clr);
+    color: var(--background-clr);
+    padding: 18px 40px;
+    font-size: 28px;
+    font-weight: bold;
+    text-decoration: none;
+    border-radius: 15px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    margin-top: 10px;
+}
+
+.go-to-app-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+}
+
+/* ===== Games Section ===== */
+
+.games-container {
+    width: 100%;
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.games-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 30px;
+    width: 100%;
+}
+
+.game-card {
+    background-color: var(--dark-teal, #2c5f5f);
+    border-radius: var(--card-border-radius, 25px);
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.game-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
+}
+
+.game-card.expanded {
+    grid-column: span 2;
+    z-index: 10;
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
+}
+
+.game-card-image {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    background: linear-gradient(145deg, #2c5f5f, #1a3d2e);
+}
+
+.game-card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Logo-style images (About Me cards): show the full logo instead of cropping */
+.game-card-image.contain img {
+    object-fit: contain;
+    padding: 24px;
+    box-sizing: border-box;
+}
+
+.game-card-content {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    flex: 1;
+}
+
+.game-card-title {
+    color: var(--white-clr);
+    font-size: 24px;
+    font-weight: bold;
+    margin: 0;
+}
+
+.game-card-meta {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.game-genre {
+    color: var(--white-clr);
+    font-size: 14px;
+    font-weight: bold;
+    opacity: 0.75;
+}
+
+.game-card-description {
+    color: var(--white-clr);
+    font-size: 18px;
+    opacity: 0.8;
+    margin: 0;
+    line-height: 1.5;
+}
+
+.game-year-badge {
+    display: inline-block;
+    background-color: var(--orange-clr, #f39c12);
+    color: var(--background-clr);
+    padding: 5px 12px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: bold;
+    align-self: flex-start;
+}
+
+.game-card-expanded {
+    display: none;
+    padding: 20px;
+    background-color: rgba(0, 0, 0, 0.2);
+    flex: 1;
+}
+
+.game-card.expanded .game-card-expanded {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.game-card.expanded .game-card-content {
+    display: none;
+}
+
+.game-card.expanded .game-card-image {
+    height: 250px;
+}
+
+.game-card-full-description {
+    color: var(--white-clr);
+    font-size: 20px;
+    line-height: 1.6;
+    text-align: center;
+    max-width: 80%;
+    margin-bottom: 20px;
+}
+
+.play-button {
+    display: inline-block;
+    background-color: var(--green-clr);
+    color: var(--background-clr);
+    padding: 15px 35px;
+    font-size: 24px;
+    font-weight: bold;
+    text-decoration: none;
+    border-radius: 15px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+}
+
+.game-card-content .play-button {
+    align-self: flex-start;
+    padding: 10px 24px;
+    font-size: 18px;
+    margin-top: auto;
+}
+
+.play-button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+}
+
+/* Responsive design for the service sections */
+@media (max-width: 1024px) {
+    .service-selector {
+        width: 220px;
+    }
+
+    .service-selector-item {
+        font-size: 18px;
+    }
+
+    .service-detail {
+        padding: 20px;
+        gap: 20px;
+    }
+
+    .service-visual {
+        height: clamp(220px, 40vh, 340px);
+    }
+
+    .service-title {
+        font-size: 34px;
+    }
+
+    .service-description {
+        font-size: 20px;
+    }
+
+    .go-to-app-button {
+        font-size: 24px;
+        padding: 15px 35px;
+    }
+}
+
+@media (max-width: 900px) {
+    .service-section {
+        flex-direction: column;
+        padding: 0 10px 20px;
+        gap: 20px;
+    }
+
+    .service-selector {
+        flex-direction: row;
+        width: 100%;
+        max-height: none;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding: 2px;
+    }
+
+    .service-selector-item {
+        flex-shrink: 0;
+        font-size: 18px;
+        padding: 10px 14px;
+    }
+
+    .service-selector-icon {
+        width: 36px;
+        height: 36px;
+    }
+
+    .service-detail {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .service-visual {
+        width: 100%;
+        height: clamp(200px, 35vh, 320px);
+    }
+
+    .service-info {
+        align-items: center;
+        text-align: center;
+    }
+}
+
+/* Below this width the card grids have a single column: expanding tiles
+   take the full width instead of spanning two columns. */
+@media (max-width: 740px) {
+    .game-card.expanded {
+        grid-column: span 1;
+    }
+
+    .game-card-full-description {
+        max-width: 100%;
+    }
+}
+
+/* Currently working on and However in the past sections */
+.about-me-section {
+    width: 100%;
+    margin-bottom: 40px;
+}
+
+.about-me-section h2 {
+    font-size: 28px;
+    color: var(--white-clr);
+    margin-bottom: 20px;
+    border-bottom: 2px solid var(--green-clr);
+    padding-bottom: 10px;
+}
+
+.about-me-section h2 .green-text {
+    color: var(--green-clr);
+    font-weight: bold;
+}
+
 /* ===== Images ===== */

 .icon {
@@ -199,11 +656,11 @@ footer > div > p {
 }

 .icon.small {
-    height: 45px;
+    height: 36px;
 }

 .icon.medium {
-    height: 100px;
+    height: 70px;
 }

 .icon.large {
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 272" width="192" height="272">
+    <defs>
+        <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stop-color="#78e0a1"/>
+            <stop offset="1" stop-color="#47bcdf"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" stroke="url(#g)" stroke-width="14" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="20" y="30" width="152" height="90" rx="18"/>
+        <rect x="20" y="152" width="152" height="90" rx="18"/>
+        <circle cx="52" cy="75" r="7" fill="url(#g)" stroke="none"/>
+        <circle cx="52" cy="197" r="7" fill="url(#g)" stroke="none"/>
+        <path d="M92 75h48"/>
+        <path d="M92 197h48"/>
+    </g>
+</svg>
@@ -2,6 +2,8 @@ document.addEventListener('DOMContentLoaded', () => {
    setupNavigationHighlight();
    setupNavigationClicks();
    setupCopyright();
+    setupServiceSections();
+    setupCards();
 });

 function setupNavigationHighlight() {
@@ -43,3 +45,82 @@ function setupNavigationClicks() {
 function setupCopyright() {
    document.getElementById('copyright').textContent = `© ${new Date().getFullYear()} - douwco.be`;
 }
+
+/* Unified expandable card system, shared by the About Me and My Games grids.
+   Clicking a card expands it (spanning two grid columns); clicking again or
+   picking another card in the same grid collapses it. */
+function setupCards() {
+    const cards = document.querySelectorAll('.game-card');
+
+    cards.forEach(card => {
+        card.addEventListener('click', (event) => {
+            if (event.target.closest('a')) {
+                return;
+            }
+
+            const grid = card.closest('.games-grid, .about-me-projects-grid');
+            const isExpanded = card.classList.contains('expanded');
+
+            if (grid) {
+                grid.querySelectorAll('.game-card').forEach(c => c.classList.remove('expanded'));
+            }
+
+            if (!isExpanded) {
+                card.classList.add('expanded');
+            }
+
+            event.stopPropagation();
+        });
+
+        const playButton = card.querySelector('.play-button');
+        if (playButton) {
+            playButton.addEventListener('click', (event) => {
+                event.stopPropagation();
+            });
+        }
+    });
+}
+
+function setupServiceSections() {
+    document.querySelectorAll('.service-section').forEach(section => {
+        const items = section.querySelectorAll('.service-selector-item');
+        const visualImg = section.querySelector('.service-visual-img');
+        const title = section.querySelector('.service-title');
+        const description = section.querySelector('.service-description');
+        const link = section.querySelector('.go-to-app-button');
+
+        if (items.length === 0 || !visualImg || !title || !description || !link) return;
+
+        let isAnimating = false;
+
+        const applyItem = (item) => {
+            visualImg.src = item.dataset.image;
+            visualImg.alt = item.dataset.name;
+            title.textContent = item.dataset.name;
+            description.textContent = item.dataset.description;
+            link.href = item.dataset.url;
+        };
+
+        const selectItem = (item) => {
+            if (isAnimating || item.classList.contains('selected')) return;
+            isAnimating = true;
+
+            items.forEach(i => i.classList.toggle('selected', i === item));
+
+            visualImg.classList.add('fading');
+            setTimeout(() => {
+                applyItem(item);
+                requestAnimationFrame(() => {
+                    visualImg.classList.remove('fading');
+                    setTimeout(() => {
+                        isAnimating = false;
+                    }, 300);
+                });
+            }, 300);
+        };
+
+        items.forEach(item => {
+            item.addEventListener('click', () => selectItem(item));
+        });
+    });
+}
@@ -1,21 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Douwco - portfolio and projects of Douwe, PhD student at KU Leuven and game developer."/>
+    <meta name="description"
+        content="Douwco - portfolio and projects of Douwe, PhD student at KU Leuven and game developer." />
    <title>Douwco</title>
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/assets/css/douwco.css" />
    <link rel="stylesheet" href="/assets/css/style.css" />
    <script src="/assets/js/project-card.js" defer></script>
    <script src="/assets/js/index.js" defer></script>
+    <script>
+        // Parse [[text|url]] links in expanded card descriptions
+        document.addEventListener('DOMContentLoaded', () => {
+            const projectCards = document.querySelectorAll('.game-card-full-description');
+            projectCards.forEach(p => {
+                const linkPattern = /\[\[([^|\]]+)\|([^\]]+)\]\]/g;
+                let html = p.innerHTML;
+                html = html.replace(linkPattern, (match, text, url) => {
+                    if (url.startsWith('http')) {
+                        return `<a href="${url}" target="_blank" rel="noopener">${text}</a>`;
+                    } else {
+                        return `<a href="${url}">${text}</a>`;
+                    }
+                });
+                p.innerHTML = html;
+            });
+        });
+    </script>
 </head>
+
 <body>
    <header>
        <nav>
            <div class="vert_container centered">
-            <a class="nav_option" href="#home"><img class="icon medium" src="/assets/img/douwco_logo.png" alt="Douwco logo"></a>
+                <a class="nav_option" href="#home"><img class="icon medium" src="/assets/img/douwco_logo.png"
+                        alt="Douwco logo"></a>
                <a class="nav_option" href="#about_me">
                    <img class="icon small" src="/assets/img/icons/user.png" alt="">
                    <p>About <span>Me</span></p>
@@ -24,6 +46,10 @@
                    <img class="icon small" src="/assets/img/icons/projects_icon.png" alt="">
                    <p>Douwco <span>Apps</span></p>
                </a>
+                <a class="nav_option" href="#hosted">
+                    <img class="icon small" src="/assets/img/icons/hosted_icon.svg" alt="">
+                    <p>Douwco <span>Hosted</span></p>
+                </a>
                <a class="nav_option" href="#games">
                    <img class="icon small" src="/assets/img/icons/devicegamepad2.png" alt="">
                    <p>My <span>Games</span></p>
@@ -49,15 +75,18 @@
                    <div class="content-box">
                        <p>
                            <span class="intro-text">Welcome to the Douwco website.</span> <br>
-                        Ever wondered what machine the website you are visiting is run on? Well this time you know, just look to the image.
-                        This small homeserver hosts several open-source services like Nextcloud, Gitea, Overleaf community and of course this
-                        website. <br> <br>
-                        Here I showcase my portfolio and all the games I've created over the years. If you are
-                        a family member you can also find the different services in the Douwco Apps tab.
+                            Ever wondered what machine the website you're visiting runs on? This time you can find out,
+                            just look at the image. This page is the home of all the services running on that server.
+                            <br> <br>
+                            This little homeserver lets me learn about and maintain my own digital infrastructure: my
+                            own cloud (Nextcloud), chat server (Matrix), code repositories (Gitea), and more.
+                            It also lets me present my personal software projects in a simple, accessible way: from the
+                            games I've made for Ludum Dare to the web tools I build to make my life easier.
                        </p>
                    </div>
                </div>
-            <img class="image stick large" src="/assets/img/server_image.png" alt="The homeserver running this website">
+                <img class="image stick large" src="/assets/img/server_image.png"
+                    alt="The homeserver running this website">
            </div>
        </section>

@@ -67,75 +96,567 @@
                <div class="panel">
                    <h1>Hi, I'm Douwe</h1>
                    <p>
-                    A <span class="green-text">PhD student</span> at KU Leuven with a passion for game development and software independence.
-                    <br><br>
-                    Currently I'm working on:
+                        A <span class="green-text">PhD student</span> at KU Leuven with a passion for game development
+                        and software independence.
                    </p>
-                <project-card image="/assets/img/rollability.png" image-alt="RollAbility"
-                    title="RollAbility"
-                    description="For my PhD research at KU Leuven, I'm developing RollAbility, a therapeutic exergame that bridges player autonomy with clinical guidelines to enhance wheelchair training.
-                    Developed in collaboration with therapists, RollAbility is a game built onto a clinical protocol and controlled by an actual powered wheelchair. The game connects to the RollAbility App which allows therapists to control the training session in real-time.
-                    [[Read the paper|https://dl.acm.org/doi/abs/10.1145/3748621]] or [[watch the video|https://www.youtube.com/watch?v=8y9XFdSN_04]].">
-                </project-card>
-                <project-card image="/assets/img/alcove.png" image-alt="Alcove"
-                    title="Alcove"
-                    description="Alcove is an interreg project between Flemish, Walloon and French universities and hospitals that aims to build a device that detects lung cancer through a breath test.
-                    My role is to create a user interface for the device. This UI has to work both on android phones and on embedded linux devices.
-                    [[Read more about Alcove|https://alcove.crosss3.eu/nl/]].">
-                </project-card>
-                <p><span class="green-text">However</span> in the past I also worked on:</p>
-                <project-card image="/assets/img/godot_addons.png" image-alt="Godot tools"
-                    title="Godot Addons"
-                    description="I published two small addons to the godot asset library.
-                    One addon called [[Godot Visual Studio Debugger|https://godotengine.org/asset-library/asset/3505]] which allows you to dynamically run the current scene open in the Godot editor directly in Visual Studio Debugger.
-                    The second addon called [[Godot Test Scenes|https://godotengine.org/asset-library/asset/3420]] extends the Godot editor with an additional run mode, this mode runs an associated test scene to the currently open one in the editor.
-                    They are both open source:
-                    [[Godot Test Scenes|https://github.com/DouweRavers/godot_test_scene]] and [[Godot Visual Studio Debugger|https://github.com/DouweRavers/godot_visualstudio_debugger/tree/main]].">
-                </project-card>
-                <project-card image="/assets/img/kingfisher.png" image-alt="Kingfisher"
-                    title="Kingfisher"
-                    description="The project [[Kingfisher|https://kingfisher-game.com/]] is a game built by PossilbyPixels that raises awareness about Autism. It is a story-based action / puzzle game for PC and mobile.
-                    My role in the project was to build minigames that occur throughout the story and also to develop tools to help development.
-                    One of the tools I made for this project was a suburban neighborhood generator. This tool allowed us to draw streets in the editor which then were automatically filled with procedurally generated houses and gardens. You can see a demo in [[this video|/assets/vid/procedural_streets.mp4]].
-                    You can wishlist the game on [[Steam|https://store.steampowered.com/app/4197280/Kingfisher_An_Autism_Tale/]]!">
-                </project-card>
-                <project-card image="/assets/img/ludum_dare.png" image-alt="Ludum Dare"
-                    title="Ludum Dare"
-                    description="Between 2019 and 2024, I participated regularly in the Ludum Dare event. This event was all about creating games under tight deadlines of 48 hours and with no external resources such as audio or 3D art.
-                    After each event I published my game on [[Itch.io|https://coffeeplanet.itch.io/]] where they are still available for play. In the future I want to migrate them to this website.
-                    I want to especially highlight [[Cobor goes farming|https://coffeeplanet.itch.io/ludum-dare-51]] and [[Windy the Indie|https://coffeeplanet.itch.io/windy-the-indie]].">
-                </project-card>
-                <project-card image="/assets/img/thesis_tool.png" image-alt="Planet Tool"
-                    title="Masterthesis: Planet Tool"
-                    description="For my Masterthesis at Group T KU Leuven I made a tool for Unity that creates a procedural planet terrain.
-                    The main challenge of this project was to optimize the algorithm to work as fast as possible. For this I leveraged GPU compute shaders to process large chunks of data at once.
-                    You can find the tool and my thesis paper [[here|https://github.com/DouweRavers/ThesisProject-ThePlanetEngine/tree/main]].">
-                </project-card>
-                <project-card image="/assets/img/wizard_gloves.png" image-alt="Wizard Gloves"
-                    title="Masterproject: Wizard Gloves"
-                    description="In another project during my masters we explored gesture-based interactions in virtual environments.
-                    For this project we developed a prototype using Unity and custom wearable hardware to enable magic-like hand gestures for interfacing with a story game.
-                    See the game [[here|/assets/vid/wizard_gloves.mp4]] or you can find the game and paper [[here|https://github.com/DouweRavers/MasterProject-WizardsGlovesAdventure/tree/main]].">
-                </project-card>
+
+                    <div class="about-me-section">
+                        <h2>Currently I'm working on:</h2>
+                        <div class="about-me-projects-grid" id="currently-working-grid">
+                            <div class="game-card">
+                                <div class="game-card-image contain">
+                                    <img src="/assets/img/rollability.png" alt="RollAbility">
+                                </div>
+                                <div class="game-card-content">
+                                    <h3 class="game-card-title">RollAbility</h3>
+                                    <p class="game-card-description">Therapeutic exergame for wheelchair training with clinical protocol integration.
+                                    </p>
+                                </div>
+                                <div class="game-card-expanded">
+                                    <p class="game-card-full-description">For my PhD research at KU Leuven, I'm developing RollAbility, a therapeutic
+                                        exergame that bridges player autonomy with clinical guidelines to enhance
+                                        wheelchair training. Developed in collaboration with therapists, RollAbility is
+                                        a game built onto a clinical protocol and controlled by an actual powered
+                                        wheelchair. The game connects to the RollAbility App which allows therapists to
+                                        control the training session in real-time. [[Read the
+                                        paper|https://dl.acm.org/doi/abs/10.1145/3748621]] or [[watch the
+                                        video|https://www.youtube.com/watch?v=8y9XFdSN_04]].</p>
+                                </div>
+                            </div>
+
+                            <div class="game-card">
+                                <div class="game-card-image contain">
+                                    <img src="/assets/img/alcove.png" alt="Alcove">
+                                </div>
+                                <div class="game-card-content">
+                                    <h3 class="game-card-title">Alcove</h3>
+                                    <p class="game-card-description">Interreg project building a lung cancer detection device with cross-platform UI.
+                                    </p>
+                                </div>
+                                <div class="game-card-expanded">
+                                    <p class="game-card-full-description">Alcove is an interreg project between Flemish, Walloon and French universities
+                                        and hospitals that aims to build a device that detects lung cancer through a
+                                        breath test. My role is to create a user interface for the device. This UI has
+                                        to work both on android phones and on embedded linux devices. [[Read more about
+                                        Alcove|https://alcove.crosss3.eu/nl/]].</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="about-me-section">
+                        <h2><span class="green-text">However</span> in the past I also worked on:</h2>
+                        <div class="about-me-projects-grid" id="past-projects-grid">
+                            <div class="game-card">
+                                <div class="game-card-image contain">
+                                    <img src="/assets/img/godot_addons.png" alt="Godot tools">
+                                </div>
+                                <div class="game-card-content">
+                                    <h3 class="game-card-title">Godot Addons</h3>
+                                    <p class="game-card-description">Visual Studio Debugger and Test Scenes addons for the Godot engine.</p>
+                                </div>
+                                <div class="game-card-expanded">
+                                    <p class="game-card-full-description">I published two small addons to the godot asset library. One addon called [[Godot
+                                        Visual Studio Debugger|https://godotengine.org/asset-library/asset/3505]] which
+                                        allows you to dynamically run the current scene open in the Godot editor
+                                        directly in Visual Studio Debugger. The second addon called [[Godot Test
+                                        Scenes|https://godotengine.org/asset-library/asset/3420]] extends the Godot
+                                        editor with an additional run mode, this mode runs an associated test scene to
+                                        the currently open one in the editor. They are both open source: [[Godot Test
+                                        Scenes|https://github.com/DouweRavers/godot_test_scene]] and [[Godot Visual
+                                        Studio
+                                        Debugger|https://github.com/DouweRavers/godot_visualstudio_debugger/tree/main]].
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="game-card">
+                                <div class="game-card-image contain">
+                                    <img src="/assets/img/kingfisher.png" alt="Kingfisher">
+                                </div>
+                                <div class="game-card-content">
+                                    <h3 class="game-card-title">Kingfisher</h3>
+                                    <p class="game-card-description">Story-based action/puzzle game raising awareness about Autism.</p>
+                                </div>
+                                <div class="game-card-expanded">
+                                    <p class="game-card-full-description">The project [[Kingfisher|https://kingfisher-game.com/]] is a game built by
+                                        PossilbyPixels that raises awareness about Autism. It is a story-based action /
+                                        puzzle game for PC and mobile. My role in the project was to build minigames
+                                        that occur throughout the story and also to develop tools to help development.
+                                        One of the tools I made for this project was a suburban neighborhood generator.
+                                        This tool allowed us to draw streets in the editor which then were automatically
+                                        filled with procedurally generated houses and gardens. You can see a demo in
+                                        [[this video|https://nextcloud.douwco.be/s/A8XPCgQkTNDinjE]] or you can wishlist the game on
+                                        [[Steam|https://store.steampowered.com/app/4197280/Kingfisher_An_Autism_Tale/]]!
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="game-card">
+                                <div class="game-card-image contain">
+                                    <img src="/assets/img/ludum_dare.png" alt="Ludum Dare">
+                                </div>
+                                <div class="game-card-content">
+                                    <h3 class="game-card-title">Ludum Dare</h3>
+                                    <p class="game-card-description">Game jam participation with 48-hour deadlines and no external resources.</p>
+                                </div>
+                                <div class="game-card-expanded">
+                                    <p class="game-card-full-description">Between 2019 and 2024, I participated regularly in the Ludum Dare event. This
+                                        event was all about creating games under tight deadlines of 48 hours and with no
+                                        external resources such as audio or 3D art. After each event I published my game
+                                        on [[Itch.io|https://coffeeplanet.itch.io/]] where they are still available for
+                                        play. In the future I want to migrate them to this website. I want to especially
+                                        highlight [[Cobor goes farming|https://coffeeplanet.itch.io/ludum-dare-51]] and
+                                        [[Windy the Indie|https://coffeeplanet.itch.io/windy-the-indie]].</p>
+                                </div>
+                            </div>
+
+                            <div class="game-card">
+                                <div class="game-card-image contain">
+                                    <img src="/assets/img/thesis_tool.png" alt="Planet Tool">
+                                </div>
+                                <div class="game-card-content">
+                                    <h3 class="game-card-title">Masterthesis: Planet Tool</h3>
+                                    <p class="game-card-description">Procedural planet terrain generation with GPU compute shaders.</p>
+                                </div>
+                                <div class="game-card-expanded">
+                                    <p class="game-card-full-description">For my Masterthesis at Group T KU Leuven I made a tool for Unity that creates a
+                                        procedural planet terrain. The main challenge of this project was to optimize
+                                        the algorithm to work as fast as possible. For this I leveraged GPU compute
+                                        shaders to process large chunks of data at once. You can find the tool and my
+                                        thesis paper
+                                        [[here|https://github.com/DouweRavers/ThesisProject-ThePlanetEngine/tree/main]].
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="game-card">
+                                <div class="game-card-image contain">
+                                    <img src="/assets/img/wizard_gloves.png" alt="Wizard Gloves">
+                                </div>
+                                <div class="game-card-content">
+                                    <h3 class="game-card-title">Masterproject: Wizard Gloves</h3>
+                                    <p class="game-card-description">Gesture-based interaction with wearable hardware for virtual environments.</p>
+                                </div>
+                                <div class="game-card-expanded">
+                                    <p class="game-card-full-description">In another project during my masters we explored gesture-based interactions in
+                                        virtual environments. For this project we developed a prototype using Unity and
+                                        custom wearable hardware to enable magic-like hand gestures for interfacing with
+                                        a story game. See the game [[here|https://nextcloud.douwco.be/s/STAkfXXpyNpDfrp]] or you can
+                                        find the game and paper
+                                        [[here|https://github.com/DouweRavers/MasterProject-WizardsGlovesAdventure/tree/main]].
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                </div>
            </div>
        </section>

        <section id="apps" class="scroll_section">
            <h1>Douwco Apps</h1>
-        <div class="content-box">
-            <p>
-                Under construction...
-            </p>
+            <div class="service-section">
+                <div class="service-selector">
+                    <button class="service-selector-item selected" data-name="Wattif"
+                        data-description="Fluvius-data-based simulator: see how installing a heat pump or battery would change your consumption pattern."
+                        data-url="https://wattif.douwco.be" data-image="/assets/img/wattif_screenshot.png">
+                        <span class="service-selector-icon" style="--icon-bg: #7d3c98;">
+                            <img src="/assets/img/logos/wattif-icon.png" alt="Wattif logo">
+                        </span>
+                        <span class="service-selector-label">Wattif</span>
+                    </button>
+                    <button class="service-selector-item" data-name="Proostenkrant"
+                        data-description="A family newspaper where every family member writes about their life, printed every season for the grandparents to read."
+                        data-url="https://proostenkrant.douwco.be" data-image="/assets/img/proostenkrant_screenshot.png">
+                        <span class="service-selector-icon" style="--icon-bg: #8d6e63;">
+                            <img src="/assets/img/logos/proostenkrant-icon.png" alt="Proostenkrant logo">
+                        </span>
+                        <span class="service-selector-label">Proostenkrant</span>
+                    </button>
+                    <button class="service-selector-item" data-name="Dadel"
+                        data-description="Dashboard for the sensors in my garden, fed by a solar-powered ESP32-C6 hub that syncs whenever I come near it with my phone's hotspot on."
+                        data-url="https://dadel.douwco.be" data-image="/assets/img/dadel_screenshot.png">
+                        <span class="service-selector-icon" style="--icon-bg: #558b2f;">
+                            <img src="/assets/img/logos/dadel-icon.png" alt="Dadel logo">
+                        </span>
+                        <span class="service-selector-label">Dadel</span>
+                    </button>
+                </div>
+                <div class="service-detail">
+                    <div class="service-visual">
+                        <img src="/assets/img/wattif_screenshot.png" alt="Wattif" class="service-visual-img">
+                    </div>
+                    <div class="service-info">
+                        <h2 class="service-title">Wattif</h2>
+                        <p class="service-description">Fluvius-data-based simulator: see how installing a heat pump or
+                            battery would change your consumption pattern.</p>
+                        <a href="https://wattif.douwco.be" target="_blank" rel="noopener"
+                            class="go-to-app-button">Go to App</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="hosted" class="scroll_section">
+            <h1>Douwco Hosted</h1>
+            <div class="service-section" data-visit-label="Visit">
+                <div class="service-selector">
+                    <button class="service-selector-item selected" data-name="Nextcloud"
+                        data-description="Self-hosted cloud file storage for all my files."
+                        data-url="https://nextcloud.douwco.be"
+                        data-image="/assets/img/nextcloud_screenshot.png">
+                        <span class="service-selector-icon" style="--icon-bg: #0082c9;">
+                            <img src="/assets/img/logos/nextcloud-icon.png" alt="Nextcloud logo">
+                        </span>
+                        <span class="service-selector-label">Nextcloud</span>
+                    </button>
+                    <button class="service-selector-item" data-name="Gitea"
+                        data-description="Lightweight self-hosted Git service with a web interface for my code repositories."
+                        data-url="https://git.douwco.be" data-image="/assets/img/gitea_screenshot.png">
+                        <span class="service-selector-icon" style="--icon-bg: #ffffff;">
+                            <img src="/assets/img/logos/gitea-icon.png" alt="Gitea logo">
+                        </span>
+                        <span class="service-selector-label">Gitea</span>
+                    </button>
+                    <button class="service-selector-item" data-name="Beszel"
+                        data-description="Lightweight server monitoring: real-time metrics and alerts for my servers."
+                        data-url="https://stats.douwco.be" data-image="/assets/img/beszel_screenshot.png">
+                        <span class="service-selector-icon" style="--icon-bg: #1f2630;">
+                            <img src="/assets/img/logos/beszel-icon.png" alt="Beszel logo">
+                        </span>
+                        <span class="service-selector-label">Beszel</span>
+                    </button>
+                    <button class="service-selector-item" data-name="Jellyfin"
+                        data-description="Open-source media server for streaming my movies, series and music."
+                        data-url="https://jellyfin.douwco.be" data-image="/assets/img/jellyfin_screenshot.png">
+                        <span class="service-selector-icon" style="--icon-bg: #1f2630;">
+                            <img src="/assets/img/logos/jellyfin-icon.png" alt="Jellyfin logo">
+                        </span>
+                        <span class="service-selector-label">Jellyfin</span>
+                    </button>
+                    <button class="service-selector-item" data-name="Penpot"
+                        data-description="Open-source, self-hosted design and prototyping platform (Figma alternative)."
+                        data-url="https://penpot.douwco.be" data-image="/assets/img/penpot_screenshot.png">
+                        <span class="service-selector-icon" style="--icon-bg: #f16521;">
+                            <img src="/assets/img/logos/penpot-icon.png" alt="Penpot logo">
+                        </span>
+                        <span class="service-selector-label">Penpot</span>
+                    </button>
+                </div>
+                <div class="service-detail">
+                    <div class="service-visual">
+                        <img src="/assets/img/nextcloud_screenshot.png" alt="Nextcloud" class="service-visual-img">
+                    </div>
+                    <div class="service-info">
+                        <h2 class="service-title">Nextcloud</h2>
+                        <p class="service-description">Self-hosted cloud file storage for all my files.</p>
+                        <a href="https://nextcloud.douwco.be" target="_blank" rel="noopener"
+                            class="go-to-app-button">Visit</a>
+                    </div>
+                </div>
            </div>
        </section>

        <section id="games" class="scroll_section">
            <h1>My Games</h1>
-        <div class="content-box">
-            <p>
-                Under construction...
-            </p>
+            <div class="games-container">
+                <div class="games-grid" id="games-grid">
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/romants.png" alt="RomAnts cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">RomAnts</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2024</span>
+                                <span class="game-genre">Strategy / Tower Defense</span>
+                            </div>
+                            <p class="game-card-description">A 3D tower defence game with a Roman flavour: lead the
+                                RomAnts in defending the Temple of Antonia from the BarbariAnts.</p>
+                            <a href="https://coffeeplanet.itch.io/romants" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">A tower defense game where you lead the brave RomAnts
+                                in defending their sacred Temple of Antonia from the ruthless BarbariAnts. As
+                                General, you recruit workers and soldiers, gather resources, and build guard towers
+                                while the BarbariAnt forces grow stronger over time. Made in 48 hours for Ludum Dare
+                                56 (theme: Tiny Creatures).</p>
+                            <a href="https://coffeeplanet.itch.io/romants" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/coral-conquest.jpg" alt="Coral Conquest cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">Coral Conquest</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2024</span>
+                                <span class="game-genre">Strategy</span>
+                            </div>
+                            <p class="game-card-description">Build and manage an underwater settlement with houses,
+                                farms and fish.</p>
+                            <a href="https://coffeeplanet.itch.io/coral-conquest" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">Build and manage an underwater settlement: place
+                                houses, farms and fish, and keep your coral city growing. Select buildings and fish
+                                and move them where they are needed. Made for the FishFest game jam; downloadable for
+                                Windows and Linux.</p>
+                            <a href="https://coffeeplanet.itch.io/coral-conquest" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/cropcopter.jpg" alt="CropCopter cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">CropCopter</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2023</span>
+                                <span class="game-genre">Ludum Dare 53</span>
+                            </div>
+                            <p class="game-card-description">Made with Godot for Ludum Dare 53: fly the CropCopter
+                                and deliver the harvest.</p>
+                            <a href="https://coffeeplanet.itch.io/cropcopter" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">Made with Godot for Ludum Dare 53 (theme: Delivery).
+                                Fly the CropCopter and deliver the harvest — playable in the browser, with downloads
+                                available for Windows and Linux.</p>
+                            <a href="https://coffeeplanet.itch.io/cropcopter" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/cobor-goes-farming.jpg" alt="Cobor goes farming cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">Cobor goes farming</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2022</span>
+                                <span class="game-genre">Educational / Puzzle</span>
+                            </div>
+                            <p class="game-card-description">An assembly-inspired programming puzzle game.</p>
+                            <a href="https://coffeeplanet.itch.io/ludum-dare-51" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">A puzzle programming game made for Ludum Dare 51:
+                                write a program that performs three challenges, each within 10 seconds. The
+                                programming language is assembly-like, where the key is to manipulate data in the
+                                memory array. Three levels go from easy to hard.</p>
+                            <a href="https://coffeeplanet.itch.io/ludum-dare-51" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/for-king-for-freedom-and-for-law.jpg"
+                                alt="For King, for Freedom and for Law! cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">For King, for Freedom and for Law!</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2021</span>
+                                <span class="game-genre">Strategy</span>
+                            </div>
+                            <p class="game-card-description">Fight your way through the Belgian revolution of 1831.</p>
+                            <a href="https://coffeeplanet.itch.io/ludumdare48" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">You play as a military commander during the Belgian
+                                revolution of 1831: save soldiers, guide them into battle, and drive the Dutch forces
+                                back to the northern borders. Based on the Ten Days' Campaign and made for Ludum Dare
+                                48.</p>
+                            <a href="https://coffeeplanet.itch.io/ludumdare48" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/tanks-n-robots.jpg" alt="Tanks 'n Robots cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">Tanks 'n Robots</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2021</span>
+                                <span class="game-genre">Shooter</span>
+                            </div>
+                            <p class="game-card-description">The ultimate battle of robots versus the raw power of
+                                heavy military vehicles.</p>
+                            <a href="https://coffeeplanet.itch.io/ludum-dare-49" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">After an unstable Windows update lets AI take over
+                                the world, all technology is under its control. Luckily, your deprecated military
+                                vehicle still works. Reconquer the world by eliminating the evil AI! Made for Ludum
+                                Dare 49.</p>
+                            <a href="https://coffeeplanet.itch.io/ludum-dare-49" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/gerstenat.png" alt="Gerstenat cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">Gerstenat</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2021</span>
+                                <span class="game-genre">App</span>
+                            </div>
+                            <p class="game-card-description">An app that simulates the drinking games me and my
+                                friends play when partying.</p>
+                            <a href="https://coffeeplanet.itch.io/gerstenat" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">Gerstenat simulates the drinking games that me and
+                                my friends play when partying. The app is still in development; an Android APK is
+                                available to try it out.</p>
+                            <a href="https://coffeeplanet.itch.io/gerstenat" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/break-the-isolation.png" alt="Break the Isolation cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">Break the Isolation</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2020</span>
+                                <span class="game-genre">Strategy</span>
+                            </div>
+                            <p class="game-card-description">As a virus, break the city out of isolation! But watch
+                                out for the other viruses.</p>
+                            <a href="https://coffeeplanet.itch.io/break-the-isolation" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">As a virus, try to infect the city in isolation —
+                                but watch out for the other viruses trying to beat you to it. Works even on
+                                smartphones. Made for the Major Jam: Isolation.</p>
+                            <a href="https://coffeeplanet.itch.io/break-the-isolation" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/pandaemic.jpg" alt="Pandæmic cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">Pandæmic</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2020</span>
+                                <span class="game-genre">Simulation</span>
+                            </div>
+                            <p class="game-card-description">Build the most effective panda enclosure and collect as
+                                many pandas as you can before the time limit ends.</p>
+                            <a href="https://coffeeplanet.itch.io/pandmic" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">You were chosen as manager of the new Utrecht panda
+                                breeding center. Design the most effective panda enclosure: build huts, sources of
+                                food and water, and even toys to make them happy. Work fast before the time limit
+                                ends — and beware THE RABBITS!</p>
+                            <a href="https://coffeeplanet.itch.io/pandmic" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/loopedy-island.jpg" alt="Loopedy Island cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">Loopedy Island</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2020</span>
+                                <span class="game-genre">Racing</span>
+                            </div>
+                            <p class="game-card-description">A race game created in 48 hours for Ludum Dare 47.</p>
+                            <a href="https://coffeeplanet.itch.io/ludumdare47" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">A racing game created in 48 hours for Ludum Dare 47.
+                                Jump through the loops for points and avoid hitting walls and cars. Playable in the
+                                browser, or download the Windows executable for better performance and fancier
+                                graphics.</p>
+                            <a href="https://coffeeplanet.itch.io/ludumdare47" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/windy-the-indie.jpg" alt="Windy The Indie cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">Windy The Indie</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2020</span>
+                                <span class="game-genre">Action</span>
+                            </div>
+                            <p class="game-card-description">Play as Windy, a Native American boy defending his home
+                                forest from mean rednecks with his bow.</p>
+                            <a href="https://coffeeplanet.itch.io/windy-the-indie" target="_blank" rel="noopener"
+                                class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">Windy is a Native American boy struggling to
+                                protect his home forest from mean rednecks. Desperately, with his bow, he tries to
+                                shoot as many of them down as he can — can you keep the forest alive? Made for Ludum
+                                Dare 46; also available on Google Play.</p>
+                            <a href="https://coffeeplanet.itch.io/windy-the-indie" target="_blank" rel="noopener"
+                                class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+
+                    <div class="game-card">
+                        <div class="game-card-image">
+                            <img src="/assets/img/games/the-desert-of-nothingness.jpg"
+                                alt="LD45: The desert of nothingness cover">
+                        </div>
+                        <div class="game-card-content">
+                            <h3 class="game-card-title">LD45: The desert of nothingness</h3>
+                            <div class="game-card-meta">
+                                <span class="game-year-badge">2019</span>
+                                <span class="game-genre">Ludum Dare 45</span>
+                            </div>
+                            <p class="game-card-description">Plant planting game made for Ludum Dare 45. My first
+                                finished game ever.</p>
+                            <a href="https://coffeeplanet.itch.io/the-desert-of-nothingness" target="_blank"
+                                rel="noopener" class="play-button">Play</a>
+                        </div>
+                        <div class="game-card-expanded">
+                            <p class="game-card-full-description">A plant planting game made for Ludum Dare 45 (theme:
+                                Start with nothing). My first finished game ever.</p>
+                            <a href="https://coffeeplanet.itch.io/the-desert-of-nothingness" target="_blank"
+                                rel="noopener" class="play-button">Play on itch.io</a>
+                        </div>
+                    </div>
+                </div>
            </div>
        </section>
    </main>
@@ -147,4 +668,5 @@
        </div>
    </footer>
 </body>
+
 </html>
Author	SHA1	Message	Date
Douwe	39d2bc3f8d	Adding the right images and changing some descriptions.	2026-10-14 12:48:25 +02:00
douwe	75dd780352	Improved UI	2026-10-12 17:18:17 +02:00
Douwe	537db79d78	Updated text	2026-10-01 14:50:51 +02:00
Douwe	70a59f26f4	Removed videos from repo and moved to nextcloud public link.	2026-10-01 14:45:25 +02:00
douwe	f8928853de	Revert "Add mobile responsiveness for phone and landscape mode" This reverts commit `d745be248d`.	2026-09-25 11:59:43 +02:00
douwe	78f668bd2a	renamed.	2026-09-25 09:51:08 +00:00
douwe	d745be248d	Add mobile responsiveness for phone and landscape mode - Reduced base font size on mobile (18px vs 25px) - Made navigation bar responsive: smaller icons, wrapped layout - Fixed header position on mobile (sticky at top) - Adjusted scroll_container margin top to account for fixed header - Disabled scroll-snap on mobile for better UX - Made home section responsive: smaller title, tagline, images - Project cards grid: smaller cards and text on mobile - Apps carousel: responsive icon sizes and spacing - Games grid: smaller cards and proper spacing - Footer: centered layout on mobile - All interactive elements maintain touch targets	2026-09-25 11:38:15 +02:00
douwe	5c20a6b747	Revert "Improve navigation scrolling to show full content" This reverts commit `a7ea82ff19`.	2026-09-25 11:31:39 +02:00
douwe	a7ea82ff19	Improve navigation scrolling to show full content - Adjusted IntersectionObserver threshold to 0.7 for better section detection - Added scroll-padding-top to scroll_container to account for header - Added scroll-margin-top to scroll_section for better snap alignment - Updated navigation click handler to scroll with header height offset - Ensures sections are fully visible when navigating	2026-09-25 11:28:37 +02:00
douwe	f9036a2644	Add placeholder screenshot images for apps section - Added 5 service screenshots (Gitea, Nextcloud, Penpot, Beszel, Wattif) - Created apps/ directory for organization	2026-09-25 11:26:15 +02:00
douwe	c5dca7bb54	Implement games section with expandable cards - Added responsive grid of game cards with dark-teal background - Each card has: rounded gray image placeholder, white title, gray description, orange year badge - Click to expand: shows full description + centered play button - Play button opens game in new window - Flat minimal design consistent with portfolio style - Created placeholder images for 6 games	2026-09-25 11:25:58 +02:00