chore: layout update Ronny+Minesweeper

src/css/main.css

@@ -13,23 +13,34 @@ body {
 
 .theme-button {
   float: right;
-  position: static;
   margin: 0.5em;
 }
 
+.card{
+  padding: 10px;
+  border: 1px solid darkblue;
+  background-color: #ffffffcc;
+  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);
 }
 
 main {
   margin: auto;
-  margin-top: 1em;
+  /* margin-top: 1em; */
   min-width: 80%;
   min-height: 40%;
   overflow: auto;
   padding-right: 8px;
-  /* colors */
-  /* display: inline-block; */
 }
 
 main>div {
@@ -37,6 +48,7 @@ main>div {
   border: 1px solid darkblue;
   background-color: #ffffffcc;
   box-shadow: 3px 3px 3px #30303090;
+  margin-top: 1em;
   margin-bottom: 1em;
 }
 
@@ -59,9 +71,18 @@ main>div>h2 {
   margin-left: 0.2em;
 }
 
+main>h2{
+  margin-top: 1.5em;
+}
 main>div>h2 {
   margin-top: 0.2em;
 }
+main>h3{
+  margin-left: 0.8em;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+
+}
 
 img {
   display: block;

src/index.html

@@ -16,7 +16,8 @@
       <p>Ik ben een computerliefhebber op zoek naar een job in de ICT, als programmeur. </p>
 
       <p>Sinds de jaren '90, van Dos naar Windows en later Linux ben ik in de ICT wereld actief.
-      <br>Daarbij heb ik vele mensen geholpen met hun computer problemen.
+        <br>Daarbij heb ik vele mensen geholpen met hun computer problemen, of als trainer mensen geholpen naar junior
+        Java developer.
         <br>Meestal ben ik bezig in de talen Java en Java-/Type-Script alsook bijhorende frameworks en tools:
       <ul>
         <li>Java, Maven/Gradle, Spring, Hibernate/SQL, Lombok, JUnit, enz. voor Back-end</li>
@@ -25,31 +26,50 @@
       </ul>
       </p>
       <p>Ook Agile en Scrum zijn gekende termen, evenals OOP, TDD, UML enz.</p>
-    <p>Uiteraard kan ik blindelings typen, en thuis gebruik ik <a href="https://neovim.io/">neo<b>vim</b> als IDE</a>.
+      <p>Uiteraard kan ik blindelings typen, en thuis gebruik ik <a href="https://neovim.io/"
+          target="_blank">neo<b>vim</b> als IDE</a>.
+        <br>Ik ken mijn weg op een server, desktop, laptop, tablet en op smartphone.
+      </p>
+      <p>Voor meer informatie <a href="docs/CV_WardTruyen_2024.pdf">bekijk mijn cv</a>.</p>
+    </div>
+    <h2>Zelf gemaakt 2024:</h2>
+      <h3>Deze website</h3>
     <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"
+      <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
+        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.
-      <br>Ik ken mijn weg op een server, desktop, laptop, tablet en op smartphone.
     </p>
-    <p>Voor meer informatie <a href="docs/CV_WardTruyen_2024.pdf">bekijk mijn cv</a>.</p>
+      <h3>Familie website</h3>
-      </div>
-    <h2>Zelf gemaakt:</h2>
     <p>Op <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a> staat mijn gezin data beheer site.
       Deze is gemaakt met als backend Java, Spring en REST, als frontend is er Angular.</p> <img src="img/tds1.png"
       alt="tds.truyen.network">
     <p>Op <a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> staat een kopie van diezelfde site,
       waar u op kan inloggen en inspecteren (login gegevens staan in mijn CV).<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>
+      <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>
+    <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>
       <h2>Links naar de verschillende domeinen op deze server:</h2>
       <ul class="dashed">