forked from qiubaiying/qiubaiying.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·236 lines (235 loc) · 9.86 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
<!-- ---
title: Portfolio
layout: default
---
-->
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hux - Timeline</title>
<link rel="stylesheet" type="text/css" href="css/timeline.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container" style="margin:0;padding:0;width:100%;">
<header>
<img width="190" height="190" src="images/hux_avatar.png">
<h1>Hux</h1>
<p>A student major in Web & Mobile,<br>
focus on UI Development, UX Design and Motion Graphic.</p>
</header>
<div class="main">
<ul class="cbp_tmtimeline">
<li>
<div class="cbp_tmlabel">
<h2 id="boxoffice">Yanshuo.io (演说.io)</h2>
<time>2016.06</time>
<img src="images/work-yanshuo.jpg">
<ul>
<li>
"Yanshuo.io" is an online full-featured presentation software to create Web-based slides which are linkable, sharable, cross-platform and without delivery friction. It differentiate from traditional presentation tools such as Powerpoint and Keynote due to its web-friendly and its strong belief in Web.
</li>
<li class="skill">
<span><b>JS</b></span>
<span class="i-react"></span>
<span class="link"><a target="_blank" href="https://yanshuo.io">Try it</a></span>
</li>
</ul>
</div>
</li>
<li>
<div class="cbp_tmlabel">
<h2 id="boxoffice">BoxOffice @Wepiao</h2>
<time>2015.09</time>
<img src="images/work-wepiao-bo.jpg">
<ul>
<li>
Wepiao Boxoffice app provides huge amounts of data and visualization of movies and cinemas including times, box office, attendance, ranking with a real-time analyzing back-end, which available on Web, iOS and Android.<br> As the <b>Lead Front-end Developer this project</b>, we built this app in the <a href="https://en.wikipedia.org/wiki/Single-page_application">Single-page Application Model</a> to provide a more fluid user experience with awesome <a href="http://facebook.github.io/react/">React.js</a>
</li>
<li class="skill">
<span class="cbp_tmicon-phone"></span>
<span><b>JS</b></span>
<span class="i-react"></span>
<span class="link"><a target="_blank" href="http://piaofang.wepiao.com">Try it</a></span>
</li>
</ul>
</div>
</li>
<li>
<div class="cbp_tmlabel">
<h2 id="busyweek">BusyWeek!</h2>
<time>2015.02</time>
<img src="images/work-busyweek.jpg">
<ul>
<li>
BusyWeek! is a time-based Todo application, available on Web and Apple App Store, which also support the backup and restore to and from the cloud.<br>
It's material-designed, truly responsive across platforms and based on modern web technologies including HTML5, CSS3, Sass and powerful <a href="http://vuejs.org">Vue.js</a>.
</li>
<li class="skill">
<span class="cbp_tmicon-phone"></span>
<span><b>JS</b></span>
<span class="i-vue"></span>
<span class="link"><a target="_blank" href="http://huangxuan.me/BusyWeek/dist/">Try it</a></span>
</li>
</ul>
</div>
</li>
<li>
<div class="cbp_tmlabel">
<h2>Alitrip.com @Alibaba</h2>
<time>2014 - 2015</time>
<img src="images/intern-alitrip.jpg">
<ul>
<li>
Alitrip, formerly Taobao Travel, is one of the biggest platform for China's online travel sector, on which there has over 10,000 merchants providing airplane tickets, vacation packages, hotel booking services, visa application services and tour guide services.<br>
As a <b>Intern Front-End Engineer</b>, I provided mobile-web and hybrid-apps development for our online travel business. Besides, I contribute to performance, UI rendering optimization and CSS library.
</li>
<li class="skill">
<span class="cbp_tmicon-phone"></span>
<span><b>JS</b></span>
<a href="https://github.com/kissyteam/kissy"><span class="i-kissy"></span></a>
<span class="link"><a target="_blank" href="http://alitrip.com">alitrip.com</a></span>
</li>
</ul>
</div>
</li>
<!--<li>
<div class="cbp_tmlabel">
<h2>SENOVA WebApp</h2>
<img src="images/senova.jpg">
<ul>
<li>《多媒体交互设计一》结课作业，以北汽“绅宝”为目标品牌，iPad 为主要平台进行的 App 设计，旨在用一种可交互的方式介绍“绅宝”车型。完全采用 Html5 技术开发，可添加至主屏幕离线运行。着力于触控交互体验的优化与优雅的动画设计。</li>
<li>Responsible : Front-End，Interaction，Product</li>
<li>Partner : ZOE-张瑜</li>
<li class="skill">
<span class="cbp_tmicon-html"></span>
<span class="fa fa-css3"></span>
<span><b>JS</b></span>
<span class="link"><a target="_blank" href="http://huangxuan.me/senova/">Link</a></span>
</li>
</ul>
</div>
</li>-->
<li>
<div class="cbp_tmlabel">
<h2 id="hslider">jQuery.HSlider</h2>
<time>2013.10</time>
<img src="images/work-hslider.jpg">
<ul>
<li>
HSlider, a full-page scrolling, touch-friendly jQuery slider plugin for mobile and modern desktop browser only. All its animations are powered by CSS3 with GPU acceleration and URL sharing with hash is supported.
</li>
<li class="skill">
<span class="fa fa-css3"></span>
<span><b>JS</b></span>
<span class="i-jquery"></span>
<span class="link"><a target="_blank" href="http://www.tudou.com/programs/view/Xa-pGW55N4g/">Github</a></span>
</li>
</ul>
</div>
</li>
<li>
<div class="cbp_tmlabel">
<h2>《真相不止一个》</h2>
<time>2013.10</time>
<img src="images/work-truth.jpg">
<ul>
<li>Motion Graphic Design, powered by Adobe After Effect and cooperate with amazing artist <a href="https://www.behance.net/psychofish">@Psycho_fish</a></li>
<li class="skill">
<span><b>Ae</b></span>
<span class="cbp_tmicon-video"></span>
<span class="link"><a target="_blank" href="http://www.tudou.com/programs/view/Xa-pGW55N4g/">View</a></span>
</li>
</ul>
</div>
</li>
<li>
<div class="cbp_tmlabel">
<h2>Intern @LxU Studio</h2>
<time>2013.06 - 08</time>
<img src="images/intern-lxu.jpg">
<ul>
<li>
As a <b>Intern Motion Graphic Designer</b>, I participated in several creative advertising virus videos for our clients including Baidu and Continental.
</li>
<li class="skill">
<span><b>Ae</b></span>
<span class="cbp_tmicon-video"></span>
<span class="link"><a target="_blank" href="http://weibo.com/lxustudio">@LxU</a></span>
</li>
</ul>
</div>
</li>
<li>
<div class="cbp_tmlabel">
<h2>Puzzled Hybrid</h2>
<time>2013.06</time>
<img src="images/work-puzzle.png">
<ul>
<li> This font is parts of the course work of <b>Design Basis</b>, which mix Serif fonts, Sans-serif fonts and...zebra-stripe! Why I design it like that is still a puzzle to me, and the intro video is available below.
<li class="skill">
<span class="cbp_tmicon-font"></span>
<span><b>Ps</b></span>
<span><b>Ae</b></span>
<span class="link"><a target="_blank" href="http://www.tudou.com/programs/view/DtG8SaFAoXU/">View</a></span>
</li>
</ul>
</div>
</li>
<li>
<div class="cbp_tmlabel">
<h2>Home - UI Design</h2>
<time>2012.11</time>
<img src="images/work-uihome.jpg">
<ul>
<li>
Participated in the students team with Huang Yi and Nie Ruijie as the UI Motion Designer. Won the first prize in 7th national IT application competition
</li>
<li class="skill">
<span><b>Fl</b></span>
<span class="link"><a target="_blank" href="http://animation.cuc.edu.cn/2c90943227f186ba0127f18a7ff10009/view/394">News</a></span>
</li>
</ul>
</div>
</li>
{% if site.duoshuo_username %}
<li>
<div class="cbp_tmlabel">
<!-- 多说评论框 start -->
<div class="comment">
<div class="ds-thread"
data-thread-key="{{site.duoshuo_username}}/portfolio"
data-title="{{page.title}}"
data-url="{{site.url}}{{site.baseurl}}{{page.url}}" >
</div>
</div>
<!-- 多说评论框 end -->
</div>
</li>
{% endif %}
</ul>
</div>
</div>
{% if site.duoshuo_username %}
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
// dynamic User by Hux
var _user = '{{site.duoshuo_username}}';
// duoshuo comment query.
var duoshuoQuery = {short_name: _user };
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->
{% endif %}
</body>
</html>