ADD resume left-right

package.json

@@ -17,6 +17,7 @@
     "material-design-icons": "^3.0.1",
     "material-icons": "^0.1.0",
     "roboto-fontface": "^0.7.0",
+    "source-sans-pro": "^2.0.10",
     "text-fitter": "0.0.8",
     "vue": "^2.2.6",
     "vue-router": "^2.3.1"

src/App.vue

@@ -14,6 +14,7 @@ export default {
 @import '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css';
 @import '../node_modules/font-awesome/css/font-awesome.css';
 @import '../node_modules/material-design-icons/iconfont/material-icons.css';
+@import '../node_modules/source-sans-pro/source-sans-pro.css';
 
 body {
   padding: 0;

src/components/resume-left-right.vue

@@ -0,0 +1,263 @@
+<template>
+<div class="resume" id="resume1">
+  <div class="row text-center">
+    <span class="name">{{person.name.first}}  {{person.name.last}}</span>
+  </div>
+  <div class="row text-center">
+    <p class="position center">{{person.position}}</p>
+  </div>
+  <div class="row">
+    <div class="image center">
+      <div class="img"></div>
+    </div>
+  </div>
+  <div class="left half">
+    <div class="experience">
+      <h3>Experience</h3>
+      <div class="experience-block" v-for="experience in person.experience">
+        <span class="company"> {{experience.company}} </span>
+        <span class="job-title"> {{experience.position}} </span>
+        <span class="time-period"> {{experience.timeperiod}}</span>
+        <span class="job-description"> {{experience.description}} </span>
+      </div>
+    </div>
+    <div class="contact">
+      <h3>Contact</h3>
+      <table>
+        <tr>
+          <td><a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a></td>
+          <td><i class="fa fa-envelope" aria-hidden="true"></i></td>
+        </tr>
+        <tr>
+          <td><a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a></td>
+          <td><i class="fa fa-phone" aria-hidden="true"></i></td>
+        </tr>
+        <tr>
+          <td>{{person.contact.street}} <br> {{person.contact.city}}</td>
+          <td><i class="fa fa-home" aria-hidden="true"></i></td>
+        </tr>
+        <tr>
+          <td><a :href="person.contact.website">{{person.contact.website}}</a></td>
+          <td><i class="fa fa-globe" aria-hidden="true"></i></td>
+        </tr>
+        <tr>
+          <td><a :href="'https://github.com/'+person.contact.github">https://github.com/{{person.contact.github}}</a></td>
+          <td><i class="fa fa-github" aria-hidden="true"></i></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+  <div class="right half">
+    <div class="education">
+      <h3>Education</h3>
+      <div class="education-block" v-for="education in person.education">
+        <span class="degree">{{education.degree}}</span>
+        <span class="degree-description">{{education.description}}</span>
+      </div>
+    </div>
+    <h3>Skills</h3>
+    <div class="skills">
+      <div class="skill-block" v-for="skill in person.skills">
+        <span class="skill">{{skill.name}}</span>
+        <div class="skill-bar">
+          <div :style="'width: '+skill.level+'%'" class="level"> </div>
+        </div>
+      </div>
+    </div>
+    <span class="skills-other"> {{person.skillDescription}} </span>
+  </div>
+</div>
+</template>
+
+<script>
+import {
+  PERSON
+} from '../person';
+
+import Vue from 'vue';
+export default Vue.component('resume-left-right', {
+  name: 'resume-left-right',
+  data () {
+    return {
+      person: PERSON
+    };
+  }
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+#resume1 {
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 20px;
+  padding-bottom: 50px;
+}
+
+#resume1 h3 {
+  margin-bottom: 0;
+}
+
+#resume1 a,
+#resume1 a:focus,
+#resume1 a:hover,
+#resume1 a:visited {
+  color: #616161;
+}
+
+#resume1 span {
+  display: inline-block;
+}
+
+#resume1 .row {
+  width: 100%;
+}
+
+#resume1 .half {
+  width: 44%;
+}
+
+#resume1 .half.left {
+  float: left;
+  text-align: right;
+  padding-left: 4%;
+  padding-right: 2%;
+}
+
+#resume1 .half.right {
+  float: right;
+  text-align: left;
+  padding-right: 4%;
+  padding-left: 2%;
+}
+
+#resume1 .center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#resume1 .text-center {
+  text-align: center;
+}
+
+#resume1 .name {
+  border: 1px solid black;
+  text-transform: uppercase;
+  padding: 10px 20px;
+  margin-top: 80px;
+  margin-bottom: 5px;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 35px;
+  font-weight: 600;
+  letter-spacing: 10px;
+}
+
+#resume1 .position {
+  text-transform: uppercase;
+  font-family: 'Open Sans', sans-serif;
+  font-size: smaller;
+  color: #757575;
+  margin-bottom: 40px;
+}
+
+#resume1 .image {
+  width: 100px;
+  height: 100px;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
+#resume1 .image .img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-image: url('../assets/person.jpg');
+  background-repeat: none;
+  background-position: center;
+  background-size: cover;
+}
+
+#resume1 .contact {
+  width: 100%;
+}
+
+#resume1 .experience .experience-block span {
+  width: 100%;
+  color: #616161;
+}
+
+#resume1 .experience .experience-block span.company {
+  font-weight: bold;
+  padding-bottom: 5px;
+  padding-top: 10px;
+  color: #424242;
+}
+
+#resume1 .experience .experience-block span.job-title {
+  font-style: italic;
+}
+
+#resume1 .education-block span {
+  color: #616161;
+}
+
+#resume1 .education-block span.degree {
+  font-weight: bold;
+  padding-bottom: 5px;
+  padding-top: 10px;
+  color: #424242;
+}
+
+#resume1 .skills-other {
+  color: #616161;
+  margin-bottom: 10px;
+}
+
+#resume1 .skills {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+#resume1 .skills .skill-block {
+  padding-bottom: 10px;
+  display: inline-block;
+}
+
+#resume1 .skills .skill-block .skill {
+  width: 100px;
+  color: #616161;
+  float: left;
+}
+
+#resume1 .skills .skill-block .skill-bar {
+  float: right;
+  background: #E0E0E0;
+  overflow: hidden;
+  height: 8px;
+  border-radius: 3px;
+  margin-top: 6.5px;
+  position: relative;
+  width: 249px;
+}
+
+#resume1 .skills .skill-block .skill-bar .level {
+  background: #757575;
+  height: 100%;
+}
+
+#resume1 .contact table {
+  text-align: right;
+  float: right;
+  margin-top: 5px;
+  color: #616161;
+  font-size: 20px;
+}
+
+#resume1 .contact table i {
+  padding: 2px;
+  color: #616161;
+}
+
+#resume1 .contact table tr td:nth-child(2) {
+  vertical-align: top;
+}
+</style>

src/pages/home.vue

@@ -15,6 +15,12 @@
         <span>material-blue</span>
       </router-link>
     </div>
+    <div class="preview">
+      <router-link v-bind:to="'/resume/left-right'">
+        <img src="../assets/preview/resume-left-right.png" />
+        <span>left-right</span>
+      </router-link>
+    </div>
   </div>
 </div>
 </template>

src/pages/resume.vue

@@ -4,6 +4,7 @@
     <div class="page-inner">
       <resume-material-dark v-if="$route.params.resumeid==='material-dark'"></resume-material-dark>
       <resume-material-blue v-if="$route.params.resumeid==='material-blue'"></resume-material-blue>
+      <resume-left-right v-if="$route.params.resumeid==='left-right'"></resume-left-right>
     </div>
   </div>
 </div>
@@ -15,6 +16,7 @@ import * as chromeShadowFixer from 'chrome-shadow-fixer';
 import * as textFitter from 'text-fitter';
 import '../components/resume-material-dark.vue';
 import '../components/resume-material-blue.vue';
+import '../components/resume-left-right.vue';
 export default Vue.component('resume', {
   name: 'app',
   mounted: () => {