diff --git a/electroshot-config.json b/electroshot-config.json
index cece6c8..d167bac 100755
--- a/electroshot-config.json
+++ b/electroshot-config.json
@@ -1 +1 @@
-[{"url":"http://localhost:8080/#/resume/oblique","delay":0,"selector":"","zoom-factor":1,"format":"pdf","quality":75,"user-agent":"","latency":null,"download":null,"upload":null,"css":"","js":"","debug":false,"root":"","pdf":{"pageSize":"A4","marginsType":1,"printBackground":true,"landscape":false},"size":{"width":2481,"height":3508},"out":"/home/s/workspace/best-resume-ever/pdf/oblique.pdf"}]
\ No newline at end of file
+[{"url":"http://localhost:8080/#/resume/side-bar","delay":0,"selector":"","zoom-factor":1,"format":"pdf","quality":75,"user-agent":"","latency":null,"download":null,"upload":null,"css":"","js":"","debug":false,"root":"","pdf":{"pageSize":"A4","marginsType":1,"printBackground":true,"landscape":false},"size":{"width":2481,"height":3508},"out":"/home/s/workspace/best-resume-ever/pdf/side-bar.pdf"}]
\ No newline at end of file
diff --git a/package.json b/package.json
index 623b79e..9fd6378 100755
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "material-icons": "^0.1.0",
     "npm-font-open-sans": "^1.0.3",
     "npm-font-open-sans-condensed": "^1.0.3",
+    "raleway-webfont": "^3.0.1",
     "roboto-fontface": "^0.7.0",
     "source-sans-pro": "^2.0.10",
     "text-fitter": "0.0.8",
diff --git a/pdf/left-right.pdf b/pdf/left-right.pdf
index a414b1a..4348cb8 100644
Binary files a/pdf/left-right.pdf and b/pdf/left-right.pdf differ
diff --git a/pdf/material-blue.pdf b/pdf/material-blue.pdf
index e5b64e5..675d0d7 100644
Binary files a/pdf/material-blue.pdf and b/pdf/material-blue.pdf differ
diff --git a/pdf/material-dark.pdf b/pdf/material-dark.pdf
index 47e5481..245b81c 100755
Binary files a/pdf/material-dark.pdf and b/pdf/material-dark.pdf differ
diff --git a/pdf/oblique.pdf b/pdf/oblique.pdf
index c597138..4585d93 100644
Binary files a/pdf/oblique.pdf and b/pdf/oblique.pdf differ
diff --git a/pdf/side-bar.pdf b/pdf/side-bar.pdf
new file mode 100644
index 0000000..54fa96f
Binary files /dev/null and b/pdf/side-bar.pdf differ
diff --git a/src/App.vue b/src/App.vue
index 2961671..4f9d5da 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,9 +17,11 @@ export default {
 @import '../node_modules/source-sans-pro/source-sans-pro.css';
 @import '../node_modules/npm-font-open-sans/open-sans.css';
 @import '../node_modules/npm-font-open-sans-condensed/open-sans-condensed.css';
+@import '../node_modules/raleway-webfont/raleway.css';
 body {
   padding: 0;
   margin: 0;
   overflow-x: hidden;
+  background: #CCCCCC;
 }
 </style>
diff --git a/src/assets/preview/resume-side-bar.png b/src/assets/preview/resume-side-bar.png
index 369892f..feb8f3d 100755
Binary files a/src/assets/preview/resume-side-bar.png and b/src/assets/preview/resume-side-bar.png differ
diff --git a/src/components/resume-side-bar.vue b/src/components/resume-side-bar.vue
new file mode 100644
index 0000000..666f39c
--- /dev/null
+++ b/src/components/resume-side-bar.vue
@@ -0,0 +1,246 @@
+<template>
+  <div id="resume2" class="resume">
+      <div class="top-row">
+          <span class="person-name">  {{person.name.first}}  {{person.name.last}}    </span>
+          <span class="person-position">  {{person.position}}    </span>
+      </div>
+      <div class="left-col">
+          <div class="person-image">
+              <div class="image-centerer">
+                  <div class="img"></div>
+              </div>
+          </div>
+          <div class="contact">
+              <h3>Contact</h3>
+              <div class="contact-row">
+                  <a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a>
+              </div>
+              <div class="contact-row dots">
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+              </div>
+              <div class="contact-row">
+                  <a href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
+              </div>
+              <div class="contact-row dots">
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+              </div>
+              <div class="contact-row">
+                  {{person.contact.street}} <br> {{person.contact.city}}
+              </div>
+              <div class="contact-row dots">
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+              </div>
+              <div class="contact-row">
+                  <a :href="'https://github.com/'+person.contact.github">https://github.com/{{person.contact.github}}</a>
+              </div>
+          </div>
+      </div>
+      <div class="right-col">
+          <div class="experience">
+              <h3>Experience</h3>
+                  <div class="experience-block" v-for="experience in person.experience">
+                      <div class="row">
+                          <span class="company"> {{experience.company}} -</span>
+                          <span class="job-title"> {{experience.position}} </span>
+                      </div>
+                      <div class="row">
+                          <span class="time-period"> {{experience.timeperiod}}</span>
+                      </div>
+                      <div class="row">
+                          <span class="job-description"> {{experience.description}} </span>
+                      </div>
+                  </div>
+          </div>
+          <div class="education">
+              <h3>Education</h3>
+                  <div class="education-block" v-for="education in person.education">
+                      <div class="row">
+                          <span class="degree">{{education.degree}}</span>
+                      </div>
+                      <div class="row">
+                          <span class="degree-description">{{education.description}}</span>
+                      </div>
+                  </div>
+          </div>
+          <div class="skills-block">
+              <h3>Skills</h3>
+              <div class="skills">
+                      <div class="skill" v-for="skill in person.skills">
+                          <span class="skill-name">{{skill.name}}</span>
+                      </div>
+              </div>
+              <span class="skills-other"> {{person.skillDescription}} </span>
+          </div>
+      </div>
+  </div>
+
+  </div>
+</template>
+
+<script>
+import {
+  PERSON
+} from '../person';
+
+import Vue from 'vue';
+export default Vue.component('resume-side-bar', {
+  name: 'resume-side-bar',
+  data () {
+    return {
+      person: PERSON
+    };
+  }
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+#resume2 {
+  font-family: 'Raleway', sans-serif;
+  padding-bottom: 50px;
+}
+#resume2 h3 {
+  text-transform: uppercase;
+  padding-top: 0;
+  margin-top: 0;
+  letter-spacing: 5px;
+  font-weight: 400;
+}
+#resume2 a,
+#resume2 a:focus,
+#resume2 a:hover,
+#resume2 a:visited {
+  text-decoration: none;
+}
+#resume2 .top-row {
+  width: 100%;
+  padding-top: 100px;
+  padding-bottom: 100px;
+}
+#resume2 .top-row span {
+  width: 100%;
+  display: block;
+  text-align: center;
+  font-weight: normal;
+}
+#resume2 .top-row span.person-name {
+  text-transform: uppercase;
+  font-size: 50px;
+  letter-spacing: 10px;
+}
+#resume2 .top-row span.person-position {
+  letter-spacing: 5px;
+}
+#resume2 .left-col {
+  width: 26%;
+  float: left;
+  padding-left: 8%;
+  padding-right: 4%;
+}
+#resume2 .left-col .person-image .image-centerer {
+  display: flex;
+  justify-content: center;
+  height: auto;
+  overflow: hidden;
+}
+#resume2 .left-col .person-image .image-centerer .img {
+  flex: none;
+  background: url('../assets/person.jpg');
+  background-position: center;
+  background-size: cover;
+  height: 250px;
+  width: 100%;
+}
+#resume2 .left-col .contact h3 {
+  text-align: center;
+  margin-top: 20px;
+}
+#resume2 .left-col .contact .contact-row {
+  text-align: center;
+  letter-spacing: 2px;
+  margin-bottom: 3px;
+}
+#resume2 .left-col .contact .contact-row:first-of-type {
+  margin-top: 50px;
+}
+#resume2 .left-col .contact .contact-row.dots {
+  margin-top: 20px;
+  margin-bottom: 15px;
+  font-size: 10px;
+  color: rgba(153, 153, 153, 0.6);
+}
+#resume2 .left-col .contact .contact-row a {
+  color: black;
+}
+#resume2 .right-col {
+  width: 50%;
+  float: right;
+  padding-left: 4%;
+  padding-right: 8%;
+}
+#resume2 .right-col .experience-block {
+  margin-bottom: 10px;
+}
+#resume2 .right-col .experience-block .row:first-child {
+  margin-bottom: 3px;
+}
+#resume2 .right-col .experience-block .row .company {
+  text-transform: uppercase;
+  font-size: 19px;
+}
+#resume2 .right-col .experience-block .row .job-title {
+  font-size: 19px;
+}
+#resume2 .right-col .education {
+  margin-top: 50px;
+}
+#resume2 .right-col .education .education-block {
+  margin-bottom: 10px;
+}
+#resume2 .right-col .education .education-block .degree {
+  font-size: 19px;
+  text-transform: uppercase;
+  margin-bottom: 3px;
+}
+#resume2 .right-col .skills-block {
+  margin-top: 50px;
+  position: relative;
+}
+#resume2 .right-col .skills-block .skills {
+  margin-bottom: 10px;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  display: inline-block;
+  margin-bottom: 20px;
+}
+#resume2 .right-col .skills-block .skills .skill {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  position: relative;
+  border: #333 1px solid;
+  margin: 3px;
+  float: left;
+  font-size: 13px;
+}
+#resume2 .right-col .skills-block .skills .skill .skill-name {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+}
+#resume2 .right-col .skills-block .skills .skills-other {
+  display: inline-block;
+  width: 100%;
+  margin-top: 20px;
+}
+
+</style>
diff --git a/src/pages/home.vue b/src/pages/home.vue
index 8e6c3d0..044c65b 100755
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -5,26 +5,42 @@
   <div class="previews">
     <div class="preview">
       <router-link v-bind:to="'/resume/material-dark'">
-        <img src="../assets/preview/resume-material-dark.png" />
-        <span>material-dark</span>
+        <div class="preview-wrapper">
+          <img src="../assets/preview/resume-material-dark.png" />
+          <span>material-dark</span>
+        </div>
       </router-link>
     </div>
     <div class="preview">
       <router-link v-bind:to="'/resume/material-blue'">
+        <div class="preview-wrapper">
         <img src="../assets/preview/resume-material-blue.png" />
         <span>material-blue</span>
+      </div>
       </router-link>
     </div>
     <div class="preview">
       <router-link v-bind:to="'/resume/left-right'">
+        <div class="preview-wrapper">
         <img src="../assets/preview/resume-left-right.png" />
         <span>left-right</span>
+      </div>
       </router-link>
     </div>
     <div class="preview">
       <router-link v-bind:to="'/resume/oblique'">
+        <div class="preview-wrapper">
         <img src="../assets/preview/resume-oblique.png" />
         <span>oblique</span>
+      </div>
+      </router-link>
+    </div>
+    <div class="preview">
+      <router-link v-bind:to="'/resume/side-bar'">
+        <div class="preview-wrapper">
+        <img src="../assets/preview/resume-side-bar.png" />
+        <span>side-bar</span>
+      </div>
       </router-link>
     </div>
   </div>
@@ -47,6 +63,11 @@ export default Vue.component('resume', {
   font-weight: normal;
   text-align: center;
   width: 100%;
+  color: #ee6e73;
+    font-weight: 300;
+    font-size: 3.56rem;
+    line-height: 110%;
+    margin: 1.78rem 0 1.424rem 0;
 }
 
 .previews{
@@ -56,19 +77,36 @@ export default Vue.component('resume', {
 }
 
 .preview{
-  width: 30%;
-  float: left;
-  margin-left: 1.5%;
-  margin-right: 1.5%;
+  width: 180px;
+    float: left;
+    margin-left: 1.5%;
+    margin-right: 1.5%;
+    margin-bottom: 1.5%;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+    height: 252px;
+    overflow: hidden;
+}
+.preview-wrapper {
+  position: relative;
+  background: white;
 }
 
 .preview img{
   width: 100%;
+  opacity: 0.5;
+  filter: blur(1px);
 }
 
 .preview span{
-  width: 100%;
-  display: inline-block;
-  text-align: center;
+  position: absolute;
+    max-width: 100%;
+    font-size: 24px;
+    font-weight: 300;
+    color: rgba(0, 0, 0, 0.75);
+    width: 100%;
+    text-align: center;
+    display: inline-block;
+    top: 50%;
+    transform: translateY(-50%);
 }
 </style>
diff --git a/src/pages/resume.vue b/src/pages/resume.vue
index e3a803c..1f5b505 100755
--- a/src/pages/resume.vue
+++ b/src/pages/resume.vue
@@ -6,6 +6,7 @@
       <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>
       <resume-oblique v-if="$route.params.resumeid==='oblique'"></resume-oblique>
+      <resume-side-bar v-if="$route.params.resumeid==='side-bar'"></resume-side-bar>
     </div>
   </div>
 </div>
@@ -19,6 +20,7 @@ import '../components/resume-material-dark.vue';
 import '../components/resume-material-blue.vue';
 import '../components/resume-left-right.vue';
 import '../components/resume-oblique.vue';
+import '../components/resume-side-bar.vue';
 export default Vue.component('resume', {
   name: 'app',
   mounted: () => {