From cfd4c5b80814fd9ed48d7dea6879a6d46181aaf5 Mon Sep 17 00:00:00 2001
From: salomonelli <sara.steiert@outlook.com>
Date: Sun, 4 Jun 2017 14:16:48 +0200
Subject: [PATCH] UPDATE styles to less

---
 src/components/resume-left-right.vue    | 313 ++++++------
 src/components/resume-material-dark.vue | 631 +++++++++++-------------
 src/components/resume-oblique.vue       | 272 +++++-----
 src/components/resume-side-bar.vue      | 278 +++++------
 4 files changed, 685 insertions(+), 809 deletions(-)

diff --git a/src/components/resume-left-right.vue b/src/components/resume-left-right.vue
index 8f68924..76b978e 100644
--- a/src/components/resume-left-right.vue
+++ b/src/components/resume-left-right.vue
@@ -86,178 +86,147 @@ export default Vue.component('resume-left-right', {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="less" 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;
+  font-family:'Source Sans Pro', sans-serif;
+  font-size:20px;
+  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('../assets/person.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:20px;
+      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;
+  }
+  .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%;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/resume-material-dark.vue b/src/components/resume-material-dark.vue
index a1dc236..e1907f6 100755
--- a/src/components/resume-material-dark.vue
+++ b/src/components/resume-material-dark.vue
@@ -139,383 +139,320 @@ export default Vue.component('resume-material-dark', {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="less" scoped>
 .resume {
-  font-family: 'Roboto' !important;
-  background: #CCCCCC;
+  font-family:'Roboto' !important;
+  background:#cccccc;
 }
-
 a {
-  cursor: pointer;
+  cursor:pointer;
 }
-
 .description-personal {
-  margin-let: 20px;
-  margin-top: 20px;
-  padding-right: 40px;
-  text-align: justify;
-  font-family: Roboto;
+  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;
+  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-top:-5px;
+    margin-top:0;
+    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;
+  }
 }
-
-.title 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;
-  padding-top: 0;
-  margin-top: 0;
-  letter-spacing: 10px;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.title div {
-  margin-top: -5px;
-  margin: 0;
-  padding: 0;
-  line-height: 15pt;
-  font-weight: 300;
-  letter-spacing: 2px;
-  color: white;
-  display: block;
-  font-size: 0.67em;
-  -webkit-margin-before: 2.33em;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
-  padding-top: 0;
-  margin-top: 0;
-  color: #16151c;
-  text-transform: uppercase;
-  font-weight: 500;
-  letter-spacing: 3px;
-  font-size: 10pt;
-  opacity: 0.8;
-  color: rgba(63, 61, 60, 0.71);
-}
-
 .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;
+  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;
 }
-
-{
-  font-family: Roboto, sans-serif !important;
-  background-color: #ccc;
-  font-size: 15px;
-  line-height: 1.5;
-  color: #767270;
-  letter-spacing: 0.072em;
-  font-weight: normal;
-}
-
 .c {
-  clear: both;
+  clear:both;
 }
-
-li,
-ul {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-
 li {
-  padding-top: 9px;
+  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;
+  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);
+  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;
+.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,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 400;
-  margin: 0;
+h1, h3, h5, h6 {
+  font-weight:400;
+  margin:0;
 }
-
 h2 {
-  font-size: 22pt;
-  line-height: 37pt;
-  margin: 0;
-  font-weight: 500;
+  font-weight:400;
+  font-weight:500;
+  margin:0;
+  margin:0;
+  font-size:22pt;
+  line-height:37pt;
 }
-
 h4 {
-  font-size: 12pt;
-  line-height: 20pt;
-  opacity: 1;
+  font-weight:400;
+  margin:0;
+  font-size:12pt;
+  line-height:20pt;
+  opacity:1;
 }
-
 .rightCol {
-  width: 63.5%;
-  height: 100%;
-  float: right;
-  display: flex;
-  flex-direction: column;
+  width:63.5%;
+  height:100%;
+  float:right;
+  display:flex;
+  flex-direction:column;
+  .block {
+    width:90%;
+    position:relative;
+    background-color:#ffffff;
+    padding:20px;
+    margin-top:5px;
+    margin-bottom:5px;
+    display:inline-block;
+    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
+    .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 .block {
-  width: 90%;
-  position: relative;
-  background-color: #fff;
-  padding: 20px;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  display: inline-block;
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-}
-
-.rightCol .block .headline {
-  font-weight: 300;
-  display: block;
-  font-size: 15px;
-  color: rgba(0, 0, 0, 0.870588);
-}
-
-.rightCol .block .subheadline {
-  color: rgba(0, 0, 0, 0.541176);
-  display: block;
-  font-size: 14px;
-  font-weight: 300;
-}
-
-.rightCol .block .info {
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.870588);
-  margin-bottom: 0;
-  padding-top: 20px;
-}
-
-.rightCol .block .icon {
-  width: 16%;
-  float: left;
-  margin-left: 0;
-}
-
-.rightCol .block .icon .fa,
-.rightCol .block .icon .material-icons {
-  text-align: center;
-  display: block;
-  font-size: 30pt;
-}
-
-.rightCol .block .content {
-  width: 80%;
-  position: absolute;
-  height: 96%;
-  left: 17%;
-  padding-right: 3%;
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-}
-
-.rightCol .block .content .item {
-  border-bottom: 1px solid #bdbdbd;
-  flex: 1;
-  width: 97%;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  text-align: left;
-  padding-top: 0;
-}
-
-.rightCol .block .content .item span {
-  color: #d8ab94;
-  margin-top: 0;
-  font-size: 10pt;
-  line-height: 16pt;
-}
-
-.rightCol .block .content .item p {
-  margin-top: 5px;
-}
-
-.rightCol .block .content .item:last-of-type {
-  border-bottom-style: none;
-}
-
-.rightCol .block .content .item:last-of-type {
-  border-bottom-style: none;
-}
-
 .leftCol {
-  width: 35%;
-  height: 100%;
-  float: left;
-  padding: 0;
-  text-align: left;
-  color: #ffffff;
-  background-color: #16151c;
-  overflow: hidden;
-  display: block;
-  color: rgba(255, 255, 255, 0.59);
+  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;
+  }
 }
-
-.leftCol .section-headline {
-  color: rgba(255, 255, 255, 0.54);
-}
-
-.leftCol a {
-  color: rgba(255, 255, 255, 0.59);
-  text-decoration: none;
-}
-
-.leftCol .heading {
-  background-color: white;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  position: relative;
-  width: 100%;
-  height: 277px;
-}
-
-.leftCol .item {
-  width: 100%;
-  margin-top: 13px;
-  float: left;
-}
-
-.leftCol .item .icon {
-  width: 20%;
-  float: left;
-}
-
-.leftCol .item .fa,
-.leftCol .item .material-icons {
-  display: inherit;
-  text-align: center;
-}
-
-.leftCol .item .text {
-  float: right;
-  width: 69%;
-  padding-right: 10%;
-  padding-top: 0;
-  display: block;
-  font-size: 15px;
-  font-weight: 300;
-}
-
-.leftCol .item .text li {
-  padding-top: 0;
-  display: block;
-  font-size: 15px;
-  font-weight: 300;
-}
-
-.leftCol .item span {
-  font-weight: 300;
-}
-
-.leftCol .item .skill {
-  clear: both;
-  width: 97%;
-  padding-top: 4px;
-}
-
-.leftCol .item .skill .left {
-  float: left;
-  width: 10%;
-  padding-top: 3px;
-}
-
-.leftCol .item .skill .left i:nth-child(2) {
-  float: left;
-  padding-top: 4px;
-}
-
-.leftCol .item .skill .right {
-  float: right;
-  width: 93%;
-}
-
-.leftCol .item .skill .right .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;
-}
-
-.leftCol .item .skill .right .progress .determinate {
-  background-color: #78909C;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-}
-
-.leftCol .item .skill .right .progress .determinate .fa,
-.leftCol .item .skill .right .progress .determinate .material-icons {
-  font-size: 13px;
-  position: absolute;
-  top: -4px;
-  right: -2px;
-  margin-left: 50%;
-  color: white;
-}
-
-.leftCol .item.last .text {
-  border-bottom-style: none;
-  padding-bottom: 0;
-}
-
 #myselfpic {
-  background-image: url('../assets/person.jpg');
-  color: black;
+  background-image:url('../assets/person.jpg');
+  color:black;
 }
-
 #githubIcon {
-  width: 25px;
-  padding-left: 17px;
+  width:25px;
+  padding-left:17px;
 }
 </style>
diff --git a/src/components/resume-oblique.vue b/src/components/resume-oblique.vue
index b898048..0fd41a0 100644
--- a/src/components/resume-oblique.vue
+++ b/src/components/resume-oblique.vue
@@ -89,155 +89,129 @@ export default Vue.component('resume-oblique', {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="less" scoped>
 #resume3 {
-  font-family: 'Open Sans Condensed', sans-serif;
-  padding-bottom: 50px;
-}
-
-#resume3 h3 {
-  font-weight: bold;
-  text-transform: uppercase;
-  margin-bottom: 10px;
-}
-
-#resume3 a,
-#resume3 a:focus,
-#resume3 a:hover {
-  color: black;
-  text-decoration: none;
-}
-
-#resume3 .resume-header .triangle {
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 600px 0 0 1500px;
-  border-color: #006064 transparent transparent transparent;
-  position: absolute;
-  left: -600px;
-  top: 0;
-}
-
-#resume3 .resume-header .person-header {
-  position: absolute;
-  z-index: 20;
-  right: 15%;
-  top: 200px;
-}
-
-#resume3 .resume-header .person-header .person-wrapper {
-  overflow: hidden;
-  position: relative;
-}
-
-#resume3 .resume-header .person-header .img {
-  height: 100%;
-  width: 100px;
-  float: left;
-  position: absolute;
-  top: 0;
-  right: 0;
-  background: url('../assets/person.jpg');
-  background-position: center;
-  background-size: cover;
-}
-
-#resume3 .resume-header .person-header .person {
-  float: right;
-  color: white;
-  margin-right: 120px;
-}
-
-#resume3 .resume-header .person-header .name {
-  text-transform: uppercase;
-  font-size: 50px;
-  display: table-caption;
-  text-align: right;
-  line-height: 1.0;
-  font-weight: bold;
-}
-
-#resume3 .resume-header .person-header .position {
-  font-size: 20px;
-  display: table-caption;
-  text-align: right;
-  line-height: 1.0;
-  margin-top: 10px;
-}
-
-#resume3 .resume-content {
-  margin-top: 435px;
-  margin-left: 15%;
-  width: 70%;
-}
-
-#resume3 .resume-content .experience .experience-block {
-  line-height: 1;
-  margin-bottom: 10px;
-}
-
-#resume3 .resume-content .experience .experience-block:first-of-type {
-  width: 80%;
-}
-
-#resume3 .resume-content .experience .experience-block .row:first-child {
-  font-size: 20px;
-  text-transform: uppercase;
-}
-
-#resume3 .resume-content .experience .experience-block .row:first-child i {
-  font-size: 17px;
-}
-
-#resume3 .education-block {
-  line-height: 1;
-  margin-bottom: 10px;
-}
-
-#resume3 .education-block .row:first-child {
-  font-size: 20px;
-  text-transform: uppercase;
-}
-
-#resume3 .skill-section .skills {
-  width: 100%;
-}
-
-#resume3 .skill-section .skills .skill-block {
-  width: 50%;
-  float: left;
-}
-
-#resume3 .skill-section .skills .skill-block i {
-  font-size: 17px;
-  margin-right: 15px;
-}
-
-#resume3 .skill-section .skills .skill-block .skill {
-  font-size: 20px;
-}
-
-#resume3 .skills-other {
-  display: inline-block;
-  font-size: 20px;
-  margin-top: 10px;
-  line-height: 1;
-}
-
-#resume3 .contact {
-  margin-top: 50px;
-}
-
-#resume3 .contact a,
-#resume3 .contact span {
-  display: inline-block;
-  font-size: 20px;
-  list-style: none;
-  margin-top: 0;
-  line-height: 1;
-  float: left;
-  padding-left: 0;
-  margin-left: 0;
+  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:600px 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:200px;
+    .person-wrapper {
+      overflow:hidden;
+      position:relative;
+    }
+    .img {
+      height:100%;
+      width:100px;
+      float:left;
+      position:absolute;
+      top:0;
+      right:0;
+      background:url('../assets/person.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:435px;
+    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;
+        }
+      }
+    }
+    .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:50px;
+    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/components/resume-side-bar.vue b/src/components/resume-side-bar.vue
index 666f39c..427947e 100644
--- a/src/components/resume-side-bar.vue
+++ b/src/components/resume-side-bar.vue
@@ -100,147 +100,143 @@ export default Vue.component('resume-side-bar', {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="less" scoped>
 #resume2 {
-  font-family: 'Raleway', sans-serif;
-  padding-bottom: 50px;
+  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:100px;
+    padding-bottom:100px;
+    span {
+      width:100%;
+      display:block;
+      text-align:center;
+      font-weight:normal;
+    }
+    span.person-name {
+      text-transform:uppercase;
+      font-size:50px;
+      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('../assets/person.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.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:19px;
+      }
+      .row .job-title {
+        font-size:19px;
+      }
+    }
+    .education {
+      margin-top:50px;
+      .education-block {
+        margin-bottom:10px;
+        .degree {
+          font-size:19px;
+          text-transform:uppercase;
+          margin-bottom:3px;
+        }
+      }
+    }
+    .skills-block {
+      margin-top:50px;
+      position:relative;
+      .skills {
+        margin-bottom:10px;
+        margin-bottom:20px;
+        position:relative;
+        margin-left:auto;
+        margin-right:auto;
+        display:inline-block;
+        .skill {
+          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;
+        }
+      }
+    }
+  }
 }
-#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>