From 36ba53eb2e728a93c4f23bd6cd9fc99bd6556710 Mon Sep 17 00:00:00 2001
From: Ward Truyen <ward.truyen@gmail.com>
Date: Thu, 21 Nov 2024 13:26:40 +0100
Subject: [PATCH] Chore: improved background styling

---
 src/css/main.css        |  71 +++++++++++++-----
 src/img/sunnyclouds.jpg | Bin 0 -> 2687 bytes
 src/index.html          | 155 +++++++++++++++++++++++-----------------
 3 files changed, 143 insertions(+), 83 deletions(-)
 create mode 100644 src/img/sunnyclouds.jpg

diff --git a/src/css/main.css b/src/css/main.css
index bbaf675..5ad39e3 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -9,6 +9,7 @@ body {
   height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: auto;
 }
 
 .theme-button {
@@ -19,7 +20,7 @@ body {
 .card{
   padding: 10px;
   border: 1px solid darkblue;
-  background-color: #ffffffcc;
+  background-color: #ddddddcc;
   border-radius: 0.5em;
   box-shadow: 3px 3px 3px #30303090;
   margin: 1em 0.5em;
@@ -34,16 +35,57 @@ html {
   background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
 }
 
-main {
+.flex{
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  /* display: inline-block; */
   margin: auto;
   /* margin-top: 1em; */
   min-width: 80%;
-  min-height: 40%;
-  overflow: auto;
+  /* min-height: 40%; */
   padding-right: 8px;
 }
 
-main>div {
+.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;
@@ -52,7 +94,7 @@ main>div {
   margin-bottom: 1em;
 }
 
-main>div>h1 {
+.content>h1 {
   font-family: "Raleway", sans-serif;
   font-size: 3em;
   margin-top: 0px;
@@ -61,23 +103,21 @@ main>div>h1 {
   text-shadow: 0px 0px 4px white, 2px 2px 6px;
 }
 
-main>p,
-main>div>p {
+.content>p{
   margin-left: 1em;
 }
 
-main>h2,
-main>div>h2 {
+.content>h2 {
   margin-left: 0.2em;
 }
 
-main>h2{
+.content>h2{
   margin-top: 1.5em;
 }
-main>div>h2 {
+.content>h2 {
   margin-top: 0.2em;
 }
-main>h3{
+.content>h3{
   margin-left: 0.8em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
@@ -104,14 +144,13 @@ html.theme-dark {
   color: white;
 }
 
-.theme-dark>body>main>div {
+.theme-dark>body>main>.block-white {
   border: 1px solid darkgray;
   background-color: black;
   box-shadow: 3px 3px 5px #101010C0;
 }
 
-.theme-dark>body>main>h1,
-.theme-dark>body>main>div>h1 {
+.theme-dark>body>main>.content>h1 {
   text-shadow: 0px 0px 3px blue, 2px 2px 6px;
 }
 
diff --git a/src/img/sunnyclouds.jpg b/src/img/sunnyclouds.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fa80a95ea81332f53aa112a9e5155137e1372a50
GIT binary patch
literal 2687
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

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
index 6023563..f6de54b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,8 +9,8 @@
 </head>
 
 <body>
-  <main>
-    <div>
+  <main class="flex">
+    <div class="block-white content">
       <button class="theme-button" title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
       <h1>Ward Truyen</h1>
       <h2>Wie ben ik:</h2>
@@ -33,73 +33,93 @@
       </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"
-        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>Familie website</h3>
-    <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>
-    <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>
-          <li class="splide__slide">
-            <img src="img/tds4.png" alt="tds.truyen.network">
-          </li>
-        </ul>
+    <div class="content">
+      <div class="block-alert">
+        <p>Ik heb projecten waar ik aan werk, hieronder een overzicht.</p>
       </div>
-    </section>
-    <script src="js/splide.min.js"></script>
-    <script>
-      document.addEventListener('DOMContentLoaded', function () {
-        new Splide('#image-carousel').mount();
-      });
-    </script>
-    <!-- <img src="img/tds1.png" alt="tds.truyen.network"> -->
-    <!-- <img src="img/tds2.png" alt="tds.truyen.network"> -->
-    <!-- <img src="img/tds3.png" alt="tds.truyen.network"> -->
-    <!-- <img src="img/tds4.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 class="content">
+      <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"
+          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>Familie website</h3>
+      <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>
     </div>
-    <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>
+              <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>
+        <!-- <img src="img/tds1.png" alt="tds.truyen.network"> -->
+        <!-- <img src="img/tds2.png" alt="tds.truyen.network"> -->
+        <!-- <img src="img/tds3.png" alt="tds.truyen.network"> -->
+        <!-- <img src="img/tds4.png" alt="tds.truyen.network"> -->
+      </div>
+    </div>
+    <div class="content">
+      <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>
+    </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>
@@ -107,7 +127,8 @@
           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
+        <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>