-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·451 lines (400 loc) · 19.3 KB
/
index.html
File metadata and controls
executable file
·451 lines (400 loc) · 19.3 KB
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
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Rich McLaughlin</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="vendor/devicons/css/devicons.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/resume.min.css" rel="stylesheet">
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<span class="d-block d-lg-none"></span>
<span class="d-none d-lg-block">
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/running_profile.jpg" alt="">
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#education">Education</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#talks">Talks</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#writing">Writing</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#interests">Interests</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid p-0">
<section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">
<div class="my-auto">
<h1 class="mb-0 name-header">Rich
<span class="text-primary" style="text-transform: none">McLAUGHLIN</span>
</h1>
<div class="subheading mb-5">Lansing, MI •
<a href="mailto:rich.mclaughlin.84@gmail.com">rich.mclaughlin.84@gmail.com</a>
</div>
<p class="mb-5">
Front-end architect and developer. I build enterprise JavaScript applications, specializing in Angular.<br>
</p>
<ul class="list-inline list-social-icons mb-0">
<li class="list-inline-item">
<a href="https://github.com/RichMcL" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/rich-mclaughlin/" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="experience">
<div class="my-auto">
<h2 class="mb-5">Experience</h2>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Senior Front-End Engineer</h3>
<div class="subheading mb-3">Mosaic Finance • San Diego, CA (Remote)</div>
<ul>
<li>Front-end lead for the Data Management team, overseeing the ingestion and transformation of all incoming data. Develop features catering to customers and internal support staff, focusing on optimizing the flow and schema of the data to ensure seamless consumption by the rest of the platform.</li>
<li>Led migration of the Angular application to an Nx monorepo structure, resulting in significant enhancements to local and pipeline execution times for build, test, and lint tasks. Implemented the use of lazy-loaded modules, improving the run-time performance of the application.</li>
<li>Architected and implemented the transition to NgRx for state management, scoping data to the application, module, or component level. This minimized redundancy and API calls, improving performance.</li>
<li>Responsible for Angular and npm dependency upgrades and management, dedicating approximately 80% of time to feature deliverables and 20% to architecture tasks.</li>
</ul>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Apr 2021 - Present</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Front-End Architect</h3>
<div class="subheading mb-3">Vertafore (Sircon) • East Lansing, MI</div>
<ul>
<li>Completed initial build of company's internal UI framework and style guide, provided ongoing support by adding new features and enhancing existing functionality</li>
<li>Led Angular migration project which spanned 4 products and 15 development teams by rewriting our internal UI framework and training teams in the new stack</li>
<li>Architected the company's first single-page app in AngularJS, the first built with RESTful APIs</li>
<li>Integrated UI apps into our CI/CD pipeline, initially with Grunt and later with webpack & Angular CLI</li>
<li>Implemented best practices for code quality such as unit testing (Jasmine/Karma) and static code analysis (ESLint)</li>
<li>Trained and supported developers by running workshops in a bi-weekly UI forum. Example topics include modularization, web components, and Chrome Dev Tools</li>
<li>Served as technical expert for long-term strategy planning, working with UX and product management to migrate legacy products into new platform, while still delivering new features</li>
</ul>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Oct 2011 - Mar 2021</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Sr. Software Engineer</h3>
<div class="subheading mb-3">Auto-Owners Insurance • Lansing, MI</div>
<ul>
<li>Began career as a full-stack Java developer working on a quoting web application for insurance agents</li>
<li>Shifted to primarily front-end when creating company's first web app for the general public, focusing heavily on jQuery UI and AJAX</li>
</ul>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Jan 2007 - Oct 2011</span>
</div>
</div>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="education">
<div class="my-auto">
<h2 class="mb-5">Education</h2>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">University of Michigan</h3>
<div class="subheading mb-3">Bachelor of Science • Dearborn, MI</div>
<p>
<div><b>Major:</b> Computer Science</div>
<div><b>Activites:</b> College Bowl Team (2004 - 2006)</div>
</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Dec 2006</span>
</div>
</div>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="talks">
<div class="my-auto">
<h2 class="mb-5">Talks</h2>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Intro to Web Components</h3>
<div class="subheading mb-3">
Vertafore Internal Conference • East Lansing, MI
</div>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Jul 2020</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Intro to Webpack</h3>
<div class="subheading mb-3">
Vertafore Internal Conference • East Lansing, MI
</div>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Jul 2020</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">From Mockup to Markup</h3>
<div class="subheading mb-3">
Vertafore Internal Conference • East Lansing, MI
</div>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Jun 2019</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Building Your Personal Website</h3>
<div class="subheading mb-3">
Vertafore Internal Conference • East Lansing, MI •
<a href="https://github.com/dawgdays/dawgdays.github.io" target="_blank">Info</a>
</div>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Jun 2018</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Creating a Styleguide</h3>
<div class="subheading mb-3">
Lansing JS Meetup • Lansing, MI •
<a href="https://www.meetup.com/Lansing-Javascript-Meetup/events/246617067/" target="_blank">Info</a>
</div>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Mar 2018</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Ionic and Firebase</h3>
<div class="subheading mb-3">
Vertafore Internal Conference • East Lansing, MI •
<a href="https://github.com/RichMcL/dawg-days-2017" target="_blank">Info</a>
</div>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Jun 2017</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Legend of Canvas</h3>
<div class="subheading mb-3">
Fluent Conf • San Francisco, CA •
<a href="https://www.youtube.com/watch?v=NJPAR7Meu3M" target="_blank">Watch</a> •
<a href="https://www.oreilly.com/content/the-legend-of-canvas/" target="_blank">Info</a>
</div>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Mar 2016</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Ionic and AngularJS</h3>
<div class="subheading mb-3">
Lansing JS Meetup • East Lansing, MI •
<a href="https://www.meetup.com/Lansing-Javascript-Meetup/events/224399456/" target="_blank">Info</a>
</div>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Nov 2015</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">JavaScript Lightweight Applications</h3>
<div class="subheading mb-3">
Vertafore Internal Conference • East Lansing, MI •
<a href="https://github.com/RichMcL/skill-up-2015" target="_blank">Info</a>
</div>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Jul 2015</span>
</div>
</div>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="writing">
<div class="my-auto">
<h2 class="mb-5">Writing</h2>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Legend of Canvas</h3>
<div class="subheading mb-3">
AirPair •
<a href="https://www.airpair.com/javascript/posts/the-legend-of-canvas" target="_blank">Read</a>
</div>
<p>
Best Front-End Post •
<a href="https://www.airpair.com/100k-writing-competition" target="_blank">AirPair 2015 Writing Competition</a>
</p>
<p>
Published in <a href="https://frontendfoc.us/issues/233" target="_blank">Frontend Focus #233</a>
</p>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Getting Started with Chrome DevTools</h3>
<div class="subheading mb-3">
AirPair •
<a href="https://www.airpair.com/javascript/posts/getting-started-with-chrome-devtools" target="_blank">Read</a>
</div>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Tips for Dealing with Developer Stress</h3>
<div class="subheading mb-3">
AirPair •
<a href="https://www.airpair.com/javascript/posts/tips-for-dealing-with-developer-stress" target="_blank">Read</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="projects">
<div class="my-auto">
<h2 class="mb-5">Projects</h2>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Opposwitch</h3>
<div class="subheading mb-3">
Xbox •
<a href="http://microsoft.com/en-us/p/opposwitch/9nz8jx4tc36s" target="_blank">Store</a>
</div>
<div>
Opposwitch is a logic-based puzzle game. Clear each game board by toggling off all the tiles.
Toggling a tile will also affect tiles next to it. The different colors have different patterns,
and the challenge ramps up as new colors and patterns are introduced and mixed!
</div><br>
<div>
<b>Available on Xbox Series X|S and Xbox One</b>
</div>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Legend of Zelda</h3>
<div class="subheading mb-3">
HTML5 Canvas •
<a href="/games/zelda" target="_blank">Play</a>
</div>
<div>The classic action RPG game from the Nintendo Entertainment System. Works on mobile devices. Supports Nintendo
USB gamepad. Far from complete but more than functional.</div><br>
<div>
<b>Controls:</b><br>
↑↓←→ Move Link<br>
[ C ] B-Button Item<br>
[ Space ] A-Button Item<br>
[ Enter ] Menu
</div>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Breakout</h3>
<div class="subheading mb-3">
HTML5 Canvas •
<a href="/games/breakout/" target="_blank">Play</a>
</div>
<div>A recreation of the Atari classic arcade game Breakout. A type of single-player tennis. Use your paddle to bounce
the ball at the bricks to destroy them! Works on mobile devices.</div><br>
<div>
<b>Controls:</b><br>
←→ Move Paddle<br>
[ Space ] Serve<br>
</div>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Asteroids</h3>
<div class="subheading mb-3">
HTML5 Canvas •
<a href="/games/asteroids/" target="_blank">Play</a>
</div>
<div>A recreation of the Atari classic arcade game Asteroids. Fly a spaceship and shoot asteroids before they destroy
your ship!</div><br>
<div>
<b>Controls:</b><br>
↑ Thrusters<br>
←→ Turn Ship<br>
[ Space ] Shoot<br>
</div>
</div>
</div>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="interests">
<div class="my-auto">
<h2 class="mb-5">Interests</h2>
<p>I'm an avid runner. I enjoy running wherever I go, my favorite place has been the Mackinac Bridge.</p>
<p>I love music and play guitar in a band. Pearl Jam, Stone Temple Pilots, and the Beatles are always in heavy rotation.</p>
<p>Like many developers, I love video games. If I'm holding a controller, there's a good chance I'm playing a Legend of Zelda game.</p>
</div>
</section>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/resume.min.js"></script>
</body>
</html>