-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
384 lines (364 loc) · 20 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio for Marc T Hanger</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Portfolio for Marc T Hanger</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link scroll" href="#capabilities">Capabilities</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container my-5">
<section id="capabilities" class="mb-5">
<h2>Capabilities</h2>
<div class="experience">
<h3>Agile</h3>
<div class="row">
<div class="col-12 col-md-8 order-md-2">
<picture>
<source srcset="images/agile_w_628.jpg" media="(max-width: 768px)">
<source srcset="images/agile_w_1200.jpg" media="(min-width: 769px)">
<img src="images/agile_w_1200.jpg" alt="Agile">
</picture>
</div>
<div class="col-12 col-md-4 order-md-1">
<div class="description">
<ul>
<li>More than eight years of experience working within agile methodologies and leading on-shore, near-shore, and off-shore teams.</li>
<li>Experienced with standard agile tools such as Git, Jira, and Confluence.</li>
<li>Leading and participating in agile ceremonies such as story refinement, pointing, pull request reviews, daily scrum standups, and retrospectives.</li>
</ul>
</div>
</div>
</div>
</div>
<h3>Analytics</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/analytics.png" media="(max-width: 768px)">
<source srcset="images/analytics.png" media="(min-width: 769px)">
<img src="images/analytics.png" alt="Analytics">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<ul>
<li>Built data analytics for startups looking to impress, as well as enterprise clients looking to upgrade their capabilities.</li>
<li>More than ten years of experience with google analytics implementations such as GTM.</li>
<li>Utilize industry-standard technologies like recharts.js and d3.js visualization libraries to craft custom-made dynamic charts and allow clients to interact with their data in new ways.</li>
</ul>
</div>
</div>
</div>
<h3>E-commerce</h3>
<div class="experience">
<div class="row">
<div class="col-12 col-md-8 order-md-2">
<picture>
<source srcset="images/ecommerce.png" media="(max-width: 768px)">
<source srcset="images/ecommerce.png" media="(min-width: 769px)">
<img src="images/ecommerce.png" alt="Experience 3 Image">
</picture>
</div>
<div class="col-12 col-md-4 order-md-1">
<div class="description">
Over fifteen years of experience leading front-end teams in building enterprise level front-ends in Angular, React, and Vue.
</div>
</div>
</div>
</div>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<div class="experience">
<h3>Enterprise Healthcare (2024)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/healthcare.png" media="(max-width: 768px)">
<source srcset="images/healthcare.png" media="(min-width: 769px)">
<img src="images/healthcare.png" alt="Grocery E-commerce">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<ul>
<li>Led a team of three developers on a greenfield replatforming for a major healthcare client.</li>
<li>The front-end stack consisted of Next, React, GraphQL, and Bootstrap.</li>
<li>Back-end encompassed dotCMS Content Management System and AWS Amplify.</li>
<li>Interviewed, hired, and managed the team while interacting with clients and stakeholders.</li>
<li>Recommended high level architectural solutions and mentored team members at a story level in a highly agile environment.</li>
<li>Contributed to coding stories to create re-usable react components that could be used by dotCMS content authors.</li>
<li>Presented weekly technology demos to the client.</li>
</ul>
</div>
</div>
</div>
<h3>Enterprise E-commerce (2024)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/grocery_e-com.png" media="(max-width: 768px)">
<source srcset="images/grocery_e-com.png" media="(min-width: 769px)">
<img src="images/grocery_e-com.png" alt="Grocery E-commerce">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<ul>
<li>Led a team of five developers on a new e-commerce project for a major grocery store chain in the Midwest.</li>
<li>The front-end stack consisted of Next, React, GraphQL, and the styled-components library for visual layout.</li>
<li>Interviewed, hired, and managed the team while interacting with stakeholders, project managers, quality assurance, and analytics team leaders to drive the scope of work.</li>
<li>Recommended architectural solutions and mentored team members at a story level in a highly agile environment.</li>
<li>Contributed to coding stories to create re-usable react components within the client's microservice ecosystem.</li>
</ul>
</div>
</div>
</div>
<h3>React and AEM Replatforming (2023)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/react2.png" media="(max-width: 768px)">
<source srcset="images/react2.png" media="(min-width: 769px)">
<img src="images/react2.png" alt="React and AEM">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<ul>
<li>Led an off-shore front-end team in a re-platforming project in AEM and React for a leading tire manufacturer.</li>
<li>Responsible for architecture as well as working closely with UX and offshore development teams to deliver accessible and responsive designs.</li>
<li>Coded stories in React to create major sections of the new site.</li>
</ul>
</div>
</div>
</div>
<h3>3D E-commerce (2022)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/3d.png" media="(max-width: 768px)">
<source srcset="images/3d.png" media="(min-width: 769px)">
<img src="images/3d.png" alt="React and AEM">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<ul>
<li>Led a near-shore team, a content management resource, and a QA resource to develop and enhance the client’s 3D e-commerce web application.</li>
<li>Created the high-level architecture, front-end architecture, and proof of concepts in Vue.js for specific technical solutions.</li>
<li>Trained new developers, worked with stakeholders on requirements, and lead sprint planning in an agile environment.</li>
<li>Technology stack was in Vuex for state management, Vue.js and Three.js, a browser-native 3D libary.</li>
</ul>
</div>
</div>
</div>
<h3>Tmall Hybrid Phone App (2020)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/phone_project2.png" media="(max-width: 768px)">
<source srcset="images/phone_project2.png" media="(min-width: 769px)">
<img src="images/phone_project2.png" alt="Tmall Mobile App">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<ul>
<li>Responsible the web portion of the front-end development of a new mobile hybrid application for major footware company, using Vue.js, Sass, and Foundation 6.</li>
<li>Worked closely with off-shore resources in China to integrate into the native portion of the application.</li>
</ul>
</div>
</div>
</div>
<h3>Enterprise E-commerce (2018)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/north_face.png" media="(max-width: 768px)">
<source srcset="images/north_face.png" media="(min-width: 769px)">
<img src="images/north_face.png" alt="Retail E-commerce">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<ul>
<li>Updated the visual design of The North Face e-commerce site for the 2018 holiday season using technologies such as IBM WebSphere Commerce, Foundation 6, and Sass CSS Preprocessing</li>
<li>Led a team of two other developers.</li>
</ul>
</div>
</div>
</div>
<h3>Enterprise Banking (2018)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/bank2.png" media="(max-width: 768px)">
<source srcset="images/bank2.png" media="(min-width: 769px)">
<img src="images/bank2.png" alt="Enterprise banking">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<ul>
<li>Created a prototype for a next generation platform based on Node, Yarn, React.js, Redux, and Redux sagas.</li>
<li>Evaluated various node packages such as reactstrap for bootstrap support, react-intl for i18n support, and react-grid-layout for user configurable grid layouts.</li>
<li>Project was handed off to a newly-formed team to implement.</li>
</ul>
</div>
</div>
</div>
<h3>Analytics and Visualizations (2016)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/analytics2.png" media="(max-width: 768px)">
<source srcset="images/analytics2.png" media="(min-width: 769px)">
<img src="images/analytics2.png" alt="Analytics and Visualizations">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<p>
I led the front-end team in launching a new data analysis and visualization single page application using technologies such as Angular.js, Twitter Bootstrap, JQuery, D3.js, and Sass CSS Preprocessing to interact with an AWS cloud-based dataset using REST services.
</p>
</div>
</div>
</div>
<h3>Enterprise E-commerce (2016)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/enterprise_e-commerce2.png" media="(max-width: 768px)">
<source srcset="images/enterprise_e-commerce2.png" media="(min-width: 769px)">
<img src="images/enterprise_e-commerce2.png" alt="Enterprise E-commerce">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<p>
I served as the front-end architect for Ford’s international parts e-commerce site. Front-end technology included HTML5, Bootstrap, Sass CSS Preprocessing, and AngularJS. Site was designed to support multiple languages and countries, as well as having a responsive layout for mobile through large desktop clients.
</p>
</div>
</div>
</div>
<h3>Large Sporting Events (2015)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/usopen.png" media="(max-width: 768px)">
<source srcset="images/usopen.png" media="(min-width: 769px)">
<img src="images/usopen.png" alt="Large Sporting Events">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<ul>
<li>Responsible for several high-profile new features for the 2015 U.S. Open Golf tournament site. </li>
<li>Used Ajax and JSON to create a real-time score ticker than ran across the top of most of the pages.</li>
<li>Real-time shot-by-shot updates on the leaderboard and the player bio pages.</li>
</ul>
</div>
</div>
</div>
<h3>Enterprise E-commerce (2012)</h3>
<div class="row">
<div class="col-12 col-md-8">
<picture>
<source srcset="images/united2012.png" media="(max-width: 768px)">
<source srcset="images/united2012.png" media="(min-width: 769px)">
<img src="images/united2012.png" alt="Enterprise E-commerce">
</picture>
</div>
<div class="col-12 col-md-4">
<div class="description">
<ul>
<li>Led a team of three other developers to create the layout for the MileagePlus booking engine. </li>
<li>Multi-language, multi-region e-commerce engine that incorporated side-by-side search by schedule and the ability to use a combination of miles and money. </li>
<li>Core technologies were HTML5, CSS3, and JQuery, and Ajax</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<h2>About</h2>
<p>I am a front-end web leader with great experience in agile development, e-commerce, and large scale enterprise application development and maintenance.
I have hired, led, and managed front-end teams to success! Strong skills in Web Development, Architecture, Management, Web Applications, Analytics, and Accessibility.</p>
<h3>Hobbies include:<h3>
<div class="row">
<div class="col-12 col-md-4">
<h4 class="mt-5">Cycling</h4>
</div>
<div class="col-12 col-md-8">
<picture>
<source srcset="images/cycling2_mobile.png" media="(max-width: 768px)">
<source srcset="images/cycling2.png" media="(min-width: 769px)">
<img src="images/cycling2.png" alt="Cycling" class="cycling">
</picture>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 order-md-2">
<h4 class="mt-5">Fly-fishing</h4>
</div>
<div class="col-12 col-md-8 order-md-1">
<picture>
<source srcset="images/fishing.jpg" media="(max-width: 768px)">
<source srcset="images/fishing.jpg" media="(min-width: 769px)">
<img src="images/fishing.jpg" alt="Fishing">
</picture>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4">
<h4 class="mt-5">Traveling</h4>
</div>
<div class="col-12 col-md-8">
<picture>
<source srcset="images/traveling.jpg" media="(max-width: 768px)">
<source srcset="images/traveling.jpg" media="(min-width: 769px)">
<img src="images/traveling.jpg" alt="Traveling">
</picture>
</div>
</div>
</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>mhangeril@gmail.com</p>
</section>
</div>
</body>
</html>