This repository has been archived by the owner on Oct 17, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
387 lines (367 loc) · 14.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
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous"
/>
<link href="CSS/reset.min.css" rel="stylesheet" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- Compiled and minified CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"
/>
<link rel="stylesheet" href="CSS/index.css" />
<link rel="icon" type="image/png" href="IMAGES/16x16 world sprite.png" sizes="16x16" />
<link rel="icon" type="image/png" href="IMAGES/32x32 world sprite.png" sizes="32x32" />
<title>Mout Pessemier | Home</title>
</head>
<body id="home" class="scrollspy">
<!--header & nav-->
<header>
<nav class="nav-wrapper transparent">
<div class="container">
<a href="#" class="brand-logo left hide-on-med-and-down mtext">Mout Pessemier</a>
<a href="#" class="brand-logo center hide-on-large-only mtxt">Mout Pessemier</a>
<a href="#" class="sidenav-trigger hide-on-large-only" data-target="mobile-links">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<b><a href="#home" class="navLink">Home</a></b>
</li>
<li>
<b><a href="#about" class="navLink">About</a></b>
</li>
<li>
<b><a href="#pictures" class="navLink">Photography</a></b>
</li>
<li>
<b><a href="#hobby" class="navLink">Hobby</a></b>
</li>
<li>
<b><a href="#projects" class="navLink">Projects</a></b>
</li>
<li>
<b><a href="HTML/contact_en.html" class="navLink">Contact</a></b>
</li>
<!-- Dropdown Trigger -->
<a class="dropdown-trigger btn transparent" href="#" data-target="language">Language</a>
<!-- Dropdown Structure -->
<ul id="language" class="dropdown-content">
<li><a href="#home">EN</a></li>
<li><a href="HTML/index_nl.html#home">NL</a></li>
</ul>
</ul>
<ul class="sidenav" id="mobile-links">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#pictures">Photography</a>
</li>
<li>
<a href="#hobby">Hobby</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="HTML/contact_en.html">Contact</a>
</li>
<li>
<a href="!#">Languages:</a>
<a href="#home" class="btn btn-small waves-effect waves-dark transparent black-text">EN</a>
<a href="HTML/index_nl.html#home" class="btn btn-small waves-effect waves-dark transparent black-text"
>NL</a
>
</li>
</ul>
</div>
</nav>
</header>
<!--about-->
<section class="container section scrollspy" id="about">
<h2>About me</h2>
<hr />
<p class="flow-text">
<span id="age"></span> year old boy studying to become a full fledged programmer whilst enjoying life to the
fullest and shooting every picture he can.
</p>
<br />
<p class="ltxt">
I love to program whatever I can. Whether it's games or make an application or even learn a new language, I love
it. That's the refreshing part in my sector which keeps it interesting. Sometimes it can get annoying and when
that happens, I just take a break, go on a trip with my camera and shoot pictures or go do some sport. Since I
am somewhat of an amateur photographer, I do like to travel around the world and capture her wonders.
</p>
<p class="ltxt">
Outside of those hobbies, I do like to hang out with my friends and just goof around or go for a drink.
</p>
</section>
<!--parallax 1-->
<div class="parallax-container">
<div class="parallax">
<img src="IMAGES/DSC_2452cl.jpg" alt="" class="responsive-img" />
</div>
</div>
<!--tabs-->
<section class="container section scrollspy" id="pictures">
<div class="row">
<div class="col s12 l4">
<h2 class="indigo-text text-darken-4">What I do...</h2>
<p class="ltxt">
From what I can remeber, I've always loved taking pictures. I started when I was a little boy but recently,
I've gotten real hooked on photography. Now I go running around, shooting whatever I can and experiment with
different settings. Here you can preview some of my work but If you want to see more, be sure to visit my
<a href="https://www.instagram.com/moutpessemierphotography/" target="_blank">photography account</a>
on instagram!
</p>
<small>*Click on the images to enlarge them.*</small>
</div>
<div class="col s12 l6 offset-l2">
<ul class="tabs">
<li class="tab col s6">
<a href="#photography" class="indigo-text text-darken-4">Photography</a>
</li>
<li class="tab col s6">
<a href="#photoshop" class="indigo-text text-darken-4">Photoshop</a>
</li>
</ul>
<div id="photography">
<div class="row tabsection">
<div class="col s12">
<div class="col s12 l5">
<img src="IMAGES/DSC_2469c1l.jpg " class="responsive-img materialboxed" alt=" " />
</div>
<div class="col s12 l5 offset-l1">
<h4 class="indigo-text text-darken-4">Nature</h4>
<p>I just love venturing into the wild and shooting the raw mountains, the forests and the skies.</p>
</div>
</div>
</div>
<div class="row tabsection">
<div class="col s12 l5 push-l7 offset-l1">
<img src="IMAGES/DSC_2636zl.jpg " class="responsive-img materialboxed" alt=" " />
</div>
<div class="col s12 l5 pull-l4 right-align">
<h4 class="indigo-text text-darken-4">Animals</h4>
<p>
Athough animals aren't my forte, I'd like to get better at shooting them and so I shoot them when I
get the chance.
</p>
</div>
</div>
<div class="row tabsection">
<div class="col s12 l5">
<img src="IMAGES/DSC_2705clz.jpg " class="responsive-img materialboxed" alt=" " />
</div>
<div class="col s12 l5 offset-l1">
<h4 class="indigo-text text-darken-4">Stars</h4>
<p>
These celestial spheres are one of the most satisfying subjects to shoot. I've loved them since I was
little and I'll keep on loving them
</p>
</div>
</div>
</div>
<div class="col s12" id="photoshop">
<p>Since I shoot pictures, I figuerd it would be great if I could enhance and correct them as well.</p>
<div class="col s12 l6">
<h4 class="indigo-text text-darken-4">Before</h4>
<img src="IMAGES/DSC_2706l.jpg" alt="" class="responsive-img materialboxed" />
</div>
<div class="col s12 l6">
<h4 class="indigo-text text-darken-4">After</h4>
<img src="IMAGES/DSC_2706cl.jpg" alt="" class="responsive-img materialboxed" />
</div>
</div>
</div>
</div>
<hr />
<h4 class="indigo-text text-darken-4">What I offer you:</h4>
<p>
If you like my work, I could always offer advice, answer questions and edit one or two pictures.<br />Just
contact me via mail.
</p>
</section>
<!--parallax 2-->
<div class="parallax-container">
<div class="parallax">
<img src="IMAGES/DSC_2682cl.jpg" alt="" class="responsive-img" />
</div>
</div>
<!--hobbies-->
<section class="container section scrollspy" id="hobby">
<div class="row">
<div class="col s12 m6 l4">
<div class="card grey lighten-4">
<div class="card-image">
<img src="IMAGES/Snowboard.jpg" alt="" />
</div>
<div class="card-content">
<div class="card-title">Sports</div>
<span class="truncate"
>I've already tried out many sports. I just jump from one to the other because I like to do
sports.</span
>
</div>
<div class="card-action">
<a href="HTML/hobbies_en.html#sport"
>Read on
<i class="material-icons right">arrow_right_alt </i>
</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card grey lighten-4">
<div class="card-image">
<img src="IMAGES/gitaar.jpg" alt="" />
</div>
<div class="card-content">
<div class="card-title">Music</div>
<span class="truncate"
>Since a youngling, I've been hooked on music. Wether it is making my own (on my guitar) or just
listening and chilling in the couch.</span
>
</div>
<div class="card-action">
<a href="HTML/hobbies_en.html#music"
>Read on
<i class="material-icons right">arrow_right_alt </i>
</a>
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card grey lighten-4">
<div class="card-image">
<img src="IMAGES/IT.jpg" alt="" />
</div>
<div class="card-content">
<div class="card-title">IT</div>
<span class="truncate"
>Since I broke the pc at home when I was a little guy, I wanted to show that I don't break everything
that I touch.
</span>
</div>
<div class="card-action">
<a href="HTML/hobbies_en.html#it"
>Read on
<i class="material-icons right">arrow_right_alt </i>
</a>
</div>
</div>
</div>
</div>
</section>
<!--projects-->
<section class="container">
<h2 id="projects">Projects</h2>
<ul id="projectListContainer" class="collapsible popout"></ul>
</section>
<!--CV-->
<section class="container section scrollspy">
<h2>Curriculum vitae</h2>
<!-- TODO: add files -->
<a href="FILES/Curriculum Vitae (eng).zip" download="Curriculum Vitea" class="left">
<i class="material-icons black-text">insert_drive_file</i>
</a>
<p style="padding-top: 5px; padding-left: 30px">
Download my curriculum and other certificates.
<small>(click the icon)</small>
</p>
</section>
<!--footer-->
<footer class="page-footer">
<div class="container center social">
<a
href="https://www.facebook.com/mout.pessemier"
class="tooltipped btn-floating btn-small transparent"
data-tooltip="Facebook"
target="_blank"
><i class="fab fa-facebook"></i
></a>
<a
href="https://www.instagram.com/moutpessemier/"
class="tooltipped btn-floating btn-small transparent"
data-tooltip="Personal instagram"
target="_blank"
><i class="fab fa-instagram"></i
></a>
<a
href="https://instagram.com/d_igitized/"
class="tooltipped btn-floating btn-small transparent"
data-tooltip="Photography instagram"
target="_blank"
><i class="fab fa-instagram"></i
></a>
<a
href="https://twitter.com/MoutPessemier?lang=nl"
class="tooltipped btn-floating btn-small transparent"
data-tooltip="Twitter"
target="_blank"
><i class="fab fa-twitter"></i
></a>
<a
href="https://soundcloud.com/spookycommando"
class="tooltipped btn-floating btn-small transparent"
data-tooltip="Soundcloud"
target="_blank"
><i class="fab fa-soundcloud"></i
></a>
<a
href="https://www.youtube.com/channel/UCKenqgLDsL7uxRpyeXrISAg?view_as=subscriber"
class="tooltipped btn-floating btn-small transparent"
data-tooltip="Youtube"
target="_blank"
><i class="fab fa-youtube"></i
></a>
<a
href="https://www.linkedin.com/in/mout-pessemier-9954a9163/"
class="tooltipped btn-floating btn-small transparent"
data-tooltip="LinkedIn"
target="_blank"
><i class="fab fa-linkedin"></i
></a>
<a
href="https://github.com/MoutPessemier"
class="tooltipped btn-floating btn-small transparent"
data-tooltip="GitHub"
target="_blank"
><i class="fab fa-github"></i
></a>
</div>
<div class="footer-copyright center">
<div class="container">
<p class="center">© <span id="year"></span> – Mout Pessemier</p>
</div>
</div>
</footer>
<!--Scripts-->
<script src="JS/calcAge.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="JS/nav.js"></script>
<script src="JS/parallax.js"></script>
<script src="JS/materialbox.js"></script>
<script src="JS/tabs.js"></script>
<script src="JS/scrollspy.js"></script>
<script src="JS/dropdown.js"></script>
<script src="JS/carousel.js"></script>
<script src="JS/collapsible.js"></script>
<script type="module" src="JS/fetchGithub.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>