-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
638 lines (638 loc) · 45.2 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
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
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
<!doctype html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135348958-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-135348958-1');
</script>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="My very own personal website.">
<meta name="google-site-verification" content="JSXHc5R4b0LTgmCgl1pO59m6T8NOPE4p3oEkQdx-cB8">
<meta name="google" content="nositelinkssearchbox">
<meta name="google" content="notranslate">
<meta name="googlebot" content="index,follow">
<meta name="robots" content="index,follow">
<meta name="subject" content="This is just a résumé.">
<meta name="twitter:card" content="summary_large_image">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="white">
<meta property="og:description" content="— Hello! I’m a skilled frontend developer with 7 years of experience in UI/UX design, application development, and database modeling. I strive to craft precise, responsive, fast, easy-to-use environments with both strong purpose and great looks.">
<meta property="og:image:alt" content="Screenshot of the homepage">
<meta property="og:image:height" content="1800">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="2880">
<meta property="og:image" content="https://volodymyrkushnir.dev/assets/images/og-image.en_US.png">
<meta property="og:locale" content="en_US">
<meta property="og:title" content="Volodymyr Kushnir — Résumé">
<meta property="og:type" content="website">
<meta property="og:url" content="https://volodymyrkushnir.dev/">
<base href="https://volodymyrkushnir.dev/">
<title>Volodymyr Kushnir — Résumé</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="icon" type="image/png" sizes="192x192" href="./assets/images/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="./assets/images/favicon-512x512.png">
<link rel="apple-touch-icon" href="./assets/images/apple-touch-icon.png">
<link rel="manifest" href="./manifest.json">
<link rel="me" href="https://www.fb.com/volodyakushnir" type="text/html">
<link rel="me" href="mailto:volodymyr.kushnir@me.com">
<link rel="me" href="skype:volodymyr_kushnir">
<link rel="me" href="tel:+380952600797">
<link rel="stylesheet" href="./assets/stylesheets/base.css">
</head>
<body>
<dialog id="childhood">
<a href="#resume" title="Hide childhood photos" class="close">Close</a>
<div class="photos">
<noscript>
<img src="./assets/photos/467536_170309526420601_636909857_o.jpg" alt="Me as a baby">
<img src="./assets/photos/323856_148624698589084_1191150964_o.jpg" alt="Me with a guitar">
<img src="./assets/photos/329642_148624421922445_2060074436_o.jpg" alt="Me with my mom">
<img src="./assets/photos/331152_148624551922432_1869335234_o.jpg" alt="Me with a phone">
<img src="./assets/photos/324164_148624265255794_446501669_o.jpg" alt="Me with a Karlsson">
<img src="./assets/photos/327086_148624111922476_1330178874_o.jpg" alt="Me and a duck">
<img src="./assets/photos/470468_170309399753947_1333978849_o.jpg" alt="Me and my mom">
<img src="./assets/photos/323868_148639808587573_1648505013_o.jpg" alt="Me at the sea">
<img src="./assets/photos/466052_170309293087291_793458215_o.jpg" alt="Me with a dog">
<img src="./assets/photos/412746_158114720973415_949035392_o.jpg" alt="Me in the kindergarten">
<img src="./assets/photos/473110_173999982718222_1427466111_o.jpg" alt="Me in a drawing school">
<img src="./assets/photos/471025_173999919384895_1249822733_o.jpg" alt="Me with my drawing teacher">
<img src="./assets/photos/476877_173999862718234_1686531489_o.jpg" alt="Me and my painting">
<img src="./assets/photos/461737_173999722718248_1691527332_o.jpg" alt="Me with a cat">
</noscript>
</div>
</dialog>
<header>
<div class="credits">
Inspired by <a href="https://dribbble.com/shots/1828130-Resume" rel="external"><strong>Resume by Iryna Nezhynska</strong></a> 😍
</div>
</header>
<main>
<article>
<div class="page" style="border-color: midnightblue;">
<div class="stackable grid">
<div class="row">
<div class="three wide center aligned column">
<div class="avatar-wrapper">
<object class="avatar" data="./assets/images/avatar.svg" role="img" aria-label="My profile picture"></object>
</div>
</div>
<div class="thirteen wide column">
<div class="stackable grid">
<div class="sixteen wide column">
<h1 class="name">Volodymyr Kushnir</h1>
<ul class="contacts">
<li>
<a href="https://linkedin.com/in/volodymyr-kushnir" rel="author" class="linkedin">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
</svg>
<span>volodymyr-kushnir</span>
</a>
</li>
<li>
<a href="https://github.com/volodymyr-kushnir" rel="author" class="github">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
</svg>
<span>volodymyr-kushnir</span>
</a>
</li>
<li>
<a href="https://www.fb.com/volodyakushnir" rel="author" class="facebook">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"/></svg>
<span>volodyakushnir</span>
</a>
</li>
<li>
<a href="skype:volodymyr_kushnir" rel="author" class="skype">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M424.7 299.8c2.9-14 4.7-28.9 4.7-43.8 0-113.5-91.9-205.3-205.3-205.3-14.9 0-29.7 1.7-43.8 4.7C161.3 40.7 137.7 32 112 32 50.2 32 0 82.2 0 144c0 25.7 8.7 49.3 23.3 68.2-2.9 14-4.7 28.9-4.7 43.8 0 113.5 91.9 205.3 205.3 205.3 14.9 0 29.7-1.7 43.8-4.7 19 14.6 42.6 23.3 68.2 23.3 61.8 0 112-50.2 112-112 .1-25.6-8.6-49.2-23.2-68.1zm-194.6 91.5c-65.6 0-120.5-29.2-120.5-65 0-16 9-30.6 29.5-30.6 31.2 0 34.1 44.9 88.1 44.9 25.7 0 42.3-11.4 42.3-26.3 0-18.7-16-21.6-42-28-62.5-15.4-117.8-22-117.8-87.2 0-59.2 58.6-81.1 109.1-81.1 55.1 0 110.8 21.9 110.8 55.4 0 16.9-11.4 31.8-30.3 31.8-28.3 0-29.2-33.5-75-33.5-25.7 0-42 7-42 22.5 0 19.8 20.8 21.8 69.1 33 41.4 9.3 90.7 26.8 90.7 77.6 0 59.1-57.1 86.5-112 86.5z" />
</svg>
<span>volodymyr_kushnir</span>
</a>
</li>
<li>
<a href="https://t.me/volodymyr_kushnir" rel="author" class="telegram">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor"
d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z">
</path>
</svg>
<span>volodymyr_kushnir</span>
</a>
</li>
<li>
<a href="mailto:volodymyr.kushnir@me.com" rel="author" class="mail">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z">
</path>
</svg>
<span>volodymyr.kushnir@me.com</span>
</a>
</li>
<li>
<a href="tel:+380666040626" rel="author" class="phone">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
<span>+38 (066) 6040626</span>
</a>
</li>
<li>
<a href="https://volodymyrkushnir.dev/" rel="author" class="website">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path></svg>
<span>https://volodymyrkushnir.dev/</span>
</a>
</li>
</ul>
</div>
<div class="sixteen wide mobile only column">
<div class="divider"></div>
</div>
<div class="sixteen wide column">
<h2>Résumé</h2>
<p>— Hello! I’m a skilled frontend developer<strong style="margin-left: 0.0625em;">*</strong> with 7 years of experience in UI/UX design, application development, and database modeling. I strive to craft precise, responsive, fast, easy-to-use environments with both strong purpose and great looks.</p>
<p style="opacity: 0.75;"><strong style="margin-right: 0.0625em;">*</strong>I feel like it's 40-60 by <a href="https://css-tricks.com/the-great-divide/" rel="external">The Great Divide</a> into JavaScript engineer and UX engineer</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="sixteen wide column">
<div class="fat divider"></div>
</div>
</div>
<div class="row">
<div class="ten wide column">
<section>
<h3>Experience</h3>
<h6>Now</h6>
<ul class="timeline">
<li class="highlighted">
<p><em>1<sup>st</sup> January 2020 – present</em></p>
<p><strong>Full Stack Developer</strong> at <strong><a href="https://hivecell.io/" rel="external">Ricker Lyman Robotic</a></strong></p>
<ul>
<li class="details">
<input type="checkbox" id="project-4-dependencies">
<label for="project-4-dependencies" class="summary">build, test, and deploy an application written with React + Apollo Client → Node.js + Express + Postgraphile + PostgreSQL</label>
<div>
<div style="margin-bottom: 0.25em;">
<small><em>(the project is alive, hence backend packages are not listed)</em></small>
</div>
<div class="labels">
<a rel="external" class="label" href="https://npmjs.com/package/@apollo/client">@apollo/client</a>
<a rel="external" class="label" href="https://npmjs.com/package/@auth0/auth0-spa-js">@auth0/auth0-spa-js</a>
<a rel="external" class="label" href="https://npmjs.com/package/@fortawesome/react-fontawesome">@fortawesome/react-fontawesome</a>
<a rel="external" class="label" href="https://npmjs.com/package/@material-ui/core">@material-ui/core</a>
<a rel="external" class="label" href="https://npmjs.com/package/@material-ui/lab">@material-ui/lab</a>
<a rel="external" class="label" href="https://npmjs.com/package/@optimizely/react-sdk">@optimizely/react-sdk</a>
<a rel="external" class="label" href="https://npmjs.com/package/@umijs/hooks">@umijs/hooks</a>
<a rel="external" class="label" href="https://npmjs.com/package/classnames">classnames</a>
<a rel="external" class="label" href="https://npmjs.com/package/date-fns">date-fns</a>
<a rel="external" class="label" href="https://npmjs.com/package/file-saver">file-saver</a>
<a rel="external" class="label" href="https://npmjs.com/package/formik">formik</a>
<a rel="external" class="label" href="https://npmjs.com/package/graphql">graphql</a>
<a rel="external" class="label" href="https://npmjs.com/package/history">history</a>
<a rel="external" class="label" href="https://npmjs.com/package/lodash">lodash</a>
<a rel="external" class="label" href="https://npmjs.com/package/mapbox-gl">mapbox-gl</a>
<a rel="external" class="label" href="https://npmjs.com/package/material-ui-popup-state">material-ui-popup-state</a>
<a rel="external" class="label" href="https://npmjs.com/package/notistack">notistack</a>
<a rel="external" class="label" href="https://npmjs.com/package/react">react</a>
<a rel="external" class="label" href="https://npmjs.com/package/react-copy-to-clipboard">react-copy-to-clipboard</a>
<a rel="external" class="label" href="https://npmjs.com/package/react-dom">react-dom</a>
<a rel="external" class="label" href="https://npmjs.com/package/react-map-gl">react-map-gl</a>
<a rel="external" class="label" href="https://npmjs.com/package/react-papaparse">react-papaparse</a>
<a rel="external" class="label" href="https://npmjs.com/package/react-refresh">react-refresh</a>
<a rel="external" class="label" href="https://npmjs.com/package/react-router-dom">react-router-dom</a>
<a rel="external" class="label" href="https://npmjs.com/package/react-scripts">react-scripts</a>
<a rel="external" class="label" href="https://npmjs.com/package/react-window">react-window</a>
<a rel="external" class="label" href="https://npmjs.com/package/react-window-infinite-loader">react-window-infinite-loader</a>
<a rel="external" class="label" href="https://npmjs.com/package/subscriptions-transport-ws">subscriptions-transport-ws</a>
<a rel="external" class="label" href="https://npmjs.com/package/yup">yup</a>
</div>
</div>
</li>
<li class="details">
<input type="checkbox" id="project-4-devdependencies">
<label for="project-4-devdependencies" class="summary">keep dependencies up-to-date, code clean, linted, and prettified (also solid, dried, and kissed)</label>
<div class="labels">
<a rel="external" class="label" href="https://npmjs.com/package/eslint-plugin-import">eslint-plugin-import</a>
<a rel="external" class="label" href="https://npmjs.com/package/eslint-plugin-prettier">eslint-plugin-prettier</a>
<a rel="external" class="label" href="https://npmjs.com/package/eslint-plugin-simple-import-sort">eslint-plugin-simple-import-sort</a>
<a rel="external" class="label" href="https://npmjs.com/package/husky">husky</a>
<a rel="external" class="label" href="https://npmjs.com/package/lint-staged">lint-staged</a>
<a rel="external" class="label" href="https://npmjs.com/package/prettier">prettier</a>
<a rel="external" class="label" href="https://npmjs.com/package/source-map-explorer">source-map-explorer</a>
</div>
</li>
<li>make the app beautiful, themable (using Material UI and Font Awesome), and reactive (using Websockets API)</li>
<li>integrate with third parties (e.g. Auth0 for authentication, Optimizely Rollouts for feature flags, etc.)</li>
<li>keep code coverage threshold for unit tests at a reasonable minimum (it's 0% so far)</li>
<li>optimize the code for performance and efficiency (use Service Workers API, Web Workers API, and techniques like memoization, <code>throttle</code> and <code>debounce</code> to solve caching, overfetching/underfetching, exceeding rate limits, unnecessary rerendering, and browser freezing issues, etc.)</li>
<li>keep backend robust and steady (using <code>axios-retry</code> to retry calls, <code>winston</code> for logging, and <code>lightship</code> to report readiness and liveness, etc.)</li>
<li>wrap those into Docker containers and deploy to Kubernetes as part of the microservice-based architecture, check CI/CD pipelines for speed, reliability, and consistency</li>
<li>communicate with other microservices using Kafka or REST APIs</li>
<li>try and maintain a proper attitude, being soft yet reasonable and persuasive, set realistic deadlines and goals and help the team to meet those, lead by example</li>
</ul>
</li>
</ul>
<h6>Back then</h6>
<ul class="timeline">
<li>
<p><em>15<sup>th</sup> July 2019 – 31<sup>st</sup> December 2019</em></p>
<p><strong>Full Stack Developer</strong> at <strong><a href="https://gonewfire.com/" rel="external">Newfire Partners</a></strong></p>
<ol class="inverted">
<li>
<p><strong>Full Stack Developer</strong> at <strong><a href="https://www.prismhr.com/" rel="external">PrismHR</a></strong></p>
<ul>
<li>did code reviews, attended refinement meetings, daily standups, sprint plannings and retrospectives (it's a large enterprise, so Scrum and QA comes first)</li>
<li class="details">
<input type="checkbox" id="project-3">
<label for="project-3" class="summary">designed, built, deployed and maintained <strong>PrismHR Security Center</strong> module (written with Node.js, React, GraphQL, and PostgreSQL)</label>
<div class="labels">
<a rel="external" class="label" href="https://github.com/facebookincubator/create-react-app">create-react-app</a>
<a rel="external" class="label" href="https://github.com/facebook/react">react</a>
<a rel="external" class="label" href="https://github.com/microsoft/TypeScript">typescript</a>
<a rel="external" class="label" href="https://github.com/tannerlinsley/react-table">react-table</a>
<a rel="external" class="label" href="https://github.com/formatjs/react-intl">react-intl</a>
<a rel="external" class="label" href="https://github.com/jquense/yup">yup</a>
<a rel="external" class="label" href="https://github.com/sass/node-sass">node-sass</a>
<a rel="external" class="label" href="https://github.com/prettier/prettier">prettier</a>
<a rel="external" class="label" href="https://github.com/jaredpalmer/formik">formik</a>
<a rel="external" class="label" href="https://github.com/graphql/graphql-js">graphql</a>
<a rel="external" class="label" href="https://github.com/Paratron/hookrouter">hookrouter</a>
<a rel="external" class="label" href="https://github.com/aws-amplify/amplify-js">aws-amplify</a>
<a rel="external" class="label" href="https://github.com/apollographql/apollo-client/tree/master/packages/apollo-boost">apollo-boost</a>
<a rel="external" class="label" href="https://github.com/apollographql/react-apollo">@apollo/react-hooks</a>
<a rel="external" class="label" href="https://github.com/airbnb/enzyme">enzyme</a>
<a rel="external" class="label" href="https://github.com/hapijs/joi">joi</a>
<a rel="external" class="label" href="https://github.com/sequelize/sequelize">sequelize</a>
<a rel="external" class="label" href="https://github.com/winstonjs/winston">winston</a>
<a rel="external" class="label" href="https://github.com/brianc/node-postgres">pg</a>
<a rel="external" class="label" href="https://github.com/lodash/lodash">lodash</a>
<a rel="external" class="label" href="https://github.com/chaijs/chai">chai</a>
<a rel="external" class="label" href="https://github.com/sinonjs/sinon">sinon</a>
</div>
</li>
<li>identified and solved bottlenecks and bugs, found patterns in the existing codebase and refactored everything, again (no joke, this one was my all-time favourite ❤️)</li>
</ul>
</li>
</ol>
</li>
<li>
<p><em>24<sup>th</sup> January 2017 – 4<sup>th</sup> July 2019</em></p>
<p><strong>Full Stack Developer</strong> at <strong><a href="https://binary-studio.com/" rel="external">Binary Studio</a></strong><br><sup><em>(here's my <a href="./assets/documents/introduction-letter-to-binary-studio/" rel="external"><strong>introduction letter</strong></a>)</em></sup></p>
<ol class="inverted">
<li>
<p><strong>Full Stack Developer</strong> at <strong><a href="https://screen.cloud/" rel="external">ScreenCloud</a></strong></p>
<ul>
<li class="details">
<input type="checkbox" id="project-2">
<label for="project-2" class="summary">built, tested, and deployed to Amazon Web Services applications written with Node.js, React, GraphQL, and PostgreSQL</label>
<div class="labels">
<a rel="external" class="label" href="https://github.com/apollographql/apollo-client">apollo-client</a>
<a rel="external" class="label" href="https://github.com/jaredpalmer/formik">formik</a>
<a rel="external" class="label" href="https://github.com/graphql/graphql-js">graphql</a>
<a rel="external" class="label" href="https://github.com/apollographql/graphql-tag">graphql-tag</a>
<a rel="external" class="label" href="https://github.com/ianstormtaylor/slate">slate</a>
<a rel="external" class="label" href="https://github.com/transloadit/uppy">uppy</a>
<a rel="external" class="label" href="https://github.com/jquense/yup">yup</a>
<a rel="external" class="label" href="https://github.com/storybooks/storybook">storybook</a>
<a rel="external" class="label" href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>
<a rel="external" class="label" href="https://github.com/visionmedia/debug">debug</a>
<a rel="external" class="label" href="https://github.com/motdotla/dotenv">dotenv</a>
<a rel="external" class="label" href="https://github.com/expressjs/express">express</a>
<a rel="external" class="label" href="https://github.com/hapijs/joi">joi</a>
<a rel="external" class="label" href="https://github.com/expressjs/morgan">morgan</a>
<a rel="external" class="label" href="https://github.com/jaredhanson/passport">passport</a>
<a rel="external" class="label" href="https://github.com/brianc/node-postgres">pg</a>
<a rel="external" class="label" href="https://github.com/request/request">request</a>
<a rel="external" class="label" href="https://github.com/graphile/postgraphile">postgraphile</a>
<a rel="external" class="label" href="https://github.com/chaijs/chai">chai</a>
<a rel="external" class="label" href="https://github.com/mochajs/mocha">mocha</a>
<a rel="external" class="label" href="https://github.com/standard/standard">standard</a>
<a rel="external" class="label" href="https://github.com/standard/snazzy">snazzy</a>
</div>
</li>
<li>configured caching on CloudFront and Elasticache, WebSockets on Elastic Beanstalk, set up API Gateways and Lambdas, etc.</li>
<li>did code reviews, took care of documentation, planned sprints, participated in retrospectives and daily standups</li>
</ul>
</li>
<li>
<p><strong>Frontend Developer</strong> at <strong>Dynamic Reservations</strong></p>
<ul>
<li class="details">
<input type="checkbox" id="project-1">
<label for="project-1" class="summary">built, tested, and deployed a React/Redux-based frontend</label>
<div class="labels">
<a rel="external" class="label" href="https://github.com/facebookincubator/create-react-app">create-react-app</a>
<a rel="external" class="label" href="https://github.com/mzabriskie/axios">axios</a>
<a rel="external" class="label" href="https://github.com/JedWatson/classnames">classnames</a>
<a rel="external" class="label" href="https://github.com/lodash/lodash">lodash</a>
<a rel="external" class="label" href="https://github.com/moment/moment">moment</a>
<a rel="external" class="label" href="https://github.com/paularmstrong/normalizr">normalizr</a>
<a rel="external" class="label" href="https://github.com/sindresorhus/query-string">query-string</a>
<a rel="external" class="label" href="https://github.com/facebook/react">react</a>
<a rel="external" class="label" href="https://github.com/yahoo/react-intl">react-intl</a>
<a rel="external" class="label" href="https://github.com/reactjs/react-redux">react-redux</a>
<a rel="external" class="label" href="https://github.com/ReactTraining/react-router">react-router</a>
<a rel="external" class="label" href="https://github.com/reactjs/redux">redux</a>
<a rel="external" class="label" href="https://github.com/erikras/redux-form">redux-form</a>
<a rel="external" class="label" href="https://github.com/evgenyrodionov/redux-logger">redux-logger</a>
<a rel="external" class="label" href="https://github.com/redux-saga/redux-saga">redux-saga</a>
<a rel="external" class="label" href="https://github.com/gaearon/redux-thunk">redux-thunk</a>
<a rel="external" class="label" href="https://github.com/Semantic-Org/Semantic-UI-React">semantic-ui-react</a>
<a rel="external" class="label" href="https://github.com/sass/node-sass">node-sass</a>
<a rel="external" class="label" href="https://github.com/prettier/prettier">prettier</a>
<a rel="external" class="label" href="https://github.com/Codeception/codeceptjs">codeceptjs</a>
<a rel="external" class="label" href="https://github.com/segmentio/nightmare">nightmare</a>
</div>
</li>
</ul>
</li>
</ol>
<ul>
<li class="details">
<input type="checkbox" id="other">
<label for="other" class="summary">Also did some other things from time to time 🎉</label>
<div>
<ul>
<li>occasionally I gave lectures at <strong><a href="https://academy.binary-studio.com/" rel="external">Binary Studio Academy</a></strong></li>
<li>sometimes I was being <em>mentored</em> by those whom I <em>mentored</em> 🤷🏼♂️</li>
<li>I was good at kitchen talks about pretty much anything</li>
<li>I played video games with them so that we became a better team <em>(debatable)</em></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<h6>Way back then</h6>
<ul class="timeline">
<li>
<p><em>1<sup>st</sup> October 2016 – 31<sup>st</sup> December 2016</em></p>
<p><strong>Full Stack Developer</strong> at <strong><a href="https://www.dutchstar.com/" rel="external">Dutchstar</a></strong></p>
<ul>
<li>built, tested, and deployed applications written with React + Redux and Phalcon + MySQL</li>
</ul>
</li>
<li>
<p><em>10<sup>th</sup> September 2016</em></p>
<p><strong>Relocated</strong> to <strong><a href="https://www.google.com/maps/place/Lviv,+Lviv+Oblast,+Ukraine,+79000/@49.8327787,23.9421957,12z/data=!3m1!4b1!4m5!3m4!1s0x473add7c09109a57:0x4223c517012378e2!8m2!3d49.839683!4d24.029717" rel="external">Lviv</a></strong> <sup><em id="lviv-rent-months"></em></sup></p>
</li>
<li>
<p><em>Some time in 2015</em></p>
<p><strong>Quit smoking</strong> 🥗</p>
<ul>
<li>still love to eat junk food sometimes and have a drink occasionally</li>
</ul>
</li>
<li>
<p><em>25<sup>th</sup> May 2014 – forever</em></p>
<p><strong>Married</strong> <strong><a href="https://www.fb.com/mila.mandzyuk" rel="external">Lyudmyla Mandzyuk</a></strong> 👩🏻</p>
<ul>
<li>doing what I'm told</li>
</ul>
</li>
<li>
<p><em>1<sup>st</sup> September 2012 – 30<sup>th</sup> September 2016</em></p>
<ul>
<li class="details">
<input type="checkbox" id="service-center-databases-lead">
<label for="service-center-databases-lead" class="summary">
<strong>Service Center Databases Lead</strong> at <strong><a href="https://www.sebn.com/en/" rel="external">Sumitomo Electric Bordnetze</a> Ukraine</strong>
</label>
<div>
<ul>
<li>managed MySQL multi-master clusters, Oracle failover clusters, Microsoft SQL mirrored/replicated servers (monitoring, backup/restore, users/groups/roles, schemas)</li>
<li>built and benchmarked fast, efficient SQL queries</li>
<li>optimized database engines, indexes, etc.</li>
<li>crafted web dashboards, reports using HTML, CSS, JavaScript, SQL</li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<p><em>1<sup>st</sup> September 2011 – 30<sup>th</sup> September 2016</em></p>
<ul>
<li class="details">
<input type="checkbox" id="it-production-subdivision-manager">
<label for="it-production-subdivision-manager" class="summary">
<strong>IT Production Subdivision Manager</strong> at <strong><a href="https://www.sebn.com/en/" rel="external">Sumitomo Electric Bordnetze</a> Ukraine</strong>
</label>
<div>
<ul>
<li>designed computer-aided manufacturing processes</li>
<li>interconnected different production systems’ databases (push or pull data using replication, triggers, scheduled events, cron jobs)</li>
<li>built high-availability systems, minimized downtime</li>
<li>designed and built BDE (BetriebsDatenErfassung) — data aggregator system designed to assist in planning, manufacturing, monitoring, and controlling</li>
<li>analyzed and transformed data</li>
<li>wrote docs, manuals, guidelines, and memos</li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<p><em>9<sup>th</sup> April 2008</em></p>
<p><strong>Was officially hired (employee #943)</strong> by <strong><a href="https://www.sebn.com/en/" rel="external">Sumitomo Electric Bordnetze</a> Ukraine</strong><br>(worked as a contractor previously)</p>
</li>
<li>
<p><em>14<sup>th</sup> February 2008 – 31<sup>st</sup> January 2011</em></p>
<ul>
<li class="details">
<input type="checkbox" id="software-engineer">
<label for="software-engineer" class="summary">
<strong>Software Engineer</strong> at <strong><a href="https://www.sebn.com/en/" rel="external">Sumitomo Electric Bordnetze</a> Ukraine</strong>
</label>
<div>
<ul>
<li>designed UI and UX for native applications and web pages</li>
<li>built simple apps to assist in manufacturing process using Delphi, VB, Java, HTML, CSS, JavaScript, PHP, SQL</li>
<li>managed Microsoft SQL, MySQL, and Firebird databases</li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<p><em>February 2006 – August 2007</em></p>
<ul>
<li class="details">
<input type="checkbox" id="graphic-designer">
<label for="graphic-designer" class="summary">
<strong>Graphic Designer</strong> at <strong>Terminal</strong>
</label>
<div>
<ul>
<li>designed booklets, flyers, business cards, posters using Adobe CS (Photoshop, Illustrator, InDesign)</li>
<li>managed inkjet plotters and printers</li>
<li>built websites using Macromedia Dreamweaver, Macromedia Flash (ActionScript)</li>
<li>started smoking 🚬</li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<p><em>April 2004 – December 2004</em></p>
<ul>
<li class="details">
<input type="checkbox" id="system-administrator">
<label for="system-administrator" class="summary">
<strong>System Administrator</strong> at <strong>Pyramid</strong>
</label>
<div>
<ul>
<li>managed a network of dozen Windows workstations and one Linux gateway (DHCP, DNS, proxy, ACLs)</li>
<li>kept PCs health (install OS over PXE, backup/restore, antivirus, software updates, hardware upgrades etc.)</li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<p><em>16<sup>th</sup> May 2003</em></p>
<p><strong>Got my internal passport</strong> (with a traditionally awkward photo, of course) — can't wait to replace it with a new Passport of the Citizen of Ukraine</p>
</li>
<li>
<a id="resume" href="#childhood" title="Show childhood photos">
<span class="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</span>
<em>couldn't do much really for the first few years...</em>
</a>
</li>
<li>
<p><em>6<sup>th</sup> October 1986</em></p>
<p><strong>Born</strong> in <strong><a href="https://www.google.com/maps/place/Ternopil,+Ternopil+Oblast,+Ukraine,+46003/@49.5484448,25.5276291,12z/data=!3m1!4b1!4m5!3m4!1s0x473036ad4b82ce75:0xc484a447edb154e8!8m2!3d49.553517!4d25.594767" rel="external">Ternopil, Ukraine</a></strong> <sup><em>— Thanks, mom and dad!</em></sup></p>
</li>
</ul>
</section>
</div>
<div class="six wide column">
<section>
<h3>Languages</h3>
<p class="tags small"><a href="/uk-ua" hreflang="uk" rel="alternate" class="language" lang="uk">🇺🇦 <span>УКРАЇНСЬКА</span></a> <a href="/ru-ru" hreflang="ru" rel="alternate" class="language" lang="ru">🇷🇺 <span>РУССКИЙ</span></a> <span class="language" lang="en">🇺🇸 ENGLISH</span></p>
</section>
<section>
<h3>Skills</h3>
<p class="tags small">HTML CSS JS UI/UX A11Y I18N PWA SEO JQUERY REACT REDUX GRAPHQL ANGULARJS CRA WEBPACK GRUNT GULP NODEJS NPM BOOTSTRAP <span class="nowrap">SEMANTIC UI</span> LESS SASS CSS-IN-JS PRETTIER ESLINT JEST ENZYME AWS SERVERLESS TRAVIS <span class="nowrap">MICROSOFT OFFICE</span> PHOTOSHOP ILLUSTRATOR PHP DELPHI VB VBA VBSCRIPT LINUX WINDOWS MACOS MYSQL POSTGRESQL MICROSOFT SQL DB2 CCNA ITIL</p>
</section>
<section>
<h3>Character</h3>
<p class="tags small">EXPLORER STRAIGHTFORWARD <a href="https://www.16personalities.com/entp-personality" rel="external">DEBATER</a> DEVOTED PEDANTIC AGNOSTIC CONTENTIOUS PROCRASTINATOR RELEVANT EMPATHETIC STORYTELLER CONFIDENT CONSISTENT CHALLENGING</p>
</section>
<section>
<h3>Likes😃</h3>
<p class="tags small">HUMOUR PATIENCE METAPHORS DOGS MOVIES AAPL DEMOCRACY <span class="nowrap">FC BARCELONA</span> JÄGERMEISTER LVIV FRISBEE <button id="midnightblue" class="color midnightblue">MIDNIGHT BLUE</button> ELECTROPOP CUCINA ITALIANA ‘80S SELF-EDUCATION <button id="meh" class="audio"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M576 256c0 100.586-53.229 189.576-134.123 239.04-7.532 4.606-17.385 2.241-21.997-5.304-4.609-7.539-2.235-17.388 5.304-21.997C496.549 424.101 544 345.467 544 256c0-89.468-47.452-168.101-118.816-211.739-7.539-4.609-9.913-14.458-5.304-21.997 4.608-7.539 14.456-9.914 21.997-5.304C522.77 66.424 576 155.413 576 256zm-96 0c0-66.099-34.976-124.572-88.133-157.079-7.538-4.611-17.388-2.235-21.997 5.302-4.61 7.539-2.236 17.388 5.302 21.998C418.902 152.963 448 201.134 448 256c0 54.872-29.103 103.04-72.828 129.779-7.538 4.61-9.912 14.459-5.302 21.998 4.611 7.541 14.462 9.911 21.997 5.302C445.024 380.572 480 322.099 480 256zm-138.14-75.117c-7.538-4.615-17.388-2.239-21.998 5.297-4.612 7.537-2.241 17.387 5.297 21.998C341.966 218.462 352 236.34 352 256s-10.034 37.538-26.841 47.822c-7.538 4.611-9.909 14.461-5.297 21.998 4.611 7.538 14.463 9.909 21.998 5.297C368.247 314.972 384 286.891 384 256s-15.753-58.972-42.14-75.117zM256 88.017v335.964c0 21.436-25.942 31.999-40.971 16.971L126.059 352H24c-13.255 0-24-10.745-24-24V184c0-13.255 10.745-24 24-24h102.059l88.971-88.954C230.037 56.038 256 66.551 256 88.017zm-32 19.311l-77.659 77.644A24.001 24.001 0 0 1 129.372 192H32v128h97.372a24.001 24.001 0 0 1 16.969 7.028L224 404.67V107.328z"/></svg> MEH
<audio preload="none">
<source src="./assets/sounds/meh.mp3" type="audio/mpeg">
</audio>
</button> <span class="nowrap">ATTENTION TO DETAILS</span> GRAMMAR SPELLCHECK SEMANTICS MINI-SERIES <span class="nowrap">RYAN GOSLING</span> <span class="nowrap">EMMA STONE</span> <span class="nowrap">CURAPROX 5460</span></p>
</section>
<section>
<h3>Dislikes😞</h3>
<p class="tags small"><span class="nowrap">OWN BAD HABITS</span> POLITICS RACISM ASS-KISSERS VODKA INCOMPETENCE ARROGANCE ENVY GOLF <button id="chartreuse" class="color chartreuse">CHARTREUSE</button> INSECTS METRO PREJUDICE REALITY-SHOWS JŪRMALA</p>
</section>
<section>
<h3>Wants🥺</h3>
<p class="tags small bulleted"><span class="tag">TO BE FIT AND HEALTHY</span><span class="tag">TO OWN MY SCHEDULE</span><span class="tag">TO READ MORE</span><span class="tag">TO OPEN A CAFÉ</span><span class="tag">TO BE BRAVE</span><span class="tag">TO BECOME A SUPERHERO</span><span class="tag">TO LISTEN AND LEARN</span></p>
</section>
<section>
<h3>Education</h3>
<ul class="timeline">
<li>
<div><em>Every day</em></div>
<p class="tags bulleted">
<span class="tag"><a href="https://dev.to/" rel="external"><strong>dev.to</strong></a></span><span class="tag"><a href="https://css-tricks.com/" rel="external"><strong>CSS-Tricks</strong></a></span><span class="tag"><a href="https://frontendfront.com/" rel="external"><strong>Front-End Front</strong></a></span><span class="tag"><a href="https://dribbble.com/" rel="external"><strong>Dribbble</strong></a></span><span class="tag"><a href="https://goodui.org/" rel="external"><strong>GoodUI</strong></a></span><span class="tag"><a href="https://egghead.io/" rel="external"><strong>egghead.io</strong></a></span><span class="tag"><a href="https://theverge.com/" rel="external"><strong>The Verge</strong></a></span><span class="tag"><a href="https://uncrate.com/" rel="external"><strong>Uncrate</strong></a></span>
</p>
</li>
<li>
<div><em>December 2005 – April 2006</em></div>
<div><strong>Certificates of CCNA Course Completion</strong> at <a href="https://www.netacad.com/" rel="external"><strong>Cisco Networking Academy Program</strong></a></div>
</li>
<li>
<div><em>1<sup>st</sup> September 2003 – 30<sup>th</sup> June 2008</em></div>
<div><strong>Bachelor's degree</strong> in <strong>computer science</strong> at <a href="http://tntu.edu.ua//?p=en/home" rel="external"><strong>Ternopil National Technical University</strong></a></div>
</li>
<li>
<div><em>1<sup>st</sup> October 1995 – 23<sup>rd</sup> May 1999</em></div>
<div><strong>Certificate of graduation</strong> at <strong>Ternopil Art School for Children</strong></div>
</li>
<li>
<div><em>1<sup>st</sup> September 1993 – 21<sup>st</sup> June 2003</em></div>
<div><strong>Certificate of graduation</strong> at <strong>№20 Middle School of General Education</strong></div>
</li>
</ul>
</section>
<section>
<h3>Articles</h3>
<p>None published <sup><em>yet</em></sup></p>
</section>
</div>
</div>
</div>
</div>
</article>
</main>
<footer>
<em>“That's all Folks!”</em> 🐷
</footer>
<script>
var lvivRelocationDate = new Date("2016-09-10");
var todaysDate = new Date();
var monthsLivingInLviv = todaysDate.getMonth() - lvivRelocationDate.getMonth() + (12 * (todaysDate.getFullYear() - lvivRelocationDate.getFullYear()));
document.getElementById("lviv-rent-months").innerHTML = "paid " + monthsLivingInLviv + " month" + (monthsLivingInLviv === 1 ? "" : "s") + " of rent already";
function switchToColor(color) {
try {
document.querySelectorAll(".page").forEach(function(page) {
page.style.borderColor = color;
});
document.querySelectorAll(".avatar").forEach(function(avatar) {
avatar.contentDocument.getElementById("circle").setAttribute("fill", color);
});
} catch (error) {}
}
document.getElementById("midnightblue").addEventListener("click", switchToColor.bind(this, "midnightblue"));
document.getElementById("chartreuse").addEventListener("click", switchToColor.bind(this, "chartreuse"));
document.getElementById("meh").addEventListener("click", function() {
this.childNodes[2].play();
});
function replaceNoscript(noscript) {
var parent = noscript.parentElement;
Array.prototype.slice.call((new DOMParser()).parseFromString(noscript.textContent, "text/html").body.children).forEach(function(element) {
parent.insertBefore(element, noscript);
});
parent.removeChild(noscript);
}
function callFuncOnCollection(collection, func) {
Array.prototype.slice.call(collection).map(function (item) {
func(item);
});
}
var childhoodPhotos = document.getElementById("childhood").getElementsByClassName("photos")[0];
document.getElementById("resume").addEventListener("click", function() {
callFuncOnCollection(childhoodPhotos.getElementsByTagName("NOSCRIPT"), replaceNoscript);
});
if (window.location.hash === "#childhood") {
callFuncOnCollection(childhoodPhotos.getElementsByTagName("NOSCRIPT"), replaceNoscript);
}
if ("serviceWorker" in navigator) {
window.addEventListener("load", function() {
navigator.serviceWorker.register('/sw.js');
});
}
</script>
</body>
</html>