-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy paththings.html
More file actions
126 lines (111 loc) · 8.02 KB
/
Copy paththings.html
File metadata and controls
126 lines (111 loc) · 8.02 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
<!DOCTYPE html>
<html><head>
<title>Brice-Shatzer.com</title>
<link rel="shortcut icon" href="/favicon.png" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans|Lato:400,400italic,700italic" rel="stylesheet" type="text/css">
<!-- <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/style/normalize.css">
<link rel="stylesheet" type="text/css" href="/style/style.css">
</head>
<body>
<section class="top">
<img src="/images/face.png">
</section>
<section class="introduction">
<div>
<p>
Brice Shatzer has spent the past 7 years in the world of web development, working with clients of varying sizes on dozens of different platforms & technologies across the stack. He's comfortable with pretty much anything written in code, but primarily specializes in crafting bespoke and intriguing client-facing interactions. Having been academically trained in graphic design and digital media production, he has the rare combination of being design-aware as well as understanding, in depth, how to implement design for the web in an architecturally sound manner.
</p>
<p>
Currently Brice is working as a developer at <a href="http://www.doejo.com" target="_blank" rel="noopener noreferrer">Doejo</a>, a digital agency based in Chicago, IL.
</p>
<div class="contact">
<a href="http://www.google.com/recaptcha/mailhide/d?k=01tH4BYp88ul18it4X3TRjqQ==&c=vDH-TTviLPSOY7sec3O5XDImFTrU4qYNKttmFfYA1iA=" onclick="window.open('http://www.google.com/recaptcha/mailhide/d?k\07501tH4BYp88ul18it4X3TRjqQ\75\75\46c\75vDH-TTviLPSOY7sec3O5XDImFTrU4qYNKttmFfYA1iA\075', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" title="Reveal this e-mail address"> <i class="fa fa-fw fa-envelope"></i><span>View Email</span></a>
<i class="fa fa-fw fa-mobile" ></i><a href="tel:+13192392470" itemprop="telephone">319-239-2470</a></span>
</div>
</div>
</section>
<section class="recent-highlights">
<div>
<h2>Some Recent Highlights...</h2>
</div>
<div>
<div class="writeup">
<h3>Zorch Branded Merchandise</h3>
<p>
The branded merchandising company Zorch, came to <a href="http://doejo.com" target="_blank" rel="noopener noreferrer">Doejo</a> looking to update their web presence to better reflect the modern, technology-driven approach they use to help their customers on a daily basis. As the lone developer on the project, I successfully executed on the designer's ambitious vision, weaving a variety of innovative and technically novel pieces into single, seamless, platform-agnoistic experience. A full writeup on the project can be found on the <a href="http://doejo.com/blog/zorch%E2%80%8A-%E2%80%8A3d-animation-and-web-design/" target="_blank" rel="noopener noreferrer">Doejo blog</a>.<br>
The site is built using WordPress, with a collection of various JavaScript libraries and ultilities driving most of the client-facing interactivitiy. The site is currently live at <a href='http://www.zorch.com' target='_blank' rel="noopener noreferrer">www.zorch.com</a>.
</p>
</div>
<div class="visual">
<a href='http://www.zorch.com' target='_blank' rel="noopener noreferrer">
<img src="/images/test.gif" />
</a>
</div>
</div>
<div>
<div class="visual">
<a href='http://packback.co/' target='_blank' rel="noopener noreferrer">
<img src="/images/packback.png" />
</a>
</div>
<div class="writeup">
<h3>Packback Books</h3>
<p>
I worked with <a href='http://packback.co/' target='_blank'>Packback Books</a> to help build and launch version 2 of their digital text book rental platform. The site uses AngularJS on top of a Laravel back-end. Additionally, I was tasked with creating a common styling framework which is used across all of their various properties. It can be found <a href='https://github.com/packbackbooks/frontend-common' target='_blank'>here</a>.
</p>
</div>
</div>
<div>
<div class="writeup">
<h3>Front-End Refactoring: Sniff Out Code Smells Using Media Queries</h3>
<p>
An article written for the <a href="http://doejo.com/blog/sniff-out-code-smells-using-media-queries/" target="_blank" rel="noopener noreferrer">Doejo blog</a> that discusses some strategies around using JavaScript to painlessly audit an unfamiliar front-end code base with the goal of uncovering idiosyncrasies and flaws that could potentially cause issues maintaining or enhancing the project going forward.
</p>
</div>
<div class="visual">
<a href='http://doejo.com/blog/sniff-out-code-smells-using-media-queries/' target='_blank' rel="noopener noreferrer">
<img src="/images/doejo-blog.png" />
</a>
</div>
</div>
<div>
<div class="visual">
<a href='http://www.marriotttheatre.com/' target='_blank' rel="noopener noreferrer">
<img src="/images/marriott-theater.png" />
</a>
</div>
<div class="writeup">
<h3>The Marriott Theater in Lincolnshire</h3>
<p>
The Marriot Theatre needed a solution which allowed them to connect various different collections of information in a way that was coherent and usable for site users. I was responsible for architecting and implementing the solution from start to finish, using <a href='http://businesscatalyst.com/' target='_blank'>Adobe Business Catalyst's</a> custom web app framework.<br>
Working around the various quirks and limitations of the platform, I was able to build a system which brought the necessary data to the page in a structured manner which enabled the appropriate views to be built on the client side. Below you will find an early design diagram outlining the interactions between the different data collections. The site is currently live at <a href='http://www.marriotttheatre.com/' target='_blank' rel="noopener noreferrer">www.marriotttheatre.com</a>.
</p>
</div>
</div>
</section>
<!-- <section class="silloutte"><img src="/images/shadow.png"></section> -->
<section class="find-me">
<div>
<h2>On The Web</h2>
</div>
<a class="social" href="http://www.linkedin.com/pub/brice-shatzer/16/690/b26/">
<i class="fa fa-linkedin"></i>
</a>
<a class="social" href="https://twitter.com/_shatzer">
<i class="fa fa-twitter"></i>
</a>
<a class="social" href="https://github.com/briceshatzer">
<i class="fa fa-github"></i>
</a>
<a class="social" href="http://stackoverflow.com/users/1608016/brice-shatzer">
<i class="fa fa-stack-overflow"></i>
</a>
<a class="social" href="http://codepen.io/BriceShatzer/">
<i class="fa fa-codepen"></i>
</a>
</section>
<div class="color-block"></div>
</body>
</html>