Updated the docker setup.

revert Added the batterytool to the website.

.cache/jb/version.txt

@@ -1 +0,0 @@
-(ssh://git@git.jetbrains.team/llvm/llvm-project.git f4157ca9dd49181f6d35eaf6d324ffa84a40f01b based on LLVM 31f1590e4fb324c43dc36199587c453e27b6f6fa revision)

.gitignore

@@ -6,4 +6,4 @@ CMakeCache.txt
 Makefile
 
 # Executable
-douwco_web
+server.out

.vscode/launch.json

@@ -1,10 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        
-
-    ]
-}

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "cmake.sourceDirectory": "/home/douwe/Nextcloud/Projects/douwco.be"
-}
+  "clangd.arguments": [
+    "--query-driver=/usr/bin/g++-15"
+  ]
+} 

CMakeLists.txt

@@ -1,30 +1,11 @@
-# Specify the minimum required version of CMake
 cmake_minimum_required(VERSION 3.10)
+project(douwco_website)
 
-# Set the name of the project
-project(douwco_web)
-
-# Find required packages
-find_package(Crow)
-find_package(OpenSSL REQUIRED)
-find_package(ZLIB REQUIRED)
-
-# Set C++ standard to C++17
+# Set the C++ standard (e.g., C++17)
 set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
-# Add the executable
-add_executable(douwco_web
-    src/main.cpp
-    src/server.cpp
-)
-
-# Specify include directories
-target_include_directories(douwco_web PRIVATE
-    ${PROJECT_SOURCE_DIR}/include
-    ${OPENSSL_INCLUDE_DIR}
-)
-
-target_link_libraries(douwco_web PUBLIC 
-    Crow::Crow
-    ${OPENSSL_LIBRARIES} ${ZLIB_LIBRARIES}
+# Add your executable
+add_executable(server.out
+    server/main.cpp
 )

Dockerfile

@@ -1,32 +1,18 @@
-# Use an official Ubuntu as a parent image
-FROM ubuntu:latest
+FROM debian:stable-slim
 
-# Set the working directory in the container to /app
-WORKDIR /server
-
-# Install necessary packages, including CMake, a C++ compiler, and wget
 RUN apt-get update && \
-    apt-get install -y cmake g++ make wget zlib1g-dev && \
-    apt-get clean;
+    apt-get install -y \
+    g++ \
+    cmake \
+    libboost-all-dev
 
-# Download Crow library
-RUN wget https://github.com/CrowCpp/Crow/releases/download/v1.2.1.2/Crow-1.2.1-Linux.deb && \
-    apt-get install -y ./Crow-1.2.1-Linux.deb
+WORKDIR /webserver
 
-# Copy the current directory contents into the container at /app
-COPY . /server
+COPY . .
 
-# Make the build directory
-RUN mkdir -p build && cd build
+RUN mkdir -p build && \
+    cd build && \
+    cmake .. && \
+    make
 
-# Run CMake to configure the build
-RUN cmake .
-
-# Build the project
-RUN cmake --build .
-
-# Expose port 8888 for the web server
-EXPOSE 8888
-
-# Command to run the executable
-CMD ["./douwco_web"]
+ENTRYPOINT ["./build/server.out"]

README.md

@@ -1,2 +1,2 @@
 # douwco.be
-My personal website
+My personal website

compile_commands.json

@@ -0,0 +1,7 @@
+[
+    {
+        "directory": "/home/douwe/Projects/douwco_website/server",
+        "command": "/usr/bin/g++-15 -I/usr/include/c++/15 -I/usr/include/x86_64-linux-gnu/c++/15 -I/usr/include/c++/15/backward -I/usr/lib/gcc/x86_64-linux-gnu/15/include -I/usr/local/include -I/usr/include/x86_64-linux-gnu -I/usr/include -c main.cpp -o main.o",
+        "file": "/home/douwe/Projects/douwco_website/server/main.cpp"
+    }
+]

compose.yaml

@@ -0,0 +1,9 @@
+services:
+  douwcowebsite:
+    image: douwcowebsite
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    ports:
+      - 8080:8080
+

docker_commands.txt

@@ -1,10 +0,0 @@
-# build
-sudo docker build -t douwco_website .
-
-# run
-sudo docker run -d --name douwco_website -p 8888:8888 douwco_website
-
-# replace
-sudo docker stop douwco_website
-sudo docker rm douwco_website
-sudo docker run -d --name douwco_website -p 8888:8888 douwco_website

include/server.hpp

@@ -1,24 +0,0 @@
-#ifndef DOUWCO_SERVER_HPP
-#define DOUWCO_SERVER_HPP
-
-#include <crow.h>
-
-namespace Douwco {
-
-    class Server {
-
-    private:
-        static constexpr int port = 8888;
-        crow::SimpleApp crowApp;
-
-    public:
-        Server() = default;
-        ~Server() = default;
-
-        void setup();
-        void start();
-    };
-    
-}
-
-#endif // DOUWCO_SERVER_HPP

server/main.cpp

@@ -0,0 +1,6 @@
+#include <iostream>
+
+int main(){
+    std::cout << "Hello World!" << std::endl;
+    return 0;
+}

src/main.cpp

@@ -1,8 +0,0 @@
-#include "server.hpp"
-
-int main() {
-    Douwco::Server server;
-    server.setup();
-    server.start();
-    return 0;
-}

src/server.cpp

@@ -1,25 +0,0 @@
-#include <crow.h>
-
-#include "server.hpp"
-
-#define CREATE_ROUTE(route_path, html_path) \
-    CROW_ROUTE(this->crowApp, route_path) \
-    ([]() { \
-        std::string page = crow::mustache::load(html_path).render_string(); \
-        return page; \
-    });
-
-void Douwco::Server::setup() {
-    CREATE_ROUTE("/", "home.html");
-    CREATE_ROUTE("/about_me", "about_me.html");
-    CREATE_ROUTE("/about_douwco", "about_douwco.html");
-    CREATE_ROUTE("/games", "games.html");
-}
-
-void Douwco::Server::start() {
-    crowApp
-        .port(port)
-        .multithreaded()
-//        .ssl_file("dev_cert/certificate.pem","dev_cert/private.key")
-        .run();
-}

static/css/douwco_styling.css

@@ -1,167 +0,0 @@
-@font-face {
-    font-family: righteous;
-    src: url(../font/Righteous-Regular.ttf);
-}
-
-@font-face {
-    font-family: monsterrat_regular;
-    src: url(../font/Montserrat-Regular.ttf);
-}
-
-@font-face {
-    font-family: monsterrat_bold;
-    src: url(../font/Montserrat-Bold.ttf);
-}
-
-
-body {
-    font-family: monsterrat_regular;
-    font-size: 24px;
-    background-color: #283e3e;
-    color: white;
-}
-
-.root_div{
-    display: flex;
-    flex-direction: column;
-}
-.root_div > .side_panel_div{
-    width: 100%;
-}
-
-.title_div{
-    margin-left: 50px;
-    display: flex; 
-    align-items: center;
-    flex-direction: row; 
-    align-content: center;
-}
-.title_div > img {
-    width:150px; 
-    height: 150px;
-    margin-right: 50px;
-}
-.title_div > h1 {
-    font-family: righteous;
-    font-size: 120px;
-}
-
-.apps_title_div {
-    margin-top: 100px;
-}
-.apps_title_div > h2 {
-    font-family: monsterrat_bold;
-    font-size: 48px;
-    text-align: center;
-}
-.apps_title_div > hr {
-    height: 6px;
-    width:75%;
-    background-color: white;
-    border-width: 0px;
-    border-radius: 3px;
-    align-self: center;
-}
-
-.app_option_div { 
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    margin: 25px;
-    border-radius: 25px;
-    background-color: #304b4bFF;
-}
-.app_option_div > img {
-    height: 200px;
-    width: 200px;
-    margin: 25px;
-}
-.app_option_div > div > h3 {
-    font-family: monsterrat_bold;
-    font-size: 36px;
-}
-.app_option_div > div > p {
-    font-family: monsterrat_regular;
-    font-size: 24px;
-}
-.app_option_div > div > p > a {
-    color: #6dde99; 
-    font-family: monsterrat_bold;
-}
-.app_option_div > a {
-    position: absolute;
-    height: 50px;
-    width: 125px;
-    bottom: 25px;
-    right: 25px;
-    align-self: flex-end;
-    display: flex;
-    align-items: center;
-    border-radius: 10px;
-    border: none;
-    background-color: #6dde99;
-}
-.app_option_div > a > p {
-    font-family: monsterrat_bold;
-    font-size: 18px;
-    width: 100%;
-    color: white;
-    text-align: center;
-}
-
-
-a {
-    font-family: monsterrat_regular;
-    color: white;
-    text-decoration:none;
-    cursor: pointer;
-}
-.menu_option_a {
-    font-family: monsterrat_bold;
-    font-size: 48px;
-    
-    border: none;
-    border-radius: 20px;
-    background-color: transparent;
-    
-    display: flex; 
-    align-items: center;
-
-    margin-left: 50px; 
-    padding-left: 50px;
-    padding-right: 50px;
-}
-.menu_option_a:hover{
-    background-color: #304b4bFF;;
-}
-.menu_option_a > img {
-    width:100px; 
-    height:75px;
-    margin-right: 50px;
-}
-.menu_option_a > p > span {
-    color: #88d4d4;
-}
-
-
-@media (min-width: 1300px) {
-    html, body {
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-    }
-    
-    .root_div{
-        display: flex;
-        flex-direction: row;
-    }
-    .root_div > .side_panel_div{
-        width: 50%;
-    }
-
-    .apps_selection_div {
-        max-height: 75vh;
-        overflow-y: auto;   
-    }
-}

templates/about_douwco.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-
-<head>
-  <link rel="stylesheet" href="../static/css/douwco_styling.css">
-</head>
-<html>
-
-<body>
-  <div class="title_div">
-    <img src="../static/img/douwco_logo.png" alt="douwco_logo">
-    <h1>douwco</h1>
-  </div>
-</body>
-
-</html>

templates/about_me.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-
-<head>
-  <link rel="stylesheet" href="../static/css/douwco_styling.css">
-</head>
-<html>
-
-<body>
-  <div class="title_div">
-    <img src="../static/img/douwco_logo.png" alt="douwco_logo">
-    <h1>douwco</h1>
-  </div>
-</body>
-
-</html>

templates/games.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-
-<head>
-  <link rel="stylesheet" href="../static/css/douwco_styling.css">
-</head>
-<html>
-
-<body>
-  <div class="title_div">
-    <img src="../static/img/douwco_logo.png" alt="douwco_logo">
-    <h1>douwco</h1>
-  </div>
-</body>
-
-</html>

templates/home.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-
-<head>
-  <link rel="stylesheet" href="../static/css/douwco_styling.css">
-</head>
-
-<html>
-<body>
-  <div class="root_div">
-    <div class="side_panel_div">
-      <div class="title_div">
-        <img src="../static/img/douwco_logo.png" alt="douwco_logo">
-        <h1>douwco</h1>
-      </div>
-      <div>
-        <a class="menu_option_a" href="/games">
-          <img src="../static/img/device-gamepad.png" alt="gamepad icon">
-          <p>Play <span>My Games</span></p>
-        </a>
-        <a class="menu_option_a" href="/about_me">
-          <img src="../static/img/user.png" alt="user icon" style="
-            width:60px; 
-            margin-left: 20px;
-            margin-right:70px;">
-          <p>About <span>Douwe Ravers</span></p>
-        </a>
-        <a class="menu_option_a" href="/about_douwco">
-          <img src="../static/img/info-hexagon.png" alt="info icon" style="
-            width:75px; 
-            margin-left: 12px;
-            margin-right:62px;">
-          <p>About <span>Douwco</span></p>
-        </a>
-      </div>
-    </div>
-  </div>
-</body>
-</html>

wwwroot/css/douwco.css

@@ -0,0 +1,37 @@
+@font-face {
+    font-family: righteous;
+    src: url(/fonts/Righteous-Regular.ttf);
+    format('truetype');
+}
+
+@font-face {
+    font-family: monsterrat_regular;
+    src: url(/fonts/Montserrat-Regular.ttf);
+    format('truetype');
+}
+
+@font-face {
+    font-family: monsterrat_bold;
+    src: url(/fonts/Montserrat-Bold.ttf);
+    format('truetype');
+}
+
+:root {
+    --background-clr: #283e3e;
+    --background-accent-clr: #324f4f;
+    --blue-clr: #47bcdf;
+    --green-clr: #6ede9a;
+    --purple-clr: #a48da;
+    --orange-clr: #e2a661;
+    --white-clr: #ffffff;
+}
+
+body {
+    font-family: monsterrat_regular;
+    background-color: var(--background-clr);
+    color: var(--white-clr);;
+}
+
+.title{
+    font-family: righteous;
+}

wwwroot/css/style.css

@@ -0,0 +1,243 @@
+/* ===== Base Styles ===== */
+
+html, body{
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 25px;
+}
+
+body{
+    display: flex;
+    flex-direction: column;
+}
+
+main {    
+    flex: 1;
+    margin: 20px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+}
+
+a {
+ color: var(--blue-clr)
+}
+
+footer {
+    flex-shrink: 0;
+    background: var(--background-clr);
+    width: 100%;
+}
+
+footer > Div {
+    justify-content: space-between
+}
+
+footer > Div > p {
+    font-size: 16px;
+    margin: 10px 25px 10px 25px;
+}
+
+/* ===== Container Layouts ===== */
+
+.vert_container {
+    display: flex;
+}
+
+@media (max-width: 1000px) {
+    .vert_container.revert {
+        display: inherit;
+    }
+}
+
+.vert_container.centered{
+    align-items: center;
+    justify-content: space-around;
+}
+
+.vert_container.start{
+    align-items: flex-start;
+    justify-content: space-around;
+}
+
+.scroll_container {
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+}
+
+.scroll_section {
+    min-height: 100vh;
+    scroll-snap-align: start;
+}
+
+/* ===== Navigationbar ===== */
+
+.nav_option {
+    font-family: monsterrat_bold;
+    color: var(--white-clr);
+    text-decoration: none;
+    font-size: 36px;
+
+    border: none;
+    border-radius: 20px;
+    background-color: transparent;
+
+    display: flex;
+    align-items: center;
+    margin: 10px;
+    padding-right: 10px;
+}
+
+.nav_option:hover{
+    background-color: var(--background-accent-clr);
+}
+
+.nav_option.active {
+    background-color: var(--background-accent-clr);
+}
+
+.nav_option span {
+    color: var(--green-clr);
+}
+
+@media (max-width: 1100px) {
+    .nav_option p {
+        display: none;
+    }
+}
+
+/* ===== Layout ===== */
+.panel {
+    width: 60%;
+}
+
+@media (max-width: 1000px) {
+    .panel {
+        width: 100%;
+    }
+}
+
+.section-title {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-around;
+}
+
+.text-section {
+    margin-left: 50px;
+}
+
+.title {
+    font-size: 128px;
+    margin: 0;
+    line-height: 1;
+    text-wrap: balance;
+}
+
+@media (max-width: 1200px) {
+    .title {
+        font-size: 100px;
+    }
+}
+
+.tagline {
+    display: flex;
+    font-size: 36px;
+    font-weight: bold;
+    width: 500px;
+}
+
+.tagline .green-text {
+    color: var(--green-clr);
+}
+
+.tagline .normal-text {
+    margin-left: 7px;
+}
+
+@media (max-width: 1200px) {
+    .title {
+        font-size: 100px;
+    }
+
+    .tagline {
+        font-size: 26px;
+        width: 400px;
+    }
+}
+
+.content-box {
+    background-color: var(--background-accent-clr);
+    margin: 50px 20px 20px;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+.content-box p {
+    margin: 0;
+}
+
+.content-box .intro-text {
+    font-weight: bolder;
+    font-size: 28px;
+    color: var(--green-clr)
+}
+
+.project-thumb {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    margin-right: 15px;
+    border-radius: 75x;
+    float: left;
+}
+
+
+/* ===== Images ===== */
+
+.icon {
+    vertical-align: middle;
+    padding: 10px;
+}
+.icon.small {
+    height: 45px;
+}
+.icon.medium {
+    height: 100px;
+}
+.icon.large {
+    height: 250px;
+}
+@media (max-width: 1200px) {
+    .icon.large.toggle {
+        height: 150px;
+    }
+}
+
+
+.image{
+    margin: 30px;
+}
+.image.large{
+    width: 40%;
+}
+.image.small{
+    width: 25%;
+}
+
+@media (max-width: 1000px) {
+    .image.large {
+        width: 80%;
+    }
+    .image.small{
+        width: 50%;
+    }
+}
+
+.image.stick {
+    position: sticky; 
+    top: 20px
+}
+
+ 

wwwroot/includes/about_me.html

@@ -0,0 +1,82 @@
+<div class="vert_container start">
+    <img class="image stick small" src="/img/me_img.png" alt="Image">
+    <div class="panel">
+        <h1>Hi, I'm Douwe</h1>
+        <p>
+            A <span style="color: var(--green-clr);">PhD student</span> at KU Leuven with a passion for game development and software independence.
+            <br><br>
+            Currently I'm working on:
+        </p>
+        <div class="content-box">
+            <img class="project-thumb" src="/img/rollability.png" alt="RollAbility">
+            <p>
+                <span class="intro-text">RollAbility</span> <br>
+                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.
+                <br><br>Developed in collaboration with therapists, RollAbility is a game build 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. 
+                <br><br><a href="https://dl.acm.org/doi/abs/10.1145/3748621" target="_blank">Read the paper</a> or <a href="https://www.youtube.com/watch?v=8y9XFdSN_04" target="_blank">Watch the video</a>.               
+            </p>
+        </div>
+        <div class="content-box">
+            <img class="project-thumb" src="/img/alcove.png" alt="Alcove">
+            <p>
+                <span class="intro-text">Alcove</span> <br>
+                Alcove is a interreg project between Flemish, Walloon and French universities and hospitals that aims to build a device that detects lung cancer through a breath test. 
+                <br><br>My role is to create a user interface for the device. This UI has to work on both android phones as on embedded linux devices.
+                <br><br><a href="https://alcove.crosss3.eu/nl/" target="_blank">Read more about Alcove</a>.               
+            </p>
+        </div>
+
+        <p><span style="color: var(--green-clr);">However</span>  in the past I also worked on:</p>
+
+        <div class="content-box">
+            <img class="project-thumb" src="/img/godot_addons.png" alt="Godot tools">
+            <p>
+                <span class="intro-text">Godot Addons</span> <br>
+                I published two small addons to the godot asset library. 
+                <br><br>One addon called <a href="https://godotengine.org/asset-library/asset/3505">Godot Visual Studio Debugger</a> which allows you to dynammicaly run the current scene open in the Godot editor directly in Visual Studio Debugger. 
+                <br><br>The second addons called <a href="https://godotengine.org/asset-library/asset/3420">Godot Test Scenes</a> extends the Godot editor with an additional run mode, this mode runs a associated test scene to the currently open one in the editor.
+                <br><br>They are both open source:
+                <br><a href="https://github.com/DouweRavers/godot_test_scene">Godot Test Scenes</a> and <a href="https://github.com/DouweRavers/godot_visualstudio_debugger/tree/main">Godot Visual Studio Debugger</a>  
+            </p>
+        </div>
+        <div class="content-box">
+            <img class="project-thumb" src="/img/kingfisher.png" alt="Kingfisher">
+            <p>
+                <span class="intro-text">Kingfisher</span> <br>
+                The project <a href="https://kingfisher-game.com/">Kingfisher</a> is a game build by <a>PossilbyPixels</a> that rises awareness about Autism. It is a storybased action / puzzle game for PC and mobile.        
+                <br><br>My role in the project was to build minigames that occur throughout the story and also to develop tools to help development.
+                <br><br>One of the tools I made for this project was a suburban neigborhood generator. This tool allowed us to draw streets in the editor which then were automaticly filled with procedural generated houses and gardens. You can see a demo in <a href="/vid/procedural_streets.mp4">this video</a>.
+                <br><br>You can wishlist the game on <a href="https://store.steampowered.com/app/4197280/Kingfisher_An_Autism_Tale/">Steam</a>! 
+            </p>
+        </div>
+        <div class="content-box">
+            <img class="project-thumb" src="/img/ludum_dare.png" alt="Ludum Dare">
+            <p>
+                <span class="intro-text">Ludum Dare</span> <br>
+                Between 2019 and 2024, I participated regulary into 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. 
+                <br><br>After each event I published my game on <a href="https://coffeeplanet.itch.io/">Itch.io</a> where they are still availble for play. In the future I want to migrate them to this website. 
+                <br><br>I want to especially highlight <a href="https://coffeeplanet.itch.io/ludum-dare-51">Cobor goes farming</a> and <a href="https://coffeeplanet.itch.io/windy-the-indie">Windy the Indy</a>
+            </p>
+        </div>
+        <div class="content-box">
+            <img class="project-thumb" src="/img/thesis_tool.png" alt="Planet Tool">
+            <p>
+                <span class="intro-text">Masterthesis: Planet Tool</span> <br>
+                For my Masterthesis at Group T KU Leuven I made a tool for Unity that creates a procedural planet terrain. 
+                <br><br>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.
+                <br><br>You can find the tool and my thesis paper <a href="https://github.com/DouweRavers/ThesisProject-ThePlanetEngine/tree/main">here</a>. 
+            </p>
+        </div>
+        <div class="content-box">
+            <img class="project-thumb" src="/img/wizard_gloves.png" alt="Wizard Gloves">
+            <p>
+                <span class="intro-text">Masterproject: Wizard Gloves</span> <br>
+                In another project during my masters we explored gesture-based interactions in virtual environments.
+                <br><br>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.
+                <br><br>See the game <a href="/vid/wizard_gloves.mp4">here</a> or you can find the game and paper <a href="https://github.com/DouweRavers/MasterProject-WizardsGlovesAdventure/tree/main">here</a>  
+            </p>
+        </div>
+    </div>
+</div>

wwwroot/includes/apps.html

@@ -0,0 +1,6 @@
+<h1>Douwco Apps</h1>
+<div class="content-box">
+    <p>
+        Under construction...
+    </p>
+</div>

wwwroot/includes/games.html

@@ -0,0 +1,6 @@
+<h1>My Games</h1>
+<div class="content-box">
+    <p>
+        Under construction...
+    </p>
+</div>

wwwroot/includes/home.html

@@ -0,0 +1,25 @@
+<div class="vert_container revert start">
+    <div class="panel">
+        <div class="section-title">
+            <img class="icon large toggle" src="/img/douwco_logo.png" alt="Image">
+            <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 ofcourse 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="/img/server_image.png" alt="Image">
+</div>

wwwroot/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Douwco</title>
+    <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="/css/douwco.css" />
+    <link rel="stylesheet" href="css/home.css">
+</head>
+<body>
+<header>
+    <nav>
+        <div class="vert_container centered">
+            <a class="nav_option" href="#home"><img class="icon medium" src="/img/douwco_logo.png"></a>
+            <a class="nav_option" href="#about_me">
+                <img class="icon small" src="/img/icons/user.png" alt="Icon">
+                <p>About <span>Me</span></p>
+            </a>
+            <a class="nav_option" href="#apps">
+                <img class="icon small" src="/img/icons/projects_icon.png" alt="Icon">
+                <p>Douwco <span>Apps</span></p>
+            </a>
+            <a class="nav_option" href="#games">
+                <img class="icon small" src="/img/icons/devicegamepad2.png" alt="Icon">
+                <p>My <span>Games</span></p>
+            </a>
+        </div>
+    </nav>
+</header>
+
+<main class="scroll_container">
+    <section id="home" class="scroll_section observed" data-section-name="home"></section>
+    <section id="about_me" class="scroll_section observed" data-section-name="about_me"></section>
+    <section id="apps" class="scroll_section observed" data-section-name="apps"></section>
+    <section id="games" class="scroll_section observed" data-section-name="games"></section>
+</main>
+
+<footer>
+    <div class="vert_container">
+        <p id="copyright"></p>
+        <p>Made and hosted in 🇪🇺</p>
+    </div>
+</footer>
+
+<script src="/js/main.js"></script>
+<script src="/js/index.js"></script>
+</body>
+</html>

wwwroot/js/index.js

@@ -0,0 +1,47 @@
+// Setup the navigation bar
+function setupNavigationHighlight(){
+    const sections = document.querySelectorAll('.scroll_section');
+    const navOptions = document.querySelectorAll('.nav_option');
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const sectionId = entry.target.id;
+                window.history.pushState(null, null, `#${sectionId}`);
+                navOptions.forEach(link => {
+                    link.classList.remove('active');
+                    if (link.getAttribute('href') === `#${sectionId}`) {
+                        link.classList.add('active');
+                    }
+                });
+            }
+        }), {threshold: 0.5};
+    })
+    
+    sections.forEach(section => {
+        observer.observe(section);
+    });
+}
+
+function setupNavigationClickObserver() {
+    const navLinks = document.querySelectorAll('.nav_option');
+    navLinks.forEach(link => {
+        link.addEventListener('click', (event) => {
+            event.preventDefault();
+
+            const targetId = link.getAttribute('href');
+            const targetSection = document.querySelector(targetId);
+            if (targetSection) {
+                targetSection.scrollIntoView({
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+}
+
+setupNavigationHighlight();
+setupNavigationClickObserver();
+
+// Set copyright year
+const currentYear = new Date().getFullYear();
+document.getElementById('copyright').textContent = `© ${currentYear} - douwco.be`;

wwwroot/js/main.js

@@ -0,0 +1,32 @@
+// JIT file loading
+function include_file(filename, id) {
+    fetch(`includes/${filename}.html`)
+        .then(response => response.text())
+        .then(html => { document.getElementById(id).innerHTML = html; })
+        .catch(err => console.error('Error loading include:', err));
+}
+
+function setupIntersectionObserver() {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const element = entry.target;
+                const name = element.getAttribute('data-section-name');
+                include_file(name, element.id);
+                observer.unobserve(element);
+            }
+        });
+    }, {
+        threshold: 0.05,
+        rootMargin: "0px 0px -50px 0px"
+    });
+
+    const observedSections = document.querySelectorAll('.observed');
+    if (observedSections.length === 0) {
+        console.error('No elements with class "observed" found!');
+    } else {
+        observedSections.forEach(section => { observer.observe(section); });
+    }
+}
+
+setupIntersectionObserver();