salomonelli · Yee152 · Jun 5, 2023 · Jun 5, 2023 · Jun 5, 2023
diff --git a/DEVELOPER.md b/DEVELOPER.md
@@ -43,9 +43,11 @@ Your new resume will be now reachable at localhost:8080/#/resume/TEMPLATE-NAME.
       <img src="../assets/preview/TEMPLATE-NAME.png" />
       <span>left-right</span>
     </div>
+
   </router-link>
 </div>
 ```
+6. Add preview image to `/assets/preview/template-name.png`:
 
 ## Fonts
 

diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md
@@ -2,10 +2,7 @@
 
 ### Case
 <!-- IS IT A:
-- BUG
-- FEATURE REQUEST
-- ENHANCEMENT
-- HELP QUESTION
+- New Resume Template
 -->
 
 ## Issue

diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -2,12 +2,7 @@
 
 ## This PR contains:
 <!--
- - IMPROVED DOCS
- - A TYPO-FIX
- - A BUGFIX
- - A NEW FEATURE
- - A BREAKING CHANGE
- - SOMETHING ELSE
+ - New resume template
 -->
 
 ## Describe the problem you have without this PR

diff --git a/README.md b/README.md
@@ -85,7 +85,7 @@ git clone https://github.com/salomonelli/best-resume-ever.git
 
 3. Run `npm install`. This may take a few seconds.
 
-4. Customize your resume in the `resume/` directory: edit your data `data.yml` and replace the default profile-picture `id.jpg` with your picture. Rename your picture as `id.jpg` and copy it in the `resume/` directory. During this step, you may find it easier to navigate with Finder or File Explorer to get to the files. This will allow you to edit files with your computers default text editor. 
+4. Customize your resume in the `resume/` directory: edit your data `data.yml` and replace the default profile-picture `id.jpg` with your picture. Once on `data.yml` each category needs to be updated with your relevant information. Each section will have a comment that describes what needs to be changed. After updating your information, save and run the program again to preview your resume. Rename your picture as `id.jpg` and copy it in the `resume/` directory. During this step, you may find it easier to navigate with Finder or File Explorer to get to the files. This will allow you to edit files with your computers default text editor. 
 
 5. Preview resumes with `npm run dev`. The command will start a server instance and listen on port 8080.  Open (http://localhost:8080/home) in your browser. The page will show some resume previews. To see the preview of your resume, with your picture and data, click on one layout that you like and the resume will be opened in the same window.
 

diff --git a/pdf/Regular.pdf b/pdf/Regular.pdf
diff --git a/pdf/cool-rtl.pdf b/pdf/cool-rtl.pdf
diff --git a/pdf/cool-rtl2.pdf b/pdf/cool-rtl2.pdf
diff --git a/pdf/cool.pdf b/pdf/cool.pdf
diff --git a/pdf/creative.pdf b/pdf/creative.pdf
diff --git a/pdf/green.pdf b/pdf/green.pdf
diff --git a/pdf/left-right-projects.pdf b/pdf/left-right-projects.pdf
diff --git a/pdf/left-right-rtl.pdf b/pdf/left-right-rtl.pdf
diff --git a/pdf/left-right.pdf b/pdf/left-right.pdf
diff --git a/pdf/material-dark-projects.pdf b/pdf/material-dark-projects.pdf
diff --git a/pdf/material-dark.pdf b/pdf/material-dark.pdf
diff --git a/pdf/oblique-projects.pdf b/pdf/oblique-projects.pdf
diff --git a/pdf/oblique-rtl.pdf b/pdf/oblique-rtl.pdf
diff --git a/pdf/oblique.pdf b/pdf/oblique.pdf
diff --git a/pdf/purple.pdf b/pdf/purple.pdf
diff --git a/pdf/side-bar-projects.pdf b/pdf/side-bar-projects.pdf
diff --git a/pdf/side-bar-rtl.pdf b/pdf/side-bar-rtl.pdf
diff --git a/pdf/side-bar.pdf b/pdf/side-bar.pdf
diff --git a/resume/data.yml b/resume/data.yml
@@ -1,4 +1,4 @@
-/* #*/ export const PERSON = `
+ /* #*/ export const PERSON = `
 # Any fields left unchanged, please delete so your resume is fully yours!
 
 name:

diff --git a/src/assets/preview/regular.png b/src/assets/preview/regular.png
diff --git a/src/pages/home.vue b/src/pages/home.vue
@@ -149,7 +149,16 @@
         </router-link>
       </div>
     </div>
-
+
+    <div class="preview">
+    <router-link v-bind:to="'/resume/regular'">
+      <div class="preview-wrapper">
+        <img src="../assets/preview/regular.png" />
+        <span>Basic Left Resume</span>
+      </div>
+    </router-link>
+  </div>
+
     <div class="sponsoring">
       <div class="sponsored-by">Sponsored by:</div><br />
       <a href="https://rxdb.info/?utm_source=github&utm_medium=repo&utm_campaign=github-best-resume-ever">

diff --git a/src/resumes/regular.vue b/src/resumes/regular.vue
@@ -0,0 +1,67 @@
+<template>
+<div class="resume" id="template">
+    <div id="resume-header">
+        <div id="header-center">
+            <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>
+    <div id="resume-body">
+        <div id="experience-container">
+            <h2 id="experience-title">{{ lang.experience }}</h2>
+            <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>
+        <div id="education-container">
+            <h2 id="education-title">{{ lang.education }}</h2>
+            <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>
+        <div id="skills-container" v-if="person.skills != []">
+            <h2 id="skills-title">{{ lang.skills }}</h2>
+            <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>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { getVueOptions } from './options';
+
+const name = 'regular'; // 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>
+</style>
+
diff --git 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 './regular.vue';