chore: layout update Ronny+Minesweeper
This commit is contained in:
		@@ -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;
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										100
									
								
								src/index.html
									
									
									
									
									
								
							
							
						
						
									
										100
									
								
								src/index.html
									
									
									
									
									
								
							@@ -9,65 +9,85 @@
 | 
			
		||||
 | 
			
		||||
<body>
 | 
			
		||||
  <main>
 | 
			
		||||
      <div>
 | 
			
		||||
    <button class="theme-button" title="Dark theme on/off" onclick="toggleTheme();">☀</button>
 | 
			
		||||
    <h1>Ward Truyen</h1>
 | 
			
		||||
    <h2>Wie ben ik:</h2>
 | 
			
		||||
    <p>Ik ben een computerliefhebber op zoek naar een job in de ICT, als programmeur. </p>
 | 
			
		||||
    <div>
 | 
			
		||||
      <button class="theme-button" title="Dark theme on/off" onclick="toggleTheme();">☀</button>
 | 
			
		||||
      <h1>Ward Truyen</h1>
 | 
			
		||||
      <h2>Wie ben ik:</h2>
 | 
			
		||||
      <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>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>
 | 
			
		||||
      <li>HTML, CSS, JavaScript, Typescript & Angular enz. voor Front-end</li>
 | 
			
		||||
      <li>Git en vele andere tools en scripts om de server en code te beheren en in productie te zetten.</li>
 | 
			
		||||
    </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>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, 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>
 | 
			
		||||
        <li>HTML, CSS, JavaScript, Typescript & Angular enz. voor Front-end</li>
 | 
			
		||||
        <li>Git en vele andere tools en scripts om de server en code te beheren en in productie te zetten.</li>
 | 
			
		||||
      </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/"
 | 
			
		||||
          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>
 | 
			
		||||
      </div>
 | 
			
		||||
    <h2>Zelf gemaakt:</h2>
 | 
			
		||||
      <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> <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>
 | 
			
		||||
      <div>
 | 
			
		||||
    <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: 17 Oktober 2024</p>
 | 
			
		||||
      </div>
 | 
			
		||||
    <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">
 | 
			
		||||
        <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: 17 Oktober 2024</p>
 | 
			
		||||
    </div>
 | 
			
		||||
  </main>
 | 
			
		||||
 | 
			
		||||
  <script src="js/theme.js"></script>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user