fix: icon missing url

src/css/style.css

@@ -19,6 +19,11 @@
   float: right;
 }
 
+#icons>a {
+  display: inline;
+  width: unset;
+}
+
 .img-icon {
   width: 4em;
   aspect-ratio: 1;
@@ -152,13 +157,13 @@ body {
     font-size: 1.3em;
   }
 
-  ul{
+  ul {
     padding-left: 1rem;
   }
 }
 
-@media(max-width: 600px){
-  body{
+@media(max-width: 600px) {
+  body {
     font-size: 80%;
   }
 }

src/index.html

@@ -66,10 +66,10 @@
         <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>
+          <p>Ik ben een gepassioneed informaticus. Ik heb een hulpvaardig karakter en ben zeer technisch geinformeerd.
+            Bijleren doe ik graag en kan genieten van structuur en orde in mijn werk. Ik ben geduldig
+            en kan met volle concentratie problemen aanpakken en daarbij 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>
@@ -120,15 +120,23 @@
             </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 class="row justify-content-center" id="icons">
+          <a target="_blank" href="https://en.wikipedia.org/wiki/Linux">
+            <img class="img-icon" src="img/tux.png" alt="Linux" title="Tux, the linux mascot" /></a>
+          <a target="_blank" href="https://archlinux.org">
+            <img class="img-icon" src="img/arch.png" alt="Arch linux" title="Arch linux" /></a>
+          <a target="_blank" href="https://www.microsoft.com/nl-be/windows">
+            <img class="img-icon" src="img/windows.png" alt="Windows" title="MS Windows" /></a>
+          <a target="_blank" href="https://traefik.io">
+            <img class="img-icon" src="img/traefik.png" alt="Traefik" title="Traefik: a reverse proxy" /></a>
+          <a target="_blank" href="https://www.docker.com">
+            <img class="img-icon" src="img/docker.png" alt="Docker" title="Docker" /></a>
+          <a target="_blank" href="https://www.lua.org">
+            <img class="img-icon" src="img/lua.png" alt="Lua" title="Lua script" /></a>
+          <a target="_blank" href="https://neovim.io">
+            <img class="img-icon" src="img/neovim.png" alt="Neovim" title="Neovim editor" /></a>
+          <a target="_blank" href="https://nginx.org">
+            <img class="img-icon" src="img/nginx.png" alt="Nginx" title="Nginx a reverse proxy" /></a>
         </div>
       </div>
     </section>

src/old/css/main.css

@@ -1,209 +0,0 @@
-/* Author:      Ward Truyen
- * Version:     1.0.0
- */
-html{
-  scroll-behavior: smooth !important;
-}
-
-html,
-body {
-  margin: 0px;
-  padding: 0px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-}
-
-.theme-button {
-  float: right;
-  margin: 0.5em;
-}
-
-.card {
-  padding: 10px;
-  border: 1px solid darkblue;
-  background-color: #ddddddcc;
-  border-radius: 0.5em;
-  box-shadow: 3px 3px 3px #30303090;
-  margin: 1em 0.5em;
-  display: inline-block;
-}
-
-.card>h1 {
-  font-size: 2em;
-}
-
-html {
-  background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
-}
-
-.flex {
-  display: flex;
-  flex-direction: column;
-}
-
-.content {
-  /* display: inline-block; */
-  margin: auto;
-  /* margin-top: 1em; */
-  min-width: 80%;
-  /* min-height: 40%; */
-  padding-right: 8px;
-}
-
-.block-photo {
-  padding: 10px;
-  border-top: 1px solid black;
-  border-bottom: 1px solid black;
-  /* border: 1px solid darkblue; */
-  background-image: url('../img/sunnyclouds.jpg');
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-size: 100% 100%;
-  box-shadow: inset 0px 0px 6px #30303090;
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-.block-darker {
-  padding: 10px;
-  /* border: 1px solid darkblue; */
-  /* background-color: #80808040; */
-  background-image: linear-gradient(#00000000, #d0e08030, #d0e08030, #00000000);
-  /* box-shadow: 3px 3px 3px #30303090; */
-  /* border-radius: 4px; */
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-.block-alert {
-  display: inline-block;
-  padding: 10px;
-  border: 1px solid darkblue;
-  background-color: #ffaaaadd;
-  box-shadow: 3px 3px 3px #30303090;
-  border-radius: 4px;
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-.block-white {
-  padding: 10px;
-  border: 1px solid darkblue;
-  background-color: #ffffffcc;
-  box-shadow: 3px 3px 3px #30303090;
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-.content>h1 {
-  font-family: "Raleway", sans-serif;
-  font-size: 3em;
-  margin-top: 0px;
-  margin-bottom: 8px;
-  text-decoration: underline;
-  text-shadow: 0px 0px 4px white, 2px 2px 6px;
-}
-
-.content>p {
-  margin-left: 1em;
-}
-
-.content>h2 {
-  margin-left: 0.2em;
-}
-
-.content>h2 {
-  margin-top: 1.5em;
-}
-
-.content>h2 {
-  margin-top: 0.2em;
-}
-
-.content>h3 {
-  margin-left: 0.8em;
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-
-}
-
-/* img { */
-/*   display: inline-block; */
-/*   margin: 0 auto; */
-/*   max-width: 100%; */
-/* } */
-ul {
-  margin: .5em 0;
-}
-
-ul.dashed {
-  list-style-type: '- ';
-}
-
-.text-red {
-  color: red;
-}
-
-html.theme-dark {
-  color-scheme: dark;
-  background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
-  color: white;
-}
-
-.theme-dark>body>main>.block-white {
-  border: 1px solid darkgray;
-  background-color: black;
-  box-shadow: 3px 3px 5px #101010C0;
-}
-
-.theme-dark>body>main>.content>h1 {
-  text-shadow: 0px 0px 3px blue, 2px 2px 6px;
-}
-
-.theme-dark>body>main>.content>.block-alert {
-  background: none;
-  border-color: red;
-  color: red;
-}
-
-.splide__slide img {
-  display: block;
-  width: 100%;
-  height: auto;
-  margin: 0 auto;
-}
-
-#image-carousel {
-  width: 50rem;
-  margin: 0 auto;
-}
-
-@media only screen and (max-width: 800px){
-  #image-carousel {
-    width: 40rem;
-  }
-}
-@media only screen and (max-height: 800px){
-  #image-carousel {
-    width: 40rem;
-  }
-}
-
-@media only screen and (max-width: 600px){
-  #image-carousel {
-    width: 25rem;
-  }
-}
-@media only screen and (max-height: 600px){
-  #image-carousel {
-    width: 25rem;
-  }
-}
-  
-@media(orientation: portrait) {
-  main {
-    margin-top: 0;
-  }
-}

src/old/index.html

@@ -1,170 +0,0 @@
-<!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>

src/old/js/theme.js

@@ -1,38 +0,0 @@
-function toggleTheme() {
-  const theme = "theme-dark";//localStorage.getItem('theme');
-  const root = document.querySelector(":root");
-  root.classList.toggle(theme);
-  if (root.classList.contains(theme)) {
-    localStorage.setItem('theme', theme);
-  } else {
-    localStorage.setItem('theme', "theme-light");
-  }
-}
-
-function setTheme(themeName) {
-  console.log("setting them: " + themeName);
-  const root = document.querySelector(":root");
-  root.classList.add(themeName);
-  localStorage.setItem('theme', themeName);
-}
-
-function detectTheme() {
-  const theme = localStorage.getItem('theme');
-  if (theme === 'theme-dark' || theme === 'theme-light') {
-    setTheme(theme);
-    return;
-  }
-
-  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    setTheme('theme-dark');
-    return;
-  }
-
-  if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-    setTheme('theme-light');
-    return;
-  }
-
-  setTheme('theme-light');
-}
-detectTheme();