docs: Added short README.md

feat!: inserted new site
feat!:moved old site to old folder
2025-07-27 14:17:44 +02:00 · 2025-07-27 14:10:59 +02:00 · 2025-07-27 14:10:26 +02:00
35 changed files with 1032 additions and 170 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,10 @@
+# Ward Truyen's CV website
+
+Made using Bootstrap, Oneko's cat, and Zumari's Starback.
+As required created with CSS, HTML and JavaScript.
+
+## Thanks to
+
+- My wife and son.
+- Uncle Miel.
+- The rest of the families.
--- a/src/css/bootstrap.min.css
+++ b/src/css/bootstrap.min.css
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -0,0 +1,150 @@
+.navbar{
+  background-color: #000b;
+  /* background: linear-gradient(0deg,rgba(35, 43, 62, 200) 0%, rgba(0, 0, 0, 200) 100%); */
+  border-bottom: 1px solid grey;
+}
+
+.divider {
+  height: 3rem;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.my-picture{
+  width: 8em;
+  aspect-ratio: 1;
+  border-radius: 5px;
+  float: right;
+}
+
+.img-icon {
+  width: 4em;
+  aspect-ratio: 1;
+  margin: .5em .5em;
+  padding: 3px;
+  transition: all .2s;
+  border-radius: 5px;
+}
+
+.img-icon:hover {
+  width: 5em;
+  margin: 0;
+  border: 1px solid white;
+  box-shadow: 0 0 15px rgba(255, 255, 255, .8);
+  background-color: #FFFFFF88;
+}
+
+.card {
+  width: 40rem;
+  padding: 10px;
+  border: 1px solid black;
+  background-color: #aaaaaadd;
+  border-radius: 0.5em;
+  box-shadow: .5em .5em 1.5em rgba(0, 0, 0, .3);
+  margin: 1em 0.5em;
+  display: inline-block;
+  box-shadow: inset 0 0 3px black;
+}
+
+.card iframe {
+  width: 100%;
+  aspect-ratio: 16/9;
+}
+
+.card a {
+  color: #0000FF;
+}
+
+a {
+  color: #8888FF;
+}
+
+.carousel {
+  max-width: 80vh;
+}
+
+.carousel-control-next,
+.carousel-control-prev {
+  filter: brightness(.5) drop-shadow(0px 0px 1px #FFFFFF);
+}
+
+.carousel-caption>h5 {
+  color: #aaaaffdd;
+}
+
+.carousel-indicators [data-bs-target] {
+  background-color: #aaaaffdd;
+}
+
+.attention {
+  font-size: 1.6em;
+}
+
+.rowlines-short li:not(:last-of-type)::after {
+  content: "";
+  width: 52%;
+  margin: 0 4rem;
+  border-bottom: 1px solid #66666688;
+}
+
+.rowlines li:not(:last-of-type)::after {
+  content: "";
+  width: 78%;
+  margin: 0 5rem;
+  border-bottom: 1px solid #66666688;
+}
+
+.rowlines-short li,
+.rowlines li {
+  transition: all .2s;
+}
+
+.rowlines li:hover {
+  /* background-color: #8888; */
+  box-shadow: inset 0 0 3px white;
+  text-decoration: underline;
+}
+
+.rowlines-short li:hover {
+  text-decoration: underline;
+}
+
+canvas {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  z-index: -2;
+}
+
+body {
+  overflow-x: hidden;
+}
+
+#canvas {
+  position: fixed;
+  top: 0px;
+  height: 100%;
+  width: 100%;
+}
+
+.note {
+  background: #00000032;
+  border: 2px solid #888888;
+  border-radius: 0.5em;
+  box-shadow: .5em .5em 1.5em rgba(0, 0, 0, .3);
+  padding: 1em;
+  margin: 1em auto;
+  width: 50%;
+}
+
+@media (max-width: 800px) {
+  .note {
+    width: 80%;
+  }
+
+  .card {
+    width: 32rem;
+  }
+}
--- a/src/docs/cv-wardtruyen-2025-Java.pdf
+++ b/src/docs/cv-wardtruyen-2025-Java.pdf
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/img/arch.png
+++ b/src/img/arch.png
--- a/src/img/docker.png
+++ b/src/img/docker.png
--- a/src/img/gitea.png
+++ b/src/img/gitea.png
--- a/src/img/lua.png
+++ b/src/img/lua.png
--- a/src/img/me.jpg
+++ b/src/img/me.jpg
--- a/src/img/mountain2.png
+++ b/src/img/mountain2.png
--- a/src/img/neovim.png
+++ b/src/img/neovim.png
--- a/src/img/nginx.png
+++ b/src/img/nginx.png
--- a/src/img/oneko.gif
+++ b/src/img/oneko.gif
--- a/src/img/traefik.png
+++ b/src/img/traefik.png
--- a/src/img/windows.png
+++ b/src/img/windows.png
--- a/src/img/wterminal.png
+++ b/src/img/wterminal.png
--- a/src/index.html
+++ b/src/index.html
@@ -1,170 +1,329 @@
-<!DOCTYPE html>
-<html lang="">
-
-<head>
-  <title>Ward Truyen home</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="css/main.css" />
-  <link rel="stylesheet" href="css/splide.min.css" />
-</head>
-
-<body>
-  <main class="flex">
-    <div class="block-white content">
-      <button class="theme-button" title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
-      <h1 id="ik">Ward Truyen:</h1>
-      <h2>Introductie</h2>
-      <p>Ik ben Ward Truyen, een veelzijdige computerliefhebber op zoek naar een job in de ICT.
-        Ik ben inzetbaar als programmeur, tester, ICT-Engineer en ICT-beheerder.</p>
-
-      <p>Ik ben een <i>doe het zelf</i> type dat liever leert uit een fout dan er niet aan durven te beginnen.
-        <br>Mijn grote liefde gaat naar automatisatie-technieken. Aldus de computer-technologie trekt me aan, niets zo
-        veelzijdig in automatisatie als computers.
-        <br>De kennis die ik heb vergaard maak ik ook zeer graag nuttig, ik help graag. Mensen vinden dat ik een
-        aangename stem heb en geruststellend overkom.
-        <br>Met plezier heb ik al ontelbaar vele mensen geholpen bij computer problemen, en als trainer ondersteuning
-        geboden in hun opleiding tot junior Java developer.
-      </p>
-
-      <p>
-        Ik heb, onder andere, heel wat ervaring in de talen Java en Java-/Type-Script alsook bijhorende frameworks en
-        tools
-        <br>Dit stelt me in staat om aan een front-end en back-end te werken, alsook beheer ik de server. Full stack.
-      </p>
-      <ul>
-        <li>Back-end: Java, Maven &amp; Gradle, SQL, Hibernate, Lombok, Spring, JUnit voor testing</li>
-        <li>Front-end: HTML, CSS, JavaScript, Typescript &amp; Angular, JQuery, Bootstrap</li>
-        <li>Tools: npm, Git, Bash, Docker, SSH, en vele andere tools en scripts om de server, code en apps te beheren.
-        </li>
-      </ul>
-      <p>Deze hou ik dan ook up to date door te werken aan mijn <a href="#famweb">familie website</a>.</p>
-      <p>Eveneens zijn Agile en Scrum gekende methodieken. En ken ik heel wat technieken als OOP, TDD, BDD, UML, SOLID
-        en REST.</p>
-      <p>Ik heb bij Multimedi 3 jaar gewerkt als trainer Java Developer, voor volwassenen.
-        <br>Dankzij deze ervaring heb ik mijn full stack kennis met Java kunnen verzilveren en een kleine honderd mensen
-        kunnen helpen in hun carriere.
-      </p>
-
-      <p><u>Naast het programmeren:</u>
-        <br>Kan ik het onderhoud, plaatsen, installeren en beheren van: servers, netwerk apparatuur, scanners, printers,
-        applicaties en services. Linux, windows en Mac.
-        <br>Ook kan ik je helpen op alle computers: server, desktop, laptop, tablet en op smartphone.
-        <br>Eveneens ben ik een doe-het-zelver. Ik kan huishoudelijke elektriciteit-werken uitvoeren en elektronica repareren.
-      </p>
-      <p>Ik heb een hulpvaardig en verzorgd overkomen. Graag houd ik structuur en orde op mijn werkplaats. En kan ik
-        blindelings typen. </p>
-      <p id="mijncv">Voor meer informatie bekijk mijn cv <a href="docs/CV_WardTruyen_2025-Java.pdf">voor
-          Java/Full-Stack</a> of <a href="docs/CV_WardTruyen_2025-ICT_Engineer.pdf">voor ICT Engineer/Beheerder</a>.</p>
-    </div>
-
-    <div class="content">
-      <h2>Zelf gemaakt 2024-2025:</h2>
-      <h3>Deze server en website</h3>
-        <img style="max-width: 120px; height: auto; float: right;" src="img/tux.png">
-      <p>Deze <a href="https://nl.wikipedia.org/wiki/Server"
-          title="Een server is een computer dat diensten verleent aan clients" target="_blank">server</a> heb ik
-        kunnen opzetten met
-        <a href="https://archlinux.org/" title="Besturingssysteem Arch Linux" target="_blank">Arch Linux</a> als <a
-          href="https://nl.wikipedia.org/wiki/Besturingssysteem" title"Besturingssysteem" target="_blank">OS</a>.
-        <br>Daarop staat <a href="https://doc.traefik.io/traefik/" title="Reverse proxy en load balancer"
-          target="_blank">Traefik</a> als <a href="https://en.wikipedia.org/wiki/Reverse_proxy"
-          title="1 domein en server met meerdere subdomeinen en/of servers en services" target="_blank">reverse
-          proxy</a> en de vele <a href="https://nl.wikipedia.org/wiki/Subdomein"
-          title="Een subdomein is een domein dat deel uitmaakt van een groter domein" target="_blank">subdomeinen</a>
-        zijn
-        m.b.v. <a href="https://www.docker.com/" title="Container applicatie" target="_blank">Docker</a> beheerd.
-      </p>
-      <h3 id="famweb">Gezin website</h3>
-      <p>Op <a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> staat een kopie van <a
-          href="https://tds.truyen.network" target="_blank">tds.truyen.network</a>
-        <br>Daarop staat een site voor het beheren van gezin gevens zoals contacten, winkellijstjes, kalender,
-        takenlijstjes en notities.
-        <br>Deze is gemaakt met als backend Java, Spring en REST, als frontend is er Angular.
-        <br>Dit met als doel gezins-gegevens overal beschikbaar te hebben zonder google of facebook en dergelijke
-        tech-giganten.
-        <br>Handig voor het winkellijstje af te gaan op je gsm. Alles bij de hand.
-      </p>
-      <p><a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> is dus de publieke test versie van
-        deze
-        site, waar u op kan inloggen, testen en inspecteren <a href="#ik">(login gegevens staan in mijn CV)</a>.<br>
-        Mocht er
-        hier iets fout lopen, stuur me a.u.b. een e-mail of bel me, en ik los het ASAP op.</p>
-    </div>
-    <div class="block-darker flex">
-      <div class="content">
-        <section id="image-carousel" class="splide" aria-label="Beautiful Images">
-          <div class="splide__track">
-            <ul class="splide__list">
-              <li class="splide__slide">
-                <img src="img/tds1.png" alt="tds.truyen.network">
-              </li>
-              <li class="splide__slide">
-                <img src="img/tds2.png" alt="tds.truyen.network">
-              </li>
-              <li class="splide__slide">
-                <img src="img/tds3.png" alt="tds.truyen.network">
-              </li>
-              <li class="splide__slide">
-                <img src="img/tds4.png" alt="tds.truyen.network">
-              </li>
-            </ul>
-          </div>
-        </section>
-        <script src="js/splide.min.js"></script>
-        <script>
-          document.addEventListener('DOMContentLoaded', function () {
-            new Splide('#image-carousel').mount();
-          });
-        </script>
-      </div>
-    </div>
-    <div class="content">
-      <h3>WTerminal</h3>
-      <p>Op <a href="https://wterminal.truyen.network" target="_blank">wterminal.truyen.network</a> kan u mijn
-        browser-addon of website-tooltje WTerminal vinden.</p>
-    </div>
-
-    <div class="block-photo flex">
-      <div class="content">
-        <h2>Zelf gemaakt vroeger:</h2>
-        <div class="card">
-          <h1>Ronny</h1>
-          <p>Gemaakt in VB.net 2004-2006<br>Direct draw rendering</p>
-          <iframe src="https://www.youtube.com/embed/m7tgDUc2jXs">
-          </iframe>
-        </div>
-        <div class="card">
-          <h1>Minesweeper</h1>
-          <p>Gemaakt in C/C++ 2006-2013<br>OpenGL rendering</p>
-          <iframe src="https://www.youtube.com/embed/Rejp6cVRxfc">
-          </iframe>
-        </div>
-      </div>
-    </div>
-
-    <div class="block-white content">
-      <h2>Links naar de verschillende domeinen op deze server:</h2>
-      <ul class="dashed">
-        <li>website <a href="https://truyen.network" target="_blank">truyen.network</a> centrale website</li>
-        <li>gitea service op <a href="https://git.truyen.network" target="_blank">git.truyen.network</a> om git
-          repositories te beheren</li>
-        <li>website <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a> voor gezin data beheer
-        </li>
-        <li>voorbeeld-website <a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> voor gezin
-          data
-          beheer</li>
-        <li>website <a href="https://willem.truyen.network" target="_blank">willem.truyen.network</a> bevat spelletjes
-          voor Willem</li>
-        <li>website <a href="https://wterminal.truyen.network" target="_blank">wterminal.truyen.network</a> voor
-          WTerminal, zelf gemaakte browser-addon project</li>
-      </ul>
-
-      <!-- <p class="text-red">Deze server wordt nog verder uitgebreid, stay tuned.</p> -->
-      <p>Laatste update: 22 Juli 2025</p>
-    </div>
-  </main>
-
-  <script src="js/theme.js"></script>
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Ward Truyen's CV</title>
+
+  <meta name="description" content="Op zoek naar een Java developer job.">
+
+  <!-- Facebook Meta Tags -->
+  <meta property="og:url" content="https://www.ward.truyen.network/">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="Ward Truyen's CV">
+  <meta property="og:description" content="Op zoek naar een Java developer job.">
+  <meta property="og:image" content="/img/me.jpg">
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta property="twitter:domain" content="ward.truyen.network">
+  <meta property="twitter:url" content="https://www.ward.truyen.network/">
+  <meta name="twitter:title" content="Ward Truyen's CV">
+  <meta name="twitter:description" content="Op zoek naar een Java developer job.">
+  <meta name="twitter:image" content="/img/me.jpg">
+
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body class="text-bg-dark bg-dark">
+  <header>
+    <nav class="navbar navbar-expand-md fixed-top navbar-dark">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">Ward Truyen</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
+          aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavDropdown">
+          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link" href="#skills">Vaardigheden</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#werk">Werkervaring</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#studies">Studies</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#portfolio">Portfolio</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <h1 class="visually-hidden">Ward Truyen's CV</h1>
+    <section id="intro">
+      <div class="p-2 my-5">
+        <div class="note">
+          <h2 class="d-inline">Introductie</h2>
+          <img class="my-picture d-none d-md-block" src="/img/me.jpg" alt="[my picture]" />
+          <p>Ik ben een computer liefhebber met een gedreven, hulpvaardig karakter en een zeer technisch geinformeerde
+            achtergrond. Bijleren doe ik graag. Werk met structuur en orde. Ik ben geduldig,
+            zal met volle concentratie problemen aanpakken en streven naar afwerking. Je kan me vinden voor een
+            aangename babbel of een luisterend oor.</p>
+          <a href="docs/cv-wardtruyen-2025-Java.pdf" class="btn btn-primary" download>Download mijn CV</a>
+        </div>
+      </div>
+    </section>
+
+    <div id="skills" class="divider"></div>
+
+    <section>
+      <div class="px-4 py-4">
+        <h2>Vaardigheden</h2>
+        <div class="row">
+          <div class="col-4">
+            <h4>Back-end</h4>
+            <ul>
+              <li>Java EE</li>
+              <li>Spring &amp; REST</li>
+              <li>SQL &amp; Hibernate</li>
+              <li>Lombok</li>
+              <li>Maven &amp; Gradle</li>
+              <li>JSP</li>
+              <li>JUnit</li>
+              <li>Multithreading &amp; Concurrency</li>
+            </ul>
+          </div>
+          <div class="col-4">
+            <h4>Front-end</h4>
+            <ul>
+              <li>JavaScript</li>
+              <li>TypeScript</li>
+              <li>Angular</li>
+              <li>HTML &amp; CSS</li>
+              <li>NPM</li>
+              <li>JQuery</li>
+              <li>Bootstrap</li>
+              <li>async &amp; wait</li>
+            </ul>
+          </div>
+          <div class="col-4">
+            <h4>Tools</h4>
+            <ul>
+              <li>Git</li>
+              <li>Scrutm &amp; Agile</li>
+              <li>VS code &amp; IntelliJ &amp; vim</li>
+              <li>Docker &amp; Virtualisatie</li>
+              <li>CI/CD</li>
+              <li>Powershell &amp; bash</li>
+              <li>Terminal &amp; SSH</li>
+            </ul>
+          </div>
+        </div>
+        <div class="row justify-content-center">
+          <img class="img-icon" src="img/tux.png" alt="Linux" title="Tux, the linux mascot" />
+          <img class="img-icon" src="img/arch.png" alt="Arch linux" title="Arch linux" />
+          <img class="img-icon" src="img/windows.png" alt="Windows" title="MS Windows" />
+          <img class="img-icon" src="img/traefik.png" alt="Traefik" title="Traefik: a reverse proxy" />
+          <img class="img-icon" src="img/docker.png" alt="Docker" title="Docker" />
+          <img class="img-icon" src="img/lua.png" alt="Lua" title="Lua script" />
+          <img class="img-icon" src="img/neovim.png" alt="Neovim" title="Neovim editor" />
+          <img class="img-icon" src="img/nginx.png" alt="Nginx" title="Nginx a reverse proxy" />
+        </div>
+      </div>
+    </section>
+
+    <div id="werk" class="divider"></div>
+
+    <section>
+      <div class="px-4 py-4">
+        <h2>Werkervaring</h2>
+        <ul class="rowlines">
+          <li class="row attention">
+            <span class="col-5">Opleiding Java Enterprise</span>
+            <span class="col-4">/</span>
+            <span class="col-3">2025 - Nu</span>
+          </li>
+          <li class="row text-secondary">
+            <span class="col-5">Tijdelijke Interim jobs</span>
+            <span class="col-4">Verscheidene werkplaatsen</span>
+            <span class="col-3">2025 - Nu</span>
+          </li>
+          <li class="row">
+            <span class="col-5">Zelfstudie Angular en docker</span>
+            <span class="col-4">/</span>
+            <span class="col-3">2023 - 2025</span>
+          </li>
+          <li class="row">
+            <span class="col-5">Allround ICT-er</span>
+            <span class="col-4">Nelissen computers</span>
+            <span class="col-3">2022 - 2022</span>
+          </li>
+          <li class="row attention">
+            <span class="col-5">ICT Trainer Java</span>
+            <span class="col-4">Multimedi</span>
+            <span class="col-3">2018 - 2021</span>
+          </li>
+          <li class="row">
+            <span class="col-5">Zelfstudie Java en Linux</span>
+            <span class="col-4">/</span>
+            <span class="col-3">2016 - 2017</span>
+          </li>
+          <li class="row">
+            <span class="col-5">Helpdesk technische dienst</span>
+            <span class="col-4">KUL</span>
+            <span class="col-3">2015 - 2016</span>
+          </li>
+          <li class="row">
+            <span class="col-5">Vrijwillig programmeur</span>
+            <span class="col-4">KUL</span>
+            <span class="col-3">2013 - 2014</span>
+          </li>
+          <li class="row text-secondary">
+            <span class="col-5">Tijdelijke Interim jobs</span>
+            <span class="col-4">Verscheidene werkplaatsen</span>
+            <span class="col-3">2007 - 2013</span>
+          </li>
+          <li class="row attention">
+            <span class="col-5">Programmeur C++</span>
+            <span class="col-4">Zetes</span>
+            <span class="col-3">2007 - 2007</span>
+          </li>
+          <li class="row">
+            <span class="col-5">Computer dokter</span>
+            <span class="col-4">Compudoc</span>
+            <span class="col-3">2006 - 2007</span>
+          </li>
+        </ul>
+      </div>
+    </section>
+
+    <div id="studies" class="divider"></div>
+
+    <section>
+      <div class="px-4 py-4">
+        <h2>Studies</h2>
+        <ul class="rowlines-short">
+          <li class="row">
+            <span class="col-6">Multimedi Java Enterprise ontwikkelaar</span>
+            <span class="col-6">2025 - nu</span>
+          </li>
+          <li class="row">
+            <span class="col-6">Multimedi Systeembeheer</span>
+            <span class="col-6">2017 - 2018</span>
+          </li>
+          <li class="row">
+            <span class="col-6">Cevora Java Enterprise ontwikkelaar</span>
+            <span class="col-6">2008 - 2009</span>
+          </li>
+          <li class="row">
+            <span class="col-6">A2: Elektrische installatietechnieken</span>
+            <span class="col-6">1998 - 2004</span>
+          </li>
+        </ul>
+      </div>
+    </section>
+
+    <div id="portfolio" class="divider"></div>
+
+    <section>
+      <div class="px-4 py-4">
+        <h2>Portfolio</h2>
+        <h4>Huidig project:</h4>
+        <a target="_blank" href="https://tds.truyen.network">TDS Family website</a>
+        <p>Full stack Java &amp; Angular website.</p>
+        <div id="carouselExampleIndicators" class="carousel carousel-dark slide carousel-fade mx-auto">
+          <div class="carousel-indicators">
+            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
+              aria-current="true" aria-label="Slide 1"></button>
+            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
+              aria-label="Slide 2"></button>
+            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
+              aria-label="Slide 3"></button>
+            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
+              aria-label="Slide 4"></button>
+          </div>
+          <div class="carousel-inner">
+            <div class="carousel-item active">
+              <img src="img/tds1.png" class="d-block w-100" alt="Screenshot 1">
+              <div class="carousel-caption d-none d-md-block">
+                <h5>1</h5>
+              </div>
+            </div>
+            <div class="carousel-item">
+              <img src="img/tds2.png" class="d-block w-100" alt="Screenshot 2">
+              <div class="carousel-caption d-none d-md-block">
+                <h5>2</h5>
+              </div>
+            </div>
+            <div class="carousel-item">
+              <img src="img/tds3.png" class="d-block w-100" alt="Screenshot 3">
+              <div class="carousel-caption d-none d-md-block">
+                <h5>3</h5>
+              </div>
+            </div>
+            <div class="carousel-item">
+              <img src="img/tds4.png" class="d-block w-100" alt="Screenshot 4">
+              <div class="carousel-caption d-none d-md-block">
+                <h5>4</h5>
+              </div>
+            </div>
+          </div>
+          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
+            data-bs-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Previous</span>
+          </button>
+          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
+            data-bs-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Next</span>
+          </button>
+        </div>
+        <h4>Websites:</h4>
+        <ul>
+          <li><a target="_blank" href="https://ward.truyen.network">Ward(this one)</a></li>
+          <li><a target="_blank" href="https://willem.truyen.network">Willem games</a></li>
+          <li><a target="_blank" href="https://git.truyen.network">Gitea</a></li>
+          <!-- <li><a target="_blank" href="https://wterminal.truyen.network">WTerminal</a></li> -->
+        </ul>
+        <br>
+        <h4>Oudere projecten:</h4>
+        <div class="row">
+          <div class="card">
+            <a target="_blank" href="https://wterminal.truyen.network">
+              <h3>WTerminal</h3>
+            </a>
+            <p>JavaScript 2023-2024<br>
+              Kan gebruikt worden in websites en als browser-addon</p>
+            <h5>Screenshot:</h5>
+            <img style="width: 100%" src="img/wterminal.png">
+            </img>
+          </div>
+          <div class="card">
+            <h3>Ronny</h3>
+            <p>VB.net 2004-2006<br>Game met Direct draw rendering</p>
+            <h5>Youtube video:</h5>
+            <iframe src="https://www.youtube.com/embed/m7tgDUc2jXs">
+            </iframe>
+          </div>
+          <div class="card">
+            <h3>Minesweeper</h3>
+            <p>C/C++ 2006-2013<br>Game met OpenGL rendering</p>
+            <h5>Youtube video:</h5>
+            <iframe src="https://www.youtube.com/embed/Rejp6cVRxfc">
+            </iframe>
+          </div>
+        </div>
+    </section>
+    <footer class="text-end">
+      <p class="text-secondary my-0 me-1">Life is a long lesson in humility.</p>
+    </footer>
+  </main>
+
+  <script src="js/bootstrap.min.js"></script>
+
+  <script src="js/starback.js"></script>
+  <canvas id="canvas"></canvas>
+  <script src="js/main.js"> </script>
+  <script src="js/oneko.js"> </script>
+</body>
+
+</html>
--- a/src/js/bootstrap.min.js
+++ b/src/js/bootstrap.min.js
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -0,0 +1,49 @@
+const starback = new Starback("#canvas", {
+  width: document.body.clientWidth,
+  height: document.body.clientHeight,
+  type: 'dot',
+  quantity: 100,
+  direction: 225,
+  backgroundColor: ['#0e1118', '#232b3e'],
+  randomOpacity: true,
+});
+const mountain = new Image();
+mountain.src = 'img/mountain2.png';
+mountain.onload = () => {
+  starback.addToFront((ctx) => {
+    ctx.drawImage(
+      mountain,
+      0,
+      0,
+      mountain.width,
+      mountain.height,
+      0,
+      canvas.height - mountain.height,
+      canvas.width,
+      mountain.height
+    );
+  });
+}
+
+function resizeCanvas() {
+  const canvas = document.getElementById("canvas");
+  canvas.setAttribute("width", window.innerWidth);
+  canvas.setAttribute("height", window.innerHeight);
+}
+
+function onLoadDoc() {
+  resizeCanvas();
+  const elements = document.getElementsByClassName("nav-link");
+  for (const el of elements) {
+    el.onclick = onNavLinkClick;
+  }
+}
+
+function onNavLinkClick() {
+  const collapse = document.getElementsByClassName('navbar-collapse');
+  if (collapse[0] != null)
+    collapse[0].classList.remove('show');
+}
+
+window.addEventListener("resize", resizeCanvas);
+window.addEventListener("load", onLoadDoc);
--- a/src/js/oneko.js
+++ b/src/js/oneko.js
@@ -0,0 +1,310 @@
+// oneko.js: https://github.com/adryd325/oneko.js
+
+var onekoEnabled = true;
+
+(function oneko() {
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+    const isReducedMotion =
+        window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
+        window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
+
+    if (isReducedMotion || isMobile)
+    {
+        console.log("disabling cat");
+        onekoEnabled = false;
+        return;
+    }
+
+    const nekoEl = document.createElement("div");
+
+    let nekoPosX = window.innerWidth + 32;
+    let nekoPosY = window.innerHeight + 32;
+
+    let mousePosX = 0;
+    let mousePosY = 0;
+
+    let frameCount = 0;
+    let idleTime = 0;
+    let idleAnimation = null;
+    let idleAnimationFrame = 0;
+
+    const nekoSpeed = 10;
+    const spriteSets = {
+        idle: [[-3, -3]],
+        alert: [[-7, -3]],
+        scratchSelf: [
+            [-5, 0],
+            [-6, 0],
+            [-7, 0],
+        ],
+        scratchWallN: [
+            [0, 0],
+            [0, -1],
+        ],
+        scratchWallS: [
+            [-7, -1],
+            [-6, -2],
+        ],
+        scratchWallE: [
+            [-2, -2],
+            [-2, -3],
+        ],
+        scratchWallW: [
+            [-4, 0],
+            [-4, -1],
+        ],
+        tired: [[-3, -2]],
+        sleeping: [
+            [-2, 0],
+            [-2, -1],
+        ],
+        N: [
+            [-1, -2],
+            [-1, -3],
+        ],
+        NE: [
+            [0, -2],
+            [0, -3],
+        ],
+        E: [
+            [-3, 0],
+            [-3, -1],
+        ],
+        SE: [
+            [-5, -1],
+            [-5, -2],
+        ],
+        S: [
+            [-6, -3],
+            [-7, -2],
+        ],
+        SW: [
+            [-5, -3],
+            [-6, -1],
+        ],
+        W: [
+            [-4, -2],
+            [-4, -3],
+        ],
+        NW: [
+            [-1, 0],
+            [-1, -1],
+        ],
+    };
+
+    function init() {
+        nekoEl.id = "oneko";
+        nekoEl.ariaHidden = true;
+        nekoEl.style.width = "32px";
+        nekoEl.style.height = "32px";
+        nekoEl.style.position = "fixed";
+        nekoEl.style.pointerEvents = "none"; // no petting :(
+        nekoEl.style.imageRendering = "pixelated";
+        nekoEl.style.left = `${nekoPosX - 16}px`;
+        nekoEl.style.top = `${nekoPosY - 16}px`;
+        nekoEl.style.zIndex = 999999;
+
+        let nekoFile = "/img/oneko.gif"
+        const curScript = document.currentScript
+        if (curScript && curScript.dataset.cat) {
+            nekoFile = curScript.dataset.cat
+        }
+        nekoEl.style.backgroundImage = `url(${nekoFile})`;
+
+        document.body.appendChild(nekoEl);
+
+        document.addEventListener("mousemove", function(event) {
+            mousePosX = event.clientX;
+            mousePosY = event.clientY;
+        });
+
+        window.requestAnimationFrame(onAnimationFrame);
+    }
+
+    let lastFrameTimestamp;
+
+    function onAnimationFrame(timestamp) {
+        // Stops execution if the neko element is removed from DOM
+        if (!nekoEl.isConnected) {
+            return;
+        }
+        if (!lastFrameTimestamp) {
+            lastFrameTimestamp = timestamp;
+        }
+        if (timestamp - lastFrameTimestamp > 100) {
+            lastFrameTimestamp = timestamp
+            frame()
+        }
+        window.requestAnimationFrame(onAnimationFrame);
+    }
+
+    function setSprite(name, frame) {
+        const sprite = spriteSets[name][frame % spriteSets[name].length];
+        nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
+    }
+
+    function resetIdleAnimation() {
+        idleAnimation = null;
+        idleAnimationFrame = 0;
+    }
+
+    function idle() {
+        idleTime += 1;
+
+        // every ~ 20 seconds
+        if (
+            idleTime > 10 &&
+            Math.floor(Math.random() * 200) == 0 &&
+            idleAnimation == null
+        ) {
+            let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
+            let scratchDist = 64;
+            if (nekoPosX < scratchDist) {
+                avalibleIdleAnimations.push("scratchWallW");
+            }
+            if (nekoPosY < scratchDist) {
+                avalibleIdleAnimations.push("scratchWallN");
+            }
+            if (nekoPosX > window.innerWidth - scratchDist) {
+                avalibleIdleAnimations.push("scratchWallE");
+            }
+            if (nekoPosY > window.innerHeight - scratchDist) {
+                avalibleIdleAnimations.push("scratchWallS");
+            }
+
+            idleAnimation =
+                avalibleIdleAnimations[
+                Math.floor(Math.random() * avalibleIdleAnimations.length)
+                ];
+        }
+
+        switch (idleAnimation) {
+            case "sleeping":
+                if (idleAnimationFrame < 8) {
+                    setSprite("tired", 0);
+                    break;
+                }
+                setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
+                if (idleAnimationFrame > 192) {
+                    resetIdleAnimation();
+                }
+                break;
+            case "scratchWallN":
+            case "scratchWallS":
+            case "scratchWallE":
+            case "scratchWallW":
+            case "scratchSelf":
+                setSprite(idleAnimation, idleAnimationFrame);
+                if (idleAnimationFrame > 9) {
+                    resetIdleAnimation();
+                }
+                break;
+            default:
+                setSprite("idle", 0);
+                return;
+        }
+        idleAnimationFrame += 1;
+    }
+
+    function explodeHearts() {
+        const parent = nekoEl.parentElement;
+        const rect = nekoEl.getBoundingClientRect();
+        const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        const centerX = rect.left + rect.width / 2 + scrollLeft;
+        const centerY = rect.top + rect.height / 2 + scrollTop;
+
+        for (let i = 0; i < 10; i++) {
+            const heart = document.createElement('div');
+            heart.className = 'heart';
+            heart.textContent = 'â¤';
+            const offsetX = (Math.random() - 0.5) * 50;
+            const offsetY = (Math.random() - 0.5) * 50;
+            heart.style.left = `${centerX + offsetX - 16}px`;
+            heart.style.top = `${centerY + offsetY - 16}px`;
+            heart.style.transform = `translate(-50%, -50%) rotate(${Math.random() * 360}deg)`;
+            parent.appendChild(heart);
+
+            setTimeout(() => {
+                parent.removeChild(heart);
+            }, 1000);
+        }
+    }
+
+    const style = document.createElement('style');
+    style.innerHTML = `
+		  @keyframes heartBurst {
+			  0% { transform: scale(0); opacity: 1; }
+			  100% { transform: scale(1); opacity: 0; }
+		  }
+		  .heart {
+			  position: absolute;
+			  font-size: 2em;
+			  animation: heartBurst 1s ease-out;
+			  animation-fill-mode: forwards;
+			  color: #ab9df2;
+              user-select: none;
+		  }
+	  `;
+
+    document.head.appendChild(style);
+    nekoEl.addEventListener('click', explodeHearts);
+
+    let previousOnekoEnabled = onekoEnabled;
+    function frame() {
+        if(previousOnekoEnabled != onekoEnabled)
+        {
+            nekoEl.style.display = onekoEnabled ? "block" : "none";
+
+            if(onekoEnabled)
+                document.getElementById("toggle-cat").classList.remove("sleepy");
+            else
+                document.getElementById("toggle-cat").classList.add("sleepy");
+
+            previousOnekoEnabled = onekoEnabled;
+        }
+
+        if (!onekoEnabled || mousePosX == 0 || mousePosY == 0)
+            return;
+
+        frameCount += 1;
+        const diffX = nekoPosX - mousePosX;
+        const diffY = nekoPosY - mousePosY;
+        const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
+
+        if (distance < nekoSpeed || distance < 48) {
+            idle();
+            return;
+        }
+
+        idleAnimation = null;
+        idleAnimationFrame = 0;
+
+        if (idleTime > 1) {
+            setSprite("alert", 0);
+            // count down after being alerted before moving
+            idleTime = Math.min(idleTime, 7);
+            idleTime -= 1;
+            return;
+        }
+
+        let direction;
+        direction = diffY / distance > 0.5 ? "N" : "";
+        direction += diffY / distance < -0.5 ? "S" : "";
+        direction += diffX / distance > 0.5 ? "W" : "";
+        direction += diffX / distance < -0.5 ? "E" : "";
+        setSprite(direction, frameCount);
+
+        nekoPosX -= (diffX / distance) * nekoSpeed;
+        nekoPosY -= (diffY / distance) * nekoSpeed;
+
+        nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16);
+        nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16);
+
+        nekoEl.style.left = `${nekoPosX - 16}px`;
+        nekoEl.style.top = `${nekoPosY - 16}px`;
+    }
+
+    init();
+})();
--- a/src/js/starback.js
+++ b/src/js/starback.js
--- a/src/old/css/main.css
+++ b/src/old/css/main.css
--- a/src/old/css/splide.min.css
+++ b/src/old/css/splide.min.css
--- a/src/old/docs/CV_WardTruyen_2025-ICT_Engineer.pdf
+++ b/src/old/docs/CV_WardTruyen_2025-ICT_Engineer.pdf
--- a/src/old/docs/CV_WardTruyen_2025-Java.pdf
+++ b/src/old/docs/CV_WardTruyen_2025-Java.pdf
--- a/src/old/img/sunnyclouds.jpg
+++ b/src/old/img/sunnyclouds.jpg
--- a/src/old/img/tds1.png
+++ b/src/old/img/tds1.png
--- a/src/old/img/tds2.png
+++ b/src/old/img/tds2.png
--- a/src/old/img/tds3.png
+++ b/src/old/img/tds3.png
--- a/src/old/img/tds4.png
+++ b/src/old/img/tds4.png
--- a/src/old/img/tux.png
+++ b/src/old/img/tux.png
--- a/src/old/index.html
+++ b/src/old/index.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <title>Ward Truyen home</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="css/main.css" />
+  <link rel="stylesheet" href="css/splide.min.css" />
+</head>
+
+<body>
+  <main class="flex">
+    <div class="block-white content">
+      <button class="theme-button" title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
+      <h1 id="ik">Ward Truyen:</h1>
+      <h2>Introductie</h2>
+      <p>Ik ben Ward Truyen, een veelzijdige computerliefhebber op zoek naar een job in de ICT.
+        Ik ben inzetbaar als programmeur, tester, ICT-Engineer en ICT-beheerder.</p>
+
+      <p>Ik ben een <i>doe het zelf</i> type dat liever leert uit een fout dan er niet aan durven te beginnen.
+        <br>Mijn grote liefde gaat naar automatisatie-technieken. Aldus de computer-technologie trekt me aan, niets zo
+        veelzijdig in automatisatie als computers.
+        <br>De kennis die ik heb vergaard maak ik ook zeer graag nuttig, ik help graag. Mensen vinden dat ik een
+        aangename stem heb en geruststellend overkom.
+        <br>Met plezier heb ik al ontelbaar vele mensen geholpen bij computer problemen, en als trainer ondersteuning
+        geboden in hun opleiding tot junior Java developer.
+      </p>
+
+      <p>
+        Ik heb, onder andere, heel wat ervaring in de talen Java en Java-/Type-Script alsook bijhorende frameworks en
+        tools
+        <br>Dit stelt me in staat om aan een front-end en back-end te werken, alsook beheer ik de server. Full stack.
+      </p>
+      <ul>
+        <li>Back-end: Java, Maven &amp; Gradle, SQL, Hibernate, Lombok, Spring, JUnit voor testing</li>
+        <li>Front-end: HTML, CSS, JavaScript, Typescript &amp; Angular, JQuery, Bootstrap</li>
+        <li>Tools: npm, Git, Bash, Docker, SSH, en vele andere tools en scripts om de server, code en apps te beheren.
+        </li>
+      </ul>
+      <p>Deze hou ik dan ook up to date door te werken aan mijn <a href="#famweb">familie website</a>.</p>
+      <p>Eveneens zijn Agile en Scrum gekende methodieken. En ken ik heel wat technieken als OOP, TDD, BDD, UML, SOLID
+        en REST.</p>
+      <p>Ik heb bij Multimedi 3 jaar gewerkt als trainer Java Developer, voor volwassenen.
+        <br>Dankzij deze ervaring heb ik mijn full stack kennis met Java kunnen verzilveren en een kleine honderd mensen
+        kunnen helpen in hun carriere.
+      </p>
+
+      <p><u>Naast het programmeren:</u>
+        <br>Kan ik het onderhoud, plaatsen, installeren en beheren van: servers, netwerk apparatuur, scanners, printers,
+        applicaties en services. Linux, windows en Mac.
+        <br>Ook kan ik je helpen op alle computers: server, desktop, laptop, tablet en op smartphone.
+        <br>Eveneens ben ik een doe-het-zelver. Ik kan huishoudelijke elektriciteit-werken uitvoeren en elektronica repareren.
+      </p>
+      <p>Ik heb een hulpvaardig en verzorgd overkomen. Graag houd ik structuur en orde op mijn werkplaats. En kan ik
+        blindelings typen. </p>
+      <p id="mijncv">Voor meer informatie bekijk mijn cv <a href="docs/CV_WardTruyen_2025-Java.pdf">voor
+          Java/Full-Stack</a> of <a href="docs/CV_WardTruyen_2025-ICT_Engineer.pdf">voor ICT Engineer/Beheerder</a>.</p>
+    </div>
+
+    <div class="content">
+      <h2>Zelf gemaakt 2024-2025:</h2>
+      <h3>Deze server en website</h3>
+        <img style="max-width: 120px; height: auto; float: right;" src="img/tux.png">
+      <p>Deze <a href="https://nl.wikipedia.org/wiki/Server"
+          title="Een server is een computer dat diensten verleent aan clients" target="_blank">server</a> heb ik
+        kunnen opzetten met
+        <a href="https://archlinux.org/" title="Besturingssysteem Arch Linux" target="_blank">Arch Linux</a> als <a
+          href="https://nl.wikipedia.org/wiki/Besturingssysteem" title"Besturingssysteem" target="_blank">OS</a>.
+        <br>Daarop staat <a href="https://doc.traefik.io/traefik/" title="Reverse proxy en load balancer"
+          target="_blank">Traefik</a> als <a href="https://en.wikipedia.org/wiki/Reverse_proxy"
+          title="1 domein en server met meerdere subdomeinen en/of servers en services" target="_blank">reverse
+          proxy</a> en de vele <a href="https://nl.wikipedia.org/wiki/Subdomein"
+          title="Een subdomein is een domein dat deel uitmaakt van een groter domein" target="_blank">subdomeinen</a>
+        zijn
+        m.b.v. <a href="https://www.docker.com/" title="Container applicatie" target="_blank">Docker</a> beheerd.
+      </p>
+      <h3 id="famweb">Gezin website</h3>
+      <p>Op <a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> staat een kopie van <a
+          href="https://tds.truyen.network" target="_blank">tds.truyen.network</a>
+        <br>Daarop staat een site voor het beheren van gezin gevens zoals contacten, winkellijstjes, kalender,
+        takenlijstjes en notities.
+        <br>Deze is gemaakt met als backend Java, Spring en REST, als frontend is er Angular.
+        <br>Dit met als doel gezins-gegevens overal beschikbaar te hebben zonder google of facebook en dergelijke
+        tech-giganten.
+        <br>Handig voor het winkellijstje af te gaan op je gsm. Alles bij de hand.
+      </p>
+      <p><a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> is dus de publieke test versie van
+        deze
+        site, waar u op kan inloggen, testen en inspecteren <a href="#ik">(login gegevens staan in mijn CV)</a>.<br>
+        Mocht er
+        hier iets fout lopen, stuur me a.u.b. een e-mail of bel me, en ik los het ASAP op.</p>
+    </div>
+    <div class="block-darker flex">
+      <div class="content">
+        <section id="image-carousel" class="splide" aria-label="Beautiful Images">
+          <div class="splide__track">
+            <ul class="splide__list">
+              <li class="splide__slide">
+                <img src="img/tds1.png" alt="tds.truyen.network">
+              </li>
+              <li class="splide__slide">
+                <img src="img/tds2.png" alt="tds.truyen.network">
+              </li>
+              <li class="splide__slide">
+                <img src="img/tds3.png" alt="tds.truyen.network">
+              </li>
+              <li class="splide__slide">
+                <img src="img/tds4.png" alt="tds.truyen.network">
+              </li>
+            </ul>
+          </div>
+        </section>
+        <script src="js/splide.min.js"></script>
+        <script>
+          document.addEventListener('DOMContentLoaded', function () {
+            new Splide('#image-carousel').mount();
+          });
+        </script>
+      </div>
+    </div>
+    <div class="content">
+      <h3>WTerminal</h3>
+      <p>Op <a href="https://wterminal.truyen.network" target="_blank">wterminal.truyen.network</a> kan u mijn
+        browser-addon of website-tooltje WTerminal vinden.</p>
+    </div>
+
+    <div class="block-photo flex">
+      <div class="content">
+        <h2>Zelf gemaakt vroeger:</h2>
+        <div class="card">
+          <h1>Ronny</h1>
+          <p>Gemaakt in VB.net 2004-2006<br>Direct draw rendering</p>
+          <iframe src="https://www.youtube.com/embed/m7tgDUc2jXs">
+          </iframe>
+        </div>
+        <div class="card">
+          <h1>Minesweeper</h1>
+          <p>Gemaakt in C/C++ 2006-2013<br>OpenGL rendering</p>
+          <iframe src="https://www.youtube.com/embed/Rejp6cVRxfc">
+          </iframe>
+        </div>
+      </div>
+    </div>
+
+    <div class="block-white content">
+      <h2>Links naar de verschillende domeinen op deze server:</h2>
+      <ul class="dashed">
+        <li>website <a href="https://truyen.network" target="_blank">truyen.network</a> centrale website</li>
+        <li>gitea service op <a href="https://git.truyen.network" target="_blank">git.truyen.network</a> om git
+          repositories te beheren</li>
+        <li>website <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a> voor gezin data beheer
+        </li>
+        <li>voorbeeld-website <a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> voor gezin
+          data
+          beheer</li>
+        <li>website <a href="https://willem.truyen.network" target="_blank">willem.truyen.network</a> bevat spelletjes
+          voor Willem</li>
+        <li>website <a href="https://wterminal.truyen.network" target="_blank">wterminal.truyen.network</a> voor
+          WTerminal, zelf gemaakte browser-addon project</li>
+      </ul>
+
+      <!-- <p class="text-red">Deze server wordt nog verder uitgebreid, stay tuned.</p> -->
+      <p>Laatste update: 22 Juli 2025</p>
+    </div>
+  </main>
+
+  <script src="js/theme.js"></script>
+</body>
+
+</html>
--- a/src/old/js/splide.min.js
+++ b/src/old/js/splide.min.js
--- a/src/old/js/theme.js
+++ b/src/old/js/theme.js
Author	SHA1	Message	Date
Ward Truyen	b6472fadcd	docs: Added short README.md	2025-07-27 14:17:44 +02:00
Ward Truyen	651dd34bf5	feat!: inserted new site	2025-07-27 14:10:59 +02:00
Ward Truyen	90cdef8909	feat!:moved old site to old folder	2025-07-27 14:10:26 +02:00