Chore: improved background styling
This commit is contained in:
Ward Truyen
parent
5b5bb68f50
commit
36ba53eb2e
@ -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,23 +103,21 @@ 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;
|
||||||
@ -104,14 +144,13 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
BIN
src/img/sunnyclouds.jpg
Normal file
BIN
src/img/sunnyclouds.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
155
src/index.html
155
src/index.html
@ -9,8 +9,8 @@
|
|||||||
</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();">☀</button>
|
<button class="theme-button" title="Dark theme on/off" onclick="toggleTheme();">☀</button>
|
||||||
<h1>Ward Truyen</h1>
|
<h1>Ward Truyen</h1>
|
||||||
<h2>Wie ben ik:</h2>
|
<h2>Wie ben ik:</h2>
|
||||||
@ -33,73 +33,93 @@
|
|||||||
</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>
|
||||||
<h2>Zelf gemaakt 2024:</h2>
|
<div class="content">
|
||||||
<h3>Deze website</h3>
|
<div class="block-alert">
|
||||||
<p>Deze <a href="https://nl.wikipedia.org/wiki/Server"
|
<p>Ik heb projecten waar ik aan werk, hieronder een overzicht.</p>
|
||||||
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>
|
</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>
|
||||||
<div class="card">
|
<div class="content">
|
||||||
<h1>Minesweeper</h1>
|
<h2>Zelf gemaakt 2024:</h2>
|
||||||
<p>Gemaakt in C/C++ 2006-2013<br>OpenGL rendering</p>
|
<h3>Deze website</h3>
|
||||||
<iframe src="https://www.youtube.com/embed/Rejp6cVRxfc">
|
<p>Deze <a href="https://nl.wikipedia.org/wiki/Server"
|
||||||
</iframe>
|
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>
|
<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>
|
<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>
|
||||||
@ -107,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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user