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

Chore: added photo carrousel

Browse Source
This commit is contained in:
Ward Truyen 2024-11-21 12:10:28 +01:00
parent 40482a1336
commit 5b5bb68f50
8 changed files with 61 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/css/main.css
View File

@ -84,11 +84,11 @@ main>h3{
} }
img { /* img { */
display: inline-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: '- ';
@ -115,6 +115,19 @@ html.theme-dark {
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/img/tds1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 107 KiB

BIN
src/img/tds2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 96 KiB

BIN
src/img/tds3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 96 KiB

BIN
src/img/tds4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 101 KiB

40
src/index.html
View File

@ -5,6 +5,7 @@
<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>
@ -33,7 +34,7 @@
<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> <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
@ -47,17 +48,42 @@
zijn zijn
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 site.
Deze is gemaakt met als backend Java, Spring en REST, als frontend is er Angular.</p> 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"> <section id="image-carousel" class="splide" aria-label="Beautiful Images">
<img src="img/tds2.png" alt="tds.truyen.network"> <div class="splide__track">
<img src="img/tds3.png" alt="tds.truyen.network"> <ul class="splide__list">
<img src="img/tds4.png" alt="tds.truyen.network"> <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"> -->
<p>Op <a href="https://sf.truyen.network" target="_blank">sf.truyen.network</a> staat een kopie van diezelfde site, <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 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> 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>
<h2>Zelf gemaakt vroeger:</h2> <h2>Zelf gemaakt vroeger:</h2>

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

File diff suppressed because one or more lines are too long