feat: icons are now links too
This commit is contained in:
Ward Truyen
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
1
src/old/css/splide.min.css
vendored
1
src/old/css/splide.min.css
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
@@ -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();">☀</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 & Gradle, SQL, Hibernate, Lombok, Spring, JUnit voor testing</li>
|
||||
<li>Front-end: HTML, CSS, JavaScript, Typescript & 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>
|
||||
9
src/old/js/splide.min.js
vendored
9
src/old/js/splide.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -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();
|
||||
Reference in New Issue
Block a user