-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (137 loc) · 10.3 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
<html lang="EN-en">
<head>
<title>André Haveman</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index_built.css">
</head>
<body>
<header class="header">
<div class="header__content">
<h1><a href="/">André Haveman</a></h1>
<nav>
<a href="/" class="active">Overview</a>
<a href="resume.html">Resume</a>
<a href="projects.html">Projects</a>
</nav>
</div>
</header>
<section class="section" id="summary">
<div class="section__inner">
<div class="section__content">
<h2>Front-end architect & developer</h2>
<ul class="summary-list">
<li>Specialized in <a href="#design">design</a> and <a href="#development">development</a> of complex web applications.</li>
<li>15+ years of <a href="#experience">experience</a> in web industry</li>
<li>Experienced JavaScript developer.</li>
<li>Passionate about making enjoyable and usable products with high quality, well structured code.</li>
<li>Enjoy working in agile, multidisciplinary teams and acting as a bridge between design and development</li>
<li>Master Industrial Design Engineering, TU Delft</li>
</ul>
<ul class="contact-details">
<li class="contact__phone"><i class="icon icon-phone"></i><a href="tel:+31624491395">+31 6 24491395</a></li>
<li class="contact__email"><i class="icon icon-mail-alt"></i><a href="mailto:andre.haveman@gmail.com">andre.haveman@gmail.com</a></li>
<li class="contact__linkedin"><i class="icon icon-linkedin"></i><a href="https://nl.linkedin.com/in/andrehaveman">LinkedIn</a></li>
<li class="contact__github"><i class="icon icon-github"></i><a href="https://www.github.com/andrehaveman">GitHub</a></li>
</ul>
</div>
</div>
</section>
<section class="section section--featured project--dialogica">
<p class="section__type">Featured project</p>
<div class="section__inner">
<div class="section__images">
<div class="section__image">
<img src="assets/dialogica4.png" alt="" width="480">
</div>
<div class="section__image">
<img src="assets/dialogica3.png" alt="" width="480">
</div>
</div>
<div class="section__content">
<h2>Dialogica <span class="year">2015</span></h2>
<p>Dialogica is a suite of products for orchestrating the whole digital touchpoint creation process in an enterprise context. </p>
<p>From a technical standpoint this was the most challenging and therefore most rewarding application I have ever worked on. The application contained many engineering challenges like realtime collaborative editing and diagramming. Modern development techniques like functional reactive programming were used to create a responsive and collaborative experience. It was built with AngularJS and a NodeJS backend.</p>
<p>On this project I worked primarily as a front-end architect and lead developer, but was also involved in the concept development.</p>
</div>
</div>
</section>
<section class="section" id="design">
<div class="section__inner">
<div class="section__content">
<h2>UX/UI Design</h2>
<p>My education Industrial Design Engineering gives me a good basis in the theory and practice of design processes. For me design starts with a thorough understanding of the domain and the users. With a solid understanding of the problem space on a conceptual level, design of the application structure and screens is a lot more straightforward.</p>
<p>When it comes to detailed screen design, I have a strong eye for detail and knowlegde about the 'use qualities' that are important for a good user experience. My goal is always to create modular, component-driven design systems instead of separate screen designs.</p>
<p>I have worked as a Interaction Designer for both large enterprises and small companies and have made designs for different kinds of platforms like web, Windows, embedded applications and early mobile (Vodafone Live!).</p>
</div>
</div>
</section>
<section class="section" id="development">
<div class="section__inner">
<div class="section__content">
<h2>Front-end development</h2>
<p>In the past 15 years I have been developing all kinds of web sites and applications. Both simple web sites and complex web applications. I have worked on many different front-end engineering challenges like diagramming, realtime collaboration, WYSIWYG editing, complex drag and drop, PDF generation and many more.</p>
<p>I have a strong focus on quality, both from a technical and design standpoint. Quality to me is not about how smart you are as a single programmer, but more about being thoughtfull and deliberate in your daily coding practice. Validation and communication of decisions within a team is very important to me. I take pride in creating well structured and thought-through codebases.</p>
<p>My technical skill set includes:</p>
<ul>
<li>Expert level JavaScript, HTML and CSS skills (also ES6/7 and TypeScript) </li>
<li>Experience with multiple SPA frameworks (Angular 2/4, AngularJS, Knockout, React, Backbone)</li>
<li>Understanding of various programming paradigms and patterns</li>
<li>Knowledge of modern front-end development tooling</li>
<li>Experience with unit testing and end-to-end testing</li>
</ul>
<p>For a more complete list of skill, see my <a href="resume.html#skills">resume</a>.</p>
</div>
</div>
</section>
<section class="section section--featured project--mixit">
<p class="section__type">Featured project</p>
<div class="section__inner">
<div class="section__images">
<div class="section__image"><img src="assets/mixit.png" alt="" width="400"></div>
<div class="section__image"><img src="assets/mixit-terminal-1.png" alt="" width="160"></div>
<div class="section__image"><img src="assets/mixit-terminal-2.png" alt="" width="160"></div>
</div>
<div class="section__content">
<h2>Akzo Mixit <span class="year">2005</span></h2>
<p>Akzo Mixit is a Windows XP application for selection, mixing and administration of all the coats of paint that are put on a car during repair or respray.</p>
<p>This project allowed me to design a new concept for supporting the paint processes in a car repair shop. Next to the Windows application it also consisted of accompanying scales with small monochrome LCD displays.</p>
<p>I was responsible for concept design and detailed UI design.</p>
</div>
</div>
</section>
<section class="section" id="experience">
<div class="section__inner">
<div class="section__content">
<h2>Professional experience</h2>
<p>During my professional career I have done in-house client projects, on-site client projects and also R&D and product development in a more startup-like environment.</p>
<p>While working at Informaat I have spent a lot of time at client locations. This allowed me to experience different kinds of organizational cultures. Some examples are ABN AMRO, Vodafone, Kluwer and Essent @Home.</p>
<p>See my <a href="resume.html">resume</a> or <a href="projects.html">project list</a> for more.</p>
</div>
</div>
</section>
<section class="section--featured project--rvc">
<p class="section__type">Featured project</p>
<div class="section__inner">
<div class="section__images">
<div class="section__image"><img src="assets/rvc1.png" alt="" width="400"></div>
<div class="section__image"><img src="assets/rvc2.png" alt="" width="400"></div>
<div class="section__image"><img src="assets/rvc3.png" alt="" width="400"></div>
</div>
<div class="section__content">
<h2>Raad voor cultuur <span class="year">2000</span></h2>
<p>This project started my love for JavaScript. The client wanted something that really stood out from the norm. The DHTML era had just started so we went full-blown with these new browser capabilities. The website makes heavy use of javascript animations (but in a subtle way). The Cultuurnota site already used asynchronous content loading in a time where AJAX wasn't invented yet.</p>
<p>On this project I was responsible for all front-end development.</p>
</div>
</div>
</section>
<footer>
<ul class="contact-details">
<li class="contact__phone"><i class="icon icon-phone"></i><a href="tel:+31624491395">+31 6 24491395</a></li>
<li class="contact__email"><i class="icon icon-mail-alt"></i><a href="mailto:andre.haveman@gmail.com">andre.haveman@gmail.com</a></li>
<li class="contact__linkedin"><i class="icon icon-linkedin"></i><a href="https://nl.linkedin.com/in/andrehaveman">LinkedIn</a></li>
<li class="contact__github"><i class="icon icon-github"></i><a href="https://www.github.com/andrehaveman">GitHub</a></li>
</ul>
</footer>
</body>
</html>