-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
407 lines (373 loc) · 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
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
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-112759168-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-112759168-1');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Matthieu van den Berg</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This is the Portfolio of Matthieu van den Berg. Here you will find all kinds of information about me and what I do." />
<meta name="keywords" content="Portfolio, Matthieu, Game Programmer, AI Programmer" />
<meta name="author" content="Matthieu van den Berg" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.vandenberggames.com/images/matthieu.jpg" />
<meta property="og:site_name" content ="VanDenBergGames" />
<meta property="og:title" content="Portfolio of Matthieu van den Berg" />
<meta property="og:description" content="This is the Portfolio of Matthieu van den Berg. Here you will find all kinds of information about me and what I do." />
<meta property="og:url" content="https://www.vandenberggames.com/" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FREEHTML5.CO
Website: http://freehtml5.co/
Email: [email protected]
Twitter: http://twitter.com/fh5co
Facebook: https://www.facebook.com/fh5co
//////////////////////////////////////////////////////
-->
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
<!-- Animate.css -->
<link rel="stylesheet" href="css/i_animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/i_icomoon.css">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="css/i_simple-line-icons.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/i_owl.carousel.min.css">
<link rel="stylesheet" href="css/i_owl.theme.default.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/i_bootstrap.css">
<!-- style -->
<link rel="stylesheet" href="css/i_style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<header role="banner" id="fh5co-header">
<div class="container">
<!-- <div class="row"> -->
<nav class="navbar navbar-default">
<div class="navbar-header">
<!-- Mobile Toggle Menu Button -->
<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
<a class="navbar-brand" href="index.html">Matthieu van den Berg</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<!--<li class="active"><a href="#" data-nav-section="home"><span>Home</span></a></li> -->
<li class="active"><a href="#" data-nav-section="about"><span>About</span></a></li>
<li><a href="#" data-nav-section="projects"><span>Projects</span></a></li>
<!-- <li><a href="#" data-nav-section="services"><span>Services</span></a></li> -->
<!-- <li><a href="#" data-nav-section="features"><span>Features</span></a></li> -->
<li><a href="#" data-nav-section="testimonials"><span>Testimonials</span></a></li>
<!-- <li><a href="#" data-nav-section="press"><span>Press</span></a></li> -->
</ul>
</div>
</nav>
<!-- </div> -->
</div>
</header>
<!-- END OF HEADER -->
<!-- ABOUT -->
<div id="fh5co-about-us" data-section="about">
<div class="container">
<div class="row row-bottom-padded-lg" id="about-us">
<div class="col-md-12 section-heading text-center">
<h2 class="to-animate">About Me</h2>
<div class="row">
<div class="col-md-8 col-md-offset-2 to-animate">
<h3>Hi, I am Matthieu.<br>A 24 year young guy from the Netherlands, currently based in Kampen.<br> I have recently graduated from the BUAS (formerly NHTV) in the study of Creative Media and Game Technology (formerly Game Architecture and Design) as a Game Programmer.</h3>
</div>
</div>
</div>
<div class="col-md-3 col-md-offset-1 to-animate vcenter">
<img src="images/matthieu.jpg" class="img-responsive img-rounded" alt="Picture of me">
</div>
<div class="col-md-7 to-animate vcenter" >
<h2>what I do</h2>
<p>I'm a game programmer with interest in Artificial Intelligence and GamePlay systems.<br>
Bringing the worlds of designers to live is one of the best things there is.</p>
<p>I have a wide skillset with multiple engines and languages, such as <b>Unity (C#) and Unreal engine(C++)</b>,<br>
multiple types of version control, for example <b>GitHub and svn</b>,<br>
and other development softwares as <b>slack, jenkins, and trello</b>.<br></p>
<p>My experience with soft skills include:<br>
<b>
Fluent work in english<br>
Teamwork in a team of 10+<br>
Working under pressure<br>
</b></p>
<p>Besides programming, in my free time I like to solve (logic)puzzles, ride on my bike, and take pictures.</p>
<ul class="social text-center social-circle">
<li><a href="https://www.linkedin.com/in/matthieu-van-den-berg-74754aa5"><i class="icon-linkedin"></i></a></li>
<li><a href="https://github.com/matthieu1345"><i class="icon-github"></i></a></li>
<li><a href="mailto:[email protected]"><i class="icon-envelope"></i></a></li>
<li><a href="#CVModal" data-toggle="modal">
<i class="icon-list"></i>
</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- END OF ABOUT -->
<!-- PROJECTS -->
<div id="fh5co-pricing" data-section="projects">
<div class="container">
<div class="row">
<div class="col-md-12 section-heading text-center">
<h2 class="single-animate animate-pricing-1">projects</h2>
<div class="row">
<div class="col-md-8 col-md-offset-2 subtext single-animate animate-pricing-2">
<h3>A overview of the projects I worked on, and the things I did in these projects</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 to-animate" >
<div class="price-box popular" >
<h2 class="pricing-plan">PC (unreal engine C++)</h2>
<div class="price">The Red Stare (VR)</div>
<p>For The Red Stare, <br>I have made most of the AI in the game.<br>
With The Red Stare, we won two prizes in the dutch game awards 2017.</p>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="images/DGA.png" class="img-responsive img-rounded" alt="Dutch Game Awards winning">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="images/trs_logo_02.jpg" class="img-responsive img-rounded" alt="TRS logo">
</div>
</div>
<ul class="pricing-info">
<li><b>My responsibilities:</b></li>
<li>Human rule based Behavior</li>
<li>Cars traversing intersection</li>
<li>Train/pedestrian management</li>
<li>Birds populating air</li>
<li>Teamwork</li>
</ul>
<a href="TheRedStare.html" class="btn btn-primary btn-sm icon-magnifier"> Learn more</a>
</div>
</div>
<div class="col-md-6 col-sm-6 to-animate" >
<div class="price-box popular" >
<h2 class="pricing-plan">PC (unreal engine C++)</h2>
<div class="price">Casino Inc</div>
<p>As IGAD Graduation project<br> I made a Casino Management Simulation Game<br>
I did this project fully on my own, including design and all programming.</p>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="images/CasinoInc/SmallCasino.jpg" class="img-responsive img-rounded" alt="Starting Casino">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="images/CasinoInc/BigCasino.jpg" class="img-responsive img-rounded" alt="Endgame Casino">
</div>
</div>
<ul class="pricing-info">
<li><b>Features:</b></li>
<li>Management Simulation</li>
<li>A* pathfinding</li>
<li>GOAP</li>
<li>Utility Theory</li>
<li>2D tilemap</li>
</ul>
<a href="CasinoInc.html" class="btn btn-primary btn-sm icon-magnifier"> Learn more</a>
</div>
</div>
<div class="col-md-4 col-sm-6 to-animate">
<div class="price-box popular">
<h2 class="pricing-plan">PC (unreal engine C++)</h2>
<div class="price">Halloween Hunt</div>
<p>Halloween Hunt is a hide'n seek multiplayer game, with a AI seeker.<br>
For this game I made the seeker AI.</p>
<br>
<img src="images/HalloweenHunt.png" class="img-responsive img-rounded" alt="HalloweenHunt Logo">
<ul class="pricing-info">
<li><b>My responsibilities:</b></li>
<li>Seeker behavior</li>
<li>Quick reaction</li>
<li>Fully event driven</li>
<li>Balancing</li>
<li>Small team size</li>
</ul>
<a href="HalloweenHunt.html" class="btn btn-primary btn-sm icon-magnifier"> Learn more</a>
</div>
</div>
<div class="col-md-4 col-sm-6 to-animate">
<div class="price-box popular">
<h2 class="pricing-plan">Multiple platforms</h2>
<div class="price">Various Other Projects</div>
<p>Other than the previous projects, I worked on multiple projects under NDA<br>
for those projects I worked with, but not limited to:</p><br><br>
<ul class="pricing-info">
<li>Kinect</li>
<li>Unity engine (C#)</li>
<li>Android</li>
<li>Animations</li>
<li>PC to Mobile porting</li>
<li>Internship at Codeglue <a href="http://www.codeglue.com" target="codeglue">codeglue.com</a></li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6 to-animate">
<div class="price-box popular">
<h2 class="pricing-plan">PC (unreal engine C++)</h2>
<div class="price">A Toon York Story</div>
<p>For A Toon York Story, <br>I have made a couple of 2d platformer enemies, and a bossfight.</p>
<img src="images/ToonYork/ToonYork-Logo_A1_size.png" class="img-responsive img-rounded" alt="ToonYork Logo">
<ul class="pricing-info">
<li><b>My responsibilities:</b></li>
<li>Platformer</li>
<li>2D enemy movement</li>
<li>Multi-Stage Bossfight</li>
<li>Teamwork</li>
</ul>
<a href="ToonYork.html" class="btn btn-primary btn-sm icon-magnifier"> Learn more</a>
</div>
</div>
<!--<div class="clearfix visible-sm-block"></div>-->
<!--<div class="col-md-3 col-sm-6 to-animate">
<div class="price-box popular">
<h2 class="pricing-plan">Enterprise</h2>
<div class="price"><sup class="ToonYork"> Smack em wack em </div>
<p>Basic customer support for small business</p>
<hr>
<ul class="pricing-info">
<li>Unlimitted projects</li>
<li>Unlimitted Pages</li>
<li>Unlimitted Emails</li>
<li>Unlimitted Images</li>
</ul>
<a href="#" class="btn btn-primary btn-sm">Learn more</a>
</div>
</div>
-->
</div>
</div>
</div>
<!-- END OF PROJECTS -->
<!-- testimonials -->
<div id="fh5co-testimonials" data-section="testimonials">
<div class="container">
<div class="row">
<div class="col-md-12 section-heading text-center">
<h2 class="to-animate">colleagues say...</h2>
<div class="row">
<div class="col-md-12 subtext to-animate">
<h3>Over my projects, I have worked with a multitude of people, divided over all departments in Game Development.<br>
It was a pleasure to work with them, and most liked working with me too, readable in these testimonial quotes:</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="box-testimony to-animate">
<blockquote>
<span class="quote"><span><i class="icon-quote-left"></i></span></span>
<p>“Matthieu was great to work with, thinking along with what we requested and making it work without many issues. He was also very pleasant to interact with throughout the project - id gladly work with him again!”</p>
</blockquote>
<p class="author" style="font-size: 18px;">Ramon Huiskamp, <br>- Team Lead <a href="http://theredstare.com/" target="_blank">The Red Stare</a> <span class="subtext"><a href="http://ramonhuiskamp.com/" target="_blank">Game / Level Designer</a></span></p>
</div>
</div>
<div class="col-md-4">
<div class="box-testimony to-animate">
<blockquote>
<span class="quote"><span><i class="icon-quote-left"></i></span></span>
<p>“I've had the pleasure of working with Matthieu on two separate projects. He has always shown great dedication to both the project and his personal tasks, as well as the ability to find his own solutions and incorporate feedback when required. Knowing Matthieu as someone with excellent work ethics and a great technical skill set, I would happily work with him again.”</p>
</blockquote>
<p class="author">Mark Hofma, <br>- Technical Designer <a href="HalloweenHunt.html" target="_blank">HalloweenHunt</a> <!--<br>- Project Lead <a href="" target="_blank">Project Redirect</a>--> <span class="subtext">Designer</span></p>
</div>
</div>
<!--<div class="col-md-4">
<div class="box-testimony to-animate">
<blockquote>
<span class="quote"><span><i class="icon-quote-left"></i></span></span>
<p>“Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.”</p>
</blockquote>
<p class="author">John Doe, Founder <a href="#">FREEHTML5.co</a> <span class="subtext">Creative Director</span></p>
</div>
</div> -->
</div>
</div>
</div>
<!-- END OF TESTEMONIALS -->
<!-- FOOTER -->
<footer id="footer" role="contentinfo">
<div class="container">
<div class="row row-bottom-padded-sm">
<div class="col-md-12">
<p class="copyright text-center">© 2017 <a href="index.html">Matthieu van den Berg</a>. All Rights Reserved.
<br> Free HTML5 Template by <a href="http://freehtml5.co/" target="_blank">FREEHTML5.co</a>
<br> Please take note that I use some cookies to see which pages are opened most often.</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<ul class="social social-circle">
<li><a href="https://www.linkedin.com/in/matthieu-van-den-berg-74754aa5"><i class="icon-linkedin"></i></a></li>
<li><a href="https://github.com/matthieu1345"><i class="icon-github"></i></a></li>
<li><a href="mailto:[email protected]"><i class="icon-envelope"></i></a></li>
<li><a href="#CVModal" data-toggle="modal">
<i class="icon-list"></i>
</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- END OF FOOTER -->
<!-- CV Modal -->
<div class="modal fade" id="CVModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">CV Download</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
My CV is available in the following languages:<br>
<ul>
<li><a href = "Documents/Resume.docx">English</a></li>
<li><a href = "Documents/CVnl.docx">Dutch</a></li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Owl Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- Main JS (Do not remove) -->
<script src="js/main.js"></script>
</body>
</html>