-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
180 lines (162 loc) · 6.56 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
---
layout: default
sidebar: false
permalink: /portfolio/
title: Portfolio
description: A small selection of my most noteworthy work.
css:
- /lib/portfolio.css
- /lib/remooz/ReMooz.css
js:
- /lib/portfolio.js
- /lib/remooz/ReMooz.js
images: /lib/images/portfolio/
heading: Web Development Portfolio
intro: Below is a small selection of my most noteworthy work. I've had the pleasure of working
with some very talented designers, to whom I am thankful for allowing me the opportunity to
transform their creations into realities.
thumbs:
- id: family
pages: 6
title: The Family - Nike Basketball
url: http://www.nike.com/nikeos/p/nikebasketball/en_US/family
short: An exploration of all the basketball players sponsored by Nike.
long: This is a very interactive page with a variety of ways to filter the players shown,
which you can then click to view their profile page. It was made to be localizable,
and is entirely configured through XML.
credits:
- name: jQuery
url: http://jquery.com
- name: TrimQuery
url: http://code.google.com/p/trimpath/wiki/TrimQuery
agencies:
- name: R/GA
url: http://rga.com
- id: sigmoves
pages: 5
title: Signature Moves - Nike Basketball
url: http://www.nike.com/nikeos/p/nikebasketball/en_US/signature/main
short: A destination for learning fresh moves from some of the best ballers.
long: This has a dynamic landing page and is rich in content, all configured in XML and localizable.
credits:
- name: jQuery
url: http://jquery.com
agencies:
- name: R/GA
url: http://rga.com
- id: ankleinsurance
pages: 3
title: NotMyBrokenAnkles.com
url: http://notmybrokenankles.com
short: A fun support page to a popular
<a href="http://www.youtube.com/watch?v=cPnRFkPWyDM" target="_blank">viral video</a>
starring Kobe Bryant.
long: This page was, thus far, the most fun to develop. A series in amusing questions along
with hilarious graphics are presented to the user. A customized, shareable outcome is
generated from the answers.
credits:
- name: jQuery
url: http://jquery.com
- name: jOdometer
url: http://plugins.jquery.com/project/jodometer
agencies:
- name: R/GA
url: http://rga.com
- id: nikesix
pages: 3
title: Nike 6.0
url: http://www.nike.com/nikeos/p/nke6/en_US/team
short: As one of Nike's fastest growing brands, Nike 6.0's site relaunched with
a new design and expanded content.
long: The player profiles are fully explorable without the page having to reload,
while remaining search engine friendly and gracefully degradable without JavaScript.
credits:
- name: jQuery
url: http://jquery.com
- name: SWFAddress
url: http://www.asual.com/swfaddress/
agencies:
- name: R/GA
url: http://rga.com
- name: Nemo
url: http://www.nemohq.com
- id: hoopstalk
pages: 1
title: Hoopstalk Live - Nike Basketball
short: A Nike-sponsored live webcast featuring league giants answering questions
from an audience logged in through Facebook.
long: This page was only online for a few days. A countdown signaled the upcoming show,
which was activated through polling the server. Users could log into Facebook
and chat to ask questions.
credits:
- name: jQuery
url: http://jquery.com
- name: Countdown
url: http://keith-wood.name/countdown.html
agencies:
- name: R/GA
url: http://rga.com
- id: bball
pages: 1
title: Nike Basketball Homepage
url: http://www.nike.com/nikeos/p/nikebasketball/en_US/
short: A bold new landing page for one of Nike's most popular brand sites,
which is easily customizable per region.
long: Each region can customize through XML the background, links, and touts. News is
pulled from the blog via RSS.
credits:
- name: jQuery
url: http://jquery.com
agencies:
- name: R/GA
url: http://rga.com
- id: sportrunner
pages: 3
title: Believe In The Run
url: http://www.nike.com/nikeos/p/nikebasketball/en_US/sport_runner
short: A glimpse into how major athletes from
<a target="_blank" href="http://www.nike.com/nikeos/p/usnikefootball/en_US/sport_runner">Football</a>,
<a target="_blank" href="http://www.nike.com/nikeos/p/nikesoccer/en_US/sport_runner">Soccer</a>,
and <a target="_blank" href="http://www.nike.com/nikeos/p/nikebasketball/en_US/sport_runner">Basketball</a>
use running to improve their game.
long: This page was placed on three brand sites, each featuring a different athlete and
configured by XML. The contents include scrollable wallpapers and quotes submitted
by users on the page.
credits:
- name: jQuery
url: http://jquery.com
agencies:
- name: R/GA
url: http://rga.com
---
<div id="intro">
<h2>{{ page.heading }}</h2>
<p>{{ page.intro }}</p>
</div>
<ul id="thumbs">
{% for thumb in page.thumbs %}
<li>
<a class="thumb pages-{{ thumb.pages }}" href="{{ page.images }}{{ thumb.id }}1.jpg">
<img src="{{ page.images }}{{ thumb.id }}.jpg" />
</a>
{% if thumb.url %}
<a class="link" target="_blank" href="{{ thumb.url }}">{{ thumb.title }}</a>
{% else %}
<span class="link">{{ thumb.title }}</span>
{% endif %}
<p>{{ thumb.short }}</p>
<div class="details">
{{ thumb.long }}
<span class="credits">
(Credits:
{% for credit in thumb.credits %}
<a href="{{ credit.url }}" target="_blank">{{ credit.name }}</a>{% if forloop.last == false %},{% elsif thumb.agencies %}; Agency:{% endif %}
{% endfor %}
{% for agency in thumb.agencies %}
<a href="{{ agency.url }}" target="_blank">{{ agency.name }}</a>{% if forloop.last %}){% else %},{% endif %}
{% endfor %}
</span>
</div>
</li>
{% endfor %}
</ul>