index.html

<html>
	
	<head>
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />	
		<link rel="stylesheet" href="css/reset.css" />
		<title>YU TUNG HSIAO 蕭宇彤</title>
	</head>

	<body>
	

		<!-- --------     navbar        --------------------------------------------------------------------- -->
		<nav>
			<div class="leftnav">
				<div><a href="#startPage">YU-TUNG,HSIAO 蕭宇彤</a></div>
			</div>
			<div class="rightnav">
				<span><a href="#aboutMe">關於我 [ 簡歷 ]</a></span>
				<span><a href="#workStartPage">作品集</a></span>
			</div>
		</nav>
		

		<!-- --------     content        --------------------------------------------------------------------- -->
		<!-- --------     start page      ---------- -->
		<div  id="startPage">
			<div class='content'>
				<!-- <div class='startPage_content'>
					<div><img src="img/MyPic.png" alt="MyPic" id="MyPic"></div>
				</div>
				<div class='startPage_content'> -->
					<div id="start_name">YU-TUNG,HSIAO 蕭宇彤</div>
					<div class="start_subtitle">政大資管 / 數位內容大四</div>
					<div class="start_subtitle">yutunghsiao19@gmail.com</div>
				<!-- </div> -->
			</div>
		</div>
		
		<div  id="aboutMe">
			<div class="content aboutMe_content_left">
				<div class="aboutMe_title">ABOUT ME</div>
				<div class="aboutMe_content_right">
					<p>我是蕭宇彤，現在是政大四年級的學生，
						主修資管，雙主修數位內容。我的興趣很廣泛，
						我喜歡視覺設計和數位設計，
						同時也有些微涉獵行銷及心理學領域。
						大學期間我找了很多相關的課程及活動參與，
						例如參與台科大產品設計課程，
						於台大藝術季創作，修習社會心理學課程等等。
						除了設計以外，我還花了點時間練習寫程式，
						讓自己的程式能力能有一定的水平。</p><br/>
					<p>個性方面，我是個隨和而且負責的人，
						我喜歡在不同的合作中認識不同的人，
						我享受每個和別人合作的機會，
						並且也喜歡觀察不同人的想法、做事方式。</p>
				</div>
			</div>			
		</div>
		
		<!-- --------    experience      ---------- -->
		<div  id="skill_and_exp">
			<div class="content">
				<div class="skill">
					<div class="skill_title">SKILLS</div>
					<div class="skill_content">
						<div class="skill_type">程式語言類</div>
						<div class="skill_details">
							python ( django / flask / 網站開發 )、java、php、<br/>
							html、javascript、css<br/>
						</div>

						<div class="skill_type">平面 / 影像設計類</div>
						<div class="skill_details">
							Photoshop、Illustrator、Flash
						</div>

						<div class="skill_type">數位創作類</div>
						<div class="skill_details">
							Processing、Arduino、Resolume Arena、Unity、<br/>
							SketchUp、AutoCAD
						</div>
					</div>
				</div>

				<div class="exp">
					<div class="exp_title">EXPERIENCE</div>
					<div class="exp_content">

						<div class="a_type_of_exp">
							<div class="exp_type">展出經驗</div>
							<div class="exp_details">2015 10 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													DCT進行式松菸展 Live House 2.0</div>
							<div class="exp_details">2015 05 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													政大數位內容畢展 Live House</div>
							<div class="exp_details">2015 05 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													台大藝術季 秘密牆</div>
							<div class="exp_details">2015 05 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													台大藝術季 一節空堂</div>
						</div>

						
						<div class="a_type_of_exp">
							<div class="exp_type">活動經驗</div>
							<div class="exp_details">2015 07 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
													OpenHCI人機互動工作坊 學員</div>
							<div class="exp_details">2014 06 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													政大廣電畢展 平面文宣</div>
							<div class="exp_details">2014 03 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													政大徵才月 宣傳</div>
						</div>

						<div class="a_type_of_exp">
							<div class="exp_type">工作經驗</div>
							<div class="exp_details">2014-2016 &nbsp&nbsp 
													女媧科技 程式實習生</div>
							<div class="exp_details">2015 11 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													台北數位藝術節工讀生</div>
							<div class="exp_details">2014 10 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													台灣設計師週工讀生</div>
							<div class="exp_details">2014 04 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													寶藏巖種子志工</div>
							<div class="exp_details">2013 09 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													粉樂町當代藝術展志工</div>
						</div>

						<div class="a_type_of_exp">
							<div class="exp_type">競賽經驗</div>
							<div class="exp_details">2016 03 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													E化系統創意競賽 優良</div>
						</div>

						<div class="a_type_of_exp">
							<div class="exp_type">其他</div>
							<div class="exp_details">2016 01  
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													台大物聯網專案 Hot Spring Care</div>
							<div class="exp_details">2015 12 
													&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  
													政大資管畢業專題 訂貨決策系統</div>
						</div>						
					</div>
				</div>
			</div>
		</div>
		
		<!-- --------     work collection     ------------------------------------------------------------- -->
		<!-- --------     start page    ----------------- -->
		<div  id="workStartPage">
			<div class="workStart_title">
				<div id="myWork">MY WORK </div>
				<div id="collection">COLLECTIONS</div>
			</div>			
			<div>
				<div class="workStartPage_content">
						<div><a href="#infinigen">政大廣電畢展文宣設計</a></div>/
						<div><a href="#product">產品設計</a></div>/
						<div><a href="#poster">海報設計</a></div>/
						<div><a href="#other">其他</a></div>
<!-- 						<div><a href="#infinigen">產品設計</a></div>/
						<div><a href="#product">APP UI 設計</a></div>/
						<div><a href="#poster">平面設計</a></div>/
						<div><a href="#other">數位創作</a></div>/
						<div><a href="#other">手繪作品</a></div>/
						<div><a href="#other">程式專案</a></div> -->
				</div>
			</div>
		</div>

		<!-- --------     infinigen    ----------------- -->
		<div  id="infinigen">
		
			<div class="infinigen_info">
				<div class="infinigen_infoText">
					<div class="infinigen_infoTextTitle">政大廣電畢展文宣設計</div>
					<div class="infinigen_infoTextContent">
						<p>**政大廣電畢展相關文宣皆依照廣電系提供之主視覺進行設計</br>
									(廣電系主視覺如右)
						</p>
							廣電系畢展策展概念：</br>							本屆主題是一個全新創造的單字：Infini∞Gen，意為「無限世代」或稱「八年級世代」。</br>
							透過８換個角度看就是無限的概念，要讓大眾重新審視新世代。
						<p>
						</p>
					</div>
				</div>
				<div class="infinigen_infoImg"><img src="img/infinigen/main.jpg" alt="廣電畢展主視覺" id="infinigenMainImg"></div>
			</div>		
			
			<div class="infinigen_workCollection">
				<div class="infinigen_DM">
					<div class="DM_title">3摺DM設計</div>
					<div><img src="img/infinigen/DM_front.jpg" alt="DM_front" id="infinigenDM_front"></div>
					<div><img src="img/infinigen/DM_back.jpg" alt="DM_back" id="infinigenDM_back"></div>
				</div>
				
				<div class="infinigen_NameCard">
					<div class="NameCard_title">名片設計</div>
					<div><img src="img/infinigen/nameCard_front.png" alt="nameCard_front" id="nameCard_front"></div>
					<div><img src="img/infinigen/nameCard_back.png" alt="nameCard_back" id="nameCard_back"></div>
				</div>
				
				<div class="infinigen_FBCover">
					<div class="FBCover_title">FB粉絲頁封面照片設計/排版</div>
					<div class="FBCover_subTitle">(劇照由廣電系提供)</div>
					<div><img src="img/infinigen/FBCoverPhoto.jpg" alt="FBCoverPhoto" id="infinigenDM_front"></div>
					<div><img src="img/infinigen/FBCoverPhoto_NearYear.jpg" alt="FBCoverPhoto" id="FBCoverPhoto_NearYear"></div>
					<div><img src="img/infinigen/FBCoverPhoto_movie7.jpg" alt="FBCoverPhoto" id="FBCoverPhoto_movie7"></div>
					<div><img src="img/infinigen/FBCoverPhoto_movie4.jpg" alt="FBCoverPhoto" id="FBCoverPhoto_movie4"></div>
					<div><img src="img/infinigen/FBCoverPhoto_movie3.jpg" alt="FBCoverPhoto" id="FBCoverPhoto_movie3"></div>
					<div><img src="img/infinigen/FBCoverPhoto_movie2.jpg" alt="FBCoverPhoto" id="FBCoverPhoto_movie2"></div>
					<div><img src="img/infinigen/FBCoverPhoto_movie5.jpg" alt="FBCoverPhoto" id="FBCoverPhoto_movie5"></div>		
					<div><img src="img/infinigen/FBCoverPhoto_movie1.jpg" alt="FBCoverPhoto" id="FBCoverPhoto_movie1"></div>						
				</div>						
			</div>
			
			<div class="backToCollection"><a href="#workStartPage">to the top of work collection</a></div>
		</div>
		
		<!-- --------   產品簡介設計    ---------------- -->
		<div id="product">
			<div class="product_title">產品設計</div>
			<div class="product_img">
				<div><img src="img/productIntroduction/U chip_01.jpg" alt="U chip_01" id="Uchip_01"></div>
				<div><img src="img/productIntroduction/U chip_02.jpg" alt="U chip_01" id="Uchip_02"></div>
				<div><img src="img/productIntroduction/U chip_03.jpg" alt="U chip_01" id="Uchip_03"></div>
				<div><img src="img/productIntroduction/U chip_04.jpg" alt="U chip_01" id="Uchip_04"></div>
				<div><img src="img/productIntroduction/U chip_05.jpg" alt="U chip_01" id="Uchip_05"></div>
			</div>
			<div class="backToCollection"><a href="#workStartPage">to the top of work collection</a></div>
		</div>
		
		<!-- --------   海報設計    ---------------- -->
		<div id="poster">
			<div class="poster_title">海報設計</div>
			<div class="poster_img">
				<img src="img/poster/NCCU.png" alt="NCCUPoster" id="NCCUPoster">
				<img src="img/poster/OSAAS.jpg" alt="OSAASPoster" id="OSAASPoster">
			</div>
			<div class="backToCollection"><a href="#workStartPage">to the top of work collection</a></div>
		</div>
		
		<!-- --------   其他    ---------------- -->
		<div id="other">
			<div class="other_title">其他</div>
			<div class="other_img">
				<img src="img/other/mike.jpg" alt="mike" id="mike">
				<img src="img/other/man.jpg" alt="man" id="man">
				<img src="img/other/character.jpg" alt="character" id="character">
			</div>
			<div class="backToCollection"><a href="#workStartPage">to the top of work collection</a></div>
		</div>
		
		<!-- --------     footer    ------------------------------------------------------------- -->
		<footer>
			<div id="footerText">© 2016 Yu Tung Hsiao.</div>
		</footer>
		

	</body>

	
	</html>