douwco_website/public/index.html

<!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."/>
    <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>
</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="#about_me">
                <img class="icon small" src="/assets/img/icons/user.png" alt="">
                <p>About <span>Me</span></p>
            </a>
            <a class="nav_option" href="#apps">
                <img class="icon small" src="/assets/img/icons/projects_icon.png" alt="">
                <p>Douwco <span>Apps</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>
            </a>
        </div>
    </nav>
</header>

<main class="scroll_container">
    <section id="home" class="scroll_section">
        <div class="vert_container revert start">
            <div class="panel">
                <div class="section-title">
                    <img class="icon large toggle" src="/assets/img/douwco_logo.png" alt="">
                    <div class="text-section">
                        <h1 class="title">Douwco</h1>
                        <div class="tagline">
                            <p class="green-text">Because</p>
                            <p class="normal-text">nerds build their own homeserver.</p>
                        </div>
                    </div>
                </div>
                <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.
                    </p>
                </div>
            </div>
            <img class="image stick large" src="/assets/img/server_image.png" alt="The homeserver running this website">
        </div>
    </section>

    <section id="about_me" class="scroll_section">
        <div class="vert_container start">
            <img class="image stick small" src="/assets/img/me_img.png" alt="Portrait of Douwe">
            <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:
                </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>
        </div>
    </section>

    <section id="apps" class="scroll_section">
        <h1>Douwco Apps</h1>
        <div class="content-box">
            <p>
                Under construction...
            </p>
        </div>
    </section>

    <section id="games" class="scroll_section">
        <h1>My Games</h1>
        <div class="content-box">
            <p>
                Under construction...
            </p>
        </div>
    </section>
</main>

<footer>
    <div class="vert_container">
        <p id="copyright"></p>
        <p>Made and hosted in <img class="flag" src="/assets/img/icons/europe.png" alt="the EU"></p>
    </div>
</footer>
</body>
</html>