update portfolio

portfolio/css/timeline.css

@@ -139,15 +139,43 @@ body, html {
 	font-family: 'huxico';
 }
 
-.cbp_tmicon-vue:before {
+/** Venders Logo **/
+.i-vue:before {
 	content: "";
     display: block;
     width: 40px;
     height: 40px;
-    background: url("../images/vue-logo.png") 50% 50% no-repeat;
+    background: url("../images/logo-vue.png") 50% 50% no-repeat;
     background-size: 20px;
 }
 
+.i-kissy:before {
+	content: "";
+	display: block;
+	width: 40px;
+	height: 40px;
+	background: url("../images/logo-kissy.png") 50% 50% no-repeat;
+	background-size: 20px;
+}
+
+.i-jquery:before {
+	content: "";
+	display: block;
+	width: 40px;
+	height: 40px;
+	background: url("../images/logo-jquery.png") 50% 50% no-repeat;
+	background-size: 20px;
+}
+
+.i-react:before {
+	content: "";
+	display: block;
+	width: 40px;
+	height: 40px;
+	background: url("../images/logo-react.png") 50% 50% no-repeat;
+	background-size: 22px;
+}
+
 /******* Hux Branch *****/
 html{
 	font-size: 90%;
@@ -200,6 +228,8 @@ header img{
 .cbp_tmlabel img{
 	width: 100%;
 	margin-bottom: 1em;
+	border-top: 1px solid #eeefef;
+	border-bottom: 1px solid #eeefef;
 }
 
 .cbp_tmlabel p{
@@ -229,9 +259,12 @@ header img{
     height: 40px;
     text-align: center;
     line-height: 40px;
-    margin-right: 0.4em;
+    margin-right: 8px;
     color: #a5a7aa;
 }
+.cbp_tmlabel ul li.skill span:nth-child(1){
+	margin-left: -7px;
+}
 .cbp_tmlabel ul li.skill span:before{
     line-height: 40px;
 }
@@ -240,7 +273,8 @@ header img{
 	font-size: 0.8em;
 	line-height: 30px;
 	width: auto;
-	padding: 0 20px;
+	padding: 0 11px;
+	min-width: 70px;
 	box-sizing: border-box;
 	height: 32px;
 	border-radius: 3px;
@@ -273,4 +307,7 @@ header img{
 		letter-spacing: 0px;
 		margin: 1.5em;
 	}
+	.cbp_tmlabel ul li.skill span{
+	    margin-right: 2px;
+	}
 }

portfolio/index.html

@@ -23,11 +23,29 @@ <h1>Hux</h1>
 			</header>
 			<div class="main">
 				<ul class="cbp_tmtimeline">
+					<li>
+						<div class="cbp_tmlabel">
+							<h2>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>BusyWeek!</h2>
 							<time>2015.02</time>
-							<img src="images/busyweek.jpg">
+							<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>
@@ -36,24 +54,25 @@ <h2>BusyWeek!</h2>
 								<li class="skill">
 									<span class="cbp_tmicon-phone"></span>
 									<span><b>JS</b></span>
-									<span class="cbp_tmicon-vue"></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>Intern @Alibaba</h2>
+							<h2>Alitrip.com @Alibaba</h2>
 							<time>2014 - 2015</time>
-							<img src="images/alitrip.jpg">
+							<img src="images/intern-alitrip.jpg">
 							<ul>
 								<li>
-									As a <b>Intern Front-End Engineer</b>, I provided mobile-web and hybrid-app development of Alibaba Online Traveling, also contribute to performance, UI rendering optimization and CSS library.
+									As a <b>Intern Front-End Engineer</b>, I provided mobile-web and hybrid-apps development of Alibaba Online Traveling, and I also contribute to performance, UI rendering optimization and CSS library.
 								</li>
 								<li class="skill">
 									<span class="cbp_tmicon-phone"></span>
 									<span><b>JS</b></span>
+									<span class="i-kissy"></span>
 									<span class="link"><a target="_blank" href="http://alitrip.com">alitrip.com</a></span>
 								</li>
 							</ul>
@@ -76,11 +95,29 @@ <h2>SENOVA WebApp</h2>
 							</ul>
 						</div>
 					</li>-->
+					<li>
+						<div class="cbp_tmlabel">
+							<h2>jQuery.HSlider</h2>
+							<time>2013.10</time>
+							<img src="images/work-hslider.jpg">
+							<ul>
+								<li>
+									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/truth.jpg">
+							<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">
@@ -95,10 +132,10 @@ <h2>《真相不止一个》</h2>
 						<div class="cbp_tmlabel">
 							<h2>Intern @LxU Studio</h2>
 							<time>2013.06 - 08</time>
-							<img src="images/lxu.jpg">
+							<img src="images/intern-lxu.jpg">
 							<ul>
 								<li>
-									As a <b>Intern Motion Graphic Designer</b>, I participated in several advertising videos for our clients including Baidu and Continental.
+									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>
@@ -112,7 +149,7 @@ <h2>Intern @LxU Studio</h2>
 						<div class="cbp_tmlabel">
 							<h2>Puzzled Hybrid</h2>
 							<time>2013.06</time>
-							<img src="images/puzzle.png">
+							<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">
@@ -128,7 +165,7 @@ <h2>Puzzled Hybrid</h2>
 						<div class="cbp_tmlabel">
 							<h2>Home - UI Design</h2>
 							<time>2012.11</time>
-							<img src="images/uihome.jpg">
+							<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