-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
executable file
·249 lines (239 loc) · 11 KB
/
portfolio.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
<!-- <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8" />
<title>Portfolio</title>
</head>
<body>
-->
<!-- WEB -->
<div id='clockwork-girl' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<a href='http://www.clockworkgirl.com' target='_blank' ><h1>Clockwork Girl</h1></a>
<div class="portfolio-slides">
<img src="images/portfolio/web/clock/clock1.jpg" alt="img" />
<img src="images/portfolio/web/clock/clock2.jpg" alt="img" />
<img src="images/portfolio/web/clock/clock3.jpg" alt="img" />
<img src="images/portfolio/web/clock/clock4.jpg" alt="img" />
</div>
<p>This is the official website for the animated movie Clockwork Girl. I developed the
site in Flash (ActionScript 3.0) and did the flash animations. I helped collaborate
on the interaction and motion design. My role also included production work and video
encoding.
</p>
</div>
</div>
</div>
<div id='yellow-mountain' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<a href='http://www.yellow-mountain.com' target='_blank' ><h1>Yellow Mountain StoneWorks</h1></a>
<div class="portfolio-slides">
<img src="images/portfolio/web/yellow/yellow1.jpg" alt="img" />
<img src="images/portfolio/web/yellow/yellow2.jpg" alt="img" />
<img src="images/portfolio/web/yellow/yellow3.jpg" alt="img" />
<img src="images/portfolio/web/yellow/yellow4.jpg" alt="img" />
</div>
<p>This is a completely new custom site for Yellow Mountain StoneWorks. I did the front-end
development for this site (HTML/CSS/Javascript/JQuery). It was my first time integrating
with a Ruby on Rails backend.
</p>
</div>
</div>
</div>
<div id='amber-roberts' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<!--<a href='http://www.amber-roberts.com' target='_blank' ><h1>Amber Roberts Photography</h1></a> -->
<h1>Amber Roberts Photography</h1>
<div class="portfolio-slides">
<img src="images/portfolio/web/amber/amber1.jpg" alt="img" />
<img src="images/portfolio/web/amber/amber2.jpg" alt="img" />
<img src="images/portfolio/web/amber/amber3.jpg" alt="img" />
<img src="images/portfolio/web/amber/amber4.jpg" alt="img" />
</div>
<p>Amber Roberts Photography specializes in wedding and family portraits. I designed the site to
highlight Amber's portfolio and make her information easily accessible. This Flash site was
one of my first websites developed with ActionScript 3.0.
</p>
</div>
</div>
</div>
<div id='brian-decker' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<a href='http://www.briandecker.com' target='_blank' ><h1>Decker Design</h1></a>
<div class="portfolio-slides">
<img src="images/portfolio/web/brian/brian1.jpg" alt="img" />
<img src="images/portfolio/web/brian/brian2.jpg" alt="img" />
<img src="images/portfolio/web/brian/brian3.jpg" alt="img" />
<img src="images/portfolio/web/brian/brian4.jpg" alt="img" />
</div>
<p>Decker Design was created using Flash/AS3 with a WordPress CMS. I was the lead developer
for this site, but I also did some design work.
</p>
</div>
</div>
</div>
<!-- PROTOTYPES/DEMOS -->
<div id='ms-demos' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<h1>Microsoft Prototypes and Demos</h1>
<div class="portfolio-slides">
<img src="images/portfolio/proto/microsoft/demos1.jpg" alt="img" />
<img src="images/portfolio/proto/microsoft/demos2.jpg" alt="img" />
<img src="images/portfolio/proto/microsoft/demos3.jpg" alt="img" />
<img src="images/portfolio/proto/microsoft/demos4.jpg" alt="img" />
</div>
<p>I designed and implemented this Flash application to effectively display all the
prototypes and demos CrashShop created for Microsoft. Using screen capture software,
I created quick walk-through videos of each prototype. CrashShop
developed more than 40 Flash prototypes for Zune, Windows Mobile 6.5 and 7, and Courier.
These prototypes were developed rapidly for User Experience (UX) testing. I was the lead
developer on over half of these projects. Early demos were created with ActionScript 2.0.
and later in ActionScript 3.0. XML was used to manage assets and content.
</p>
</div>
</div>
</div>
<div id='karma-handset' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<h1>Karma Handset</h1>
<div class="portfolio-slides">
<img src="images/portfolio/proto/karma/karma1.jpg" alt="img" />
<img src="images/portfolio/proto/karma/karma2.jpg" alt="img" />
<img src="images/portfolio/proto/karma/karma3.jpg" alt="img" />
</div>
<p>This Flash prototype for Panasonic Air showed the potential user experience of an in-flight
entertainment controller. I developed a framework in ActionScript 2.0 using standard
mouse input to simulate gestures on a touch devices.
</p>
</div>
</div>
</div>
<div id='eco9' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<h1>Eco 9</h1>
<div class="portfolio-slides">
<img src="images/portfolio/proto/eco/eco1.jpg" alt="img" />
<img src="images/portfolio/proto/eco/eco2.jpg" alt="img" />
<img src="images/portfolio/proto/eco/eco3.jpg" alt="img" />
<img src="images/portfolio/proto/eco/eco4.jpg" alt="img" />
</div>
<p>Developed for Panasonic, this UI prototype was for train rider entertainment, information and services.
Built in Flash/AS3.0 and exported as an Android app, Eco 9 featured touch navigation, well-designed
menu systems, and video playback.
</p>
</div>
</div>
</div>
<div id='apex-2012' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<h1>Apex 2012 - Table & Wall</h1>
<div class="portfolio-slides">
<img src="images/portfolio/proto/apex/apex1.jpg" alt="img" />
<img src="images/portfolio/proto/apex/apex2.jpg" alt="img" />
<img src="images/portfolio/proto/apex/apex3.jpg" alt="img" />
<img src="images/portfolio/proto/apex/apex4.jpg" alt="img" />
<img src="images/portfolio/proto/apex/apex5.jpg" alt="img" />
<img src="images/portfolio/proto/apex/apex6.jpg" alt="img" />
<img src="images/portfolio/proto/apex/apex7.jpg" alt="img" />
<img src="images/portfolio/proto/apex/apex8.jpg" alt="img" />
</div>
<p>This was a fun project. Lasers! I was the UI developer for this project. Using
ActionScript 3.0, I developed two Adobe AIR application: a touch wall and a touch
table. Each AIR application received data from laser sensors via socket servers. This
data was used to calculate the touch interactions that drove the UI. The apps also
communicated with a web server via GET and POST requests to send user data between
the Wall and the Table. I worked closely with the interaction designers and other
developers to ensure the systems information was managed and distributed correctly.
</p>
</div>
</div>
</div>
<div id='cisco-lego' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<h1>Cisco Lego</h1>
<div class="portfolio-slides">
<img src="images/portfolio/proto/cisco/cisco1.jpg" alt="cisco1" />
<img src="images/portfolio/proto/cisco/cisco2.jpg" alt="cisco2" />
<img src="images/portfolio/proto/cisco/cisco3.jpg" alt="cisco3" />
<img src="images/portfolio/proto/cisco/cisco4.jpg" alt="cisco4" />
<img src="images/portfolio/proto/cisco/cisco5.jpg" alt="cisco5" />
</div>
<p>Worked with Synapse, a local industrial design company, to create an elaborate demonstration
of a home networking system called Lego. It comprised of several devices, including
a main TV display, desktop computer, laptop, web cam, digital picture frame, wireless
printer, and networking station. I developed five different user interfaces: three Flash
applications, an AIR app, and a canned web experience. Every UI was connected by a
central network and communicated via socket servers. Team work was crucial part of this
project to ensure the commands sent over the servers were correct. I encoded several videos
for the TV display.
</p>
</div>
</div>
</div>
<!-- VIDEOS -->
<div id='surya-catalog' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<h1>Surya - Fall 2011 Catalog</h1>
<div class="flex-video widescreen">
<iframe width="560" height="315" src="http://www.youtube.com/embed/a4NBmeof87g"></iframe>
</div>
<p>Worked with Surya Rugs to create an informational video to accompany their seasonal
catalog. Given the script and the voice over, I created each shot in this video in
After Effects using images of the Surya catalog. I edited and encoded the video using
Final Cut Pro.
</p>
</div>
</div>
</div>
<div id='surya-quality' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<h1>Surya - Power of Quality</h1>
<div class="flex-video widescreen">
<video class="vid" width="640" height="360" poster="videos/surya/surya-quality-poster.jpg" controls >
<source src="videos/surya/PowerOfQuality.mp4" type="video/mp4">
<source src="videos/surya/PowerOfQuality.ogv" type="video/ogg" />
<source src="videos/surya/PowerOfQuality.webm" type="video/webm" />
Sorry, the video is not working properly.
</video>
</div>
<p>This video provides an intimate look into the process of how Surya makes their rugs.
I did post-production work as the editor, music and voice-over supervisor.<br />
<!-- <span class='ie-link'>Video not displaying? <a href="http://www.kenecaswell.com/videos/surya/PowerOfQuality.mp4" target="_blank" >Click here</a>.</span> -->
</p>
</div>
</div>
</div>
<div id='cs-reel' class='twelve columns'>
<div class='row'>
<div class='nine columns centered'>
<h1>CrashShop Prototypes Reel</h1>
<div class="flex-video widescreen">
<video class="vid" width="640" height="360" poster="videos/reel/reel-poster.jpg" controls >
<source src="videos/reel/reel-640.mp4" type="video/mp4">
<source src="videos/reel/reel-640.theora.ogv" type="video/ogg" />
<source src="videos/reel/reel-640.webm" type="video/webm" />
Sorry, the video is not working properly.
</video>
</div>
<p>Produced this reel to showcase all the prototypes and demos CrashShop Design has
created. I screen captured over 20 prototypes and edited the video in Final Cut Pro.
(I developed almost all of these prototypes and demos seen in the video).<br />
<!-- <span class='ie-link'>Video not displaying? <a href="http://www.kenecaswell.com/videos/reel/reel-640.mp4" target="_blank" >Click here</a>.</span> -->
</p>
</div>
</div>
</div>
<!-- </body>
</html> -->