forked from benoitgrelard/benoit.works
-
Notifications
You must be signed in to change notification settings - Fork 0
/
cv.html
419 lines (369 loc) · 14 KB
/
cv.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
408
409
410
411
412
413
414
415
416
417
418
419
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Benoît Grélard" />
<title>Benoît Grélard / Lead frontend developer / London, UK</title>
<meta name="description" content="Lead frontend developer / London, UK" />
<meta property="og:url" content="https://benoit.works" />
<meta property="og:title" content="Benoît Grélard" />
<meta
name="og:description"
content="Lead frontend developer / London, UK"
/>
<meta name="twitter:title" content="Benoît Grélard" />
<meta
name="twitter:description"
content="Lead frontend developer / London, UK"
/>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@benoitgrelard" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<!-- <body style="background-color: hsl(var(--hue), 40%, 96%);">
<div style="margin: 0 auto; margin-top: -1.5rem; padding: 1.5rem; overflow: hidden; background-color: hsl(var(--hue), 40%, 98%); box-shadow: 0 5px 30px hsla(var(--hue), 100%, 30%, 0.2); max-width: 32rem;"> -->
<div class="contain">
<h1>Benoît Grélard</h1>
<h2>Lead frontend developer<br />London, UK / 34</h2>
<p>
I'm a lead web developer with 10+ years of experience focused on
frontend. I have worked in various industries such as advertising,
financial and startups. I love building great products with interesting
data, beautiful UI and great UX.
</p>
<p>
These days I specialize in building complex applications, often with
lots of data, interactions and visualizations. My tools of choice are
<a href="https://reactjs.org/">React</a>,
<a href="https://www.styled-components.com/">Styled Components</a>,
<a href="https://graphql.org/">GraphQL</a> and
<a href="https://d3js.org/">D3</a>.
</p>
<ul class="icons-list">
<li class="github">
<a href="https://github.com/artisologic">GitHub</a>
</li>
<li class="twitter">
<a href="https://mobile.twitter.com/benoitgrelard">Twitter</a>
</li>
<li class="linkedin">
<a href="https://www.linkedin.com/in/benoitgrelard">LinkedIn</a>
</li>
<li class="email">
<a href="mailto:benoit.grelard@gmail.com">benoit.grelard@gmail.com</a>
</li>
</ul>
<img
class="avatar"
src="https://gravatar.com/avatar/7f48ee3bb146ae3366c685f685d67fad?s=128"
alt="headshot of Benoît Grélard"
/>
</div>
<hr />
<div class="contain">
<h1>Profile</h1>
<p>
Whilst studying computer science, I always felt different. I cared
deeply about the visual components of programming. After school, I would
spend my nights learning about design, flash, 3D animations, etc.
<strong
>I started cultivating a passion for the web as I realised its
inherent power and universality compared to any sort of native
compiled application</strong
>.
</p>
<p>
By the time I got my master's degree, it was clear to me that I was
going to work with web technologies. I went on to take a position at
<a href="http://www.orange.com/">Orange</a> in Paris, as part of the R&D
department working with fontend technologies to create cross platform
widgets. It was not enough to fuel my
<strong>passion for design</strong> too, so I decided to
<strong>run my own company</strong> as well, working for clients like
<a href="http://www.areva.com/">Areva</a>,
<a href="http://www.monoprix.fr/">Monoprix</a> and
<a href="http://www.carrefour.com/">Carrefour</a>.
</p>
<p>
After 3 years at Orange, <strong>I needed another challenge</strong>. I
moved to London and accepted a fontend developer role at
<a href="http://rga.com/">R/GA</a> where I had the opportunity to work
on award winning projects for international brands such as
<a href="http://www.pearson.com/">Pearson</a>,
<a href="http://www.beatsbydre.com/">Beats by Dre</a>,
<a href="http://www.nike.com/">Nike</a>,
<a href="http://www.o2.co.uk/">O2</a> and
<a href="http://www.gettyimages.com/">Getty Images</a> producing all
sorts of high-end web-based solutions tailored to the client's needs.
</p>
<p>
In late 2013, I took on yet another challenge and decided to create my
own company and am now helping people to build successful web products.
</p>
<p>
I am absolutely passionate about the web and
<strong>I focus my expertise in fontend development</strong>. With over
10 years experience in web development and great collaboration skills,
notably with design and ux people,
<strong>I am a solid addition to any team</strong>.
</p>
</div>
<hr />
<div class="contain">
<h1>Career History</h1>
<h2>Fathom</h2>
<p>
<a href="https://fath.om/">Fathom</a> are a UX consultancy making the
business world’s most complex systems useful again through elegant
interfaces and data visualisation.
</p>
<h3>Lead frontend developer / May 2016 – Present / London</h3>
<p>
I joined Fathom full–time and led teams to help fintech companies, banks
as well as startups build web apps.
</p>
<p>
I led the build of a first–to–market realtime energy trading platform
for <a href="https://www.bp.com/">BP</a>. The product includes a range
of realtime elements like prices as well as charts. We leveraged
<a href="https://reactjs.org/">React</a> and
<a href="https://graphql.org/">GraphQL</a> as core technologies.
</p>
<p>
I worked with tech startup <strong>vFunction</strong> helping them
create a product from scratch and craft an incredible experience for
their users. The application was built with
<a href="https://reactjs.org/">React</a> and
<a href="https://d3js.org/">D3</a>. A few key aspects made the build
quite challenging in terms of dataviz. I ended up creating a solution
seemlessly mixing SVG and canvas.
</p>
<p>
Other than client work, I spent a lot of time instigating a culture of
code quality, testing, continuous integration, as well as mentored.
</p>
<p>
I am currently working with market leaders to overhaul the US mortgage
servicing industry by bringing it onto the blockchain. The project uses
<a href="https://reactjs.org/">React</a> and
<a href="https://graphql.org/">GraphQL</a>.
</p>
<h3>
Senior frontend developer (contract) / November 2013 – May 2016 / London
</h3>
<p>
During my time at Fathom as a contractor, I helped build large-scale
data-driven web applications for the financial industry. These ranged
from admin software to realtime trading applications.
</p>
<p>
Notably, one of the projects I worked on for
<a href="https://www.commerzbank.com/">Commerzbank</a> was very
challenging. Together with their internal backend developers, I
architectured and developed a frontend library to help them rebuild all
of their apps and bring them to the web platform. In parallel, we also
used the library to build <strong>realtime</strong> applications, such
as trading clients now deployed and used by hundreds of traders
throughout New York, Singapore and Frankfurt.
</p>
<p>
I also worked on a product called
<a href="https://fath.om/supergrid">Fathom SuperGrid</a>, which we
developped internally and used on a variety of our clients.
</p>
<h2>R/GA</h2>
<p>
<a href="https://www.rga.com/">R/GA</a> is a world renowned digital
agency.
</p>
<h3>
Senior open standards developer / July 2010 — November 2013 / London
</h3>
<p>
I started at R/GA as an Open standards developer and quickly got
promoted to Senior.
</p>
<p>
I had the chance to work on award winning projects for an incredibly
broad range of clients such as
<a href="https://www.ebay.co.uk/">eBay</a>,
<a href="http://www.gettyimages.com/">Getty Images</a>,
<a href="http://www.o2.co.uk/">O2</a>,
<a href="http://www.nike.com/">Nike</a>,
<a href="http://www.beatsbydre.com/">Beats by Dre</a>,
<a href="http://www.pearson.com/">Pearson</a>.
</p>
<p>
My work ranged from an entire education platform on web + iPad, static
sites, a large–scale responsive e–commerce website, or an
<a
href="https://www.rga.com/work/case-studies/nike-immortalize-the-moment"
>
interactive installation
</a>
for the 2012 Olympics, to mobile–first web apps.
</p>
<h2>Orange R&D</h2>
<p>
<a href="https://www.orange.com">Orange</a> is a big telco group in
Europe.
</p>
<h3>Frontend developer / October 2007 — May 2010 / Paris</h3>
<p>
I started my career at the <strong>MEDIA</strong> lab —
<strong>Orange Labs</strong>/France Telecom's R&D branch where I
contributed to the creation of a framework which enabled developers to
build cross–environment and cross–platform widgets. I also developed
numerous widgets connected to various APIs and services.
</p>
<p>The project was awarded an Orange Award in 2008.</p>
</div>
<hr />
<div class="contain">
<h1>Skills</h1>
<h2>JavaScript</h2>
<p>
I have very good underlying knowledge of JavaScript itself. I currently
specialize in the <a href="https://reactjs.org/">React</a> /
<a href="https://graphql.org/">GraphQL</a> ecosystem.
</p>
<p>I have also developed a keen interest in functional programming.</p>
<p>My current stack is:</p>
<ul class="inline-list">
<li>Vanilla JavaScript</li>
<li>TypeScript</li>
<li><a href="https://reactjs.org/">React</a></li>
<li>
<a href="https://www.styled-components.com/">Styled Components</a>
</li>
<li>
<a href="https://graphql.org/">GraphQL</a> /
<a href="https://www.apollographql.com/">Apollo</a>
</li>
<li><a href="https://d3js.org/">D3</a></li>
<li>Design Systems</li>
<li><a href="https://ramdajs.com/">Ramda</a></li>
</ul>
<h2>CSS</h2>
<p>
I build large and advanced CSS architecture whilst keeping
<strong>scalability</strong> in mind. I am very familiar with
methodologies and conventions such as
<a href="http://bem.info/">BEM</a>,
<a href="http://oocss.org/">OOCSS</a>,
<a href="http://smacss.com/">SMACSS</a>.
</p>
<p>I have strong knowledge of browsers and devices capabilities.</p>
<p>
I currently specialize in using CSS–in–JS (<a
href="https://www.styled-components.com/"
>Styled Components</a
>, <a href="https://emotion.sh/">emotion</a>) as a tool to achieve a
highly reusable and scalable architecture.
</p>
<h2>HTML</h2>
<p>
I care about writing clear and <strong>semantic markup</strong> and
always try to keep <strong>accessibility</strong> in mind.
</p>
<h2>Collaboration</h2>
<p>
I am experienced in leading small to medium development teams (3–6). I
often take the role of <strong>thought leader</strong> on
<strong>code quality</strong> as well as performance. I can also help
building a team by leading interviews.
</p>
<p>
I work particularly well in <strong>cross functional teams</strong>. I
collaborate very closely will all disciplines (design, UX) in order to
produce the best experience possible for users.
</p>
<p>
I also have a lot of experience <strong>client–facing</strong>, being
the point of contact for technology on the project as well as pitching
or demoing.
</p>
<h2>Miscelaneous</h2>
<ul class="icons-list">
<li>
Automated testing using <a href="https://jestjs.io/">Jest</a> and
<a href="https://testing-library.com/react">React Testing Library</a>
</li>
<li>
Continuous integration with tools like
<a href="https://travis-ci.com/">Travis</a>
</li>
<li><strong>Agile</strong> methodologies</li>
<li>
Version control with <a href="http://git-scm.com/">git</a>,
<a href="https://guides.github.com/introduction/flow/">GitHub flow</a>
</li>
</ul>
<p>
I am fluent in <strong>English</strong> but my mother tongue is
<strong>French</strong>. I also understand a bit of
<strong>Spanish</strong>.
</p>
</div>
<hr />
<div class="contain">
<h1>Education</h1>
<h2>2007 / Master's degree in software engineering</h2>
<p>
Université de Bretagne Occidentale, Brest, France (graduated with
honours)
</p>
<h2>2005 / Bachelor's degree in software engineering</h2>
<p>Université de Bretagne Occidentale, Brest, France</p>
<h2>2002 / A levels</h2>
<p>La Croix Rouge, Brest, France</p>
</div>
<hr />
<div class="contain">
<h1>Interests</h1>
<p>
I am a <strong>music</strong> enthusiast. I have been playing the piano
since the age of 7 years old. I also played in a band for 10 years and
have composed soundtracks for multiple documentaries.
</p>
<p>
<strong>Other interests include:</strong> travel, movies,
musical–theatre, design, playing
<a href="https://www.lego.com">Lego</a> with my kids, slight of hand
magic.
</p>
</div>
<hr />
<div class="contain">
<h1>References</h1>
<p>
Available on request, you can also view my
<a href="https://www.linkedin.com/in/benoitgrelard">LinkedIn profile</a
>.
</p>
<h2>Some quotes from my peers:</h2>
<blockquote>
Benoît is a great and prime example of how
<strong>collaboration</strong> can be so impacting and beneficial to a
project.
</blockquote>
<blockquote>
Benoît's <strong>enthusiasm for learning</strong> & exploring new ideas
is infectious!
</blockquote>
<blockquote>
Benoît has a <strong>very high attention to detail</strong> and always
strives to do better. He's a <strong>perfectionist</strong>!
</blockquote>
<blockquote>
Benoît is an <strong>excellent mentor</strong> for other team members
and leads by example.
</blockquote>
</div>
</body>
<!-- </div> -->
</html>