cv.html

<!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="all" href="main.css" />
		<link rel="stylesheet" type="text/css" media="print" href="print.css" />
	</head>

	<body>
		<div class="contain">
			<h1>Benoît Grélard</h1>
			<h2>Lead frontend developer<br />London, UK / 35</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/benoitgrelard" data-print-link>GitHub</a>
				</li>
				<li class="twitter">
					<a href="https://mobile.twitter.com/benoitgrelard" data-print-link
						>Twitter</a
					>
				</li>
				<li class="linkedin">
					<a href="https://www.linkedin.com/in/benoitgrelard" data-print-link
						>LinkedIn</a
					>
				</li>
				<li class="email">
					<a href="mailto:benoit.grelard@gmail.com" data-print-link
						>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 frontend 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 frontend 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 frontend 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 data-page-break-before>Career History</h1>
			
			<h2>Modulz</h2>
			<p>
				<a href="https://www.modulz.app">Modulz</a> is a visual code editor.
				Design, build, test, document and deploy your design system—without
				writing code.
			</p>
			<h3>
				Frontend developer (contract) / since July 2019 / Remote
			</h3>

			<h2>Magic Leap</h2>
			<p>
				<a href="https://www.magicleap.com">Magic Leap</a> One is a spatial
				computer that lets you see and interact with digital content in the
				world around you.
			</p>
			<h3>
				Lead creative web engineer / June 2019 – July 2019 / Remote
			</h3>

			<h2>Plural AI</h2>
			<p>
				<a href="https://plural.ai/">Plural AI</a> is the knowledge engine for
				finance. Users can experience new ways of doing financial analysis.
			</p>
			<h3>
				Full stack web developer (contract) / March 2019 – June 2019 / London
			</h3>
			<p>
				I helped Plural AI build the next generation of their product,
				introducing best practices in a brand new project. The main technologies
				involved were React/TypeScript/GraphQL/MongoDB.
			</p>

			<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 – March 2019 / 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
				developed 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 data-page-break-before>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 with 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 data-page-break-before>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, sleight of hand
				magic.
			</p>
		</div>

		<hr />

		<div class="contain">
			<h1 data-page-break-before>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 has held the flag of
				<strong>simplicity and elegance in code/architecture</strong>. His
				<strong>critical thinking</strong> has shaped the way we approach our
				engineering across projects.
				<footer>— Pete Correia / Lead developer</footer>
			</blockquote>

			<blockquote>
				He is excited and ambitious about making stuff the best it can be. Many
				of his decisions are around
				<strong>delivering a good experience</strong>, not on how long or how
				hard they are to engineer.
				<footer>— Daniel van Nieuwenhuizen / Head of Product Design</footer>
			</blockquote>

			<blockquote>
				Benoît <strong>led by example</strong> and really held the project
				together. He has been a great conduit between us and the client and an
				<strong>excellent mentor</strong> to other team members. Great team
				leader!
				<footer>— Ben Hardman / Senior Project Manager</footer>
			</blockquote>

			<blockquote>
				He’s <strong>a great system thinker</strong>, which makes developing
				consistent UX and UI much easier. Inquisitive, ready to question
				requirements and “keep digging” until he finds the right answers. He has
				the <strong>mindset of a sharp creative technologist</strong>, loved
				that :)
				<footer>— Valentina Ferrandes / Senior UX Designer</footer>
			</blockquote>

			<blockquote>
				Benoît <strong>owns the delivery</strong> and works hard to find
				solutions as issues arise which builds confidence with the client.
				<footer>— Mike Knight / Director</footer>
			</blockquote>

			<blockquote>
				He really <strong>cares about design and motion</strong> and is willing
				to do the extra things to make the product special.
				<footer>— Chris Pallaris / Senior Designer</footer>
			</blockquote>
		</div>
	</body>
</html>