forked from AnoukKuijten/cv-AnoukKuijten
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
268 lines (234 loc) · 12.5 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
265
266
267
268
<!doctype html>
<html class="h-100" lang="en">
<!-- An HTML document always starts with a "head", i.e. information about the page that isn't directly visible -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html;">
<!-- Links to the CSS styles from Bootstrap. -->
<!-- -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- -->
<!-- Links to our additional CSS styles -->
<link rel="stylesheet" href="css/styles.css">
<!-- Alternative CSS for demonstration purposes. You must deactivate the Bootstrap CSS to activate this one. -->
<!--
<link rel="stylesheet" href="css/alternative.css">
-->
<title>Anouk Kuijten Resume</title>
</head>
<!-- End of the head -->
<!-- Start of the body, which contains everything visible on the page -->
<body class="d-flex flex-column h-100 justify-content-between">
<!--
We use a Bootstrap container to align contents.
The "container" class can be replaced by "container-fluid" to make a full width page.
The "my-sm-4" class adds a margin (m) vertical (y) at sizes small (-sm-) and above, of 4 x 6 pixels
The "resume-container" class doesn't come from Bootstrap, you can use it for your own styles
-->
<div class="container shadow-lg my-sm-4 resume-container">
<!--
<header> is a semantic element: it works exactly like <div>, but it gives information about the role of the code below.
The "row" class is used for the Bootstrap grid.
-->
<header class="row resume-header justify-content-center">
<!--
A container to wrap around the portrait and align it. We use Bootstrap grid columns.
This constrains the portrait to columns of decreasing sizes
-->
<div class="portrait-container col-5 col-sm-4 col-md-3 col-lg-2">
<!--
"w-100" makes sure the image takes the full width of the column it's in
"rounded-circle" cuts a circle around the image
-->
<img class="w-100 rounded-circle my-3" src="images/portrait.JPG" alt="Portrait of Firstname Lastname" width="160">
</div>
<!--
A container to wrap around your name and tagline. Full-width at small size, then columns of increasing size.
-->
<div class="col-12 col-sm-8 col-md-9 col-lg-10 my-3 header-content">
<h1 class="fw-bolder">Anouk Kuijten</h1>
<h5 class="fst-italic tagline">Your expert in the HUB Radio mixing panel.</h5>
</div>
</header>
<!--
Another row in the Bootstrap grid, for the rest of the résumé.
Biography and other details will be on top of each other at sizes XS and S, then next to each other.
Use the "flex-row-reverse" class here to swap the columns around.
-->
<div class="row resume-bottom">
<!--
<main> is another semantic element. It will contain biographical info (professional experience and education).
-->
<main class="col-md-7 col-lg-8 col-xl-9 resume-main">
<!--
<section> is yet another semantic element. The first one is for professional experience.
-->
<section class="my-3 biography-section">
<h2>Professional Experience</h2>
<!--
Each list item (li) in the unordered list (ul) below will be one job.
"list-unstyled" is a class that hides the bullet points of a list.
-->
<ul class="biography-list list-unstyled">
<!-- Top item (generally the latest or most relevant) in professional experience -->
<li class="biography-item row mb-2">
<!-- We're using a grid inside a grid so we can align logos and text -->
<div class="logo-container col-3 col-sm-2 col-md-3 col-lg-2">
<img class="biography-logo mw-100 d-block mx-auto" src="images/icons/radio.png" alt="Company logo" width="70">
</div>
<div class="biography-contents col-9 col-sm-10 col-md-9 col-lg-10">
<h4>Manager - Co-host HUB Radio </h4>
<h5>2021 - 22</h5>
<!-- Use the list below to talk about your achievements -->
<ul class="biography-details list-unstyled">
<li>Main DJ behind the mixing panel </li>
<li>Manager of the Buas HUB news department </li>
<li>Part of my studies at Breda University of Applied Sciences</li>
</ul>
</div>
</li>
<!-- 2nd item in professional experience -->
<li class="biography-item row mb-2">
<div class="logo-container col-3 col-sm-2 col-md-3 col-lg-2">
<!-- We're using a grid inside a grid so we can align logos and text -->
<img class="biography-logo mw-100 d-block mx-auto" src="images/employers/fries.png" alt="Company logo" width="80">
</div>
<div class="biography-contents col-9 col-sm-10 col-md-9 col-lg-10">
<h4>Employee at Frituur Beccaro</h4>
<h5>2017 </h5>
<!-- This entry doesn't have a list of achievements, but you can copy-paste the one from above -->
</div>
</li>
</ul>
</section>
<!-- We're done with jobs, let's move on to schools -->
<section class="my-3 biography-section">
<h2>Education</h2>
<ul class="biography-list list-unstyled">
<!-- Top item in education. And by "top", I mean a Bachelor in Creative Business at BUas. -->
<li class="biography-item row mb-2">
<div class="logo-container col-3 col-sm-2 col-md-3 col-lg-2">
<img class="biography-logo mw-100 d-block mx-auto" src="images/schools/logo-buas.svg" alt="School logo" width="120">
</div>
<div class="biography-contents col-9 col-sm-10 col-md-9 col-lg-10">
<h4>BA in Creative Business, Breda University of Applied Sciences</h4>
<h5>2020 – now</h5>
<!-- Use the list below to talk about minors, exchanges, extra-curricular activities. -->
<ul class="biography-details list-unstyled">
<li>Radio host at HUB Radio </li>
</ul>
</div>
</li>
<!-- 2nd item in education -->
<li class="biography-item row mb-2">
<div class="logo-container col-3 col-sm-2 col-md-3 col-lg-2">
<img class="biography-logo mw-100 d-block mx-auto" src="images/schools/Dongemond.png" alt="School logo" width="100">
</div>
<div class="biography-contents col-9 col-sm-10 col-md-9 col-lg-10">
<h4>HAVO Diploma, Dongemond college Raamsdonksveer </h4>
<h5>2019</h5>
<ul class="biography-details list-unstyled">
<li>E&M profile </li>
</ul>
</div>
</li>
</ul>
</section>
<!-- This is the end of the "Education" section -->
</main>
<!--
We're done with the first column.
We now move on to the column with contact details, languages and other skills
<aside> is also a semantic element.
-->
<aside class="col-md-5 col-lg-4 col-xl-3 resume-aside">
<!-- The first block will be contact details -->
<section class="my-3 aside-section">
<h2>Contact</h2>
<!--
A list of all your contact details.
There are more icons in the images/icons folder, have a look if you want to add your LinkedIn or TikTok profile.
Be careful and only put channels through which you really want to be contacted.
If your phone number is your personal one, you may want to remove it!
-->
<ul class="contact-list list-unstyled">
<li class="contact-item">
<a class="d-flex align-items-center" href="mailto:[email protected]" target="_blank">
<img class="contact-icon" src="images/icons/envelope.svg" alt="Email">
</a>
</li>
<li class="contact-item">
<a class="d-flex align-items-center" href="https://www.linkedin.com/in/anouk-kuijten-aa537b1b9/" target="_blank">
<img class="contact-icon" src="images/icons/LinkedIn.svg" alt="LinkedIn">
LinkedIn Profile
</a>
</li>
<li class="contact-item">
<a class="d-flex align-items-center" href="https://github.com/AnoukKuijten/cv-AnoukKuijten.git" target="_blank">
<img class="contact-icon" src="images/icons/github.svg" alt="LinkedIn">
GitHub Profile
</a>
</li>
</ul>
</section>
<!-- End of contact details, moving on to languages -->
<section class="my-3 aside-section">
<h2>Languages</h2>
<!-- Each item in the list is a language. Modify, add or remove depending on what you speak -->
<ul class="language-list list-unstyled">
<li class="language-item d-flex mb-1">
<h5 class="language-name w-50">Dutch</h5>
<div class="language-level w-50 border border-info border-2 position-relative">
<!-- The div below is a progress bar. Choose between w-25, w-50, w-75 and w-100 to show your level of fluency -->
<div class="language-progress position-absolute bg-warning h-100 w-100"></div>
<h6 class="position-absolute w-100 text-center top-0 py-1">Native</h6>
</div>
</li>
<li class="language-item d-flex mb-1">
<h5 class="language-name w-50">English</h5>
<div class="language-level w-50 border border-info border-2 position-relative">
<!-- The div below is a progress bar. Choose between w-25, w-50, w-75 and w-100 to show your level of fluency -->
<div class="language-progress position-absolute bg-warning h-100 w-75"></div>
<h6 class="position-absolute w-100 text-center top-0 py-1">Full proficiency</h6>
</div>
</li>
<li class="language-item d-flex mb-1">
<h5 class="language-name w-50">German</h5>
<div class="language-level w-50 border border-info border-2 position-relative">
<!-- The div below is a progress bar. Choose between w-25, w-50, w-75 and w-100 to show your level of fluency -->
<div class="language-progress position-absolute bg-warning h-100 w-25"></div>
<h6 class="position-absolute w-100 text-center top-0 py-1">Beginner</h6>
</div>
</li>
</ul>
</section>
<!-- End of contact details, moving on to other skills -->
<section class="my-3 aside-section">
<h2>Other Skills</h2>
<ul class="skill-list list-unstyled">
<li class="skill-item">Team player</li>
<li class="skill-item">Microsoft Office Power User</li>
<li class="skill-item">Driving Licence</li>
</ul>
</section>
<!-- End of other skills, moving on to interest and hobbies -->
<section class="my-3 aside-section">
<h2>Interests & Hobbies</h2>
<ul class="skill-list list-unstyled">
<li class="skill-item"> </li>
<li class="skill-item">Netflix Binge-Watcher</li>
</ul>
</section>
</aside>
</div>
</div>
<!-- And now, a footer! -->
<footer class="bg-dark mt-sm-5 py-4 text-light">
<p class="container text-end">
Created as part of the <a href="https://www.buas.nl/en/programmes/creative-business" target="_blank">Bachelor of Creative Business at Breda University of Applied Sciences.</a>
</p>
</footer>
</body>
</html>