diff --git a/src/assets/preview/resume-purple-side-bar.png b/src/assets/preview/resume-purple-side-bar.png
new file mode 100644
index 00000000..e0e3affd
Binary files /dev/null and b/src/assets/preview/resume-purple-side-bar.png differ
diff --git a/src/pages/home.vue b/src/pages/home.vue
index 7deca8c9..ee7f3899 100755
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -148,6 +148,14 @@
           </div>
         </router-link>
       </div>
+      <div class="preview">
+        <router-link v-bind:to="'/resume/purple-side-bar'">
+          <div class="preview-wrapper">
+            <img src="../assets/preview/resume-purple-side-bar.png" />
+            <span>template_new</span>
+          </div>
+        </router-link>
+      </div>
     </div>
 
     <div class="sponsoring">
diff --git a/src/resumes/purple-side-bar.vue b/src/resumes/purple-side-bar.vue
new file mode 100644
index 00000000..cb360d6c
--- /dev/null
+++ b/src/resumes/purple-side-bar.vue
@@ -0,0 +1,282 @@
+<template>
+<div class="resume" id="template">
+  <!-- UI elements for the resume header. -->
+  <div id="resume-header">
+      <div id="header-left">
+          <h2 id="position">{{person.position}}</h2>
+          <h1 id="name">{{person.name.first}} {{person.name.last}}</h1>
+          <div id="info-flex">
+              <span id="email"><a :href='"mailto:" + person.contact.email'>
+                <i class="fa fa-envelope" aria-hidden="true"></i> {{person.contact.email}}</a></span>
+              <span id="phone"><i class='fa fa-phone-square' aria-hidden="true"></i> {{person.contact.phone}}</span>
+              <span v-if="person.contact.website" id="website"><a :href='person.contact.website'><i class="fa fa-home" aria-hidden="true"></i> {{person.contact.website}}</a></span>
+              <span v-if="person.contact.github" id="github"><a :href='contactLinks.github'><i class="fa fa-github" aria-hidden="true"></i> {{person.contact.github}}</a></span>
+          </div>
+      </div>
+      <div id="header-right">
+          <div id="headshot"></div>
+      </div>
+  </div>
+
+  <div id="resume-body">
+    <!-- UI elements for the items on the left side of the main resume template. -->
+    <div id="resume-body-left">
+      <!-- This is for the "skills" part of the resume. -->
+      <div id="skills-container" v-if="person.skills != []">
+            <!-- This is for the icon and header part of this container. -->
+            <div class="icon">
+                <i class="material-icons">done_all</i>
+                <h2 id="skills-title">{{ lang.skills }}</h2>
+            </div>
+            <div class="spacer"></div>
+            <p id="skill-description">{{person.knowledge}}</p>
+            <ul id="skill-list">
+                <li class="skill" v-for="skill in person.skills" :key="skill.name">
+                  <span class="list-item-black">
+                    {{skill.name}}
+                  </span>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- UI elements for the items on the right side of the main resume template. -->
+    <div id="resume-body-right">
+        <!-- This is for the "experience" part of the resume. -->
+        <div id="experience-container">
+            <!-- This is for the icon and header part of this container. -->
+            <div class="icon">
+                <i class="material-icons small-icon">work</i>
+                <h2 id="experience-title">{{ lang.experience }}</h2>
+            </div>
+            <div class="spacer"></div>
+            <div class="experience" v-for="experience in person.experience" :key="experience.company">
+                <h2 class="company">{{experience.company}}</h2>
+                <p class="job-info"><span class="job-title">{{experience.position}} | </span><span class="experience-timeperiod">{{experience.timeperiod}}</span></p>
+                <p class="job-description" v-if="experience.description">{{experience.description}}</p>
+                <ul v-if="experience.list" >
+                    <li v-for="(item, index) in experience.list" :key="index">
+                      <span class="list-item-black">
+                        {{item}}
+                      </span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <!-- This is for the "education" part of the resume. -->
+        <div id="education-container">
+            <!-- This is for the icon and header part of this container. -->
+            <div class="icon">
+                <i class="material-icons">school</i>
+                <h2 id="education-title">{{ lang.education }}</h2>
+            </div>
+            <div class="spacer"></div>
+            <div class="education" v-for="education in person.education" :key="education.degree">
+                <h2 class="education-description">{{education.description}}</h2>
+                <p><span class="degree">{{education.degree}} | </span><span class="education-timeperiod">{{education.timeperiod}}</span></p>
+            </div>
+        </div>
+
+        <!-- This is for the "projects" part of the resume. -->
+        <div id="projects-container">
+            <!-- This is for the icon and header part of this container. -->
+            <div class="icon">
+                <i class="material-icons">code</i>
+                <h2 id="projects-title">{{ lang.projects }}</h2>
+            </div>
+            <div class="spacer"></div>
+            <div class="projects" v-for="projects in person.projects" :key="projects.company">
+                <h2 class="project-name">{{projects.name}}</h2>
+                <p class="job-info"><span class="job-platform">{{projects.platform}} | </span><span class="projects-timeperiod">{{projects.timeperiod}}</span></p>
+                <p class="job-description" v-if="projects.description">{{projects.description}}</p>
+                <ul v-if="projects.list" >
+                    <li v-for="(item, index) in projects.list" :key="index">
+                      <span class="list-item-black">
+                        {{item}}
+                      </span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+  </div>
+
+  <!-- UI elements for the resume footer. -->
+  <div id="resume-footer">
+      <div v-if="person.about">
+          <h2>{{ lang.about }}</h2>
+          <p>{{person.about}}</p>
+      </div>
+  </div>
+</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { getVueOptions } from './options';
+
+const name = 'purple-side-bar'; // TODO change name
+export default Vue.component(name, getVueOptions(name));
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+@text-purple: #680568;
+#template {
+    box-sizing:border-box;
+    font-family:'Open Sans', sans-serif;
+    h1, h2 {
+        margin: 0;
+        color: @text-purple;
+    }
+
+    p {
+        margin: 0;
+        font-size: 12px;
+    }
+
+    ul li {
+        color: @text-purple;
+        font-size: 12px;
+    }
+
+    a {
+        color: #FFF;
+        text-decoration: none;
+    }
+
+    .list-item-black {
+        color: black;
+    }
+
+    // This is for lining the icon up with the header in the body part of the resume.
+    .icon h2, .icon i {
+        display: inline-block;
+        margin: 0;
+        color: @text-purple;
+    }
+
+    #resume-header {
+        color: white;
+        height: 136px;
+        background-color: purple;
+        box-shadow: inset 0px 0px 200px #301030;
+        padding: 40px 100px 25px;
+
+        #header-left {
+            width: 100%;
+            float: left;
+            h1 {
+                font-size: 56px;
+                color: white;
+                text-transform: uppercase;
+                line-height: 56px;
+            }
+            h2 {
+                font-size: 22px;
+                color: white;
+            }
+            #info-flex {
+                display: flex;
+                margin-top: 20px;
+                font-size: 14px;
+
+                span {
+                    margin-right: 25px;
+                }
+                i {
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+
+    #resume-body {
+        display: flex;
+        position: relative;
+    }
+
+    #resume-body-left {
+        width: 20%;
+        height: 100%;
+        padding: 30px;
+        text-align: left;
+        display: block;
+
+      #skills-title {
+          font-size: 26px;
+          text-transform: uppercase;
+      }
+    }
+
+    #resume-body-right {
+        display: flex;
+        flex-direction: column;
+        padding: 30px;
+
+        height: 100%;
+        width: 80%;
+
+        #experience-title, #education-title, #projects-title {
+            font-size: 26px;
+            text-transform: uppercase;
+        }
+
+        .experience, .projects {
+            margin: 10px 0 10px 50px;
+            ul {
+                margin: 5px 0 0 0;
+            }
+        }
+
+        .company, .education-description, .project-name {
+            font-size: 20px;
+        }
+
+        .job-info {
+            margin-bottom: 5px;
+        }
+
+        .job-info, .job-platform, .degree {
+            font-weight: 700;
+            color: @text-purple;
+            font-size: 16px;
+        }
+
+        .experience-timeperiod, .education-timeperiod, .projects-timeperiod {
+            font-weight: 100;
+            color: @text-purple;
+            font-size: 16px;
+        }
+
+        .education {
+            margin: 10px 0 10px 50px;
+        }
+
+        #education-container {
+            margin-top: 20px;
+        }
+    }
+    #resume-footer {
+        padding: 20px 100px;
+        height: 135px;
+        background-color: purple;
+        box-shadow: inset 0px 0px 100px #301030;
+        box-sizing: border-box;
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        h2, p {
+            color: white;
+        }
+    }
+
+}
+
+.spacer {
+    width: 100%;
+    border-bottom: 1px solid @text-purple;
+    margin: 5px 0 10px;
+}
+</style>
diff --git a/src/resumes/resumes.js b/src/resumes/resumes.js
index 75285fdc..478e9aa2 100755
--- a/src/resumes/resumes.js
+++ b/src/resumes/resumes.js
@@ -16,3 +16,4 @@ import './left-right-projects.vue';
 import './material-dark-projects.vue';
 import './oblique-projects.vue';
 import './side-bar-projects.vue';
+import './purple-side-bar.vue';