-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
230 lines (173 loc) · 10.8 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-TCJF9Q4');
</script>
<!-- End Google Tag Manager -->
<title>Claire Sun Studio</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/projects.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/header.js"></script>
<!-- Facebook Open-graph metadata -->
<meta property="og:title" content="Claire Sun Studio" />
<meta property="og:description" content="Welcome to my personal porfolio website." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://clairesunstudio.github.io/" />
<meta property="fb:admins" content="1266533259" />
<meta property="og:image" content="img/portfolio/draw.jpg" />
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TCJF9Q4" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="box">
<header>
<div class='inner clearfix'>
<div id="logo">
<a href="#">
<h1></h1>
</a>
</div>
<nav>
<a href="http://clairesunstudio.github.io/img/minghua-resume.pdf" target="_blank">ABOUT</a>
<a href="https://www.linkedin.com/in/minghuasun" target="_blank">CONTACT</a>
</nav>
</div>
</header>
<!-- /header -->
<div class="controls">
<label>Filter:</label>
<button class="filter" data-filter="all">All</button>
<button class="filter" data-filter=".category-2">UI/UX</button>
<button class="filter" data-filter=".category-1">Web Design</button>
<button class="filter" data-filter=".category-10">Front End Development</button>
<button class="filter" data-filter=".category-3">Data Visualization</button>
<button class="filter" data-filter=".category-4">Social Media</button>
<button class="filter" data-filter=".category-5">Print Design</button>
<button class="filter" data-filter=".category-6">Interactive</button>
<button class="filter" data-filter=".category-9">Patterns</button>
<button class="filter" data-filter=".category-11">Painting</button>
<button class="filter" data-filter=".category-12">Installation</button>
<br/>
<label>Sort:</label>
<button class="sort" data-sort="myorder:asc">Newest</button>
<button class="sort" data-sort="myorder:desc">Oldest</button>
</div>
<div id="Container" class="container">
<!-- chapter55 -->
<a href="http://mass.gov/chapter55" target="_blank" alt="Chapter 55 — An interactive data story on the Massachusetts opioid epidemic." class="mix category-1 category-2 category-3 categor-10" data-myorder="0" style="background-image: url('img/portfolio/chapter55.jpg')"></a>
<!-- mdd -->
<a href="http://clairesun.com/mdd" target="_blank" alt="MDD (My DMI Diary) is a responsive website designed to document my experience at the Dynamic Media Institute. <In progress> " class="mix category-1 category-6" data-myorder="1" style="background-image: url('img/portfolio/mdd.jpg')"></a>
<!-- fashion -->
<a href="http://clairesun.com/fashion-viz/" target="_blank" alt="This website is a proof-of-concept prototype of visualizing fashion in classic movies. Inspired by Mike Bostock's "Front Row to Fashion Week" built with D3, this example is built with css and javascript. <Under Construction> "
class="mix category-1 category-2 category-3 category-6" data-myorder="1" style="background-image: url('img/portfolio/fashion.jpg')"></a>
<!-- bnbgirls -->
<a href="https://clairesunstudio.github.io/bnb" target="_blank" alt="Bright&Beautiful is a non-for-profit organization that aims at bring art education to rural Chinese girls. <Under Construction> " class="mix category-1 category-6 category-8"
data-myorder="1" style="background-image: url('img/portfolio/bnbgirls.jpg')"></a>
<!-- wefilm app -->
<a href=""
alt="UI/UX design of the collaborative project — WeFilm. The working prototype was pitched and won the 1st place at the Startup Weekend Providence 2014."
class="mix category-2 category-10"
data-myorder="16"
style="background-image: url('img/portfolio/wefilm.jpg')"></a>
<!-- billionaire map -->
<a href="https://clairesunstudio.github.io/billionaires" target="_blank" alt="Interactive graph built with d3.js visualizing the distributions of the wealthiest 1000 billionaires in the world. <In progress>" class="mix category-6 category-3" data-myorder="2"
style="background-image: url('img/portfolio/billionaire.jpg')"></a>
<!-- map -->
<a href="https://clairesunstudio.github.io/mdd/3.html#mapping" target="_blank" alt="Map Design from user research, user testing to interface design and final package design. " class="mix category-2 category-5 category-10" data-myorder="15" style="background-image: url('img/portfolio/map.jpg')"></a>
<!-- processing draw -->
<a href="http://www.openprocessing.org/sketch/189145" target="_blank" alt="Drawing Tool created with Processing" class="mix category-6" data-myorder="10" style="background-image: url('img/portfolio/draw.jpg')"></a>
<!-- pattern -->
<a href="http://clairesunstudio.github.io/pattern/3.html" target="_blank" alt="Animated Javascript Patter designed with Logoish.js." class="mix category-8 category-9" data-myorder="4" style="background-image: url('img/portfolio/pattern1.jpg')"></a>
<!-- pattern2 -->
<a href="http://clairesunstudio.github.io/pattern/2.html" target="_blank" alt="Animated Javascript Patter designed with Logoish.js." class="mix category-8 category-9" data-myorder="5" style="background-image: url('img/portfolio/pattern2.jpg')"></a>
<!-- pattern3 -->
<a href="http://clairesunstudio.github.io/pattern/1.html" target="_blank" alt="Animated Javascript Patter designed with Logoish.js." class="mix category-8 category-9" data-myorder="6" style="background-image: url('img/portfolio/pattern3.jpg')"></a>
<!-- exchange app -->
<a href="https://clairesunstudio.github.io/mdd/3.html#video" target="_blank" alt="Exchange is a mobile app for managing the wardrobe. The user interface and user experience design is demonstrated through the video." class="mix category-2 category-3 category-10"
data-myorder="11" style="background-image: url('img/portfolio/exchange.jpg')"></a>
<!-- bright & beautiful -->
<a href="https://www.behance.net/gallery/12284963/Bright-Beautiful-Girls-Postcards" target="_blank" alt="A collection of postcards designed for the Bright & Beautiful Project "Write Her A Postcard" offline event. " class="mix category-4 category-5"
data-myorder="9" style="background-image: url('img/portfolio/bnb.jpg')"></a>
<!-- Fresh Media -->
<a href="http://clairesunstudio.github.io/img/freshMediaProposal.pdf" target="_blank"
alt="An interactive, sensor-driven, LED installation piece showing at Fresh Media Show in Cyber Arts Gallery in May."
class="mix category-6 category-12"
data-myorder="3"
style="background-image: url('img/portfolio/freshmedia.jpg')"></a>
<!-- Robot -->
<a href="http://codepen.io/clairesun/full/KweGKg/" target="_blank" alt="Interactive Robot animated in CSS3" class="mix category-6 category-8" data-myorder="7" style="background-image: url('img/portfolio/robot.jpg')"></a>
<!-- Wardrobe Infograph -->
<a href="http://clairesunstudio.github.io/img/wardrobe.pdf" target="_blank"
alt="Infographic Poster"
class="mix category-2 category-3"
data-myorder="12"
style="background-image: url('img/portfolio/wardrobe.jpg')"></a>
<!-- car -->
<a href="https://www.behance.net/gallery/11944049/Car-Illustration" target="_blank" alt="Automobile digital illustrations inspired by the annual "British Invasion" car exhibition in VT" class="mix category-2" data-myorder="23" style="background-image: url('img/portfolio/car.jpg')"></a>
<!-- jewelry -->
<a href="https://www.behance.net/gallery/12086733/Jewelry" target="_blank" alt="Jewelry Triptych. (Oil on panel)" class="mix category-11" data-myorder="21" style="background-image: url('img/portfolio/jewelry.jpg')"></a>
<!-- flower -->
<a href=""
alt="Origami Roses In A Vase. (Oil on panel)"
class="mix category-11"
data-myorder="22"
style="background-image: url('img/portfolio/flower.jpg')"></a>
<!-- Student Universe -->
<a href="" alt="Digital banner ads, email campaigns, landing pages, print marketing material designs and website mockups at StudentUniverse. <examples upon request>" class="mix category-2 category-4 category-5" data-myorder="14" style="background-image: url('img/portfolio/su.jpg')"></a>
<!-- UMass -->
<a href="" alt="Designs of brochures, posters, rollup banners and videography for the University of Massachusetts Boston Confucius Institute. <examples upon request>" class="mix category-5" data-myorder="13" style="background-image: url('img/portfolio/umass.jpg')"></a>
<!-- Kitty and Bunny -->
<a href="" alt="Kitty and Bunny emoji <In progress>" class="mix category-4 " data-myorder="9" style="background-image: url('img/portfolio/kittybunny.jpg')"></a>
<!-- sister tao -->
<a href="" alt="SistersTao is a Wechat official account feeding original organic articles and infographics to the followers." class="mix category-4 " data-myorder="8" style="background-image: url('img/portfolio/sistertao.jpg')"></a>
<div class="gap"></div>
<div class="gap"></div>
</div>
</div>
<script>
//header
function init() {
window.addEventListener('scroll', function(e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header, "smaller");
} else {
if (classie.has(header, "smaller")) {
classie.remove(header, "smaller");
}
}
});
}
window.onload = init();
//mixitup
$(function() {
$('#Container').mixItUp();
});
</script>
</body>
</html>