ward/ward-truyen-network-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ward:282b5b43802932ee3da09870b303472fdd39995c
Branches Tags
ward:master
...
compare: ward:36ba53eb2e728a93c4f23bd6cd9fc99bd6556710
Branches Tags
ward:master

3 Commits
282b5b4380 ... 36ba53eb2e

Author SHA1 Message Date
Ward Truyen
36ba53eb2e Chore: improved background styling 2024-11-21 13:26:40 +01:00
Ward Truyen
5b5bb68f50 Chore: added photo carrousel 2024-11-21 12:10:28 +01:00
Ward Truyen
40482a1336 Updated CV + Screenshots 2024-11-21 11:48:58 +01:00
10 changed files with 171 additions and 59 deletions
Show Stats Expand all files Collapse all files

94
src/css/main.css
View File

@ -9,6 +9,7 @@ body {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto;
} }
.theme-button { .theme-button {
@ -19,7 +20,7 @@ body {
.card{ .card{
padding: 10px; padding: 10px;
border: 1px solid darkblue; border: 1px solid darkblue;
background-color: #ffffffcc; background-color: #ddddddcc;
border-radius: 0.5em; border-radius: 0.5em;
box-shadow: 3px 3px 3px #30303090; box-shadow: 3px 3px 3px #30303090;
margin: 1em 0.5em; margin: 1em 0.5em;
@ -34,16 +35,57 @@ html {
background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F); background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
} }
main { .flex{
display: flex;
flex-direction: column;
}
.content {
/* display: inline-block; */
margin: auto; margin: auto;
/* margin-top: 1em; */ /* margin-top: 1em; */
min-width: 80%; min-width: 80%;
min-height: 40%; /* min-height: 40%; */
overflow: auto;
padding-right: 8px; 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; padding: 10px;
border: 1px solid darkblue; border: 1px solid darkblue;
background-color: #ffffffcc; background-color: #ffffffcc;
@ -52,7 +94,7 @@ main>div {
margin-bottom: 1em; margin-bottom: 1em;
} }
main>div>h1 { .content>h1 {
font-family: "Raleway", sans-serif; font-family: "Raleway", sans-serif;
font-size: 3em; font-size: 3em;
margin-top: 0px; margin-top: 0px;
@ -61,34 +103,32 @@ main>div>h1 {
text-shadow: 0px 0px 4px white, 2px 2px 6px; text-shadow: 0px 0px 4px white, 2px 2px 6px;
} }
main>p, .content>p{
main>div>p {
margin-left: 1em; margin-left: 1em;
} }
main>h2, .content>h2 {
main>div>h2 {
margin-left: 0.2em; margin-left: 0.2em;
} }
main>h2{ .content>h2{
margin-top: 1.5em; margin-top: 1.5em;
} }
main>div>h2 { .content>h2 {
margin-top: 0.2em; margin-top: 0.2em;
} }
main>h3{ .content>h3{
margin-left: 0.8em; margin-left: 0.8em;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
img { /* img { */
display: block; /* display: inline-block; */
margin: 0 auto; /* margin: 0 auto; */
max-width: 100%; /* max-width: 100%; */
} /* } */
ul.dashed { ul.dashed {
list-style-type: '- '; list-style-type: '- ';
@ -104,17 +144,29 @@ html.theme-dark {
color: white; color: white;
} }
.theme-dark>body>main>div { .theme-dark>body>main>.block-white {
border: 1px solid darkgray; border: 1px solid darkgray;
background-color: black; background-color: black;
box-shadow: 3px 3px 5px #101010C0; box-shadow: 3px 3px 5px #101010C0;
} }
.theme-dark>body>main>h1, .theme-dark>body>main>.content>h1 {
.theme-dark>body>main>div>h1 {
text-shadow: 0px 0px 3px blue, 2px 2px 6px; text-shadow: 0px 0px 3px blue, 2px 2px 6px;
} }
.splide__slide img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
#image-carousel{
width: 50rem;
margin: 0 auto;
/* background: #DD8888DD; */
}
@media(orientation: portrait) { @media(orientation: portrait) {
main { main {
margin-top: 0; margin-top: 0;

1
src/css/splide.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
src/docs/CV_WardTruyen_2024.pdf
View File

Binary file not shown.

BIN
src/img/sunnyclouds.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
src/img/tds1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 107 KiB

BIN
src/img/tds2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
src/img/tds3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
src/img/tds4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

74
src/index.html
View File

@ -5,11 +5,12 @@
<title>Ward Truyen home</title> <title>Ward Truyen home</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/splide.min.css" />
</head> </head>
<body> <body>
<main> <main class="flex">
<div> <div class="block-white content">
<button class="theme-button" title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button> <button class="theme-button" title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
<h1>Ward Truyen</h1> <h1>Ward Truyen</h1>
<h2>Wie ben ik:</h2> <h2>Wie ben ik:</h2>
@ -32,10 +33,17 @@
</p> </p>
<p>Voor meer informatie <a href="docs/CV_WardTruyen_2024.pdf">bekijk mijn cv</a>.</p> <p>Voor meer informatie <a href="docs/CV_WardTruyen_2024.pdf">bekijk mijn cv</a>.</p>
</div> </div>
<div class="content">
<div class="block-alert">
<p>Ik heb projecten waar ik aan werk, hieronder een overzicht.</p>
</div>
</div>
<div class="content">
<h2>Zelf gemaakt 2024:</h2> <h2>Zelf gemaakt 2024:</h2>
<h3>Deze website</h3> <h3>Deze website</h3>
<p>Deze <a href="https://nl.wikipedia.org/wiki/Server" <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 title="Een server is een computer dat diensten verleent aan clients" target="_blank">server</a> heb ik
kunnen
opzetten met opzetten met
<a href="https://archlinux.org/" title="Besturingssysteem Arch Linux" target="_blank">Arch Linux</a> als <a <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>. href="https://nl.wikipedia.org/wiki/Besturingssysteem" title"Besturingssysteem" target="_blank">OS</a>.
@ -48,15 +56,54 @@
m.b.v. <a href="https://www.docker.com/" title="Container applicatie" target="_blank">Docker</a> beheerd. m.b.v. <a href="https://www.docker.com/" title="Container applicatie" target="_blank">Docker</a> beheerd.
</p> </p>
<h3>Familie website</h3> <h3>Familie website</h3>
<p>Op <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a> staat mijn gezin data beheer site. <p>Op <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a> staat mijn gezin data beheer
Deze is gemaakt met als backend Java, Spring en REST, als frontend is er Angular.</p> <img src="img/tds1.png" site.
alt="tds.truyen.network"> Deze is gemaakt met als backend Java, Spring en REST, als frontend is er Angular.</p>
<p>Op <a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> staat een kopie van diezelfde site, </div>
waar u op kan inloggen en inspecteren (login gegevens staan in mijn CV).<br> Mocht er hier iets fout lopen, stuur <div class="block-darker flex">
me a.u.b. een e-mail of bel me, en ik los het ASAP op.</p> <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> <h3>WTerminal</h3>
<p>Op <a href="https://wterminal.truyen.network" target="_blank">wterminal.truyen.network</a> kan u mijn <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> browser-addon of website-tooltje WTerminal vinden.</p>
</div>
<div class="block-photo flex">
<div class="content">
<h2>Zelf gemaakt vroeger:</h2> <h2>Zelf gemaakt vroeger:</h2>
<div class="card"> <div class="card">
<h1>Ronny</h1> <h1>Ronny</h1>
@ -70,7 +117,9 @@
<iframe src="https://www.youtube.com/embed/Rejp6cVRxfc"> <iframe src="https://www.youtube.com/embed/Rejp6cVRxfc">
</iframe> </iframe>
</div> </div>
<div> </div>
</div>
<div class="block-white content">
<h2>Links naar de verschillende domeinen op deze server:</h2> <h2>Links naar de verschillende domeinen op deze server:</h2>
<ul class="dashed"> <ul class="dashed">
<li>website <a href="https://truyen.network" target="_blank">truyen.network</a> centrale website</li> <li>website <a href="https://truyen.network" target="_blank">truyen.network</a> centrale website</li>
@ -78,7 +127,8 @@
repositories te beheren</li> repositories te beheren</li>
<li>website <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a> voor gezin data beheer <li>website <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a> voor gezin data beheer
</li> </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> beheer</li>
<li>website <a href="https://willem.truyen.network" target="_blank">willem.truyen.network</a> bevat spelletjes <li>website <a href="https://willem.truyen.network" target="_blank">willem.truyen.network</a> bevat spelletjes
voor Willem</li> voor Willem</li>
@ -86,7 +136,7 @@
WTerminal, zelf gemaakte browser-addon project</li> WTerminal, zelf gemaakte browser-addon project</li>
</ul> </ul>
<p class="text-red">Deze server wordt nog verder uitgebreid, stay tuned.</p> <p class="text-red">Deze server wordt nog verder uitgebreid, stay tuned.</p>
<p>Laatste update: 17 Oktober 2024</p> <p>Laatste update: 21 Novemeber 2024</p>
</div> </div>
</main> </main>

9
src/js/splide.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long