-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
224 lines (195 loc) · 9.17 KB
/
index.html
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi">
<title>Joppe Koops Webdesign Portfolio</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" type="image/png" href="favicon.png">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/aca5798640.js" crossorigin="anonymous"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100;0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#skills">Mijn Skills</a></li>
<li><a href="#over-mij">Over Mij</a></li>
<li><a href="#projecten">Projecten</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<canvas id="hero-canvas" title="Joppe aan het werk op zijn computer"></canvas>
<div class="hero-content">
<h1><span>Hi, Ik ben Joppe Koops</span> <span class="big">Webdeveloper</span> <span class="big">UX Designer</span> <span class="big">CMD Student</span></h1>
<p>Ik ontwerp toegankelijke en functionele websites.</p>
</div>
</section>
<section id="skills">
<h2>Mijn Skills</h2>
<ul>
<li>
<img src="./img/css3-alt.svg" alt="">
<span>CSS</span>
</li>
<li>
<img src="./img/html5.svg" alt="">
<span>HTML</span>
</li>
<li>
<img src="./img/js-square.svg" alt="">
<span>JavaScript</span>
</li>
<li>
<img src="./img/figma-logo.svg" alt="">
<span class="visually-hidden">Figma</span>
</li>
<li>
<img src="./img/xd-logo.svg" alt="">
<span class="visually-hidden">Adobe XD</span>
</li>
<li>
<img src="./img/universal-access-solid.svg" alt="">
<span>Toegankelijkheid</span>
</li>
<li>
<img src="./img/node-logo.svg" alt="">
<span class="visually-hidden">Node JS</span>
</li>
<li>
<img src="./img/php-logo.svg" alt="">
<span class="visually-hidden">PHP</span>
</li>
</ul>
</section>
<section id="over-mij">
<h2>Over Mij</h2>
<div>
<div>
<p>Al sinds de middelbare school ben ik bezig met het maken van beeld. Dit begon met het maken van een film. Daarvoor heb ik zelf uitgezocht hoe alle techniek werkt en samen met een groep vrienden de film opgenomen.</p>
<p>Hoewel ik nog steeds graag film maak, ligt de focus meer op het maken van websites. Ik heb via internet zelf veel daarover uitgezocht en voor mezelf enkele projecten gemaakt.</p>
<p>Om dit verder uit te bereiden doe ik nu de opleiding Communication & Multimedia Design aan de Hogeschool van Amsterdam. Daar leer ik meer over ontwerpen, gebruikers en development.</p>
</div>
<div>
<img loading="lazy" src="./img/over-mij-foto.jpg" width="80%" alt="Selfie van Joppe op vakantie, genomen voor het plaatsnaambord van het dorp Joppe in gemeente Lochem."/>
</div>
</div>
</section>
<section id="projecten">
<h2>Projecten</h2>
<article id="css-day-ta" aria-labelledby="css-day-ta-titel">
<div>
<h3 id="css-day-ta-titel">CSS Day-ta Hackathon</h3>
<ul class="tags" aria-label="labels">
<li><img src="./img/html5.svg" alt="">HTML</li>
<li><img src="./img/css3-alt.svg" alt="">CSS</li>
<li><img src="./img/js-square.svg" alt="">JavaScript</li>
</ul>
<p class="big">Prijs winnende webapp</p>
<p>Deze webapplicatie heb ik gemaakt voor een Hackathon op de minor web design & development. De opdracht was om een applicatie te maken met de beschikbare data van de afgelopen 10 CSS days. Met onze applicatie hebben wij vier kaarten gewonnen voor CSS day!</p>
<a href="https://jopmolenaar.github.io/css-day-ta-JJJM/" target="_blank">Bekijk het project <i class="fa-solid fa-circle-arrow-right"></i></a>
<a href="https://github.com/JopMolenaar/css-day-ta-JJJM" target="_blank">Code op Github <i class="fa-brands fa-github"></i></a>
</div>
<div>
<img src="./img/css-day-ta.webp" alt="CSS day-ta hackathon project mockup op een laptop">
</div>
</article>
<article id="ikea-herontwerp" aria-labelledby="ikea-herontwerp-titel">
<div>
<h3 id="ikea-herontwerp-titel">Ikea Herontwerp</h3>
<ul class="tags" aria-label="labels">
<li><img src="./img/html5.svg" alt="">HTML</li>
<li><img src="./img/css3-alt.svg" alt="">CSS</li>
<li><img src="./img/js-square.svg" alt="">JavaScript</li>
<li><img src="./img/universal-access-solid.svg" alt="">Toegankelijkheid</li>
</ul>
<p class="big">Webdesign met focus op screenreader toegankelijkheid.</p>
<p class="big">+ Leuke easteregg met javascript.</p>
<a href="https://joppekoops.github.io/frontend-development/planten.html" target="_blank">Bekijk de website <i class="fa-solid fa-circle-arrow-right"></i><small>best op mobiel</small></a>
<a href="https://github.com/joppekoops/frontend-development" target="_blank">Code op Github <i class="fa-brands fa-github"></i></a>
</div>
<div>
<video preload="metadata" loop muted playsinline src="./img/ikea-redesign.mp4"></video>
</div>
</article>
<article id="de-serve" aria-labelledby="de-serve-titel">
<div>
<div>
<h3 id="de-serve-titel">De Serve</h3>
<ul class="tags" aria-label="labels">
<li><img src="./img/xd-logo.svg" alt="Gemaakt met AdobeXD"></li>
</ul>
<p class="big">App prototype gebasseerd op usebility testing.</p>
<p class="big">Test het prototype <i class="fa-solid fa-arrow-right-long"></i></p>
<p>Dit app prototype heb ik gemaakt bij een groepsproject over testen met gebruikers. Daarbij hebben we in twee interaties getest en het ons prototype verbeterd. Het Recept 'Millionaire Shortbread' is volledig uitgewerkt.</p>
</div>
</div>
<div>
<div class="phone-frame">
<div>
<iframe src="about:blank" data-src="https://xd.adobe.com/embed/efe306e5-2469-409a-84a6-2579f74adc10-bab0/?fullscreen&hints=off" frameborder="0" allowfullscreen="" id="adobe-xd-frame"></iframe>
</div>
</div>
</div>
</article>
<article id="solar-system" aria-labelledby="solar-system-titel">
<div>
<h3 id="solar-system-titel">Solar System Simulator</h3>
<ul class="tags" aria-label="labels">
<li><img src="./img/html5.svg" alt="">HTML</li>
<li><img src="./img/css3-alt.svg" alt="">CSS</li>
<li><img src="./img/js-square.svg" alt="">JavaScript</li>
</ul>
<p class="big">Manipuleer tijd & ruimte en kijk hoe de planeten staan.</p>
<p>Dit project heb ik gemaakt om javascript te leren. Deze applicatie gebruikt veel verschillende functies van javascript, dus het was een perfect project om javascript te leren.</p>
<a href="http://inleiding-programmeren.hva.joppekoops.nl/" target="_blank">Bekijk de website <i class="fa-solid fa-circle-arrow-right"></i><small>best op desktop</small></a>
<a href="https://github.com/joppekoops/inleiding-programmeren" target="_blank">Code op Github <i class="fa-brands fa-github"></i></a>
</div>
<div>
<video preload="metadata" loop muted playsinline src="./img/solar-system.mp4"></video>
</div>
</article>
</section>
<section id="contact">
<h2>Contact</h2>
<span id="success-message"></span>
<form action="https://script.google.com/macros/s/AKfycbyGjP8YETphG8g85U59EoglYFAIbo7Xdvd5RDXRJFedAtJYyL3MaZE_XOpInnVxqUDYFg/exec" method="post">
<label for="name">Naam</label>
<div class="input-group" data-error="Vul uw naam in"><input type="text" id="name" name="name" autocomplete="name" required><span class="validity"></span></div>
<label for="email">E-mail adres</label>
<div class="input-group" data-error="Vul een geldig e-mail adres in"><input type="email" id="email" name="email" autocomplete="email" required inputmode="email"><span class="validity"></span></div>
<label for="subject">Onderwerp</label>
<div class="input-group" data-error="Vul een onderwerp in"><input type="text" id="subject" name="subject" autocomplete="off" required><span class="validity"></span></div>
<label for="message">Bericht</label>
<div class="input-group" data-error="Vergeet uw bericht niet"><textarea name="message" id="message" rows="10" required></textarea><span class="validity"></span></div>
<button title="verzenden" id="send"><i class="fa-solid fa-paper-plane"></i></button>
<div class="lds-dual-ring" id="loader"></div>
</form>
</section>
</main>
<footer>
<div>
<p>Copyright © Joppe Koops 2022. All rights reserved.</p>
<a href="https://github.com/joppekoops/portfolio" target="_blank">Bekijk de code op github</a>
</div>
<div>
</div>
<div>
<h3>Contact information</h3>
<ul>
<li>💬 <a href="#contact">Contact Formulier</a></li>
<li>✉️ E-mail: <a href="mailto:[email protected]" target="_blank">[email protected]</a></li>
<li>📱 <a href="https://wa.me/31623656864" target="_blank">WhatsApp</a></li>
</ul>
</div>
</footer>
<script src="./js/script.js"></script>
</body>
</html>