diff --git a/pdf/cool-rtl.pdf b/pdf/cool-rtl.pdf
index a90ff28..c6366ee 100644
Binary files a/pdf/cool-rtl.pdf and b/pdf/cool-rtl.pdf differ
diff --git a/pdf/cool-rtl2.pdf b/pdf/cool-rtl2.pdf
index 29bbe8c..c750be6 100644
Binary files a/pdf/cool-rtl2.pdf and b/pdf/cool-rtl2.pdf differ
diff --git a/pdf/cool.pdf b/pdf/cool.pdf
index 25182f1..326dcca 100644
Binary files a/pdf/cool.pdf and b/pdf/cool.pdf differ
diff --git a/pdf/creative.pdf b/pdf/creative.pdf
index a8722e1..88a2d04 100644
Binary files a/pdf/creative.pdf and b/pdf/creative.pdf differ
diff --git a/pdf/green.pdf b/pdf/green.pdf
index 92ec95b..3e3d4b8 100644
Binary files a/pdf/green.pdf and b/pdf/green.pdf differ
diff --git a/pdf/left-right-projects.pdf b/pdf/left-right-projects.pdf
new file mode 100644
index 0000000..f211170
Binary files /dev/null and b/pdf/left-right-projects.pdf differ
diff --git a/pdf/left-right-rtl.pdf b/pdf/left-right-rtl.pdf
index 504cad9..bcb8d59 100644
Binary files a/pdf/left-right-rtl.pdf and b/pdf/left-right-rtl.pdf differ
diff --git a/pdf/left-right.pdf b/pdf/left-right.pdf
index 655de65..cd8b8ea 100644
Binary files a/pdf/left-right.pdf and b/pdf/left-right.pdf differ
diff --git a/pdf/material-dark-projects.pdf b/pdf/material-dark-projects.pdf
new file mode 100644
index 0000000..2154883
Binary files /dev/null and b/pdf/material-dark-projects.pdf differ
diff --git a/pdf/material-dark.pdf b/pdf/material-dark.pdf
index f97c7cb..4d8c45a 100644
Binary files a/pdf/material-dark.pdf and b/pdf/material-dark.pdf differ
diff --git a/pdf/oblique-projects.pdf b/pdf/oblique-projects.pdf
new file mode 100644
index 0000000..2532bb2
Binary files /dev/null and b/pdf/oblique-projects.pdf differ
diff --git a/pdf/oblique-rtl.pdf b/pdf/oblique-rtl.pdf
index 2b84732..e2cad12 100644
Binary files a/pdf/oblique-rtl.pdf and b/pdf/oblique-rtl.pdf differ
diff --git a/pdf/oblique.pdf b/pdf/oblique.pdf
index 30293fb..c750b26 100644
Binary files a/pdf/oblique.pdf and b/pdf/oblique.pdf differ
diff --git a/pdf/purple.pdf b/pdf/purple.pdf
index bd84f56..cd4961f 100644
Binary files a/pdf/purple.pdf and b/pdf/purple.pdf differ
diff --git a/pdf/side-bar-projects.pdf b/pdf/side-bar-projects.pdf
new file mode 100644
index 0000000..50a9fda
Binary files /dev/null and b/pdf/side-bar-projects.pdf differ
diff --git a/pdf/side-bar-rtl.pdf b/pdf/side-bar-rtl.pdf
index 3d3ea1f..60ed022 100644
Binary files a/pdf/side-bar-rtl.pdf and b/pdf/side-bar-rtl.pdf differ
diff --git a/pdf/side-bar.pdf b/pdf/side-bar.pdf
index 7652fe5..380436d 100644
Binary files a/pdf/side-bar.pdf and b/pdf/side-bar.pdf differ
diff --git a/resume/data.yml b/resume/data.yml
index f21fc44..dd1c369 100755
--- a/resume/data.yml
+++ b/resume/data.yml
@@ -63,6 +63,7 @@ knowledge: Also proficient in Adobe Photoshop and Illustrator, grew up bilingual
 projects:
 - name: best-resume-ever
   platform: Vue
+  timeperiod: February 2016
   description: 👔 💼 Build fast 🚀 and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS.
   url: https://github.com/salomonelli/best-resume-ever
 
diff --git a/src/assets/preview/resume-cool-rtl.png b/src/assets/preview/resume-cool-rtl.png
index f92057f..6ec7484 100644
Binary files a/src/assets/preview/resume-cool-rtl.png and b/src/assets/preview/resume-cool-rtl.png differ
diff --git a/src/assets/preview/resume-cool-rtl2.png b/src/assets/preview/resume-cool-rtl2.png
index 1f2e785..b66436e 100644
Binary files a/src/assets/preview/resume-cool-rtl2.png and b/src/assets/preview/resume-cool-rtl2.png differ
diff --git a/src/assets/preview/resume-cool.png b/src/assets/preview/resume-cool.png
index f673858..74803ad 100644
Binary files a/src/assets/preview/resume-cool.png and b/src/assets/preview/resume-cool.png differ
diff --git a/src/assets/preview/resume-creative.png b/src/assets/preview/resume-creative.png
index 8e45210..6b6ed81 100644
Binary files a/src/assets/preview/resume-creative.png and b/src/assets/preview/resume-creative.png differ
diff --git a/src/assets/preview/resume-green.png b/src/assets/preview/resume-green.png
index b31b461..7155815 100644
Binary files a/src/assets/preview/resume-green.png and b/src/assets/preview/resume-green.png differ
diff --git a/src/assets/preview/resume-left-right-projects.png b/src/assets/preview/resume-left-right-projects.png
new file mode 100644
index 0000000..8e6eba3
Binary files /dev/null and b/src/assets/preview/resume-left-right-projects.png differ
diff --git a/src/assets/preview/resume-left-right-rtl.png b/src/assets/preview/resume-left-right-rtl.png
index 541f2a9..5df40e0 100644
Binary files a/src/assets/preview/resume-left-right-rtl.png and b/src/assets/preview/resume-left-right-rtl.png differ
diff --git a/src/assets/preview/resume-left-right.png b/src/assets/preview/resume-left-right.png
index 6279ddd..4a0e6eb 100644
Binary files a/src/assets/preview/resume-left-right.png and b/src/assets/preview/resume-left-right.png differ
diff --git a/src/assets/preview/resume-material-dark-projects.png b/src/assets/preview/resume-material-dark-projects.png
new file mode 100644
index 0000000..59ed973
Binary files /dev/null and b/src/assets/preview/resume-material-dark-projects.png differ
diff --git a/src/assets/preview/resume-material-dark.png b/src/assets/preview/resume-material-dark.png
index 763aa10..46a18b1 100644
Binary files a/src/assets/preview/resume-material-dark.png and b/src/assets/preview/resume-material-dark.png differ
diff --git a/src/assets/preview/resume-oblique-projects.png b/src/assets/preview/resume-oblique-projects.png
new file mode 100644
index 0000000..486c1d7
Binary files /dev/null and b/src/assets/preview/resume-oblique-projects.png differ
diff --git a/src/assets/preview/resume-oblique-rtl.png b/src/assets/preview/resume-oblique-rtl.png
index 2ff68f4..4733a7a 100644
Binary files a/src/assets/preview/resume-oblique-rtl.png and b/src/assets/preview/resume-oblique-rtl.png differ
diff --git a/src/assets/preview/resume-oblique.png b/src/assets/preview/resume-oblique.png
index 271e969..d9e4849 100644
Binary files a/src/assets/preview/resume-oblique.png and b/src/assets/preview/resume-oblique.png differ
diff --git a/src/assets/preview/resume-purple.png b/src/assets/preview/resume-purple.png
index 9dbf468..2284d7d 100644
Binary files a/src/assets/preview/resume-purple.png and b/src/assets/preview/resume-purple.png differ
diff --git a/src/assets/preview/resume-side-bar-projects.png b/src/assets/preview/resume-side-bar-projects.png
new file mode 100644
index 0000000..b4b5c77
Binary files /dev/null and b/src/assets/preview/resume-side-bar-projects.png differ
diff --git a/src/assets/preview/resume-side-bar-rtl.png b/src/assets/preview/resume-side-bar-rtl.png
index 3e77585..772bcc6 100644
Binary files a/src/assets/preview/resume-side-bar-rtl.png and b/src/assets/preview/resume-side-bar-rtl.png differ
diff --git a/src/assets/preview/resume-side-bar.png b/src/assets/preview/resume-side-bar.png
index b861ad5..ab15605 100644
Binary files a/src/assets/preview/resume-side-bar.png and b/src/assets/preview/resume-side-bar.png differ
diff --git a/src/pages/home.vue b/src/pages/home.vue
index bc4457f..36e0d21 100755
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -14,6 +14,14 @@
         </div>
       </router-link>
     </div>
+    <div class="preview">
+      <router-link v-bind:to="'/resume/material-dark-projects'">
+        <div class="preview-wrapper">
+          <img src="../assets/preview/resume-material-dark-projects.png" />
+          <span>material-dark-projects</span>
+        </div>
+      </router-link>
+    </div>
     <div class="preview">
       <router-link v-bind:to="'/resume/left-right'">
         <div class="preview-wrapper">
@@ -22,6 +30,14 @@
         </div>
       </router-link>
     </div>
+    <div class="preview">
+      <router-link v-bind:to="'/resume/left-right-projects'">
+        <div class="preview-wrapper">
+          <img src="../assets/preview/resume-left-right-projects.png" />
+          <span>left-right-projects</span>
+        </div>
+      </router-link>
+    </div>
     <div class="preview">
       <router-link v-bind:to="'/resume/left-right-rtl'">
         <div class="preview-wrapper">
@@ -38,6 +54,14 @@
         </div>
       </router-link>
     </div>
+    <div class="preview">
+      <router-link v-bind:to="'/resume/oblique-projects'">
+        <div class="preview-wrapper">
+          <img src="../assets/preview/resume-oblique-projects.png" />
+          <span>oblique-projects</span>
+        </div>
+      </router-link>
+    </div>
     <div class="preview">
         <router-link v-bind:to="'/resume/oblique-rtl'">
             <div class="preview-wrapper">
@@ -54,6 +78,14 @@
         </div>
       </router-link>
     </div>
+    <div class="preview">
+      <router-link v-bind:to="'/resume/side-bar-projects'">
+        <div class="preview-wrapper">
+          <img src="../assets/preview/resume-side-bar-projects.png" />
+          <span>side-bar-projects</span>
+        </div>
+      </router-link>
+    </div>
     <div class="preview">
       <router-link v-bind:to="'/resume/side-bar-rtl'">
         <div class="preview-wrapper">
diff --git a/src/resumes/left-right-projects.vue b/src/resumes/left-right-projects.vue
new file mode 100755
index 0000000..8d526c8
--- /dev/null
+++ b/src/resumes/left-right-projects.vue
@@ -0,0 +1,260 @@
+<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="timeperiod">{{education.timeperiod}}</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 class="projects">
+    <h3>Projects</h3>
+    <div class="project-block" v-for="project in person.projects">
+      <span class="project">{{project.name}}</span>
+      <br>
+      <span class="project-description">{{project.description}}</span>
+    </div>
+
+  </div>
+
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { getVueOptions } from './options';
+
+const name = 'left-right-projects';
+export default Vue.component(name, getVueOptions(name));
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+#resume1 {
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 15px;
+    padding-bottom: 50px;
+    a,
+    a:focus,
+    a:hover,
+    a:visited {
+        color: #616161;
+    }
+    h3 {
+        margin-bottom: 0;
+    }
+    span {
+        display: inline-block;
+    }
+    .row {
+        width: 100%;
+    }
+    .half {
+        width: 44%;
+    }
+    .half.left {
+        float: left;
+        text-align: right;
+        padding-left: 4%;
+        padding-right: 2%;
+    }
+    .half.right {
+        float: right;
+        text-align: left;
+        padding-right: 4%;
+        padding-left: 2%;
+    }
+    .center {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .text-center {
+        text-align: center;
+    }
+    .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;
+    }
+    .position {
+        text-transform: uppercase;
+        font-family: 'Open Sans', sans-serif;
+        font-size: smaller;
+        color: #757575;
+        margin-bottom: 40px;
+    }
+    .image {
+        width: 100px;
+        height: 100px;
+        margin-top: 50px;
+        margin-bottom: 50px;
+        .img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background-image: url("../../resume/id.jpg");
+            background-repeat: none;
+            background-position: center;
+            background-size: cover;
+        }
+    }
+    .contact {
+        width: 100%;
+        table {
+            text-align: right;
+            float: right;
+            margin-top: 5px;
+            color: #616161;
+            font-size: 15px;
+            i {
+                padding: 2px;
+                color: #616161;
+            }
+            tr td:nth-child(2) {
+                vertical-align: top;
+            }
+        }
+    }
+    .experience .experience-block span {
+        width: 100%;
+        color: #616161;
+    }
+    .experience .experience-block span.company {
+        font-weight: bold;
+        padding-bottom: 5px;
+        padding-top: 10px;
+        color: #424242;
+    }
+    .experience .experience-block span.job-title {
+        font-style: italic;
+    }
+    .education-block span {
+        color: #616161;
+    }
+    .education-block span.degree {
+        font-weight: bold;
+        padding-bottom: 5px;
+        padding-top: 10px;
+        color: #424242;
+    }
+    .project-block {
+        display: flex;
+        flex-direction: column;
+        width: 25%;
+        float: left;
+    }
+    .project-block span {
+        color: #616161;
+        font-size: 15px;
+    }
+    .project-block span.project {
+        font-weight: bold;
+        margin-bottom: -10px;
+        padding-top: 10px;
+        color: #424242;
+    }
+    .skills-other {
+        color: #616161;
+        margin-bottom: 10px;
+    }
+    .skills {
+        margin-top: 20px;
+        margin-bottom: 10px;
+        .skill-block {
+            padding-bottom: 10px;
+            display: inline-block;
+            .skill {
+                width: 100px;
+                color: #616161;
+                float: left;
+            }
+            .skill-bar {
+                float: right;
+                background: #e0e0e0;
+                overflow: hidden;
+                height: 8px;
+                border-radius: 3px;
+                margin-top: 6.5px;
+                position: relative;
+                width: 249px;
+                .level {
+                    background: #757575;
+                    height: 100%;
+                }
+            }
+        }
+    }
+    .projects {
+        float: left;
+        text-align: left;
+        padding-left: 4%;
+        padding-right: 2%;
+    }
+}
+</style>
diff --git a/src/resumes/material-dark-projects.vue b/src/resumes/material-dark-projects.vue
new file mode 100755
index 0000000..ed8c9ce
--- /dev/null
+++ b/src/resumes/material-dark-projects.vue
@@ -0,0 +1,545 @@
+<template>
+<div class="resume">
+  <div class="leftCol m_box">
+    <div class="shadow"></div>
+    <div class="heading" id="myselfpic">
+    </div>
+    <div class="section-headline">
+      Contact
+    </div>
+    <div class="item">
+      <div class="icon">
+        <i class="material-icons">account_circle</i>
+      </div>
+      <div class="text">
+        <ul>
+          <li> Born {{person.birth.year}} in {{person.birth.location}}</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="item">
+      <div class="icon">
+        <i class="material-icons">location_city</i>
+      </div>
+      <div class="text">
+        <ul>
+          <li>{{person.contact.street}}</li>
+          <li>{{person.contact.city}}</li>
+        </ul>
+      </div>
+    </div>
+
+    <a :href="'tel:'+person.contact.phone">
+      <div class="item">
+        <div class="icon">
+          <i class="material-icons">phone</i>
+        </div>
+        <div class="text">
+          {{person.contact.phone}}
+        </div>
+      </div>
+    </a>
+
+    <a :href="'mailto:'+person.contact.email">
+      <div class="item">
+        <div class="icon">
+          <i class="material-icons">email</i>
+        </div>
+        <div class="text">
+          {{person.contact.email}}
+        </div>
+      </div>
+    </a>
+
+    <a :href="'https://github.com/'+person.contact.github" target="_blank">
+      <div class="item">
+        <div class="icon">
+          <i class="fa fa-github"></i>
+        </div>
+        <div class="text">
+          <span>@{{person.contact.github}}</span>
+          <span>github.com/{{person.contact.github}}</span>
+        </div>
+      </div>
+    </a>
+
+    <a :href="person.contact.website" target="_blank">
+      <div class="item">
+        <div class="icon">
+          <i class="material-icons">language</i>
+        </div>
+        <div class="text">
+          <span>{{person.contact.website}}</span>
+        </div>
+      </div>
+    </a>
+
+    <div class="item last">
+      <div class="section-headline">
+        Skills
+      </div>
+      <div class="skill" v-for="skill in person.skills">
+        <div class="right">
+          <span>{{skill.name}}</span>
+          <div class="progress">
+            <div class="determinate" :style="'width: '+skill.level+'%;'">
+              <i class="fa fa-circle"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="rightCol">
+    <div class="title">
+      <h2>{{person.name.first}}  {{person.name.last}}</h2>
+      <div>{{person.position}}</div>
+    </div>
+
+    <div class="section-headline">Working experience</div>
+    <div class="block" v-for="experience in person.experience">
+      <div class="block-helper"></div>
+      <div class="headline">{{experience.position}} - {{experience.company}}</h3>
+        <div class="subheadline">{{experience.timeperiod}}</div>
+        <p class="info">
+          {{experience.description}}
+        </p>
+      </div>
+    </div>
+
+    <div class="section-headline">Education</div>
+    <div class="block" v-for="education in person.education">
+      <div class="block-helper"></div>
+      <div class="headline">{{education.degree}}</div>
+      <p class="info">
+        {{education.timeperiod}}, {{education.description}}
+      </p>
+    </div>
+  </div>
+  <div class="farRightCol">
+    <div class="section-headline">Projects</div>
+    <div class="block" v-for="project in person.projects">
+      <div class="block-helper"></div>
+      <div class="headline">{{project.name}}</h3>
+        <div class="subheadline">{{project.timeperiod}}</div>
+        <p class="info">{{project.description}}</p>
+      </div>
+    </div>
+  </div>
+
+
+  <div style="clear:both;"></div>
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { getVueOptions } from './options';
+
+const name = 'material-dark-projects';
+export default Vue.component(name, getVueOptions(name));
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+.resume {
+    font-family: 'Roboto' !important;
+    background: #cccccc;
+}
+a {
+    cursor: pointer;
+}
+.description-personal {
+    margin-let: 20px;
+    margin-top: 20px;
+    padding-right: 40px;
+    text-align: justify;
+    font-family: Roboto;
+}
+.title {
+    right: 25px;
+    padding-left: 20px;
+    padding-top: 20px;
+    bottom: 25px;
+    h2 {
+        text-transform: uppercase;
+        display: block;
+        font-size: 1.17em;
+        -webkit-margin-before: 1em;
+        -webkit-margin-after: 1em;
+        -webkit-margin-start: 0;
+        -webkit-margin-end: 0;
+        color: white;
+        color: rgba(0,0,0,0.7);
+        padding-top: 0;
+        margin-top: 0;
+        letter-spacing: 10px;
+        font-weight: 400;
+    }
+    div {
+        margin: 0;
+        padding: 0;
+        line-height: 15pt;
+        font-weight: 300;
+        font-weight: 500;
+        letter-spacing: 2px;
+        letter-spacing: 3px;
+        color: white;
+        color: #16151c;
+        color: rgba(63,61,60,0.71);
+        display: block;
+        font-size: 0.67em;
+        font-size: 10pt;
+        -webkit-margin-before: 2.33em;
+        -webkit-margin-start: 0;
+        -webkit-margin-end: 0;
+        padding-top: 0;
+        text-transform: uppercase;
+        opacity: 0.8;
+    }
+}
+.section-headline {
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: 3px;
+    font-size: 10pt;
+    opacity: 0.8;
+    margin-left: 20px;
+    margin-top: 40px;
+    margin-bottom: 20px;
+    color: #3f3d3c;
+}
+.c {
+    clear: both;
+}
+li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    padding-top: 9px;
+}
+ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+p {
+    margin-top: 0;
+    margin-bottom: 25px;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    font-size: 10pt;
+    line-height: 17pt;
+}
+.m_box {
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
+}
+.fa,
+.material-icons {
+    display: inline-block;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 26px;
+}
+h1,
+h3,
+h5,
+h6 {
+    font-weight: 400;
+    margin: 0;
+}
+h2 {
+    font-weight: 400;
+    font-weight: 500;
+    margin: 0;
+    font-size: 22pt;
+    line-height: 37pt;
+}
+h4 {
+    font-weight: 400;
+    margin: 0;
+    font-size: 12pt;
+    line-height: 20pt;
+    opacity: 1;
+}
+.farRightCol {
+    width: 30%;
+    height: 100%;
+    float: right;
+    display: flex;
+    margin-top: 120px;
+    flex-direction: column;
+    .block {
+        width: 90%;
+        position: relative;
+        background-color: #ffffff;
+        padding: 20px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        display: inline-block;
+        .headline {
+            font-weight: 300;
+            display: block;
+            font-size: 15px;
+            color: rgba(0,0,0,0.870588);
+        }
+        .subheadline {
+            color: rgba(0,0,0,0.541176);
+            display: block;
+            font-size: 14px;
+            font-weight: 300;
+        }
+        .info {
+            font-size: 14px;
+            color: rgba(0,0,0,0.870588);
+            margin-bottom: 0;
+            padding-top: 20px;
+        }
+        .icon {
+            width: 16%;
+            float: left;
+            margin-left: 0;
+            .fa,
+            .material-icons {
+                text-align: center;
+                display: block;
+                font-size: 30pt;
+            }
+        }
+        .content {
+            width: 80%;
+            position: absolute;
+            height: 96%;
+            left: 17%;
+            padding-right: 3%;
+            text-align: left;
+            display: flex;
+            flex-direction: column;
+            .item {
+                border-bottom: 1px solid #bdbdbd;
+                flex: 1;
+                width: 97%;
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+                text-align: left;
+                padding-top: 0;
+                span {
+                    color: #d8ab94;
+                    margin-top: 0;
+                    font-size: 10pt;
+                    line-height: 16pt;
+                }
+                p {
+                    margin-top: 5px;
+                }
+            }
+            .item:last-of-type {
+                border-bottom-style: none;
+                border-bottom-style: none;
+            }
+        }
+    }
+}
+.rightCol {
+    width: 30%;
+    height: 100%;
+    float: left;
+    display: flex;
+    padding-left: 10px;
+    flex-direction: column;
+    .block {
+        width: 90%;
+        position: relative;
+        background-color: #ffffff;
+        padding: 20px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        display: inline-block;
+        .headline {
+            font-weight: 300;
+            display: block;
+            font-size: 15px;
+            color: rgba(0,0,0,0.870588);
+        }
+        .subheadline {
+            color: rgba(0,0,0,0.541176);
+            display: block;
+            font-size: 14px;
+            font-weight: 300;
+        }
+        .info {
+            font-size: 14px;
+            color: rgba(0,0,0,0.870588);
+            margin-bottom: 0;
+            padding-top: 20px;
+        }
+        .icon {
+            width: 16%;
+            float: left;
+            margin-left: 0;
+            .fa,
+            .material-icons {
+                text-align: center;
+                display: block;
+                font-size: 30pt;
+            }
+        }
+        .content {
+            width: 80%;
+            position: absolute;
+            height: 96%;
+            left: 17%;
+            padding-right: 3%;
+            text-align: left;
+            display: flex;
+            flex-direction: column;
+            .item {
+                border-bottom: 1px solid #bdbdbd;
+                flex: 1;
+                width: 97%;
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+                text-align: left;
+                padding-top: 0;
+                span {
+                    color: #d8ab94;
+                    margin-top: 0;
+                    font-size: 10pt;
+                    line-height: 16pt;
+                }
+                p {
+                    margin-top: 5px;
+                }
+            }
+            .item:last-of-type {
+                border-bottom-style: none;
+                border-bottom-style: none;
+            }
+        }
+    }
+}
+.leftCol {
+    width: 35%;
+    height: 100%;
+    float: left;
+    padding: 0;
+    text-align: left;
+    color: #ffffff;
+    color: rgba(255,255,255,0.59);
+    background-color: #16151c;
+    overflow: hidden;
+    display: block;
+    .section-headline {
+        color: rgba(255,255,255,0.54);
+    }
+    a {
+        color: rgba(255,255,255,0.59);
+        text-decoration: none;
+    }
+    .heading {
+        background-color: white;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+        position: relative;
+        width: 100%;
+        height: 277px;
+    }
+    .item {
+        width: 100%;
+        margin-top: 13px;
+        float: left;
+        .fa,
+        .material-icons {
+            display: inherit;
+            text-align: center;
+        }
+        .icon {
+            width: 20%;
+            float: left;
+        }
+        .text {
+            float: right;
+            width: 69%;
+            padding-right: 10%;
+            padding-top: 0;
+            display: block;
+            font-size: 15px;
+            font-weight: 300;
+            li {
+                padding-top: 0;
+                display: block;
+                font-size: 15px;
+                font-weight: 300;
+            }
+        }
+        span {
+            font-weight: 300;
+        }
+        .skill {
+            clear: both;
+            width: 97%;
+            padding-top: 4px;
+            .left {
+                float: left;
+                width: 10%;
+                padding-top: 3px;
+                i:nth-child(2) {
+                    float: left;
+                    padding-top: 4px;
+                }
+            }
+            .right {
+                float: right;
+                width: 93%;
+                .progress {
+                    float: left;
+                    position: relative;
+                    height: 2px;
+                    display: block;
+                    width: 95%;
+                    background-color: rgba(255,255,255,0.19);
+                    border-radius: 2px;
+                    margin: 0.5rem 0 1rem;
+                    overflow: visible;
+                    margin-bottom: 10px;
+                    .determinate {
+                        background-color: #78909c;
+                        position: absolute;
+                        top: 0;
+                        bottom: 0;
+                        .fa,
+                        .material-icons {
+                            font-size: 13px;
+                            position: absolute;
+                            top: -4px;
+                            right: -2px;
+                            margin-left: 50%;
+                            color: white;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .item.last .text {
+        border-bottom-style: none;
+        padding-bottom: 0;
+    }
+}
+#myselfpic {
+    background-image: url('../../resume/id.jpg');
+    color: black;
+}
+#githubIcon {
+    width: 25px;
+    padding-left: 17px;
+}
+</style>
diff --git a/src/resumes/oblique-projects.vue b/src/resumes/oblique-projects.vue
new file mode 100755
index 0000000..a107b4e
--- /dev/null
+++ b/src/resumes/oblique-projects.vue
@@ -0,0 +1,238 @@
+<template>
+<div id="resume3" class="resume">
+  <div class="resume-header">
+    <div class="triangle"></div>
+    <div class="person-header">
+      <div class="person-wrapper">
+        <div class="person">
+          <div class="name">{{person.name.first}} {{person.name.last}}</div>
+          <div class="position">{{person.position}}</div>
+        </div>
+        <div class="img">
+        </div>
+      </div>
+
+    </div>
+  </div>
+  <div class="resume-content">
+    <div class="experience">
+      <h3>Experience</h3>
+
+      <div class="experience-block" v-for="experience in person.experience">
+        <div class="row">
+          <span class="job-title"> {{experience.position}} </span>
+          <i class="material-icons">details</i>
+          <span class="company"> {{experience.company}} </span>
+        </div>
+
+        <div class="row">
+          <span class="time-period"> {{experience.timeperiod}}</span>
+          <span class="job-description">, {{experience.description}} </span>
+        </div>
+      </div>
+    </div>
+    <div class="projects">
+      <h3>Projects</h3>
+
+      <div class="project-block" v-for="project in person.projects">
+        <div class="row">
+          <span class="name"> {{project.name}} </span>
+        </div>
+
+        <div class="row">
+          <span class="time-period"> {{project.timeperiod}}</span>
+          <span class="description">, {{project.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="skill-section">
+      <h3>Skills</h3>
+      <div class="skills" v-for="skill in person.skills">
+        <div class="skill-block">
+          <i class="material-icons">details</i>
+          <span class="skill">{{skill.name}}</span>
+        </div>
+      </div>
+    </div>
+    <div class="skills-other">
+      <span>{{person.skillDescription}} </span>
+    </div>
+    <div class="contact">
+      <h3>Contact</h3>
+      <a :href="'mailto:'+person.contact.email"> {{person.contact.email}}</a>
+      <span>;&nbsp;</span>
+      <a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
+      <span>;&nbsp;</span>
+      <span>{{person.contact.street}}, {{person.contact.city}}</span>
+      <span>;&nbsp;</span>
+      <a :href="person.contact.website">
+              {{person.contact.website}}</a>
+      <span>;&nbsp;</span>
+      <a :href="'https://github.com/'+person.contact.github">
+                https://github.com/{{person.contact.github}}</a>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { getVueOptions } from './options';
+
+const name = 'oblique-projects';
+export default Vue.component(name, getVueOptions(name));
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+#resume3 {
+    font-family: 'Open Sans Condensed', sans-serif;
+    padding-bottom: 50px;
+    a,
+    a:focus,
+    a:hover {
+        color: black;
+        text-decoration: none;
+    }
+    h3 {
+        font-weight: bold;
+        text-transform: uppercase;
+        margin-bottom: 10px;
+    }
+    .resume-header .triangle {
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 415px 0 0 1500px;
+        border-color: #006064 transparent transparent transparent;
+        position: absolute;
+        left: -600px;
+        top: 0;
+    }
+    .resume-header .person-header {
+        position: absolute;
+        z-index: 20;
+        right: 15%;
+        top: 70px;
+        .person-wrapper {
+            overflow: hidden;
+            position: relative;
+        }
+        .img {
+            height: 100%;
+            width: 100px;
+            float: left;
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: url('../../resume/id.jpg');
+            background-position: center;
+            background-size: cover;
+        }
+        .person {
+            float: right;
+            color: white;
+            margin-right: 120px;
+        }
+        .name {
+            text-transform: uppercase;
+            font-size: 50px;
+            display: table-caption;
+            text-align: right;
+            line-height: 1.0;
+            font-weight: bold;
+        }
+        .position {
+            font-size: 20px;
+            display: table-caption;
+            text-align: right;
+            line-height: 1.0;
+            margin-top: 10px;
+        }
+    }
+    .resume-content {
+        margin-top: 250px;
+        margin-left: 15%;
+        width: 70%;
+        .experience .experience-block {
+            line-height: 1;
+            margin-bottom: 10px;
+            .row:first-child {
+                font-size: 20px;
+                text-transform: uppercase;
+                i {
+                    font-size: 17px;
+                }
+            }
+        }
+        .projects .project-block {
+            line-height: 1;
+            margin-bottom: 10px;
+            .row:first-child {
+                font-size: 20px;
+                text-transform: uppercase;
+                i {
+                    font-size: 17px;
+                }
+            }
+        }
+        .experience .experience-block:first-of-type {
+            width: 80%;
+        }
+    }
+    .education-block {
+        line-height: 1;
+        margin-bottom: 10px;
+        .row:first-child {
+            font-size: 20px;
+            text-transform: uppercase;
+        }
+    }
+    .skill-section .skills {
+        width: 100%;
+        .skill-block {
+            width: 50%;
+            float: left;
+            i {
+                font-size: 17px;
+                margin-right: 15px;
+            }
+            .skill {
+                font-size: 20px;
+            }
+        }
+    }
+    .skills-other {
+        display: inline-block;
+        font-size: 20px;
+        margin-top: 10px;
+        line-height: 1;
+    }
+    .contact {
+        margin-top: 20px;
+        a,
+        span {
+            display: inline-block;
+            font-size: 20px;
+            list-style: none;
+            margin-top: 0;
+            line-height: 1;
+            float: left;
+            padding-left: 0;
+            margin-left: 0;
+        }
+    }
+}
+</style>
diff --git a/src/resumes/oblique-rtl.vue b/src/resumes/oblique-rtl.vue
index 17b25a6..f4d0d40 100644
--- a/src/resumes/oblique-rtl.vue
+++ b/src/resumes/oblique-rtl.vue
@@ -16,8 +16,7 @@
   </div>
   <div class="resume-content">
     <div class="experience">
-      <h3>{{ lang.headings.experience }}</h3>
-
+      <h3>{{ lang.experience }}</h3>
       <div class="experience-block" v-for="experience in person.experience" :key="experience.company">
         <div class="row">
           <span class="job-title"> {{experience.position}} </span>
@@ -32,7 +31,7 @@
       </div>
     </div>
     <div class="education">
-      <h3>{{ lang.headings.education }}</h3>
+      <h3>{{ lang.education }}</h3>
       <div class="education-block" v-for="education in person.education" :key="education.degree">
         <div class="row">
           <span class="degree">{{education.degree}}</span>
@@ -43,7 +42,7 @@
       </div>
     </div>
     <div class="skill-section">
-      <h3>{{ lang.headings.skills }}</h3>
+      <h3>{{ lang.skills }}</h3>
       <div class="skills" v-for="skill in person.skills" :key="skill.name">
         <div class="skill-block">
           <i class="material-icons">details</i>
@@ -55,7 +54,7 @@
       <span>{{person.knowledge}} </span>
     </div>
     <div class="contact">
-      <h3>{{ lang.headings.contact }}</h3>
+      <h3>{{ lang.contact }}</h3>
       <a :href="'mailto:'+person.contact.email"> {{person.contact.email}}</a>
       <span>;&nbsp;</span>
       <a :href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
@@ -79,132 +78,134 @@ import { getVueOptions } from './options';
 const name = 'oblique-rtl';
 export default Vue.component(name, getVueOptions(name));
 </script>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="less" scoped>
 #resume3 {
-  font-family:'Open Sans Condensed', sans-serif;
-  padding-bottom:50px;
-  direction: rtl;
-  a, a:focus, a:hover {
-    color:black;
-    text-decoration:none;
-  }
-  h3 {
-    font-weight:bold;
-    text-transform:uppercase;
-    margin-bottom:10px;
-  }
-  .resume-header .triangle {
-    width:0;
-    height:0;
-    border-style:solid;
-    border-width:600px 1500px 0 0;
-    border-color:#006064 transparent transparent transparent;
-    position:absolute;
-    right:-600px;
-    top:0;
-  }
-  .resume-header .person-header {
-    position:absolute;
-    z-index:20;
-    left:15%;
-    top:200px;
-    .person-wrapper {
-      overflow:hidden;
-      position:relative;
+    font-family: 'Open Sans Condensed', sans-serif;
+    padding-bottom: 50px;
+    direction: rtl;
+    a,
+    a:focus,
+    a:hover {
+        color: black;
+        text-decoration: none;
     }
-    .img {
-      height:100%;
-      width:100px;
-      float:left;
-      position:absolute;
-      top:0;
-      right:0;
-      background:url('../../resume/id.jpg');
-      background-position:center;
-      background-size:cover;
+    h3 {
+        font-weight: bold;
+        text-transform: uppercase;
+        margin-bottom: 10px;
     }
-    .person {
-      float:right;
-      color:white;
-      margin-right:120px;
+    .resume-header .triangle {
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 600px 1500px 0 0;
+        border-color: #006064 transparent transparent transparent;
+        position: absolute;
+        right: -600px;
+        top: 0;
     }
-    .name {
-      text-transform:uppercase;
-      font-size:50px;
-      display:table-caption;
-      text-align:right;
-      line-height:1.0;
-      font-weight:bold;
-    }
-    .position {
-      font-size:20px;
-      display:table-caption;
-      text-align:right;
-      line-height:1.0;
-      margin-top:10px;
-    }
-  }
-  .resume-content {
-    margin-top:435px;
-    margin-right:15%;
-    width:70%;
-    .experience .experience-block {
-      line-height:1;
-      margin-bottom:10px;
-      .row:first-child {
-        font-size:20px;
-        text-transform:uppercase;
-        i {
-          font-size:17px;
+    .resume-header .person-header {
+        position: absolute;
+        z-index: 20;
+        left: 15%;
+        top: 200px;
+        .person-wrapper {
+            overflow: hidden;
+            position: relative;
+        }
+        .img {
+            height: 100%;
+            width: 100px;
+            float: left;
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: url("../../resume/id.jpg");
+            background-position: center;
+            background-size: cover;
+        }
+        .person {
+            float: right;
+            color: white;
+            margin-right: 120px;
+        }
+        .name {
+            text-transform: uppercase;
+            font-size: 50px;
+            display: table-caption;
+            text-align: right;
+            line-height: 1.0;
+            font-weight: bold;
+        }
+        .position {
+            font-size: 20px;
+            display: table-caption;
+            text-align: right;
+            line-height: 1.0;
+            margin-top: 10px;
         }
-      }
     }
-    .experience .experience-block:first-of-type {
-      width:80%;
+    .resume-content {
+        margin-top: 435px;
+        margin-right: 15%;
+        width: 70%;
+        .experience .experience-block {
+            line-height: 1;
+            margin-bottom: 10px;
+            .row:first-child {
+                font-size: 20px;
+                text-transform: uppercase;
+                i {
+                    font-size: 17px;
+                }
+            }
+        }
+        .experience .experience-block:first-of-type {
+            width: 80%;
+        }
     }
-  }
-  .education-block {
-    line-height:1;
-    margin-bottom:10px;
-    .row:first-child {
-      font-size:20px;
-      text-transform:uppercase;
+    .education-block {
+        line-height: 1;
+        margin-bottom: 10px;
+        .row:first-child {
+            font-size: 20px;
+            text-transform: uppercase;
+        }
     }
-  }
-  .skill-section .skills {
-    width:100%;
-    .skill-block {
-      width:50%;
-      float:left;
-      i {
-        font-size:17px;
-        margin-right:15px;
-      }
-      .skill {
-        font-size:20px;
-      }
+    .skill-section .skills {
+        width: 100%;
+        .skill-block {
+            width: 50%;
+            float: left;
+            i {
+                font-size: 17px;
+                margin-right: 15px;
+            }
+            .skill {
+                font-size: 20px;
+            }
+        }
     }
-  }
-  .skills-other {
-    display:inline-block;
-    font-size:20px;
-    margin-top:10px;
-    line-height:1;
-  }
-  .contact {
-    margin-top:50px;
-    a, span {
-      display:inline-block;
-      font-size:20px;
-      list-style:none;
-      margin-top:0;
-      line-height:1;
-      float:right;
-      padding-left:0;
-      margin-left:0;
+    .skills-other {
+        display: inline-block;
+        font-size: 20px;
+        margin-top: 10px;
+        line-height: 1;
+    }
+    .contact {
+        margin-top: 50px;
+        a,
+        span {
+            display: inline-block;
+            font-size: 20px;
+            list-style: none;
+            margin-top: 0;
+            line-height: 1;
+            float: right;
+            padding-left: 0;
+            margin-left: 0;
+        }
     }
-  }
 }
 </style>
diff --git a/src/resumes/resumes.js b/src/resumes/resumes.js
index 9b9d9b3..75285fd 100755
--- a/src/resumes/resumes.js
+++ b/src/resumes/resumes.js
@@ -12,3 +12,7 @@ import './cool.vue';
 import './cool-rtl.vue';
 import './cool-rtl2.vue';
 import './green.vue';
+import './left-right-projects.vue';
+import './material-dark-projects.vue';
+import './oblique-projects.vue';
+import './side-bar-projects.vue';
diff --git a/src/resumes/side-bar-projects.vue b/src/resumes/side-bar-projects.vue
new file mode 100755
index 0000000..57e9d58
--- /dev/null
+++ b/src/resumes/side-bar-projects.vue
@@ -0,0 +1,265 @@
+<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 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 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="projects">
+              <h3>Projects</h3>
+                  <div class="project-block" v-for="project in person.projects">
+                      <div class="row">
+                          <span class="name"> {{project.name}} </span>
+                      <div class="row">
+                          <span class="time-period"> {{project.timeperiod}}</span>
+                      </div>
+                      <div class="row">
+                          <span class="description"> {{project.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>
+  </div>
+
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { getVueOptions } from './options';
+
+const name = 'side-bar-projects';
+export default Vue.component(name, getVueOptions(name));
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+#resume2 {
+  font-family:'Raleway', sans-serif;
+  padding-bottom:50px;
+  a, a:focus, a:hover, a:visited {
+    text-decoration:none;
+  }
+  h3 {
+    text-transform:uppercase;
+    padding-top:0;
+    margin-top:0;
+    letter-spacing:5px;
+    font-weight:400;
+  }
+  .top-row {
+    width:100%;
+    padding-top:60px;
+    padding-bottom:60px;
+    span {
+      width:100%;
+      display:block;
+      text-align:center;
+      font-weight:normal;
+    }
+    span.person-name {
+      text-transform:uppercase;
+      font-size:40px;
+      letter-spacing:10px;
+    }
+    span.person-position {
+      letter-spacing:5px;
+    }
+  }
+  .left-col {
+    width:26%;
+    float:left;
+    padding-left:8%;
+    padding-right:4%;
+    .person-image .image-centerer {
+      display:flex;
+      justify-content:center;
+      height:auto;
+      overflow:hidden;
+      .img {
+        flex:none;
+        background:url('../../resume/id.jpg');
+        background-position:center;
+        background-size:cover;
+        height:250px;
+        width:100%;
+      }
+    }
+    .contact h3 {
+      text-align:center;
+      margin-top:20px;
+    }
+    .contact .contact-row {
+      text-align:center;
+      letter-spacing:2px;
+      margin-bottom:3px;
+      a {
+        color:black;
+      }
+    }
+    .contact .contact-row:first-of-type {
+      margin-top:50px;
+    }
+    .contact .contact-row:last-of-type {
+      margin-bottom:50px;
+    }
+    .contact .contact-row.dots {
+      margin-top:20px;
+      margin-bottom:15px;
+      font-size:10px;
+      color:rgba(153,153,153,0.6);
+    }
+  }
+  .right-col {
+    width:50%;
+    float:right;
+    padding-left:4%;
+    padding-right:8%;
+    .experience-block {
+      margin-bottom:10px;
+      .row:first-child {
+        margin-bottom:3px;
+      }
+      .row .company {
+        text-transform:uppercase;
+        font-size:12px;
+      }
+      .row .job-title {
+        font-size:12px;
+      }
+    }
+    .projects {
+        margin-top:50px;
+        .project-block {
+            margin-bottom:10px;
+            .degree {
+            font-size:12px;
+            text-transform:uppercase;
+            margin-bottom:3px;
+            }
+        }
+    }
+    .education {
+      margin-top:50px;
+      .education-block {
+        margin-bottom:10px;
+        .degree {
+          font-size:12px;
+          text-transform:uppercase;
+          margin-bottom:3px;
+        }
+      }
+    }
+    .skills-block {
+      text-align:center;
+      margin-top:50px;
+      position:relative;
+      .skills {
+        text-align:center;
+        margin-bottom:10px;
+        margin-bottom:20px;
+        position:relative;
+        margin-left:auto;
+        margin-right:auto;
+        display:inline-block;
+        .skill {
+          text-align:center;
+          width:80px;
+          height:80px;
+          border-radius:50%;
+          position:relative;
+          border:#333333 1px solid;
+          margin:3px;
+          float:left;
+          font-size:13px;
+          .skill-name {
+            text-align:center;
+            position:absolute;
+            top:50%;
+            transform:translateY(-50%);
+            width:100%;
+          }
+        }
+        .skills-other {
+          display:inline-block;
+          width:100%;
+          margin-top:20px;
+        }
+      }
+    }
+  }
+}
+</style>