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

Compare commits

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

No commits in common. "36ba53eb2e728a93c4f23bd6cd9fc99bd6556710" and "282b5b43802932ee3da09870b303472fdd39995c" have entirely different histories.
36ba53eb2e ... 282b5b4380

10 changed files with 59 additions and 171 deletions
Show Stats Expand all files Collapse all files

94
src/css/main.css
View File

@ -9,7 +9,6 @@ body {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto;
} }
.theme-button { .theme-button {
@ -20,7 +19,7 @@ body {
.card{ .card{
padding: 10px; padding: 10px;
border: 1px solid darkblue; border: 1px solid darkblue;
background-color: #ddddddcc; background-color: #ffffffcc;
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;
@ -35,57 +34,16 @@ html {
background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F); background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
} }
.flex{ main {
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;
} }
.block-photo { main>div {
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;
@ -94,7 +52,7 @@ html {
margin-bottom: 1em; margin-bottom: 1em;
} }
.content>h1 { main>div>h1 {
font-family: "Raleway", sans-serif; font-family: "Raleway", sans-serif;
font-size: 3em; font-size: 3em;
margin-top: 0px; margin-top: 0px;
@ -103,32 +61,34 @@ html {
text-shadow: 0px 0px 4px white, 2px 2px 6px; text-shadow: 0px 0px 4px white, 2px 2px 6px;
} }
.content>p{ main>p,
main>div>p {
margin-left: 1em; margin-left: 1em;
} }
.content>h2 { main>h2,
main>div>h2 {
margin-left: 0.2em; margin-left: 0.2em;
} }
.content>h2{ main>h2{
margin-top: 1.5em; margin-top: 1.5em;
} }
.content>h2 { main>div>h2 {
margin-top: 0.2em; margin-top: 0.2em;
} }
.content>h3{ main>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: inline-block; */ display: block;
/* margin: 0 auto; */ margin: 0 auto;
/* max-width: 100%; */ max-width: 100%;
/* } */ }
ul.dashed { ul.dashed {
list-style-type: '- '; list-style-type: '- ';
@ -144,29 +104,17 @@ html.theme-dark {
color: white; color: white;
} }
.theme-dark>body>main>.block-white { .theme-dark>body>main>div {
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>.content>h1 { .theme-dark>body>main>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
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
View File

Binary file not shown.
Side by Side

Before

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: 107 KiB

After

Width:  |  Height:  |  Size: 78 KiB

BIN
src/img/tds2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 96 KiB

BIN
src/img/tds3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 96 KiB

BIN
src/img/tds4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 101 KiB

74
src/index.html
View File

@ -5,12 +5,11 @@
<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 class="flex"> <main>
<div class="block-white content"> <div>
<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>
@ -33,17 +32,10 @@
</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 title="Een server is een computer dat diensten verleent aan clients" target="_blank">server</a> heb ik kunnen
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>.
@ -56,54 +48,15 @@
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 <p>Op <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a> staat mijn gezin data beheer site.
site. Deze is gemaakt met als backend Java, Spring en REST, als frontend is er Angular.</p> <img src="img/tds1.png"
Deze is gemaakt met als backend Java, Spring en REST, als frontend is er Angular.</p> alt="tds.truyen.network">
</div> <p>Op <a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> staat een kopie van diezelfde site,
<div class="block-darker flex"> waar u op kan inloggen en inspecteren (login gegevens staan in mijn CV).<br> Mocht er hier iets fout lopen, stuur
<div class="content"> me a.u.b. een e-mail of bel me, en ik los het ASAP op.</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>
</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>
@ -117,9 +70,7 @@
<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>
@ -127,8 +78,7 @@
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 <li>voorbeeld-website <a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> voor gezin data
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>
@ -136,7 +86,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: 21 Novemeber 2024</p> <p>Laatste update: 17 Oktober 2024</p>
</div> </div>
</main> </main>

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

File diff suppressed because one or more lines are too long