-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
264 lines (244 loc) · 12.7 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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- STYLESHEETS -->
<link rel="stylesheet" type="text/css" href="static/css/style.css" />
<link rel="stylesheet" type="text/css" href="static/css/home.css" />
<link rel="stylesheet" type="text/css" href="static/css/work.css" />
<link rel="stylesheet" type="text/css" href="static/css/cv.css" />
<title>Leo Kramer - Home</title>
</head>
<body id="home">
<header>
<nav>
<ul>
<div>
<li>
<a tabindex="1" class="active" href="">Leo</a>
</li>
</div>
<div>
<!-- hamburger menu button -->
<button>☰</button>
<div>
<li><a tabindex="2" href="#work">Werk</a></li>
<li>
<a tabindex="3" href="pages/nl/cv.html">CV</a>
</li>
<li><a tabindex="4" href="#about">Over mij</a></li>
<li><a tabindex="5" href="#contact">Contact</a></li>
<li>
<svg
tabindex="6"
width="329"
height="329"
viewBox="0 0 329 329"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M54.2009 48.1021C52.9464 46.8476 51.1911 46.399 49.5786 46.7565C48.2902 48.0137 47.0223 49.2919 45.7756 50.5905C45.4342 52.1921 45.8856 53.9289 47.1298 55.1731L73.5521 81.5953C75.8138 79.145 78.1738 76.7869 80.626 74.5271L54.2009 48.1021ZM158.956 42.0992C160.615 42.0329 162.281 41.9995 163.956 41.9995C165.631 41.9995 167.298 42.0329 168.956 42.0992V4.99945C168.956 2.26304 166.758 0.0400533 164.031 0L163.85 0.000555771C161.138 0.0570782 158.956 2.27352 158.956 4.99945V42.0992ZM241.188 69.2638C243.789 71.3647 246.302 73.5694 248.722 75.8716L275.059 49.535C276.72 47.8734 276.968 45.3332 275.802 43.4098C275.097 42.7611 274.386 42.1184 273.669 41.482C271.813 40.5999 269.524 40.9272 267.988 42.4639L241.188 69.2638ZM286.556 154.999C286.821 158.298 286.956 161.633 286.956 164.999L323.956 164.999C326.492 164.999 328.587 163.111 328.912 160.664C328.9 160.129 328.885 159.594 328.868 159.059C328.428 156.747 326.396 154.999 323.956 154.999H286.556ZM254.428 248.33C252.169 250.782 249.811 253.142 247.36 255.404L273.059 281.102C275.011 283.055 278.177 283.055 280.13 281.102C282.082 279.149 282.082 275.984 280.13 274.031L254.428 248.33ZM168.956 287.9C167.298 287.966 165.631 287.999 163.956 287.999C162.281 287.999 160.615 287.966 158.956 287.9V323.999C158.956 326.726 161.138 328.942 163.851 328.998L164.03 328.999C166.758 328.959 168.956 326.736 168.956 323.999V287.9ZM74.8283 249.765C72.5261 247.346 70.3214 244.832 68.2206 242.231L42.0588 268.393C40.8463 269.605 40.3867 271.286 40.68 272.853C41.8274 274.162 42.9952 275.454 44.183 276.726C45.8807 277.224 47.7906 276.803 49.1298 275.464L74.8283 249.765ZM40.9562 164.999C40.9562 161.633 41.0914 158.298 41.3568 154.999H4.95617C2.51615 154.999 0.484345 156.747 0.0444374 159.059C0.0270719 159.594 0.0122553 160.129 0 160.664C0.325189 163.111 2.4202 164.999 4.95617 164.999H40.9562Z"
fill="#FFFFFF"
/>
<circle
cx="163.956"
cy="165"
r="109"
fill="#FFFFFF"
/>
</svg>
</li>
<li>
<span tabindex="7" class="active">NL</span> |
<span tabindex="8">EN</span>
</li>
<svg
width="2388"
height="2404"
viewBox="0 0 2388 2404"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 18L2370 2386"
stroke="black"
stroke-width="100"
/>
<path
d="M2370 18L18 2386"
stroke="black"
stroke-width="100"
/>
</svg>
</div>
</div>
</ul>
</nav>
</header>
<main>
<!-- INTRODUCTION -->
<section>
<!-- background circle -->
<div></div>
<img
src="static/img/selfie-leaves.jpg"
alt="Een foto van Leo die in allerlei herfst bladeren ligt."
/>
<h1>Hi! Ik ben Leo</h1>
<!-- tags -->
<ul>
<li>UX/UI Design</li>
<li>Front-end</li>
<li>Creatief</li>
<li>Zorgvuldig</li>
<li>Nieuwsgierig</li>
</ul>
<svg
width="38"
height="72"
viewBox="0 0 38 72"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.5 3C21.5 1.61929 20.3807 0.5 19 0.5C17.6193 0.5 16.5 1.61929 16.5 3L21.5 3ZM17.2322 70.7678C18.2085 71.7441 19.7915 71.7441 20.7678 70.7678L36.6777 54.8579C37.654 53.8816 37.654 52.2986 36.6777 51.3223C35.7014 50.346 34.1184 50.346 33.1421 51.3223L19 65.4645L4.85787 51.3223C3.88156 50.346 2.29864 50.346 1.32233 51.3223C0.346022 52.2986 0.346022 53.8816 1.32233 54.8579L17.2322 70.7678ZM16.5 3L16.5 69L21.5 69L21.5 3L16.5 3Z"
fill="white"
/>
</svg>
</section>
<!-- ABOUT ME -->
<section id="about">
<section>
<!-- divs to seperate them in two columns -->
<div>
<img src="static/img/selfie-mirror.jpg" alt="" />
<!-- background circle -->
<div></div>
</div>
<div>
<h3>Wie ben ik?</h3>
<p>
Zoals het lekker groot voor je neus staat, mijn naam
is Leo. Ik ben geboren in 2001 in de beste familie
die ik zou willen hebben. Als ik mezelf in één woord
zou moeten beschrijven dan is het
<span>energie</span>. Energie om te
<span>verkennen</span>, om te maken, om te
<span>leren</span>, en om mensen
<span>blij</span> te maken. Stilte is voor mij echt
totaal niet mijn ding, ik hou van praten, zelfs
tegen mezelf.
</p>
</div>
</section>
<section>
<div>
<img src="static/img/selfie-guitar.jpg" alt="" />
<div></div>
</div>
<div>
<h3>Wat is mijn passie?</h3>
<p>
<span>Verhalen</span> zijn vooral mijn grootste
passie. Hierdoor heb ik vooral hobby’s zoals
<span>schrijven</span>, <span>lezen</span>,
<span>piano spelen</span>, en heel af en toe
<span>tekenen</span>. Naast een fan van alle
creatieve vakken te zijn ben ik ook van het
technische, zoals <span>wiskunde</span> en in het
algemeen <span>puzzels</span> oplossen. Ik merk ook
vaak in het leven dat ik echt tussen creatieve en
technische vakken in zit.
</p>
</div>
</section>
<section>
<div>
<img src="static/img/selfie-wall.jpg" alt="" />
<div></div>
</div>
<div>
<h3>Hoe ben ik gegroeid?</h3>
<p>
Ik vond in het begin van mijn leven nog vrij lastig
om met mensen te praten. Ik ging veel beter om met
<span>dieren</span> en daar richtte ik dus mijn
aandacht op. Halverwege mijn middelbare school
carrière ging dat aspect van mijn leven beter. Hoe
ik verder ben gegroeid was vooral
<span>mentaal</span>. Door de jaren heen heb ik meer
geleerd om <span>efficiënter</span> te werken.
Daarnaast heb ik tijdens mijn studie veel kunnen
oefenen om in <span>teamsverband</span> te werken.
</p>
</div>
</section>
<a href="pages/nl/cv.html">Lees meer over mij in mijn CV</a>
</section>
<!-- WORK -->
<section id="work">
<h2>Mijn werk</h2>
<section>
<a href="pages/nl/2-year/sandscript.html">
<img
src="static/img/2-year/link-sandscript.png"
alt=""
/>
<p>SandScript</p>
</a>
<a href="pages/nl/3-year/dreaming.html">
<img src="static/img/3-year/link-dreaming.jpg" alt="" />
<p>Keep Dreaming</p>
</a>
<a href="pages/nl/2-year/buddy.html">
<img
src="static/img/2-year/link-bookbuddy.png"
alt=""
/>
<p>Book Buddy</p>
</a>
<a href="pages/nl/1-year/avatar.html">
<img src="static/img/1-year/link-avatar.png" alt="" />
<p>Avatar: The Game</p>
</a>
</section>
</section>
<!-- CONTACT -->
<section id="contact">
<h2>Neem gerust contact op</h2>
<ul>
<li>
<a href="mailto:[email protected]" target="_blank">
<span>Email</span> [email protected]
</a>
</li>
<li>
<a href="tel:+31645921049" target="_blank">
<span>Telefoon</span> +31 6 45 92 10 49
</a>
</li>
<li>
<a
href="https://www.linkedin.com/in/leo-kramer"
target="_blank"
>
<span>Linkedin</span> Leo Kramer
</a>
</li>
</ul>
</section>
<!-- For the circle there are 2 divs nested so that the circle gets cut
off at the bottom -->
<div>
<div></div>
</div>
</main>
<!-- JAVASCRIPT -->
<script src="static/javascript/script.js"></script>
</body>
</html>