-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
277 lines (238 loc) · 12.4 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
<!DOCTYPE HTML>
<!--
Prologue 1.2 by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Matt Miermans</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="mathijs matt miermans resume" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<script src="js/theme-custom.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-51858638-1', 'miermans.nl');
ga('send', 'pageview');
</script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
</head>
<body>
<!-- Header -->
<div id="header" class="skel-panels-fixed">
<div class="top">
<!-- Logo -->
<div id="logo">
<span class="image avatar48"><img src="images/avatar.jpg" alt="" /></span>
<h1 id="title">Matt Miermans</h1>
<span class="byline">Software Engineer</span>
</div>
<!-- Nav -->
<nav id="nav">
<!--
Prologue's nav expects links in one of two formats:
1. Hash link (scrolls to a different section within the page)
<li><a href="#foobar" id="foobar-link" class="skel-panels-ignoreHref"><span class="fa fa-whatever-icon-you-want">Foobar</span></a></li>
2. Standard link (sends the user to another page/site)
<li><a href="http://foobar.tld"><span class="fa fa-whatever-icon-you-want">Foobar</span></a></li>
-->
<ul>
<li><a href="#top" id="top-link" class="skel-panels-ignoreHref"><span class="fa fa-home">Professional Profile</span></a></li>
<li><a href="#portfolio" id="portfolio-link" class="skel-panels-ignoreHref"><span class="fa fa-th">Portfolio</span></a></li>
<li><a href="#contact" id="contact-link" class="skel-panels-ignoreHref"><span class="fa fa-envelope">Contact</span></a></li>
</ul>
</nav>
</div>
<div class="bottom">
<!-- Social Icons -->
<ul class="icons">
<li><a href="http://www.linkedin.com/in/miermans" target="_blank" class="fa fa-linkedin solo"><span>LinkedIn</span></a></li>
<li><a href="mailto:[email protected]" class="fa fa-envelope solo"><span>Email</span></a></li>
</ul>
</div>
</div>
<!-- Main -->
<div id="main">
<!-- Professional Profile -->
<section id="top" class="one">
<div class="container">
<a class="image featured"><img src="images/header_tue2.jpg" data-align="0.57" alt="" /></a>
<header>
<h2 class="alt">
Professional Profile
</h2>
</header>
<p>
Working as a software engineer at <a href="http://getpocket.com">Pocket</a> in San Francisco.
</p>
<footer>
<a href="resume_matt_miermans_2016.pdf" target="_blank" class="button scrolly">Download Resume</a>
</footer>
</div>
</section>
<!-- Portfolio -->
<section id="portfolio" class="two">
<div class="container">
<header>
<h2>Portfolio</h2>
</header>
<p>
Below is a list of some of the projects I've done, relating to AI, algorithms, vision and embedded systems.
<a id="expand-all-link" class="expand-all">Expand all</a><span id="expand-all-icon" class="expand-all"><a class="fa fa-plus-square solo" title="Expand all"><span>Expand all</span></a></span>
</p>
<div class="row">
<div class="4u">
<article class="item">
<div style="margin: 0 9.2%">
<a href="http://32768.eu/" target="_blank" class="image full"><img src="images/2048_highscore.png" alt="" /></a>
</div>
<header>
<h3 class="readmore">2048 AI <a class="fa fa-plus-square solo" title="Read more"><span>Read more</span></a></h3>
<p class="readmore-content">
<a href="http://en.wikipedia.org/wiki/2048_(video_game)">2048</a> is a popular board game among mobile users, played on a 4 by 4 grid. In each move,
the player must choose to slide the tiles in one of four directions (left, right, up, down). If two tiles of the same value collide, they will merge into a tile with double the value.
After each move a random new tile is inserted. The objective is to maximize the tile values and the game is terminated when no move is possible.
The AI that I developed to solve this game is <a href="https://github.com/mmiermans/solver2048">available on GitHub</a>. The essence of the design is that boards are encoded as 64-bit
<a href="http://en.wikipedia.org/wiki/Bitboard">bitboards</a>, which form the nodes in an <a href="http://en.wikipedia.org/wiki/Expectiminimax_tree">expectimax tree</a>.
Some clever performance enhancements make the AI extremely fast: up to 17 million nodes/second are evaluated on a single CPU core. The 32768 tile was reached after just 42 games in 48 hours. The AI can be seen playing live
at <a href="http://32768.eu/">www.32768.eu</a>.
</p>
</header>
</article>
<article class="item">
<div style="margin: 0 9.2%">
<a class="image full"><img src="images/curvedmadrid.svg" alt="" style="padding-top: 5px" /></a>
</div>
<header>
<h3 class="readmore">Curved metro maps <a class="fa fa-plus-square solo" title="Read more"><span>Read more</span></a></h3>
<p class="readmore-content">
For my graduation project, I developed a new
force-directed algorithm to draw metro maps using curves.
Research has shown that journeys are planned 50%
faster on a curved metro map of Paris than the official one.
In contrast to previous research, my algorithm does not require pre- or post-processing
steps and obtains better results. I received a top mark for my work (an "A+").
</p>
</header>
</article>
</div>
<div class="4u">
<article class="item">
<a class="image full"><img src="images/coosto.png" alt="" /></a>
<header>
<h3 class="readmore">Web application for Coosto <a class="fa fa-plus-square solo" title="Read more"><span>Read more</span></a></h3>
<p class="readmore-content">
<a href="http://www.coosto.com/uk/">Coosto</a> is a social media monitoring tool. It requires
accurate author and date information of internet posts.
<a href="http://link.springer.com/search?query=template+extraction">Web template extraction</a>
is done manually, using several custom command line tools. I proposed integrating these tools
in a web interface, got permission to work on this project and delivered the application in March
2014. Python, PHP and SQL were used server-side and the front-end was based on Backbone.js.
</p>
</header>
</article>
<article class="item">
<a class="image full"><img src="images/TrafficSignRecognition.jpg" alt="" /></a>
<header>
<h3 class="readmore">Speed sign recognition with a DSP <a class="fa fa-plus-square solo" title="Read more"><span>Read more</span></a></h3>
<p class="readmore-content">
As part of my bachelor program, I led a group of fellow students in developing
software for a digital signal processor to recognize speed signs.
We succesfully used Scrum and rapid prototyping in MATLAB to quickly design and
implement the necessary filters. I was responsible for the MATLAB prototyping framework,
a <a href="http://en.wikipedia.org/wiki/Image_segmentation">color segmentation</a> filter
and the implementation of the <a href="http://en.wikipedia.org/wiki/Hough_transform">Hough transform</a>.
</p>
</header>
</article>
</div>
<div class="4u">
<article class="item">
<a class="image full"><img src="images/tass_demo2.jpg" alt="" /></a>
<header>
<h3 class="readmore">Linux on a DSP <a class="fa fa-plus-square solo" title="Read more"><span>Read more</span></a></h3>
<p class="readmore-content">
In 2010, during a co-op internship at <a href="http://www.tass.nl/en-gb/home/">TASS</a>,
we developed a prototype that demonstrated the benefits of running
Linux on a digital signal processor (DSP).
The demonstration combined the best of two worlds: fast video encoding by a DSP and open-source software from the Linux ecosystem.
Specifically, the DSP encoded video from a camera and
performed speech recognition to add subtitles of what was being said to the video.
The video and subtitles were then streamed to a laptop.
</p>
</header>
</article>
<article class="item">
<a href="https://code.google.com/p/enymatereader/" target="_blank" class="image full"><img src="images/enymatereader_2.png" alt="" /></a>
<header>
<h3 class="readmore">Utility consumption visualizer <a class="fa fa-plus-square solo" title="Read more"><span>Read more</span></a></h3>
<p class="readmore-content">
<a href="http://www.enymate.nl/producten/enymate" target="_blank">EnyMate</a>
is a small device that reads the gas, water and electricity dials of utility meters
and transmits these values via Bluetooth.
The official application could only show aggregated statistics so I wrote
a C# application that communicates with the device and plots the consumption in real-time.
Source code available <a href="https://code.google.com/p/enymatereader/" target="_blank">here</a>.
</p>
</header>
</article>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="four">
<div class="container">
<header>
<h2>Contact</h2>
</header>
<p>Please do not hesitate to contact me via <a href="mailto:[email protected]">e-mail</a> or <a href="http://www.linkedin.com/in/miermans">Linked-in</a>.</p>
<!--
<form method="post" action="#">
<div class="row half">
<div class="6u"><input type="text" class="text" name="name" placeholder="Name" /></div>
<div class="6u"><input type="text" class="text" name="email" placeholder="Email" /></div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<a href="#" class="button submit">Send Message</a>
</div>
</div>
</form>
-->
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">
<!-- Copyright -->
<div class="copyright">
<p>© 2014 <a href="mailto:[email protected]">Matt Miermans</a></p>
<ul class="menu">
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</body>
</html>