-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprojecten.html
More file actions
153 lines (145 loc) · 8.54 KB
/
Copy pathprojecten.html
File metadata and controls
153 lines (145 loc) · 8.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/modal.css">
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Szymon Nidecki | Competenties</title>
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg fixed-top py-3">
<div class="container">
<a href="index.html" class="navbar-brand text-uppercase font-weight-bold">Szymon Nidecki</a>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler navbar-toggler-right"><svg xmlns="http://www.w3.org/2000/svg" width="32"
height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
</svg></button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="index.html"
class="nav-link text-uppercase font-weight-bold">Home</a></li>
<li class="nav-item"><a href="cv.html" class="nav-link text-uppercase font-weight-bold">Mijn
cv</a></li>
<li class="nav-item"><a href="competenties.html"
class="nav-link text-uppercase font-weight-bold">Competenties</a></li>
<li class="nav-item"><a href="projecten.html"
class="nav-link text-uppercase font-weight-bold">Projecten</a></li>
<li class="nav-item"><a href="contact.html"
class="nav-link text-uppercase font-weight-bold">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="pt-2 text-white">
<header class="py-5 mt-5">
<h1 class="display-4">Projecten</h1>
<p class="lead mb-0">Hier vind je de projecten die ik tot nu toe heb ontwikkeld in- en buiten school!
</p>
</header>
<!-- WEB3 -->
<div class="card flex-md-row mb-4 box-shadow h-md-250 bg-transparent text-white shadow">
<div class="card-body d-flex flex-column align-items-start lead">
<h3>COVID-19 tracker (Web)</h3>
<p>Dit project had de bedoeling om de geregistreerde personen kunnen controleren en eventueel hun
contacten verwittigen indien er een kans is van besmetting.</p>
<p><strong>Hier kon men zich: </strong>registreren, aanmelden, contacten toevoegen, testresultaten
indienen. <br><strong>Toegepaste functies:</strong> Authorisatie, verificatie, querying.</p>
<div class="row-cols-12" style="margin-left: 0">
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item bg-transparent">Java (back-end)</li>
<li class="list-group-item bg-transparent">JSTL</li>
<li class="list-group-item bg-transparent">PostgreSQL</li>
<li class="list-group-item bg-transparent">HTML/CSS</li>
</ul>
</div>
</div>
<img class="card-img-right flex-auto d-none d-md-block" style="width: 400px; height: 21.85rem;"
src="images/web3.png" alt="szymon-nidecki [200x250]" id="web3" onclick="openModal('web3')">
</div>
<!-- WEB4 -->
<div class="card flex-md-row mb-4 box-shadow h-md-250 bg-transparent text-white shadow">
<div class="card-body d-flex flex-column align-items-start lead">
<h3>Chatting app (Web)</h3>
<p>Dit projekt werd ontwikkeld om het polling en push systeem van jQuery te implementeren. </p>
<p><strong>Hier kon men zich: </strong>Aanmelden, groepen aanmaken, groepen joinen, andere gebruiker
toevoegen, prive-chatten.<br><strong>Toegepaste functies: </strong>Authorisatie, verificatie,
push, polling, await/promise</p>
<div class="row-cols-12" style="margin-left: 0">
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item bg-transparent">Java (back-end)</li>
<li class="list-group-item bg-transparent">JSTL</li>
<li class="list-group-item bg-transparent">jQuery</li>
<li class="list-group-item bg-transparent">HTML/CSS</li>
</ul>
</div>
</div>
<img class="card-img-right flex-auto d-none d-md-block" style="width: 400px; height: 19.9rem;"
src="images/web4.jpg" alt="szymon-nidecki [200x250]" id="web4" onclick="openModal('web4')">
</div>
<!-- OOO -->
<div class="card flex-md-row mb-4 box-shadow h-md-250 bg-transparent text-white shadow">
<div class="card-body d-flex flex-column align-items-start lead">
<h3>Gokspel (Java patterns)</h3>
<p>Dit projekt werd ontwikkeld om meerdere java patterns te implementeren met voorbeelden zoals:
template, adapter, strategy, facade, ...</p>
<p><strong>Hier kon men: </strong>Gokken, saldo bekijken, winnen/verliezen, admin heeft controle
over spel en saldo's.</p>
<div class="row-cols-12" style="margin-left: 0">
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item bg-transparent">Java 8</li>
<li class="list-group-item bg-transparent">JavaFX</li>
<li class="list-group-item bg-transparent">Patterns</li>
</ul>
</div>
</div>
<img class="card-img-right flex-auto d-none d-md-block" style="width: 400px; height: 18.1rem;"
src="images/OOO.png" alt="szymon-nidecki [200x250]" id="ooo" onclick="openModal('ooo')">
</div>
</div>
</div>
<div id="imgModal" class="modal">
<span class="close" style="color: white;" onclick="closeModal()">×</span>
<img id="projectModal" alt="DLR2 Szymon Nidecki" class="modal-content">
<div id="caption"></div>
</div>
<footer class="footer text-center bg-transparent pt-5 mb-5 lead text-white">
<span class="bg-transparent">Copyright © Szymon Nidecki (2021-2022)</span>
</footer>
<script type="text/javascript">
$(function () {
$(window).on('scroll', function () {
if ($(window).scrollTop() > 10) {
$('.navbar').addClass('active');
} else {
$('.navbar').removeClass('active');
}
});
});
function openModal(id) {
var modal = document.getElementById("imgModal");
var img = document.getElementById(id);
var modalImg = document.getElementById("projectModal");
var captionText = document.getElementById("caption");
modal.style.display = "block";
modalImg.src = img.src;
captionText.innerHTML = img.alt;
};
function closeModal() {
var modal = document.getElementById("imgModal");
modal.style.display = "none";
};
</script>
</body>
</html>