First version of the new layout.

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