hellojs-tw · yuxuan39 · Jul 26, 2017 · Evafly · Aug 10, 2017 · Evafly
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/2017-hellojs_overflow-kaya/2017-hellojs_overflow-kaya.html b/2017-hellojs_overflow-kaya/2017-hellojs_overflow-kaya.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+    crossorigin="anonymous">
+  <link rel="Shortcut Icon" type="image/x-icon" href="http://educayoruba.com/wp-content/uploads/2017/01/simpatia-amarra%C3%A7%C3%A3o.png">
+  <title>Kaya's Resume</title>
+<link href="static/css/index.53b2a3d2.bundle.css" rel="stylesheet"></head>
+
+<body>
+  <aside class="row col-md-3 col-sm-3 bg-info col-md-offset-1 panel panel-primary">
+    <div class="panel-body bg-info">
+      <div class="photo-and-name row">
+        <div class="photo">
+          <img src="http://i1.kym-cdn.com/entries/icons/original/000/021/927/Nier.png" width="150px" class="img-circle">
+        </div>
+        <h2 class="name text-center">莊于萱</p>
+      </div>
+      <div class="infotmation row">
+        <div class="row col-md-12 col-sm-12">
+          <p class="bg-primary col-md-4 col-sm-4">信箱</p>
+          <p class="col-md-8 col-sm-8">kumo9102151@gmail.com</p>
+        </div>
+        <div class="row col-md-12 col-sm-12">
+          <p class="bg-primary col-md-4 col-sm-4">電話</p>
+          <p class="col-md-8 col-sm-8">0912-345-678</p>
+        </div>
+        <div class="row col-md-12 col-sm-12">
+          <p class="bg-primary col-md-4 col-sm-4">github</p>
+          <a href="https://github.com/yuxuan39" class="col-md-8 col-sm-8">yuxuan39</a>
+        </div>
+      </div>
+      <div class="other-information row">
+        <h4 class="text-center bg-primary">學歷</h4>
+        <p class="text-center ">長榮大學翻譯學系<br> ( 2013 - 2017 )</p>
+        <h4 class="text-center bg-primary">技能</h4>
+        <div class="skills row label-list" id="skills">
+          <p class="text-center label label-danger center-block">HTML</p>
+          <p class="text-center label label-danger center-block">CSS / SCSS</p>
+          <p class="text-center label label-danger center-block">JavaScript</p>
+        </div>
+        <h4 class="text-center bg-primary">外語</h4>
+        <div class="language row label-list" id="lanuage">
+          <p class="text-center label label-danger center-block">英文</p>
+          <p class="text-center label label-danger center-block">日文</p>
+        </div>
+      </div>
+    </div>
+  </aside>
+  <div class="row col-md-7 col-sm-7" style="margin-left: 10px;">
+    <div class="panel panel-primary">
+      <div class="panel-heading">
+        <h3 class="panel-title">個人簡介</h3>
+      </div>
+      <div class="panel-body text-default">我從 Coursera、Codecademy、W3school、nodeschool 學了 HTML、CSS、JaveScript，並且藉由其他線上開放課程來補足背景知識。目前可以運用 SCSS 搭配 flexbox 和 Bootstrap
+        排版，以及使用 ChromeDevTools 來調整版面。<br><br>在 HelloJS 課程以外的時間也有練習刻其他網站，目標是課程結束後能找到實習。</div>
+      <div class="panel-heading">
+        <h3 class="panel-title">工作經歷</h3>
+      </div>
+      <div class="panel-body text-default">
+        <h5>Lorem ( 2016 - 2016 )</h5>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis delectus totam soluta quod, odio aliquid assumenda inventore.
+        Atque dolores eligendi perferendis dolor, laboriosam aut voluptatum esse itaque consequatur distinctio ullam, repudiandae
+        iusto ipsam sequi, modi vitae provident assumenda natus. Ut ipsum esse ratione repellat nemo velit placeat facilis
+        sapiente beatae illum incidunt optio tenetur fuga maxime, ducimus consectetur
+        <h5>Lorem ipsum ( 2014 - 2015 )</h5>
+        odit veritatis officia. Maxime sit alias blanditiis facilis quos doloremque molestiae dignissimos. Est doloribus quae assumenda
+        magnam facilis! Dolorem perspiciatis optio laboriosam dolor, cum at earum, minima iste fugiat odio accusamus fuga.
+        Vero quibusdam deleniti adipisci laudantium nobis possimus maxime repudiandae facilis corrupti iure enim illo deserunt
+        consectetur officiis architecto, vitae minus, optio, recusandae odio. Dolorem, debitis itaque saepe? Nam obcaecati
+        porro libero adipisci voluptatum earum, minus perspiciatis cumque sit commodi autem dignissimos qui tempore eligendi
+        ad possimus velit repellendus quibusdam. Ducimus voluptate enim quo totam, id nostrum nobis reiciendis ex recusandae.
+        <h5>Lorem ipsum ( 2013 - 2014 )</h5>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga voluptatibus omnis ullam, in veniam facere minima perferendis
+        sunt, officia, iusto harum, eaque? Dolore, repellat officiis dolor, esse eos sequi, laudantium a minima, optio ipsa
+        cupiditate at. Omnis, necessitatibus harum natus!
+      </div>
+    </div>
+  </div>
+<script type="text/javascript" src="static/js/commons.53b2a3d2.js"></script><script type="text/javascript" src="static/js/index.53b2a3d2.bundle.js"></script></body>
+
+</html>
diff --git a/2017-hellojs_overflow-kaya/static/css/index.53b2a3d2.bundle.css b/2017-hellojs_overflow-kaya/static/css/index.53b2a3d2.bundle.css
diff --git a/2017-hellojs_overflow-kaya/static/css/index.53b2a3d2.bundle.css.map b/2017-hellojs_overflow-kaya/static/css/index.53b2a3d2.bundle.css.map
diff --git a/2017-hellojs_overflow-kaya/static/js/commons.53b2a3d2.js b/2017-hellojs_overflow-kaya/static/js/commons.53b2a3d2.js
diff --git a/2017-hellojs_overflow-kaya/static/js/commons.53b2a3d2.js.map b/2017-hellojs_overflow-kaya/static/js/commons.53b2a3d2.js.map
diff --git a/2017-hellojs_overflow-kaya/static/js/index.53b2a3d2.bundle.js b/2017-hellojs_overflow-kaya/static/js/index.53b2a3d2.bundle.js
diff --git a/2017-hellojs_overflow-kaya/static/js/index.53b2a3d2.bundle.js.map b/2017-hellojs_overflow-kaya/static/js/index.53b2a3d2.bundle.js.map
diff --git a/package.json b/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "frontend-template",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "NODE_ENV=development webpack-dev-server --open --config webpack.config.dev.js",
+    "watch": "NODE_ENV=development webpack --progress --watch --config webpack.config.dev.js",
+    "build": "webpack -p --config webpack.config.prod.js",
+    "test": "NODE_ENV=development echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {},
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.1.1",
+    "babel-preset-es2015": "^6.24.1",
+    "clean-webpack-plugin": "^0.1.16",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.4",
+    "cssnano": "^3.10.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "html-webpack-plugin": "^2.29.0",
+    "lodash": "^4.17.4",
+    "node-sass": "^4.5.3",
+    "postcss": "^6.0.6",
+    "postcss-flexbugs-fixes": "^3.0.0",
+    "postcss-loader": "^2.0.6",
+    "precss": "^2.0.0",
+    "rucksack-css": "^0.9.1",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
+    "url-loader": "^0.5.9",
+    "webpack": "^3.3.0",
+    "webpack-dev-server": "^2.5.1"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+    crossorigin="anonymous">
+  <link rel="Shortcut Icon" type="image/x-icon" href="http://educayoruba.com/wp-content/uploads/2017/01/simpatia-amarra%C3%A7%C3%A3o.png">
+  <title>Kaya's Resume</title>
+</head>
+
+<body>
+  <aside class="row col-md-3 col-sm-3 bg-info col-md-offset-1 panel panel-primary">
+    <div class="panel-body bg-info">
+      <div class="photo-and-name row">
+        <div class="photo">
+          <img src="http://i1.kym-cdn.com/entries/icons/original/000/021/927/Nier.png" width="150px" class="img-circle">
+        </div>
+        <h2 class="name text-center">莊于萱</p>
+      </div>
+      <div class="infotmation row">
+        <div class="row col-md-12 col-sm-12">
+          <p class="bg-primary col-md-4 col-sm-4">信箱</p>
+          <p class="col-md-8 col-sm-8">kumo9102151@gmail.com</p>
+        </div>
+        <div class="row col-md-12 col-sm-12">
+          <p class="bg-primary col-md-4 col-sm-4">電話</p>
+          <p class="col-md-8 col-sm-8">0912-345-678</p>
+        </div>
+        <div class="row col-md-12 col-sm-12">
+          <p class="bg-primary col-md-4 col-sm-4">github</p>
+          <a href="https://github.com/yuxuan39" class="col-md-8 col-sm-8">yuxuan39</a>
+        </div>
+      </div>
+      <div class="other-information row">
+        <h4 class="text-center bg-primary">學歷</h4>
+        <p class="text-center ">長榮大學翻譯學系<br> ( 2013 - 2017 )</p>
+        <h4 class="text-center bg-primary">技能</h4>
+        <div class="skills row label-list" id="skills">
+          <p class="text-center label label-danger center-block">HTML</p>
+          <p class="text-center label label-danger center-block">CSS / SCSS</p>
+          <p class="text-center label label-danger center-block">JavaScript</p>
+        </div>
+        <h4 class="text-center bg-primary">外語</h4>
+        <div class="language row label-list" id="lanuage">
+          <p class="text-center label label-danger center-block">英文</p>
+          <p class="text-center label label-danger center-block">日文</p>
+        </div>
+      </div>
+    </div>
+  </aside>
+  <div class="row col-md-7 col-sm-7" style="margin-left: 10px;">
+    <div class="panel panel-primary">
+      <div class="panel-heading">
+        <h3 class="panel-title">個人簡介</h3>
+      </div>
+      <div class="panel-body text-default">我從 Coursera、Codecademy、W3school、nodeschool 學了 HTML、CSS、JaveScript，並且藉由其他線上開放課程來補足背景知識。目前可以運用 SCSS 搭配 flexbox 和 Bootstrap
+        排版，以及使用 ChromeDevTools 來調整版面。<br><br>在 HelloJS 課程以外的時間也有練習刻其他網站，目標是課程結束後能找到實習。</div>
+      <div class="panel-heading">
+        <h3 class="panel-title">工作經歷</h3>
+      </div>
+      <div class="panel-body text-default">
+        <h5>Lorem ( 2016 - 2016 )</h5>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis delectus totam soluta quod, odio aliquid assumenda inventore.
+        Atque dolores eligendi perferendis dolor, laboriosam aut voluptatum esse itaque consequatur distinctio ullam, repudiandae
+        iusto ipsam sequi, modi vitae provident assumenda natus. Ut ipsum esse ratione repellat nemo velit placeat facilis
+        sapiente beatae illum incidunt optio tenetur fuga maxime, ducimus consectetur
+        <h5>Lorem ipsum ( 2014 - 2015 )</h5>
+        odit veritatis officia. Maxime sit alias blanditiis facilis quos doloremque molestiae dignissimos. Est doloribus quae assumenda
+        magnam facilis! Dolorem perspiciatis optio laboriosam dolor, cum at earum, minima iste fugiat odio accusamus fuga.
+        Vero quibusdam deleniti adipisci laudantium nobis possimus maxime repudiandae facilis corrupti iure enim illo deserunt
+        consectetur officiis architecto, vitae minus, optio, recusandae odio. Dolorem, debitis itaque saepe? Nam obcaecati
+        porro libero adipisci voluptatum earum, minus perspiciatis cumque sit commodi autem dignissimos qui tempore eligendi
+        ad possimus velit repellendus quibusdam. Ducimus voluptate enim quo totam, id nostrum nobis reiciendis ex recusandae.
+        <h5>Lorem ipsum ( 2013 - 2014 )</h5>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga voluptatibus omnis ullam, in veniam facere minima perferendis
+        sunt, officia, iusto harum, eaque? Dolore, repellat officiis dolor, esse eos sequi, laudantium a minima, optio ipsa
+        cupiditate at. Omnis, necessitatibus harum natus!
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1 @@
+import './styles/style.scss'
diff --git a/src/styles/style.scss b/src/styles/style.scss
@@ -0,0 +1,25 @@
+body {
+    padding: 10px;
+    .panel {
+        padding: 0;
+        .photo {
+            display: block;
+            margin: 0 auto;
+            width: 150px;
+        }
+        .name {
+            display: block;
+        }
+        .label-list {
+            display: flex;
+            flex-flow: row wrap;
+            justify-content: center;
+            align-content: center;
+            margin: 0 auto;
+            padding: 10px;
+            p {
+                font-size: 16px;
+            }
+        }
+    }
+}