-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
806 lines (720 loc) · 51.6 KB
/
index.html
File metadata and controls
806 lines (720 loc) · 51.6 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
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
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if (IE 9)]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-US" ng-app="myApp">
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>David Manzer - Sr UI Developer ,Front-End, Full Stack, UI/UX Design, SEO Specialist, Accessibility Compliance Remediation, Digital Marketing | Mesa, AZ</title>
<meta name="robots" content="index, follow">
<meta name="description" content="I'm a UI Developer with 12+ years of front-end development experience and 14 years in graphic design. I specialize in building accessible, intuitive, and visually polished interfaces using Angular, React, SCSS, and scalable design systems.
With a strong UX mindset and SAFe certification, I’ve led design teams, mentored junior developers, and contributed to open-source projects—including a Bootstrap utility framework. I bring deep expertise in 508 compliance, Figma-to-code workflows, mobile responsiveness, and reusable component design.
At Softrams, I independently owned and resolved mobile UI bugs outside of sprint cycles, proactively tracking issues and creating tickets. I built shareable UI components with versatile features used across modules, and I initiated and presented a live UI Style Library to leadership—now part of a long-term tech debt strategy.
I regularly presented in bi-weekly developer talks and served as a go-to UI/CSS subject matter expert, assisting teammates both within and beyond my assigned project. Helping others solve styling and architecture challenges across teams has become one of the most rewarding parts of my role.
My toolkit includes Angular (5+ years), React, SCSS, TypeScript, Node.js, and AWS (including DynamoDB). I'm highly collaborative and thrive in Agile environments, working closely with UX, accessibility (WCAG), and backend teams.
My foundation in visual communication and award-winning design gives me a unique edge in bridging design and development. Whether I’m coding reusable components or leading UI refinements, I’m focused on delivering fast, inclusive, and elegant experiences.">
<meta name="author" content="David Manzer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<link rel="canonical" href="https://davidmanzer.info/">
<!-- Preconnect to external domains for faster loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://ajax.googleapis.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<!-- DNS prefetch for external resources -->
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="//www.google.com"><!-- Open Graph Meta Tags -->
<meta property="og:title" content="David Manzer - Sr UI Developer ,Front-End, Full Stack, UI/UX Design, SEO Specialist, Accessibility Compliance Remediation, Digital Marketing">
<meta property="og:description" content="Senior UI Developer with 25+ years experience in Angular, React, TypeScript, HTML5, CSS3, and responsive web design. Based in Mesa, Arizona.">
<meta property="og:image" content="https://davidmanzer.info/img/dm-logo.png">
<meta property="og:url" content="https://davidmanzer.info/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="David Manzer Portfolio">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="David Manzer - Sr UI Developer ,Front-End, Full Stack, UI/UX Design, SEO Specialist, Accessibility Compliance Remediation, Digital Marketing">
<meta name="twitter:description" content="Senior UI Developer with 25+ years experience in Angular, React, TypeScript, HTML5, CSS3, and responsive web design.">
<meta name="twitter:image" content="https://davidmanzer.info/img/dm-logo.png">
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/controller.js"></script>
<!-- Mobile Internet Explorer ClearType Technology -->
<!--[if IEMobile]> <meta http-equiv="cleartype" content="on"> <![endif]-->
<!--! combine minified styles -->
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/supersized.css" rel="stylesheet">
<link href="css/supersized.shutter.css" rel="stylesheet">
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!-- <link href="css/supersized.css" rel="stylesheet"> -->
<!-- <link href="css/supersized.shutter.css" rel="stylesheet"> -->
<!--! Google Font -->
<link href='//fonts.googleapis.com/css?family=Lato:400,700,300,900' rel='stylesheet' type='text/css'>
<!--! Fav Icon -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="img/apple-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/android-icon-144x144.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/android-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/ms-icon-70x70.png">
<!--! Modernizr -->
<script src="js/modernizr.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-C0Y5S6HJL3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-C0Y5S6HJL3');
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-- Structured Data (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "David Manzer",
"jobTitle": "David Manzer - Sr UI Developer ,Front-End, Full Stack, UI/UX Design, SEO Specialist, Accessibility Compliance Remediation, Digital Marketing",
"description": "Senior Front End Developer with 25+ years experience in Angular, React, TypeScript, HTML5, CSS3, and responsive web design.",
"url": "https://davidmanzer.info/",
"image": "https://davidmanzer.info/img/dm-logo.png",
"address": {
"@type": "PostalAddress",
"addressLocality": "Mesa",
"addressRegion": "Arizona",
"addressCountry": "United States"
},
"telephone": "+1-480-570-6417",
"email": "dmanzer2@gmail.com",
"sameAs": [
"https://www.linkedin.com/in/david-manzer-bb081855",
"https://github.com/dmanzer2",
"https://www.behance.net/dmanzer2"
],
"knowsAbout": [
"Angular",
"React",
"TypeScript",
"JavaScript",
"HTML5",
"CSS3",
"SCSS",
"Bootstrap",
"UI/UX Design",
"Responsive Web Design",
"Accessibility",
"Frontend Development"
],
"worksFor": {
"@type": "Organization",
"name": "Freelance"
}
}
</script>
</head>
<body>
<!--! Start Splash Screen -->
<div class="ole">
<section id="jSplash">
<div id="circle"></div>
</section>
</div>
<!--! End of Splash Screen -->
<!--! Homepage Slider -->
<div id="home-slider" name="home-slider">
<div class="overlay"></div>
<h1 class="slider-text">
<div id="slidecaption"></div>
</h1>
<div class="control-nav">
<a id="prevslide" class="load-item"><i class="font-icon-arrow-simple-left"></i></a>
<a id="nextslide" class="load-item"><i class="font-icon-arrow-simple-right"></i></a>
<ul id="slide-list"></ul>
<a id="nextsection" href="#dev"><i class="font-icon-arrow-simple-down"></i></a>
</div>
</div>
<!--! End Homepage Slider -->
<!--! Header -->
<header>
<div class="sticky-nav">
<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
<div id="logo">
<a id="goUp" href="#home-slider" title="David Manzer - Senior Front End Developer & UI/UX Specialist" class="slider-name">David Manzer</a>
</div>
<nav id="menu">
<ul id="menu-nav">
<!-- <li class="current"><a href="#home-slider" class="smooth-nav">Home</a></li> -->
<li><a href="#dev" alt="David Manzer - Professional Development" class="smooth-nav">Development</a></li>
<li><a href="#work" alt="David Manzer - Professional Samples" class="smooth-nav">Samples</a></li>
<li><a href="#skills" alt="David Manzer - Professional Skills" class="smooth-nav">Skills</a></li>
<li><a href="#experience" alt="David Manzer - Professional Experience" class="smooth-nav">Experience</a></li>
<li><a href="#contact" alt="David Manzer - Contact" class="smooth-nav">Contact</a></li>
<li class="logo-area"></li>
</ul>
</nav>
</div>
</header>
<!--! End Header -->
<!--! development Section -->
<div id="dev" name="work" class="page">
<div class="container">
<div class="row">
<div class="span12">
<div class="title-page">
<h1 class="title">David Manzer - Senior UI Developer</h1>
<h2 class="title-description">Development Projects & Professional Resources</h2>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div class="work-nav text-center">
<p class="dev-header"><strong>Current Ongoing development projects</strong></p>
<p class="my-adjust">Open-source CSS/SCSS project (React/Typescript, Github pages deployed):
<a href="https://ezspacecss.com" class="selected" alt="EZ Space CSS - Utility" target="_blank">https://ezspacecss.com</a></p>
<hr class="my-adjust">
<p class="my-adjust">Open-source CSS/SCSS NPM package (Github repo, built with CSS/SCSS):
<a href="https://www.npmjs.com/package/ez-space-css-repo" class="selected" alt="EZ Space CSS - NPM Package" target="_blank">https://www.npmjs.com/package/ez-space-css-repo</a></p>
<hr class="my-adjust">
<p class="my-adjust">Desert Tropics Pools (Bootstrap, Jekyll, HTML/CSS/JS, Github pages deployed):
<a href="https://dmanzer2.github.io/deserttropicspools" class="selected" alt="Desert Tropics Pools revamp" target="_blank">https://dmanzer2.github.io/deserttropicspools</a></p>
<hr class="my-adjust">
<p class="my-adjust">English Bulldog Hobby (Wordpress, HTML/CSS/JS, Marketing site hosted on Hostgator):
<a href="https://bulldogbackyard.com" class="selected" alt="English Bulldog Hobby" target="_blank">https://bulldogbackyard.com</a></p>
<hr class="my-adjust">
<p class="my-adjust">Lead Generation project (Next.js, Typescript, TailwindCSS, Neon DB, Resend email, Vercel):
<a href="https://sourcetrustedpros.com" class="selected" alt="Lead Generation project" target="_blank">https://sourcetrustedpros.com</a></p>
<hr class="my-adjust">
<p class="my-adjust">Design System/Application Style Guide boilerplate (Next.js, TailwindCSS):
<a href="https://next-tailwind-style-guide.vercel.app/" class="selected" alt="Design System/Application Style Guide boilerplate" target="_blank">https://next-tailwind-style-guide.vercel.app/</a></p>
<hr class="my-adjust">
<p class="my-adjust">Digital Marketing Website (Next.js, Typescript, TailwindCSS, Neon DB, Resend email, Vercel):
<a href="https://buildandbloom.us/" class="selected" alt="Digital Marketing Website" target="_blank">https://buildandbloom.us/</a></p>
<hr class="my-adjust">
<p class="my-adjust">BatchQuery Image Analysis — AI Chatbot (Next.js, Typescript, TailwindCSS, OpenAI API, Vercel, Figma):
<a href="https://chatbot-assignment-dmanzer.vercel.app/chatbot" class="selected" alt="BatchQuery Image Analysis — OpenAI API Chatbot" target="_blank">https://chatbot-assignment-dmanzer.vercel.app/chatbot</a></p>
<hr class="my-adjust">
<p class="dev-header"><strong>Professional Resources</strong></p>
<p class="my-adjust">Github with active repos (many projects, some hosted on Github pages):
<a href="https://github.com/dmanzer2" class="selected" alt="Github dmanzer2" target="_blank">https://github.com/dmanzer2</a></p>
<hr class="my-adjust">
<p class="my-adjust">Enhanced and extended Career portfolio examples (Behance):
<a href="https://www.behance.net/dmanzer2" class="selected" alt="David Manzer Behance Portfolio" target="_blank">https://www.behance.net/dmanzer2</a></p>
<hr class="my-adjust">
<p class="my-adjust">Professional LinkedIn:
<a href="https://www.linkedin.com/in/david-manzer-bb081855" class="selected" alt="David Manzer LinkedIn" target="_blank">https://www.linkedin.com/in/david-manzer-bb081855</a></p>
<hr class="my-adjust">
</div>
</div>
</div>
</div>
</div>
<!--! Work Section -->
<div id="work" name="work" class="page-alternate" style="padding-top:50px;">
<div class="container">
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">Portfolio & Work Samples</h2>
<h3 class="title-description">Check Out My Design and Development Projects</h3>
</div>
</div>
</div>
<!--! Portfolio Category Area -->
<div class="row">
<div class="span3">
<!-- Filter Project-->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Type of Work</li>
<li><a href="#filter" data-option-value=".web" class="selected" alt="David Manzer - Web Development samples">Web Development</a></li>
<li><a href="#filter" data-option-value=".email" alt="David Manzer - email Marketing samples">email Marketing</a></li>
<li><a href="#filter" data-option-value=".layout" alt="David Manzer - Layout/Advertising samples">Layout/Advertising</a></li>
<li><a href="#filter" data-option-value=".identity" alt="David Manzer - Identity/Logos samples">Identity/Logos</a></li>
<li><a href="#filter" data-option-value=".illustration" alt="David Manzer - Digital Illustration samples">Digital Illustration</a></li>
<li><a href="#filter" data-option-value=".package" alt="David Manzer - Package Design samples">Package Design</a></li>
<li><a href="#filter" data-option-value=".photography" alt="David Manzer - Creative Photography samples">Creative Photography</a></li>
<li><a href="#filter" data-option-value=".fonts" alt="David Manzer - Font Development samples">Font Development</a></li>
<li><a href="#filter" data-option-value=".placeholder"> </a></li>
</ul>
</nav>
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs" ng-controller="WorkController">
<!--Web Start-->
<li class="item-thumbs span3 clearfix web" ng-repeat="item in web" style="min-height:183px; display:block;">
<!-- Full Image -->
<a class="hover-wrap fancybox" title="{{item.name}}" ng-href="img/work/web-development/full/{{item.shortname}}-full.jpg" alt="{{item.name}}">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
<span class="sr-only">View full image: {{item.name}} (Web Development)</span>
</a>
<!-- Thumb Image and Description -->
<img ng-src="img/work/web-development/thumbs/{{item.shortname}}.jpg" ng-attr-alt="{{item.name}} - {{item.description}} (Web Development)" loading="lazy">
</li>
<!-- Email Start -->
<li class="item-thumbs span3 clearfix email" ng-repeat="item in email" style="min-height:183px; display:block;">
<!-- Full Image -->
<a class="hover-wrap fancybox" title="{{item.name}}" ng-href="img/work/email-development/full/{{item.shortname}}-full.jpg" alt="{{item.name}}">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
<span class="sr-only">View full image: {{item.name}} (Email Marketing)</span>
</a>
<!-- Thumb Image and Description -->
<img ng-src="img/work/email-development/thumbs/{{item.shortname}}.jpg" ng-attr-alt="{{item.name}} - {{item.description}} (Email Marketing)" loading="lazy">
</li>
<!-- layout Items -->
<li class="item-thumbs span3 clearfix layout" ng-repeat="item in layout" style="min-height:183px; display:block;">
<!-- Full Image -->
<a class="hover-wrap fancybox" title="{{item.name}}" ng-href="img/work/layout-design/full/{{item.shortname}}-full.jpg" alt="{{item.name}}">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
<span class="sr-only">View full image: {{item.name}} (Layout/Advertising)</span>
</a>
<!-- Thumb Image and Description -->
<img ng-src="img/work/layout-design/thumbs/{{item.shortname}}.jpg" ng-attr-alt="{{item.name}} - {{item.description}} (Layout/Advertising)" loading="lazy">
</li>
<!-- Identity Items -->
<li class="item-thumbs span3 clearfix identity" ng-repeat="item in logos" style="min-height:183px; display:block;">
<!-- Full Image -->
<a class="hover-wrap fancybox" title="{{item.name}}" ng-href="img/work/logos-branding/full/{{item.shortname}}-full.jpg" alt="{{item.name}}">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
<span class="sr-only">View full image: {{item.name}} (Identity/Logos)</span>
</a>
<!-- Thumb Image and Description -->
<img ng-src="img/work/logos-branding/thumbs/{{item.shortname}}.jpg" ng-attr-alt="{{item.name}} - {{item.description}} (Identity/Logos)" loading="lazy">
</li>
<!--Illustrations Start-->
<li class="item-thumbs span3 clearfix illustration" ng-repeat="item in illustrations" style="min-height:183px; display:block;">
<!-- Full Image -->
<a class="hover-wrap fancybox" title="{{item.name}}" ng-href="img/work/illustrations/full/{{item.shortname}}-full.jpg" alt="{{item.name}}">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
<span class="sr-only">View full image: {{item.name}} (Illustration)</span>
</a>
<!-- Thumb Image and Description -->
<img ng-src="img/work/illustrations/thumbs/{{item.shortname}}.jpg" ng-attr-alt="{{item.name}} - {{item.description}} (Illustration)" loading="lazy">
</li>
<!--Package Design Start-->
<li class="item-thumbs span3 clearfix package" ng-repeat="item in package" style="min-height:183px; display:block;">
<!-- Full Image -->
<a class="hover-wrap fancybox" title="{{item.name}}" ng-href="img/work/package-design/full/{{item.shortname}}-full.jpg" alt="{{item.name}}">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
<span class="sr-only">View full image: {{item.name}} (Package Design)</span>
</a>
<!-- Thumb Image and Description -->
<img ng-src="img/work/package-design/thumbs/{{item.shortname}}.jpg" ng-attr-alt="{{item.name}} - {{item.description}} (Package Design)" loading="lazy">
</li>
<!-- Photography Start -->
<li class="item-thumbs span3 clearfix photography" ng-repeat="item in photo" style="min-height:183px; display:block;">
<!-- Full Image -->
<a class="hover-wrap fancybox" title="{{item.name}}" ng-href="img/work/creative-photography/full/{{item.shortname}}-full.jpg" alt="{{item.name}}">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
<span class="sr-only">View full image: {{item.name}} (Creative Photography)</span>
</a>
<!-- Thumb Image and Description -->
<img ng-src="img/work/creative-photography/thumbs/{{item.shortname}}.jpg" ng-attr-alt="{{item.name}} - {{item.description}} (Creative Photography)" loading="lazy">
</li>
<!-- Fonts Start -->
<li class="item-thumbs span3 clearfix fonts" ng-repeat="item in fonts" style="min-height:183px; display:block;">
<!-- Full Image -->
<a class="hover-wrap fancybox" title="{{item.name}}" ng-href="img/work/font-development/full/{{item.shortname}}-full.jpg" alt="{{item.name}}">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
<span class="sr-only">View full image: {{item.name}} (Font Development)</span>
</a>
<!-- Thumb Image and Description -->
<img ng-src="img/work/font-development/thumbs/{{item.shortname}}.jpg" ng-attr-alt="{{item.name}} - {{item.description}} (Font Development)" loading="lazy">
</li>
<!-- Portfolio placeholder - Holds Angular in Place -->
<li class="item-thumbs span9 clearfix placeholder">
<a class="hover-wrap fancybox" title="" href="#">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<img ng-src="https://placehold.it/1x1" alt="placeholder image" style="height:0px !important;" loading="lazy">
</li>
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</div>
</div>
<!-- End Work Section -->
<!-- skills and experience Section -->
<div id="skills" name="skills" class="page-alternate" style="padding-top:50px;">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">My Skills</h2>
<h3 class="title-description">Technical skills I've learned along the way. <small>(level from 0-100)</small></h3>
<p>Over <a href="https://www.linkedin.com/profile/preview?locale=en_US&trk=prof-0-sb-preview-primary-button#background-certifications" target="_blank" alt="David Manzer Professional Skills">50 certifications</a> in Web Design, Development and Business practices.</p>
</div>
</div>
</div>
<!--Skills Area-->
<div class="row">
<div class="span4">
<!-- Chart Start -->
<div class="chart-horiz">
<ul class="chart">
<li class="title" title="Adobe CC"></li>
<li class="current" title="Adobe Photoshop"><span class="bar" data-number="90"></span><span class="number">90</span></li>
<li class="past" title="Adobe Illustrator"><span class="bar" data-number="95"></span><span class="number">95</span></li>
<li class="past" title="Adobe InDesign"><span class="bar" data-number="85"></span><span class="number">85</span></li>
<li class="past" title="Adobe Acrobat"><span class="bar" data-number="85"></span><span class="number">85</span></li>
<li class="title" title="Client Side Coding"></li>
<li class="current" title="HTML5"><span class="bar" data-number="95"></span><span class="number">95</span></li>
<li class="past" title="CSS & CSS3"><span class="bar" data-number="90"></span><span class="number">90</span></li>
<li class="past" title="Typescript"><span class="bar" data-number="70"></span><span class="number">70</span></li>
<li class="past" title="Javascript"><span class="bar" data-number="70"></span><span class="number">70</span></li>
<li class="past" title="jQuery"><span class="bar" data-number="60"></span><span class="number">60</span></li>
<li class="past" title="JSON"><span class="bar" data-number="70"></span><span class="number">70</span></li>
<li class="past" title="SCSS"><span class="bar" data-number="80"></span><span class="number">80</span></li>
<li class="title" title="Server Side Experience"></li>
<li class="past" title="PHP"><span class="bar" data-number="60"></span><span class="number">60</span></li>
<li class="past" title="JSP"><span class="bar" data-number="60"></span><span class="number">60</span></li>
<li class="past" title="MySQL"><span class="bar" data-number="60"></span><span class="number">60</span></li>
<li class="past" title="NoSQL"><span class="bar" data-number="45"></span><span class="number">45</span></li>
<li class="past" title="PostgreSQL"><span class="bar" data-number="45"></span><span class="number">45</span></li>
<li class="past" title="DynamoDB"><span class="bar" data-number="45"></span><span class="number">45</span></li>
<li class="past" title="Node.js"><span class="bar" data-number="45"></span><span class="number">45</span></li>
<li class="title" title="Accessibility - 508 compliance - WCAG "></li>
<li class="past" title="Semantic HTML"><span class="bar" data-number="90"></span><span class="number">90</span></li>
<li class="past" title="Responsive Design"><span class="bar" data-number="80"></span><span class="number">80</span></li>
<li class="past" title="Keyboard Navigation"><span class="bar" data-number="70"></span><span class="number">70</span></li>
<li class="past" title="Screen Reader Testing"><span class="bar" data-number="70"></span><span class="number">70</span></li>
<li class="past" title="Color Contrast"><span class="bar" data-number="70"></span><span class="number">70</span></li>
<li class="past" title="ARIA"><span class="bar" data-number="70"></span><span class="number">70</span></li>
<li class="past" title="Axe, WAVE, Lighthouse"><span class="bar" data-number="60"></span><span class="number">60</span></li>
</ul>
</div>
<!-- Chart End -->
</div>
<div class="span4">
<!-- Chart Start -->
<div class="chart-horiz">
<!-- Actual bar chart -->
<ul class="chart">
<li class="title" title="IDE"></li>
<li class="past" title="VS Code"><span class="bar" data-number="90"></span><span class="number">90</span></li>
<li class="past" title="Cursor"><span class="bar" data-number="40"></span><span class="number">40</span></li>
<li class="title" title="Workflow"></li>
<li class="past" title="JIRA"><span class="bar" data-number="85"></span><span class="number">85</span></li>
<li class="past" title="Confluence"><span class="bar" data-number="65"></span><span class="number">65</span></li>
<li class="past" title="Slack"><span class="bar" data-number="95"></span><span class="number">95</span></li>
<li class="past" title="Github Copilot"><span class="bar" data-number="65"></span><span class="number">65</span></li>
<li class="title" title="Javascript MVC"></li>
<li class="past" title="Angular 2+"><span class="bar" data-number="75"></span><span class="number">75</span></li>
<li class="past" title="React.js"><span class="bar" data-number="65"></span><span class="number">65</span></li>
<li class="past" title="AngularJS"><span class="bar" data-number="60"></span><span class="number">60</span></li>
<li class="past" title="Handlebars.js"><span class="bar" data-number="40"></span><span class="number">40</span></li>
<li class="title" title="Cross Browser Testing"></li>
<li class="past" title="VMFusion - Virtual PC"><span class="bar" data-number="95"></span><span class="number">95</span></li>
<li class="past" title="Litmus"><span class="bar" data-number="85"></span><span class="number">85</span></li>
<li class="past" title="Browserstack"><span class="bar" data-number="85"></span><span class="number">85</span></li>
<li class="title" title="Content Management"></li>
<li class="past" title="Wordpress"><span class="bar" data-number="85"></span><span class="number">85</span></li>
<li class="past" title="Jekyll (multiple types)"><span class="bar" data-number="85"></span><span class="number">85</span></li>
<li class="title" title="Development Tools"></li>
<li class="past" title="Terminal/iTerm"><span class="bar" data-number="75"></span><span class="number">75</span></li>
<li class="past" title="npm"><span class="bar" data-number="85"></span><span class="number">85</span></li>
<li class="past" title="grunt/gulp/webpack"><span class="bar" data-number="70"></span><span class="number">70</span></li>
<li class="past" title="AWS"><span class="bar" data-number="40"></span><span class="number">40</span></li>
<li class="title" title="Debugging"></li>
<li class="past" title="Chrome inspect Dev Tools"><span class="bar" data-number="80"></span><span class="number">80</span></li>
<li class="past" title="console.log();"><span class="bar" data-number="75"></span><span class="number">75</span></li>
<li class="past" title="VS Code Debugger"><span class="bar" data-number="45"></span><span class="number">45</span></li>
</ul>
</div>
<!-- Chart End -->
</div>
<div class="span4">
<!-- Chart Start -->
<div class="chart-horiz">
<!-- Actual bar chart -->
<ul class="chart">
<li class="title" title="Version Control"></li>
<li class="past" title="SVN - Cornerstone"><span class="bar" data-number="65"></span><span class="number">65</span></li>
<li class="past" title="Git - SourceTree"><span class="bar" data-number="70"></span><span class="number">70</span></li>
<li class="past" title="GitHub"><span class="bar" data-number="80"></span><span class="number">80</span></li>
<li class="past" title="Git via terminal"><span class="bar" data-number="75"></span><span class="number">75</span></li>
<li class="title" title="Design Principles"></li>
<li class="past" title="Typography"><span class="bar" data-number="95"></span><span class="number">95</span></li>
<li class="past" title="Color Theory"><span class="bar" data-number="85"></span><span class="number">85</span></li>
<li class="past" title="Layout"><span class="bar" data-number="95"></span><span class="number">95</span></li>
<li class="title" title="Microsoft Office/Google"></li>
<li class="past" title="Outlook/Inbox"><span class="bar" data-number="90"></span><span class="number">90</span></li>
<li class="past" title="Word/docs"><span class="bar" data-number="65"></span><span class="number">65</span></li>
<li class="past" title="Excel/Sheets"><span class="bar" data-number="65"></span><span class="number">65</span></li>
<li class="title" title="Font Development"></li>
<li class="past" title="FontLab"><span class="bar" data-number="75"></span><span class="number">75</span></li>
<li class="past" title="Fontographer"><span class="bar" data-number="65"></span><span class="number">65</span></li>
<li class="title" title="CSS Development and UI"></li>
<li class="past" title="Bootstrap"><span class="bar" data-number="95"></span><span class="number">95</span></li>
<li class="past" title="Angular Material UI"><span class="bar" data-number="80"></span><span class="number">80</span></li>
<li class="past" title="Tailwind"><span class="bar" data-number="55"></span><span class="number">55</span></li>
<li class="past" title="Flex and Grid"><span class="bar" data-number="65"></span><span class="number">65</span></li>
</ul>
<p class="platform" style="margin:30px 0 0 30px;">
<img src="img/apple-logo.png" alt="David Manzer - Mac User" loading="lazy" /> <span style="color:#7F8289; font-size:14px;">Platform of choice.</span>
</p>
</div>
<!-- Chart End -->
</div>
</div>
<div class="row"><hr /></div>
<!--Experience Section-->
<div id="experience" name="experience" class="page-alternate" style="padding-bottom:0;">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">My Experience</h2>
<h3 class="title-description" style="text-wrap: balance;">Over 25 years of Professional Experience in Graphic Design, Marketing, Art Direction/Management, and Web/Software Development.</h3>
</div>
</div>
</div>
<!-- Start Recent Jobs -->
<div class="row">
<div class="span12 profile">
<h3 class="profile-name">Softrams/Tria Federal <a href="https://mearis.cms.gov/" target="_blank" alt="David Manzer - Sr UI Developer"><i class="fa fa-external-link pull-right res"></i></a></h3>
<h4><small><span style="color:#fff;">Sr. UI Developer</span> — August 2019 - June 2025</small></h4>
<p class="profile-description">I was part of a Scrum team building the Center for Medicare & Medicaid Services (CMS) MEARIS application system using Angular 17, TypeScript, Node.js, SCSS, Angular Material, Bootstrap, and DynamoDB on AWS. We used GitHub for version control, Jasmine for unit testing, and Jenkins for CI/CD. As a SAFe-certified developer (for Teams and DevOps), I worked within an Agile framework alongside 9 developers, 6 testers, and 6 product owners. I actively mentored team members, promoted accessibility best practices, and served as the go-to resource for layout, responsive design, and CSS architecture.</p>
<ul>
<li>Developed accessible, responsive UIs for the MEARIS (CMS Center for Medicare & Medicaid Services) platform using Angular, TypeScript, SCSS, Bootstrap 5, and Angular Material, setting a high standard for quality and 508 compliance.</li>
<li>Designed and implemented modular, high-quality client-side code using Angular and TypeScript, developing cohesive modules, directives, pipes, and utilities to enhance component functionality and improve user experience.</li>
<li>Collaborated with UX designers to craft polished Figma designs, then translated them into reusable, scalable Angular components, contributing to the foundation of a consistent UI design system.</li>
<li>Proactively resolved mobile UI bugs outside of sprint scope, independently tracking and managing issues by creating JIRA backlog tickets for future sprint efforts.</li>
<li>Frequently consulted as the team's UI/CSS subject matter expert and mentored developers on styling, accessibility and overall semantic structural build quality.</li>
<li>Presented regularly in bi-weekly internal developer talks to share best practices, knowledge share, pair program, debug, and foster cross-team collaboration.</li>
</ul>
</div>
</div>
<div class="row"><hr /></div>
<div class="row">
<div class="span12 profile">
<h3 class="profile-name">Kaseya <a href="https://www.kaseya.com" target="_blank" alt="David Manzer - Front End Developer"><i class="fa fa-external-link pull-right res"></i></a></h3>
<h4><small><span style="color:#fff;">Front End Developer</span> — June 2016 - August 2019</small></h4>
<p class="profile-description">As a member of the Digital Marketing team, I was responsible for front-end development and ongoing maintenance across a suite of marketing and product websites supporting Kaseya’s IT software solutions. I handled daily development and design of static content through WordPress and served as the primary Web Developer and Web Master for IT Glue Corporation. My responsibilities included building new features, maintaining site structure, and supporting brand-specific web properties as needed.</p>
<ul>
<li>Developed and maintained responsive features across multiple branded sites using HTML5, CSS3, JavaScript, PHP, and Bootstrap 4.</li>
<li>Designed and integrated visual assets using Photoshop and Illustrator into a WordPress, Drupal, and Jekyll CMS environments.</li>
<li>Built Design Systems and scalable layouts with SASS, Flexbox, and ACF-based custom plugins; optimized workflows using Gulp, npm, and Git.</li>
<li>Crafted SEO strategies, Implemented Google Tag Manager and utilized MySQL-based solutions to track site performance and support dynamic content on multiple domains.</li>
<li>Collaborated with international and domestic teams on design, marketing, and backend implementations to deliver cohesive, data-informed digital experiences.</li>
</ul>
</div>
</div>
<!-- Start Recent Jobs -->
<div class="row"><hr /></div>
<div class="row">
<!-- WAW Job -->
<div class="span4 profile">
<div class="image-wrap">
<div class="hover-wrap">
<span class="overlay-img"></span>
<span class="overlay-text-thumb">Web Designer<br />Front End Developer</span>
</div>
<img src="img/profile/profile-web-01.jpg" alt="Web Designer - Worldatwork" loading="lazy">
</div>
<h3 class="profile-name">Worldatwork <a href="https://www.worldatwork.org" target="_blank"><i class="fa fa-external-link pull-right res" alt="David Manzer - Web Designer"></i></a></h3>
<h4><small><span style="color:#fff;">Web Designer / Front End Developer</span><br />
Sept. 2013 - June 2016</small></h4>
<p class="profile-description">Ongoing web page maintenance and development of a vast site structure exceeding 40,000 html and jsp pages. Consistent work with internal marketing managers and stakeholders on custom revenue generating web campaigns, promotions and landing pages. Design and development of custom event web sites, from the ground up, for 6 major annual events that generates a the greater portion of total annual revenue. Key web designer on redesign efforts for high traffic areas of the site. Key role in introducing forward thinking web technologies that would save development time, increase production and overall page performance. Technologies used on a daily basis include; HTML5, CSS3, jQuery, Javascript, JSON, Ajax, JSP, grunt, node.js, express, Bower, git, Atom.io, terminal, JIRA, SourceTree, Adobe CS6 Suite in mac environment. Cross browser debugging and compatibility performed in a mac and virtual PC environment.</p>
</div>
<!-- End WAW Job -->
<!-- Start Anderson Job -->
<div class="span4 profile">
<div class="image-wrap">
<div class="hover-wrap">
<span class="overlay-img"></span>
<span class="overlay-text-thumb">Front End Developer</span>
</div>
<img src="img/profile/profile-web-02.jpg" alt="Front End Developer - Anderson Advertising" loading="lazy">
</div>
<h3 class="profile-name">Anderson Advertising <a href="https://www.anderson-adv.com/" target="_blank"><i class="fa fa-external-link pull-right res"></i></a></h3>
<h4><small><span style="color:#fff;">Front End Developer</span><br />
March 2013 - Sept. 2013</small></h4>
<p class="profile-description">Primary responsibilities included meeting with clients, designing, developing and maintaining new and original web content for agency clients. This included email development, html website development, wordpress web development and flash ad creation. Primarily front end development utilizing Bootstrap, HTML5, CSS3, jQuery, PHP, Flash, Wordpress, Dreamweaver, Photoshop, Illustrator, and various other web development tools. Creation of email marketing templates and content for new and existing projects. Extensive browser debugging and testing using Litmus. Involvement in projects for the following clients; Harkins Theaters, Phoenix Coyotes, Mayo Clinic, Desert Schools, Blue Wasabi, Hamra Jewelers, and Phoenix Children's Hospital. Other duties included identity design, print layout, web banner design and flash ad creation.</p>
</div>
<!-- End Anderson Job -->
<!-- Start AMF Job -->
<div class="span4 profile">
<div class="image-wrap">
<div class="hover-wrap">
<span class="overlay-img"></span>
<span class="overlay-text-thumb">Web Designer</span>
</div>
<img src="img/profile/profile-web-03.jpg" alt="Web Designer - AngelMedFlight" loading="lazy">
</div>
<h3 class="profile-name">AngelMedFlight <a href="https://www.angelmedflight.com/" target="_blank"><i class="fa fa-external-link pull-right res"></i></a></h3>
<h4><small><span style="color:#fff;">Web Designer</span><br />
Sept. 2012 - March 2013</small></h4>
<p class="profile-description">Responsible for the design, maintenance and overall user experience of angelmedflight.com and moversandshuckers.com. Creating clean yet complex designs while keeping them user-friendly and intuitive was key. Day to day tasks include creating original web content and design concepts while developing them out using proven SEO practices and cross-browser testing methods. Tools utilized are HTML5, XHTML, CSS, PHP, firebug, Wordpress, Photoshop, Illustrator and Dreamweaver while working in a MAC environment. Additional functions would include designing and sending intuitive and attractive email marketing campaigns, creating and implementing dynamic content using jQuery and CSS3 and assisting in video production. Conducting photo shoots for website content and utilizing Canon DSLR photography. Providing weekly web development updates and providing creative input in strategic business development meetings that create effective business opportunities for future growth.</p>
</div>
<!-- End AMF Job -->
</div>
<div class="row"><hr /></div>
<div class="row">
<!-- Start DAS Job -->
<div class="span12 profile">
<h3 class="profile-name">Digital Art Solutions</h3>
<h4><small><span style="color:#fff;">Graphic Designer, Senior Designer, Art Director</span> — October 2003 - July 2012</small></h4>
<p class="profile-description"><strong>Design, Illustration & Layout:</strong><br />I've Designed packaging for art and software products; books, cds, cd sleeves, dvd cases and manuals as well as tradeshow posters and banners, then output these items using large format printing technologies. I've also Illustrated designs and clip art using traditional skills as well as the latest software technologies as well as created original typestyle TrueType fonts, then packaged for sales. I've created print and web ads for national publications, flyers for shipping and trade show marketing, brochures for products and training events, coupons and direct mail for distribution, 300 page book designs and layouts, static and animated gif web ads for multiple web publications and affiliates, web banners for advertising products and monthly specials while sustained a branding standard.</p>
<p class="profile-description"><strong>Art Direction & Management:</strong><br />I participated in management meetings, strategized corporate success and revenue building activities. Directed an art team of 2 graphic artists and 1 web developer and wrote and conducted art department performance reviews on an annual basis for 5 years. I created, organized and managed art department file structure and performed weekly backups. I held production meetings with staff, created and managed art production schedules. I conducted and oversaw the art and design research of new trends and technologies. I worked directly with printers on quotes, coordinated printing needs for dozens of products, provided press ready files, then oversaw, reviewed and scrutinized proofs for final product. I was also responsible for the overall look and feel of the entire corporate identity.</p>
<p class="profile-description"><strong>Marketing Strategies & Web Interaction:</strong><br />I developed, designed and implemented marketing strategies with art and marketing team and worked with multiple publication managers while coordinating and preparing art files for timely releases. I helped develop the most comprehensive web experience for the company; both graphical and analytical.</p>
</div>
</div>
<!-- End DAS Job -->
<div class="row"><hr /></div>
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">Download My Resume <a href="doc/David_Manzer_Resume.docx" target="_blank" alt="David Manzer - Resume"><i class="fa fa-file-pdf-o"></i></a></h2>
</div>
</div>
</div>
</div>
</div>
</div><!--.container-->
</div><!--#skills section-->
<!-- Contact Section -->
<div id="contact" name="contact" class="page">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">Get in Touch</h2>
<h3 class="title-description">I look forward to chatting with you!</h3>
</div>
</div>
</div>
<!-- End Title Page -->
<!--Angular Form-->
<div class="row" ng-controller="formController">
<div class="span9">
<form id="contact-form" class="contact-form" name="userForm">
<p class="contact-name name" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<span class="fa fa-user" ng-class="{ success: userForm.name.$valid, clean: userForm.name.$invalid }"></span>
<input id="contact_name" type="text" placeholder="Full Name" name="name" ng-model="user.name" required>
<span class="fa fa-user warning" ng-show="userForm.name.$invalid && !userForm.name.$pristine"></span>
</p>
<p class="contact-email email" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<span class="fa fa-envelope-o" ng-class="{ success: userForm.email.$valid, clean: userForm.email.$invalid }"></span>
<span class="fa fa-envelope-o warning" ng-show="userForm.email.$invalid && !userForm.email.$pristine"></span>
<input id="contact_email" required pattern="^\S+@\S+\.\S+$" type="email" placeholder="Email Address" name="email" ng-model="user.email" required>
</p>
<p class="contact-message message" ng-class="{ 'has-error' : userForm.message.$invalid && !userForm.message.$pristine }">
<span class="fa fa-comment" ng-class="{ success: userForm.message.$valid, clean: userForm.message.$invalid }"></span>
<textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40" ng-model="user.message" ng-minlength="3" ng-maxlength="250" required></textarea>
</p>
<input type="hidden" name="_subject" value="New submission!" />
<div class="row button-area">
<div class="span12 invalid-alerts">
<span ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="danger">Your name is required.</span>
<span ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="danger">Enter a valid email.</span>
</div>
<div class="span12 contact-submit">
<!-- <div class="g-recaptcha" data-theme="dark" data-sitekey="6Lc3WawqAAAAAFEkN0YCBgU_cio84MJ2DOOiSETY"></div> -->
<input class="submit" type="submit" value="Send your Message" ng-disabled="userForm.$invalid"></input>
</div>
</div>
</form>
</div>
<div class="span3">
<div class="contact-details">
<h3>Contact Details</h3>
<ul>
<li>480-570-6417</li>
<li>
David Manzer
<br>
Mesa, Arizona
<br>
United States
</li>
</ul>
</div>
</div>
</div>
<!-- End Contact Form -->
</div>
</div>
<!-- End Contact Section -->
<!-- Socialize -->
<div id="social-area" class="page">
<div class="container">
<div class="row">
<div class="span12">
<nav id="social">
<ul>
<li><a href="https://www.behance.net/dmanzer2" title="David Manzer on Behance" target="_blank"><span class="fa fa-behance"></i></a></li>
<li><a href="https://www.linkedin.com/in/david-manzer-bb081855?trk=nav_responsive_tab_profile" title="David Manzer on LinkedIn" target="_blank"><span class="fa fa-linkedin"></span></a></li>
<li><a href="https://github.com/dmanzer2" title="github" target="_blank" alt="David Manzer on github"><span class="fa fa-github"></span></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- End Socialize -->
<!-- Footer -->
<footer>
<p class="credits">©<span id="year"></span> David Manzer<br>
Sr UI Developer | Mesa, Arizona</p>
<p class="footer-keywords" style="font-size: 0.8em; color: #666; margin-top: 10px;">
Angular/React Developer | TypeScript | JavaScript | HTML5 | CSS3 | SCSS | TailwindCSS | Bootstrap | Responsive Design | Accessibility Expert | SEO | Web Design | Front End Developer | UI Developer | UX Developer | Web Developer | Font Developer | Graphic Designer | Art Director
</p>
</footer>
<!-- End Footer -->
<!-- Back To Top -->
<a id="back-to-top" href="#">
<i class="font-icon-arrow-simple-up"></i>
</a>
<!-- End Back to Top -->
<!-- Js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/supersized.3.2.7.min.js" defer></script> <!-- Slider -->
<script src="js/waypoints.js" defer></script> <!-- WayPoints -->
<script src="js/waypoints-sticky.js" defer></script> <!-- Waypoints for Header -->
<script src="js/jquery.isotope.js" defer></script> <!-- Isotope Filter -->
<script src="js/jquery.fancybox.pack.js" defer></script> <!-- Fancybox -->
<script src="js/plugins.js" defer></script><!-- Contains: jPreloader, jQuery Easing, jQuery ScrollTo, jQuery One Page Navi -->
<script src="js/main.js" defer></script>
<!-- End Js -->
<!-- Hotjar Tracking Code for //www.davidmanzer.info -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:184431,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</body>
</html>