-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·303 lines (198 loc) · 15.4 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>helen v holmes | portfolio</title>
<meta name="Helen V. Holmes' Portfolio" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<!-- Begin content -->
<!-- begin contact/about sections, hidden until called for -->
<div class="contact">
<div class="container">
<div class="about">
<img src="img/me.png" />
<p>Web development is my passion. I like imagining how things will move once someone, somewhere in the world who I've never met starts using the site I've created.</p>
<p>I am pursuing my passion as a student majoring in Graphic Design at American University. I am also minoring in French Language Studies. I take a lot of Computer Science classes because that would have been my minor if I'd found out about it sooner.</p>
<p>I am proficient in HTML and CSS. I am also learning Javascript, Python, and Django. I also speak French and Spanish, while we're talking about languages. I know some Russian, but I wouldn’t try actually talking to me. I’ve also recently made the commitment to start learning Korean, because I just watched a drama in Korean that I really, really liked.</p>
<p>The Adobe products in which I am proficient include InDesign, Flash, and Dreamweaver, although my preferred weapons of choice are Photoshop and Illustrator.</p>
<p>My favorite editor is Sublime. I’m trying out Emacs, but there’s a learning curve. I hear that’s the one all the cool kids use, anyway.</p>
</div> <!-- end about -->
<div class="form">
<form id="form_producer">
<fieldset id="field1">
<label for="name">name <span class="required">*</span></label>
<input type="text" id="name" name="name" value="" required="required" /><br />
<label for="email">email <span class="required">*</span></label>
<input type="text" id="email" name="email" value="" required="required" /><br />
<label for="message">message <span class="required">*</span></label>
<textarea id="message" name="message" required="required">Say hello! (*＾▽＾)／</textarea><br />
</fieldset>
<input type="button" value="submit" id="submit" class="button"/>
<div id="fp_message"></div>
</form>
</div> <!-- end form -->
<div class="close">
close
</div> <!-- end close -->
</div> <!-- end container -->
</div> <!-- end contact -->
<div class="email"><img src="img/email.png" />
</div> <!-- end email -->
<div class="header">
<div class="container">
<h1><ul id="filterOptions"><li><a href="#" class="project">helen v holmes</a></li></ul></h1>
<div class="nav">
<ul id="filterOptions">
<li class="active"><a href="#" class="project">all</a></li>
<li><a href="#" class="webdesign">web design</a></li>
<li><a href="#" class="printdesign">print design</a></li>
<li><a href="#" class="webdevelopment">web development</a></li>
<li><a href="#" class="sideproject">side projects</a></li>
</ul>
</div> <!-- end nav -->
</div> <!-- end container -->
</div> <!-- end header -->
<div class="main">
<ul class="ourHolder">
<li class="item width" data-id="id-8" data-type="project printdesign">
<div class="project webdesign"> <!-- 4 -->
<a href="img/stamps_1.png" rel="lightbox[stamps]" title="The Avengers, the stamp version! These were made from cut paper just as the movie was coming out and were extraordinarily fun to work on.">
<img src="img/stamps.jpg" alt="The Avengers, the stamp version! These were made from cut paper just as the movie was coming out and were extraordinarily fun to work on." /></a>
<a href="img/stamps_2.png" rel="lightbox[stamps]" title="Captain America. (He had the best movie out of the bunch in my opinion.)">
<img src="img/stamps_2.jpg" class="noshow" alt="Captain America. (He had the best movie out of the bunch in my opinion.)" /></a>
<a href="img/stamps_3.png" rel="lightbox[stamps]" title="Thor. This stamp definitely had the nicest shadow effect, probably because of the brighter paper.">
<img src="img/stamps_3.jpg" class="noshow" alt="Thor. This stamp definitely had the nicest shadow effect, probably because of the brighter paper." /></a>
<a href="img/stamps_4.png" rel="lightbox[stamps]" title="Ironman. I think he came out really great, even though I was originally dubious about the light blue border around the energy source on his hand.">
<img src="img/stamps_4.jpg" class="noshow" alt="Ironman. I think he came out really great, even though I was originally dubious about the light blue border around the energy source on his hand." /></a>
<a href="img/stamps_5.png" rel="lightbox[stamps]" title="The Hulk. I had the most difficulties with the Hulk, since it was so difficult to capture the idea of him throwing a punch.">
<img src="img/stamps_5.jpg" class="noshow" alt="The Hulk. I had the most difficulties with the Hulk, since it was so difficult to capture the idea of him throwing a punch." /></a>
The Avengers, the stamp version! These were made from cut paper just as the movie was coming out and were extraordinarily fun to work on.
<div class="tags">
<ul id="filterOptions">
<li><a href="#" class="printdesign">#print design</a></li>
</ul>
</div> <!-- end tags -->
</div> <!-- end box 4 -->
</li>
<li class="item width" data-id="id-5" data-type="project printdesign">
<div class="project printdesign"> <!-- 1 -->
<a href="img/thebook_1.png" rel="lightbox[thebook]" title="Pamplet written and designed for Typography 101 about Chip Kidd.">
<img src="img/thebook.jpg" alt="Pamplet written and designed for Typography 101." /></a>
<a href="img/thebook_2.png" rel="lightbox[thebook]" title="One of the spreads in the pamphlet.">
<img src="img/thebook_2.jpg" class="noshow" alt="One of the spreads in the pamphlet." /></a>
<a href="img/thebook_3.png" rel="lightbox[thebook]" title="One of my favorite spreads, mostly because it had Batman in it and a reference to how fabulously gay Chip Kidd is.">
<img src="img/thebook_3.jpg" class="noshow" alt="One of my favorite spreads, mostly because it had Batman in it and a reference to how fabulously gay Chip Kidd is." /></a>
<a href="img/thebook_4.png" rel="lightbox[thebook]" title="A spread devoted to the Jurassic Park book cover, as it was Kidd's chef-d'œuvre.">
<img src="img/thebook_4.jpg" class="noshow" alt="A spread devoted to the Jurassic Park book cover, as it was Kidd's chef-d'œuvre." /></a>
Pamplet written and designed for Typography 101. The essay written featured Chip Kidd.
<!-- note to self: eventually there should be a 'view live site' where you can flip through booklet. Ask Una for her code, it was nice -->
<div class="tags">
<ul id="filterOptions">
<li><a href="#" class="printdesign">#print design</a></li>
</ul>
</div> <!-- end tags -->
</div> <!-- end box 1 -->
</li>
<li class="item width" data-id="id-3" data-type="project sideproject webdesign">
<div class="project webdesign sideproject"> <!-- 3 -->
<a href="img/deargoogle_1.png" rel="lightbox[deargoogle]" title="Side project writing a letter to Google about their Reader app.">
<img src="img/deargoogle.png" alt="Side project writing a letter to Google about their Reader app." /></a>
<a href="img/deargoogle_4.png" rel="lightbox[deargoogle]" title="I do use Google Reader a lot. That's why I felt like informing them about various things.">
<img src="img/deargoogle_4.png" class="noshow" alt="I do use Google Reader a lot. That's why I felt like informing them about various things." /></a>
<a href="img/deargoogle_2.png" rel="lightbox[deargoogle]" title="My navigation, which was a complete rip-off of Alice Lee's navigation in <em>her</em> letter to Instagram, which wasn't quite so biting.">
<img src="img/deargoogle_2.png" class="noshow" alt="My navigation, which was a complete rip-off of Alice Lee's navigation in <em>her</em> letter to Instagram, which wasn't quite so biting." /></a>
<a href="img/deargoogle_3.png" rel="lightbox[deargoogle]" title="My write-off. And I thought I was so clever.">
<img src="img/deargoogle_3.png" class="noshow" alt="My write-off. And I thought I was so clever." /></a>
Letter to Google detailing my grievances with their Reader app, designed to mimic their website. <a href="http://helenvholmes.com/usability">View live site.</a>
<div class="tags">
<ul id="filterOptions">
<li><a href="#" class="webdesign">#web design</a></li>
<li><a href="#" class="sideproject">#side projects</a></li>
</ul>
</div> <!-- end tags -->
</li>
<li class="item width" data-id="id-2" data-type="project printdesign">
<div class="project printdesign"> <!-- 2 -->
<a href="img/beautysecret_1.jpg" rel="lightbox[beautysecret]" title="Poster project for my Intro to Graphic Design class de-glamorizing eating disorders. This was very reactionary to Tumblr's decision to ban pro-ana and pro-mia blogs, and to the book <em>Brave Girl Eating</em> by Harriet Brown.">
<img src="img/beautysecret.jpg" alt="Close up of my 'Beauty Secret' poster." /></a>
<a href="img/beautysecret.jpg" rel="lightbox[beautysecret]" title="Close up of my 'Beauty Secret' poster.">
<img src="img/beautysecret_1.jpg" class="noshow" alt="Poster project for my Intro to Graphic Design class de-glamorizing eating disorders. This was very reactionary to Tumblr's decision to ban pro-ana and pro-mia blogs, and to the book <em>Brave Girl Eating</em> by Harriet Brown." /></a>
<a href="img/beautysecret_2.jpg" rel="lightbox[beautysecret]" title="Hand-lettered type.">
<img src="img/beautysecret_2.jpg" class="noshow" alt="Hand-lettered type." /></a>
<a href="img/beautysecret_3.jpg" rel="lightbox[beautysecret]" title="After taking the photos, I really loved how my hands came out. It felt honest.">
<img src="img/beautysecret_3.jpg" class="noshow" alt="After taking the photos, I really loved how my hands came out. It felt honest." /></a>
This was a poster designed to de-glamorize eating disorders after Tumblr's decision to ban pro-eating disorder blogs.
<div class="tags">
<ul id="filterOptions">
<li><a href="#" class="printdesign">#print design</a></li>
</ul>
</div> <!-- end tags -->
</li>
<li class="item width" data-id="id-1" data-type="project printdesign">
<div class="project printdesign"> <!-- 1 -->
<a href="img/albumcover_1.jpg" rel="lightbox[album]" title="My take on an album cover for 'Of Angels and Angles' by The Decemberists.">
<img src="img/albumcover.jpg" alt="Typography for album cover." /></a>
<a href="img/albumcover.jpg" rel="lightbox[album]" title="Typography for album cover.">
<img src="img/albumcover_1.jpg" class="noshow" alt="Typography for album cover." /></a>
<a href="img/albumcover_2.jpg" rel="lightbox[album]" title="Close up of album cover for 'Of Angels and Angles' by The Decemberists. I drew the boat and them painstakingly re-created it in Illustrator.">
<img src="img/albumcover_2.jpg" class="noshow" alt="Close up of album cover for 'Of Angels and Angles' by The Decemberists. I drew the boat and them painstakingly re-created it in Illustrator." /></a>
<a href="img/albumcover_3.jpg" rel="lightbox[album]" title="Paint splatter.">
<img src="img/albumcover_3.jpg" class="noshow" alt="Paint splatter." /></a>
<a href="img/albumcover_4.jpg" rel="lightbox[album]" title="Close-up of texture at the bottom. I used watercolors to get the effect.">
<img src="img/albumcover_4.jpg" class="noshow" alt="Close-up of texture at the bottom. I used watercolors to get the effect." /></a>
This was my take on the album cover for The Decemberists' song, 'Of Angels and Angles'.
<div class="tags">
<ul id="filterOptions">
<li><a href="#" class="printdesign">#print design</a></li>
</ul>
</div> <!-- end tags -->
</li>
<li class="item width" data-id="id-4" data-type="project webdesign">
<div class="project webdesign"> <!-- 4 -->
<a href="img/artomatic_1.png" rel="lightbox[artomatic]" title="Faux re-design for Artomatic's site, an art event that takes place in the Washington D.C. Metropolitan area annually.">
<img src="img/artomatic.png" alt="Faux re-design for Artomatic's site, an art event that takes place in the Washington D.C. Metropolitan area annually." /></a>
<a href="img/artomatic_2.png" rel="lightbox[artomatic]" title="Logo redesign for Artomatic.">
<img src="img/artomatic_2.jpg" class="noshow" alt="Logo redesign for Artomatic." /></a>
<a href="img/artomatic_3.png" rel="lightbox[artomatic]" title="Social media links for website.">
<img src="img/artomatic_3.jpg" class="noshow" alt="Social media links for website." /></a>
Faux re-design for Artomatic's site, an art event that takes place in Washington D.C annually. <a href="http://helenvholmes.com/pr2">View live site.</a>
<div class="tags">
<ul id="filterOptions">
<li><a href="#" class="webdesign">#web design</a></li>
</ul>
</div> <!-- end tags -->
</li>
<li class="item width" data-id="id-6" data-type="project webdesign">
<div class="project webdesign"> <!-- 2 -->
<a href="img/syllabus_1.png" rel="lightbox[syllabus]" title="Website designed for the syllabus in one of my graphic design classes.">
<img src="img/syllabus.png" alt="Website designed for the syllabus in one of my graphic design classes." /></a>
<a href="img/syllabus_2.png" rel="lightbox[syllabus]" title="Rollovers for the links.">
<img src="img/syllabus_2.jpg" class="noshow" alt="Rollovers for the links." /></a>
<a href="img/syllabus_3.png" rel="lightbox[syllabus]" title="Bebas Neue! Everwhere!">
<img src="img/syllabus_3.jpg" class="noshow" alt="Bebas Neue! Everywhere!" /></a>
Website designed for the syllabus in one of my graphic design classes. <a href="http://helenvholmes.com/pr1/">View live site.</a>
<div class="tags">
<ul id="filterOptions">
<li><a href="#" class="webdesign">#web design</a></li>
</ul>
</div> <!-- end tags -->
</div> <!-- end box 2 -->
</li>
</ul>
</div> <!-- end main -->
<!-- Start scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/quicksand.js"></script>
<script src="js/lightbox.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>