diff --git a/2017-Kapok-fan.html b/2017-Kapok-fan.html
new file mode 100644
index 0000000..abfb5c5
--- /dev/null
+++ b/2017-Kapok-fan.html
@@ -0,0 +1,239 @@
+
+<!DOCTYPE html>
+<html >
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
+  <link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
+  <title>CodePen - Resume</title>
+  
+  
+  
+  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
+
+      <style>
+      @charset "UTF-8";
+* {
+  font-family: "微軟正黑體";
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background-color: #3E3A39;
+}
+
+.container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 1024px;
+  background-color: #DCDCDD;
+  margin: 20px auto;
+}
+
+.left-bar {
+  background-color: #368CBF;
+  width: 28%;
+  margin: 0 1%;
+  box-shadow: 5px 0px 10px #8C95AA;
+  color: #F9F8FD;
+  text-shadow: 0.4px 0.4px 1px #DFDCE3;
+  letter-spacing: 3px;
+  padding: 20px;
+}
+.left-bar .leftMt {
+  padding: 40px 0px;
+}
+
+.right-bar {
+  width: 60%;
+  margin: 0px auto;
+}
+
+.left-block1 {
+  position: relative;
+}
+.left-block1 .img {
+  background: url(https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/20140031_1519698221448757_7578386114127055667_n.jpg?oh=a1fbea1b96bf83bc9a5e67fec18b1eca&oe=5A01258C);
+  width: 100%;
+  height: 300px;
+  background-position: right top;
+  background-size: 120%;
+  box-shadow: 0px -30px 50px black inset;
+  background-repeat: no-repeat;
+}
+.left-block1 .name {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  font-weight: 700;
+  font-size: 36px;
+  color: #F9F8FD;
+  letter-spacing: 3px;
+}
+.left-block1 .name span {
+  font-size: 20px;
+}
+
+.left-block4 i {
+  font-size: 30px;
+  margin-right: 15px;
+  cursor: pointer;
+}
+.left-block4 i span {
+  font-size: 12px;
+}
+
+.right {
+  background-color: #F9F8FD;
+  margin-top: 40px;
+  padding: 10px 30px;
+  box-shadow: 2px 2px 14px #3E3A39;
+}
+.right h3 {
+  font-size: 26px;
+  color: #256083;
+  letter-spacing: 2px;
+}
+.right p {
+  letter-spacing: 1px;
+  font-weight: bold;
+  color: #3E3A39;
+}
+
+.right-block2 .bar {
+  position: relative;
+  border: 4px solid;
+  height: 15px;
+  border-radius: 15px;
+  width: 85%;
+  margin: 5px 13px;
+  background-color: #DCDCDD;
+}
+.right-block2 .bar .HTML {
+  content: "";
+  display: block;
+  width: 90%;
+  height: 15px;
+  background-color: #368CBF;
+  border-radius: 15px;
+}
+.right-block2 .bar .javascript {
+  content: "";
+  display: block;
+  width: 85%;
+  height: 15px;
+  background-color: #368CBF;
+  border-radius: 15px;
+}
+.right-block2 .bar .Css {
+  content: "";
+  display: block;
+  width: 83%;
+  height: 15px;
+  background-color: #368CBF;
+  border-radius: 15px;
+}
+.right-block2 .bar .jQuery {
+  content: "";
+  display: block;
+  width: 80%;
+  height: 15px;
+  background-color: #368CBF;
+  border-radius: 15px;
+}
+.right-block2 .bar .Vue {
+  content: "";
+  display: block;
+  width: 92%;
+  height: 15px;
+  background-color: #368CBF;
+  border-radius: 15px;
+}
+.right-block2 .bar span {
+  position: absolute;
+  right: -50px;
+  top: -4px;
+}
+
+    </style>
+
+  
+  
+  
+  
+</head>
+
+<body translate="no" >
+
+  
+<div class="container">
+  <div class="left-bar">
+    <div class="left-block1">
+      <div class="img"></div>
+      <div class="name">范振哲<span>(Fan,Kevin)</span></div>
+    </div>
+    <div class="left-block2 leftMt">
+      <h3>學歷</h3>
+      <p>聯合大學資訊工程</p>
+      <p>苗栗高商商業經營</p>
+    </div>
+    <div class="left-block3 leftMt">
+      <h3>聯絡資訊</h3>
+      <p>手機:09XX-XXXXXX</p>
+      <p>苗栗縣頭份市中華路1237號</p>
+    </div>
+    <div class="left-block4 leftMt">
+      <h3>SOCIAL MEDIA</h3><i class="fa fa-instagram"> <span>(kevinypfan)</span></i><i class="fa fa-facebook"><span>(dioypfan)</span></i>
+    </div>
+  </div>
+  <div class="right-bar">
+    <div class="right-block1 right">
+      <h3>興趣</h3>
+      <p>無聊寫程式</p>
+      <p>有趣動漫</p>
+      <p>看電影</p>
+      <p>玩遊戲</p>
+    </div>
+    <div class="right-block2 right">
+      <h3>程式技能</h3>
+      <p>HTML
+        <div class="bar">
+          <div class="HTML"></div><span>90%</span>
+        </div>
+      </p>
+      <p>javascript
+        <div class="bar">
+          <div class="javascript"></div><span>85%</span>
+        </div>
+      </p>
+      <p>Css
+        <div class="bar">
+          <div class="Css"></div><span>83%</span>
+        </div>
+      </p>
+      <p>jQuery
+        <div class="bar">
+          <div class="jQuery"></div><span>80%</span>
+        </div>
+      </p>
+      <p>Vue
+        <div class="bar">
+          <div class="Vue"> </div><span>92%</span>
+        </div>
+      </p>
+    </div>
+    <div class="right-block3 right"></div>
+  </div>
+</div>
+  
+  
+  
+  
+  
+
+</body>
+</html>
+ 
\ No newline at end of file
