-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
328 lines (320 loc) · 18.7 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
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Chase Courington - Mobile Web</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">
<meta name="viewport" content="target-densitydpi=medium-dpi">
<link id="page_favicon" href="assets/images/favicon_16x16.ico" rel="icon" type="image/x-icon">
<link href="assets/styles/compiled/index.css" media="all" rel="stylesheet" type="text/css">
<link href="assets/webfonts/ss-standard.css" media="all" rel="stylesheet" type="text/css">
<link href="assets/webfonts/ss-social.css" media="all" rel="stylesheet" type="text/css">
<!-- SCRIPTS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="assets/scripts/modernizr.custom.82375.js"></script>
<script type="text/javascript" src="assets/webfonts/ss-standard.js"></script>
<script type="text/javascript" src="assets/webfonts/ss-social.js"></script>
<script type="text/javascript" src="assets/scripts/offCanvas.js"></script>
<!-- END SCRIPTS -->
<!-- Welcome! This was all thrown together fairly quickly and will continue to evolve and get better. Please let me know about bugs, I'm working through some now. Everything written by hand unless otherwise noted. @chasecourington -->
</head>
<body>
<!-- TOP BAR -->
<header class="row">
<nav>
<a href="#navigation" class="ss-standard ss-icon pull_left menu-button">rows</a>
<ul>
<li class="pull_right ss-icon ss-social-circle"><a href="http://twitter.com/chasecourington" title="twitter">twitter</a></li>
<li class="pull_right ss-icon ss-social-circle"><a href="http://www.linkedin.com/in/chasecourington" title="linkedin">linkedin</a></li>
<li class="pull_right ss-icon ss-social-circle"><a href="http://dribbble.com/chase" title="dribbble">dribbble</a></li>
<li class="pull_right ss-icon ss-social-circle"><a href="https://github.com/courington" title="github">octocat</a></li>
</ul>
</nav>
</header>
<!-- END TOP BAR -->
<!-- OFF CANVAS NAV -->
<aside>
<nav class="row" role="navigation" id="navigation">
<ul>
<li class="border-bottom"><a href="#about">About Me</a></li>
<li class="border-bottom"><a href="#resume" class="showResume">Resume</a></li>
<li><a href="#work">Work Samples</a>
<ul>
<li class="border-bottom"><a href="#work-1">Slinggit</a></li>
<li class="border-bottom"><a href="#work-2">Pixorial</a></li>
<li class="border-bottom"><a href="#work-3">Air Supremacy</a></li>
<li class="border-bottom"><a href="#work-4">Streamline</a></li>
<li class="border-bottom"><a href="#work-5">Slinggit iOS</a></li>
<li class="border-bottom"><a href="#work-6">Pixorial iOS</a></li>
<li class="border-bottom"><a href="#work-7">SimplBrew iOS</a></li>
</ul>
</li>
<li class="border-bottom"><a href="#blog">Blog</a></li>
<li class="border-bottom"><a href="#contact">Contact</a></li>
</ul>
</nav>
</aside>
<!-- END OFF CANVAS NAV -->
<!-- MAIN CONTENT WRAPPER -->
<div class="wrapper" role="main">
<!-- ABOUT -->
<section class="row" id="about">
<header class="row">
<h1>I am a designer who thinks in code.</h1>
</header>
<article class="pull_left">
<figure class="pull_right col3">
<img src="assets/images/hero_lumberJack_420x420.jpg" height="auto" width="100%" title="hero image of chase" alt="chase next to a wooden lumberjack in south fork, co" />
<figcaption class="border-bottom" >Posing with a lumberjack in South Fork, CO <small>August 2012</small></figcaption>
</figure>
<p>I design for the user and build interfaces for the web and mobile devices in Denver, CO. Being a part of small teams I am used to wearing many hats from researcher and strategist to coder and illustrator. "Do more with less" is something that I always strive for; in my code this is keeping it light and clean, in design it's focusing on the message without superflous elements and in teams it's owning the work.</p>
<p>When I'm not working on projects I can be found exploring the rocky mountains, expanding my mind on <a href="http://www.coursera.com/" title="Coursera free online classes">Coursera</a>, enjoying a craft beer, attending or organizing local tech startup events (<a href="http://www.meetup.com/denver-mobile-device-lab" title="Denver Mobile Lab meetup">Denver Mobile Lab</a>) and relaxing with my wife, family and friends.</p>
<p>I love to talk with people about mobile web, responsive web design/development and web standards. Also beer and stuff in the mountains like hiking and snowboarding. Let's chat.</p>
<ul class="row">
<li class="pull_left ss-icon ss-social-circle"><a href="http://twitter.com/chasecourington" title="twitter">twitter</a></li>
<li class="pull_left ss-icon ss-social-circle"><a href="http://www.linkedin.com/in/chasecourington" title="linkedin">linkedin</a></li>
<li class="pull_left ss-icon ss-social-circle"><a href="http://dribbble.com/chase" title="dribbble">dribbble</a></li>
<li class="pull_left ss-icon ss-social-circle"><a href="https://github.com/courington" title="github">octocat</a></li>
<li class="pull_left ss-icon ss-social-circle"><a href="mailto:[email protected]" title="email">mail</a></li>
</ul>
</article>
</section>
<!-- END ABOUT -->
<!-- WORK -->
<section class="row border-bottom" id="work">
<h1>Work Samples</h1>
<article id="work-1">
<h1 class="border-bottom">Slinggit</h1>
<div class="work-thumbnails">
<img src="assets/images/work/slinggit/work_slinggit_960x446.jpg" title="Slinggit.com responsive web app" alt="screen shot of Slinggit.com for small screen" height="auto" width="100%" />
</div>
<dl class="row">
<dt>Role:</dt>
<dd>Co-Founder, UI/UX, HTML, SASS, jQuery, Rails</dd>
<dt>Dates:</dt>
<dd>April 2012 - Present</dd>
<dt>Meta:</dt>
<dd>Responsive web app designed with emphasis on speed and low footprint. iOS user interface. http://www.slinggit.com</dd>
<dt>URL:</dt>
<dd><a href="http://www.slinggit.com/" title="slinggit">slinggit.com</a></dd>
</dl>
</article>
<article id="work-2">
<h1 class="border-bottom">Pixorial</h1>
<div class="work-thumbnails">
<img src="assets/images/work/pixorial/work_pixorial_960x446.jpg" title="Slinggit.com responsive web app" alt="screen shot of Slinggit.com for small screen" height="auto" width="100%" />
</div>
<dl class="row">
<dt>Role:</dt>
<dd>UI/UX, HTML, CSS/SASS, jQuery, Rails</dd>
<dt>Dates:</dt>
<dd>February 2012 - Present</dd>
<dt>Meta:</dt>
<dd>Design and Front End Development for a small startup building a cloud storage, video editing and sharing application. I do things like write/moderate usability tests, wireframe, design visual elements, build prototypes to test and write product HTML, CSS and JS.</dd>
<dt>URL:</dt>
<dd><a href="http://www.pixorial.com/" title="pixorial">pixorial.com</a></dd>
</dl>
</article>
<article id="work-3">
<h1 class="border-bottom">Air Supremacy</h1>
<div class="work-thumbnails">
<img src="assets/images/work/air-supremacy/work_air-supremacy_960x446.jpg" title="Slinggit.com responsive web app" alt="screen shot of Slinggit.com for small screen" height="auto" width="100%" />
</div>
<dl class="row">
<dt>Role:</dt>
<dd>UI/UX, HTML, CSS, jQuery</dd>
<dt>Dates:</dt>
<dd>June 2012</dd>
<dt>Meta:</dt>
<dd>Work with Air Supremacy to move e-commerce hosting to Big Cartel platform and design 'mobile first' custom theme.</dd>
<dt>URL:</dt>
<dd><a href="http://www.air-supremacy.com/" title="air supremacy">air-supremacy.com</a></dd>
</dl>
</article>
<article id="work-4">
<h1 class="border-bottom">Streamline Engineering</h1>
<div class="work-thumbnails">
<img src="assets/images/work/streamline/work_streamline_960x446.jpg" title="Streamline Engineering responsive website" alt="screen shot of streamline-engineering.com" height="auto" width="100%" />
</div>
<dl class="row">
<dt>Role:</dt>
<dd>UI, HTML, CSS, jQuery</dd>
<dt>Dates:</dt>
<dd>December 2011</dd>
<dt>Meta:</dt>
<dd>Work with Dominic Aiello to brand, design and develop the web pressence for his mechanical engineering consultancy, Streamline Engineering.</dd>
<dt>URL:</dt>
<dd><a href="http://www.streamline-engineering.com/" title="streamline engineering">streamline-engineering.com</a></dd>
</dl>
</article>
<article id="work-5">
<h1 class="border-bottom">Slinggit iOS</h1>
<div class="work-thumbnails">
<img src="assets/images/work/slinggit/work_slinggit_ios_960x446.jpg" title="Slinggit iOS app mocks" alt="mocks of slinggit ios app" height="auto" width="100%" />
</div>
<dl class="row">
<dt>Role:</dt>
<dd>UI/UX/IxD</dd>
<dt>Dates:</dt>
<dd>April 2012 - Present</dd>
<dt>Meta:</dt>
<dd>I work directly with Slinggit iOS developer/co-founder to design intuitive interactions based on user feedback, prototyping and mobile/iOS design patterns as well as visual assets.</dd>
<dt>URL:</dt>
<dd><a href="http://itunes.apple.com/us/app/slinggit/id543458895?mt=8" title="pixorial ios app">Pixorial iOS app store listing</a></dd>
</dl>
</article>
<article id="work-6">
<h1 class="border-bottom">Pixorial iOS</h1>
<div class="work-thumbnails">
<img src="assets/images/work/pixorial/work_pixorial_ios_960x446.jpg" title="Pixorial iOS app" alt="screen shot of pixoiral ios app" height="auto" width="100%" />
</div>
<dl class="row">
<dt>Role:</dt>
<dd>UI/UX/IxD</dd>
<dt>Dates:</dt>
<dd>February 2012 - Present</dd>
<dt>Meta:</dt>
<dd>I work directly with the Pixorial iOS developer to design intuitive interactions and visual assets for the native video capture app for iOS based off user research, mobile design patterns and rapid prototyping.</dd>
<dt>URL:</dt>
<dd><a href="http://itunes.apple.com/us/app/pixorial/id437921208?mt=8" title="pixorial ios app">Pixorial iOS app store listing</a></dd>
</dl>
</article>
<article id="work-7">
<h1 class="border-bottom">SimplBrew</h1>
<div class="work-thumbnails">
<img src="assets/images/work/simplbrew/work_simplbrew_ios_960x446.jpg" title="SimplBrew ios ui mocks" alt="ui mocks for simplbrew ios app" height="auto" width="100%" />
</div>
<dl class="row">
<dt>Role:</dt>
<dd>UI/UX</dd>
<dt>Dates:</dt>
<dd>November 2011 - Present</dd>
<dt>Meta:</dt>
<dd>A iOS app for recreational/novice homebrewers featuring simple ingredient lists, brew tracking, calendar and timer. This has yet to be developed.</dd>
</dl>
</article>
</section>
<!-- END WORK -->
<!-- RESUME -->
<section class="row border-bottom" id="resume">
<h1>Resume</h1>
<a href="assets/resume-10-2012.pdf" title="downloadable resume" class="row"><span class="ss-icon ss-standard">file</span>Downloadable Resume</a>
<header class="col4 pull_left vcard">
<hgroup>
<h1 class="fn border-bottom">Chase Courington</h1>
<h2>UX Design & UI Development</h2>
<h3 class="adr region">Denver, CO</h3>
</hgroup>
<ul>
<li class="tel"><span class="ss-icon ss-standard">phone</span>303-330-5997</li>
<li><a href="http://twitter.com/chasecourington" title="twitter"><span class="ss-icon ss-social">twitter</span>@chasecourington</a></li>
<li><a href="mailto:[email protected]" title="email"><span class="ss-icon ss-social">email</span>[email protected]</a></li>
</ul>
</header>
<article class="col4 pull_right">
<h1 class="border-bottom">Skills</h1>
<dl>
<div class="col4 pull_left">
<dt>Web Development</dt>
<dd>HTML(5)<div class="status"><span class="col7"></span></div></dd>
<dd>CSS/SASS<div class="status"><span class="col7"></span></div></dd>
<dd>jQuery<div class="status"><span class="col3"></span></div></dd>
<dd>Javascript<div class="status"><span class="col2"></span></div></dd>
<dd>Rails<div class="status"><span class="col2"></span></div></dd>
<dd>PHP<div class="status"><span class="col1"></span></div></dd>
</div>
<div class="col4 pull_left">
<dt>Design</dt>
<dd>Photoshop<div class="status"><span class="col7"></span></div></dd>
<dd>Illustrator<div class="status"><span class="col7"></span></div></dd>
<dd>Fireworks<div class="status"><span class="col3"></span></div></dd>
<dd>InDesign<div class="status"><span class="col6"></span></div></dd>
<dd>Balsamiq<div class="status"><span class="col5"></span></div></dd>
<dd>Pen & Paper<div class="status"><span class="col7"></span></div></dd>
</div>
</dl>
</article>
<article class="col4 pull_left">
<h1 class="border-bottom">Experience</h1>
<dl>
<dt><a href="http://www.slinggit.com/" title="slinggit">Slinggit, llc</a></dt>
<dd>April 2012 - Present</dd>
<div class="ss-standard ss-dropdown pull_right"></div>
<dd class="job-duties">Slinggit is a native iOS and responsive web application allowing users to quickly sell items through their Facebook and Twitter accounts. As a co-founder I focus on the usability of the application across web and native platforms with a passion for the mobile experience and get my hands dirty with the media queries, sass and even some jquery and rails. Being a team of 4 I have direct roll in the information architecture, interaction design, visual design and front-end code.</dd>
<dd class="work-link"><a href="http://www.slinggit.com/" title="slinggit">slinggit.com</a></dd>
<dt>Pixorial, Inc</dt>
<dd>February 2012 - Present</dd>
<div class="ss-standard ss-dropdown pull_right"></div>
<dd class="job-duties">Pixorial helps you tell the stories in your videos. As a member of a small startup I wear many hats from designing and moderating usability tests to wireframing and coding html, css, javascript and even some rails. When I joined the Pixorial the DOM was littered with deprecated elements and the front-end was heavy and slow. I have worked to refactor code to use semantic HTML5 elements, reduce HTTP requests with CSS3 and design with progressive enhancement using tools like Modernizr and concepts like mobile-first design/development. I also work closely with a native iOS/Android developer to design interactions and visual assets for native applications ranging from iPhone to Google TV.</dd>
<dd class="work-link"><a href="http://www.pixorial.com/" title="pixorial">pixorial.com</a></dd>
<dt>Vail Resorts Management Company</dt>
<dd>September 2010 - February 2012</dd>
<div class="ss-standard ss-dropdown pull_right"></div>
<dd class="job-duties">Graphic Designer for the corporate marketing department responsible for visual asset creation and management across all brands in the Vail Resorts' portfolio. Worked with internal customers ranging from the Executive Committee to resort marketing departments to deliver visual assets for print, web and broadcast. Worked with external agencies BBDO, Spin Creative Studio and Sapient Nitro on EpicMix, Epic Pass and other projects for web and print.</dd>
<dd class="work-link"><a href="http://www.snow.com/" title="vail resorts">snow.com</a></dd>
<dt>SOS Outreach/Americorps VISTA</dt>
<dd>April 2007 - June 2008 & June 2009 - June 2010</dd>
<div class="ss-standard ss-dropdown pull_right"></div>
<dd class="job-duties">Americorps VISTA for 2 contracts with SOS Outreach managing programs in Colorado and at 13 locations nationwide. I performed duties including volunteer training, contract negotiation and design/development for print and web for a non-profit organization with less than 15 employees. Built HTML email templates and custom theme for Ning.com powered social networking website.</dd>
<dd class="work-link"><a href="http://www.sosoutreach.org/" title="sos outreach">sosoutreach.org</a></dd>
<dt>Chase Courington Design & Development</dt>
<dd>June 2009 - Present</dd>
<div class="ss-standard ss-dropdown pull_right"></div>
<dd class="job-duties">Print and web design and development for small businesses including Grand Photobooth Company, Streamline Engineering, Air Supremacy.</dd>
<dd class="work-link">See work for links</dd>
<dt>City and County of Denver</dt>
<dd>June 2008 - June 2009</dd>
<div class="ss-standard ss-dropdown pull_right"></div>
<dd class="job-duties">Case Manager in Denver Employment First, a team in the Denver Office of Economic Development operating job search and training programs for food stamp recipients for Colorado Department of Human Services.</dd>
<dd class="work-link"><a href="http://www.colorado.gov/cs/Satellite/CDHS-SelfSuff/CBON/1251581773899" title="cdhs listing for employment first">colorado.gov</a></dd>
</dl>
</article>
<article class="col4 pull_right">
<h1 class="border-bottom">Education</h1>
<dl>
<dt>George Mason University</dt>
<dd>Fairfax, VA</dd>
<dd>August 2002 - May 2007</dd>
<dd>BA in Conflict Analysis and Resolution</dd>
<dt>Rocky Mountain College of Art and Design</dt>
<dd>January 2009 - December 2009</dd>
<dd>Web Design Certificate</dd>
</dl>
</article>
</section>
<!-- END RESUME -->
<!-- BLOG -->
<section class="row border-bottom" id="blog">
<h1>Blog</h1>
<p>Coming Soon</p>
</section>
<!-- END BLOG -->
<!-- SOCIAL -->
<section class="row" id="contact">
<h1>Contact</h1>
<ul>
<li><a href="http://twitter.com/chasecourington" title="twitter"><span class=" ss-social-circle ss-twitter"></span>twitter</a></li>
<li><a href="http://www.linkedin.com/in/chasecourington" title="linked in"><span class="ss-social-circle ss-linkedin"></span>linkedin</a></li>
<li><a href="http://dribbble.com/chase" title="dribbble"><span class=" ss-social-circle ss-dribbble"></span>dribbble</a></li>
<li><a href="https://github.com/courington" title="github"><span class="ss-social-circle ss-octocat"></span>github</a></li>
<li><a href="mailto:[email protected]" title="email"><span class="ss-social-circle ss-mail"></span>[email protected]</a></li>
</ul>
</section>
<!-- END SOCIAL -->
</div>
<!-- END MAIN CONTENT WRAPPER -->
<!-- PAGE FOOT -->
<footer class="row">
<ul>
<li class="pull_right ss-icon ss-social-circle"><a href="http://twitter.com/chasecourington" title="twitter">twitter</a></li>
<li class="pull_right ss-icon ss-social-circle"><a href="http://www.linkedin.com/in/chasecourington" title="linked in">linkedin</a></li>
<li class="pull_right ss-icon ss-social-circle"><a href="http://dribbble.com/chase" title="dribbble">dribbble</a></li>
<li class="pull_right ss-icon ss-social-circle"><a href="https://github.com/courington" title="github">octocat</a></li>
<li class="pull_left ss-icon ss-standard"><a href="#about">navigateup</a></li>
</ul>
<small>©2012 Chase Courington <span>Handcrafted in Denver, CO</span></small>
</footer>
<!-- END PAGE FOOT -->
</body>
</html>