First version of the new layout.

DouwcoWebsite/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;
+}

DouwcoWebsite/wwwroot/css/home.css

@@ -0,0 +1,65 @@
+.container {
+    display: flex;
+}
+
+.left-section {
+    width: 60%;
+}
+
+.logo-section {
+    display: flex;
+    align-items: flex-start;
+    height: 250px;
+}
+
+.logo-section img {
+    width: 250px;
+    margin-left: 50px;
+}
+
+.text-section {
+    margin-left: 50px;
+}
+
+.title {
+    font-size: 128px;
+    margin: 0;
+    line-height: 1;
+    text-wrap: balance;
+}
+
+.tagline {
+    display: flex;
+    font-size: 36px;
+    font-weight: bold;
+    width: 500px;
+}
+
+.tagline .green-text {
+    color: var(--green-clr);
+}
+
+.tagline .normal-text {
+    margin-left: 7px;
+}
+
+.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;
+}
+
+.server-image {
+    width: 500px;
+    height: 500px;
+}

DouwcoWebsite/wwwroot/css/index.css

@@ -0,0 +1,73 @@
+/*  Navigation menu  */
+.hide_header {
+    display: none;
+}
+
+.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 > p > span {
+    color: var(--green-clr);
+}
+
+.logo {
+    height: 100px;
+    vertical-align: middle;
+    padding: 10px;
+}
+
+.icon {
+    height: 45px;
+    vertical-align: middle;
+    padding: 0 20px 0 10px;
+}
+
+/*   Main   */
+
+body{
+    display: flex;
+    flex-direction: column;
+}
+
+main {    
+    flex: 1;
+    margin: 20px;
+}
+
+/*   Footer   */
+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;
+}

DouwcoWebsite/wwwroot/css/style.css

@@ -0,0 +1,24 @@
+html, body{
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 25px;
+    scroll-behavior: smooth;
+}
+
+/*  Container types  */
+.vert_container{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.scroll_container {
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+}
+
+.scroll_section {
+    height: 100vh;
+    scroll-snap-align: start;
+}

DouwcoWebsite/wwwroot/includes/about_me.html

@@ -0,0 +1,20 @@
+<div class="container">
+    <img class="server-image" style="width: 400px; height: 400px" src="/img/me_img.png" alt="Image">
+    <div class="left-section">
+        <div class="logo-section">
+            <div class="text-section">
+                <h1>Hi, I'm Douwe</h1>
+                <p>
+                    A <span style="color: var(--green-clr)">doctoral student</span> with a passion for building games, applications and tools. 
+                    <br><br>
+                    At the moment I'm working on:
+                </p>
+            </div>
+        </div>
+        <div class="content-box">
+            <p>
+                To do...
+            </p>
+        </div>
+    </div>
+</div>

DouwcoWebsite/wwwroot/includes/apps.html

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

DouwcoWebsite/wwwroot/includes/games.html

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

DouwcoWebsite/wwwroot/includes/home.html

@@ -0,0 +1,25 @@
+<div class="container">
+    <div class="left-section">
+        <div class="logo-section">
+            <img 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 right.
+                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="server-image" src="/img/server_image.png" alt="Image">
+</div>

DouwcoWebsite/wwwroot/index.html

@@ -0,0 +1,51 @@
+<!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/index.css"/>
+    <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="/css/douwco.css" />
+    <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/home.css">
+</head>
+<body>
+<header>
+    <nav>
+        <div class="vert_container" style="justify-content: space-around">
+            <a class="nav_option" href="#home"><img class="logo" src="/img/douwco_logo.png"></a>
+            <a class="nav_option" href="#about_me">
+                <img class="icon" src="/img/icons/user.png" alt="Icon">
+                <p>About <span>Me</span></p>
+            </a>
+            <a class="nav_option" href="#apps">
+                <img class="icon" src="/img/icons/projects_icon.png" alt="Icon">
+                <p>Douwco <span>Apps</span></p>
+            </a>
+            <a class="nav_option" href="#games">
+                <img class="icon" 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>

DouwcoWebsite/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`;

DouwcoWebsite/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();