Merge branch 'master' into master

DEVELOPER.md

@@ -31,6 +31,20 @@ Your new resume will be now reachable at localhost:8080/#/resume/TEMPLATE-NAME.
 <br>
 <br>
 
+4. Generate previews with `npm run preview`. PDF- and PNG-files will be generated.
+
+5. Add preview to `/src/pages/home.vue`:
+```javascript
+<div class="preview">
+  <router-link v-bind:to="'/resume/TEMPLATE-NAME'">
+    <div class="preview-wrapper">
+      <img src="../assets/preview/TEMPLATE-NAME.png" />
+      <span>left-right</span>
+    </div>
+  </router-link>
+</div>
+```
+
 ## Fonts
 
 ### Icons

README.md

@@ -18,6 +18,7 @@
 
 <p align="left">
 <img src="src/assets/preview/resume-purple.png" width="150" style="margin-right:5px; border: 1px solid #ccc;" />
+<img src="src/assets/preview/resume-side-bar-rtl.png" width="150" style="margin-right:5px; border: 1px solid #ccc;" />
 <img src="src/assets/preview/resume-material-dark.png" width="150" style="margin-right:5px; border: 1px solid #ccc;" />
 <img src="src/assets/preview/resume-left-right.png" width="150" style="margin-right:5px; border: 1px solid #ccc;" />
 <img src="src/assets/preview/resume-side-bar.png" width="150" style="margin-right:5px; border: 1px solid #ccc;" />

node/preview.js

@@ -0,0 +1,30 @@
+const mv = require('mv');
+const PDFImage = require('pdf-image').PDFImage;
+const path = require('path');
+const fs = require('fs');
+
+
+const getDirectories = () => {
+  const srcpath = path.join(__dirname, '../pdf');
+  return fs.readdirSync(srcpath);
+};
+
+const getTemplateName = PDF => {
+  return PDF.replace('.pdf', '');
+}
+
+const convert = async (PDF) => {
+  const pdfImage = new PDFImage(path.join(__dirname, '../pdf/' + PDF));
+  await pdfImage.convertPage(0);
+};
+
+const directories = getDirectories();
+directories.forEach(async (dir) => {
+  await convert(dir);
+  const source = path.join(__dirname, '../pdf/' + getTemplateName(dir) + '-0.png');
+  const output = path.join(__dirname, '../src/assets/preview/resume-' + getTemplateName(dir) + '.png');
+  console.log(output);
+  mv(source, output, function(err) {
+    if(err) console.dir(err);
+  });
+});

package.json

@@ -3,11 +3,17 @@
   "version": "1.0.0",
   "description": "Build fast and easy multiple beautiful resumes and create your best CV ever! ",
   "author": "salomonelli",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/salomonelli/best-resume-ever.git"
+  },
   "scripts": {
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
     "start": "node build/dev-server.js",
     "pdf": "node node/app.js",
+    "preview": "npm run export && node node/preview.js",
     "template": "node node/template/template.js",
     "export": "concurrently \"npm run dev\" \"npm run pdf\" --success first --kill-others --raw",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
@@ -61,9 +67,11 @@
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "lolex": "^1.5.2",
+    "mv": "^2.1.1",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
     "ora": "^1.3.0",
+    "pdf-image": "^1.1.0",
     "postcss": "^6.0.11",
     "postcss-cssnext": "^2.11.0",
     "rename": "^1.0.4",

src/lang/he.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+const he = {
+  headings: {
+    contact: 'יצירת קשר',
+    experience: 'ניסיון',
+    education: 'השכלה',
+    skills: 'כישורים',
+    about: 'תמצית'
+  }
+};
+export default he;

src/lang/nl.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+const nl = {
+    headings: {
+      contact: 'Contact',
+      experience: 'Ervaringen',
+      education: 'Opleidingen',
+      skills: 'Skills',
+      about: 'Over mij'
+    }
+  };
+  export default nl;

src/pages/home.vue

@@ -46,6 +46,14 @@
         </div>
       </router-link>
     </div>
+    <div class="preview">
+      <router-link v-bind:to="'/resume/side-bar-rtl'">
+        <div class="preview-wrapper">
+          <img src="../assets/preview/resume-side-bar-rtl.png" />
+          <span>side-bar-rtl</span>
+        </div>
+      </router-link>
+    </div>
   </div>
 </div>
 </template>

src/person.js

@@ -84,5 +84,5 @@ export const PERSON = {
     website: 'johndoe.com',
     github: 'johnyD'
   },
-  lang: 'en' // en, de, fr, pt, cn, it, es, th, pt-br, ru, sv, id, hu, pl, ja, zh-tw
+  lang: 'en' // en, de, fr, pt, cn, it, es, th, pt-br, ru, sv, id, hu, pl, ja, nl, he, zh-tw
 };

src/resumes/left-right.vue

@@ -14,7 +14,7 @@
   <div class="left half">
     <div class="experience">
       <h3>{{ lang.headings.experience }}</h3>
-      <div class="experience-block" v-for="experience in person.experience">
+      <div class="experience-block" v-for="experience in person.experience" :key="experience.company">
         <span class="company"> {{experience.company}} </span>
         <span class="job-title"> {{experience.position}} </span>
         <span class="time-period"> {{experience.timeperiod}}</span>
@@ -50,14 +50,14 @@
   <div class="right half">
     <div class="education">
       <h3>{{ lang.headings.education }}</h3>
-      <div class="education-block" v-for="education in person.education">
+      <div class="education-block" v-for="education in person.education" :key="education.degree">
         <span class="degree">{{education.degree}}</span>
         <span class="degree-description">{{education.description}}</span>
       </div>
     </div>
     <h3>{{ lang.headings.skills }}</h3>
     <div class="skills">
-      <div class="skill-block" v-for="skill in person.skills">
+      <div class="skill-block" v-for="skill in person.skills" :key="skill.name">
         <span class="skill">{{skill.name}}</span>
         <div class="skill-bar">
           <div :style="'width: '+skill.level+'%'" class="level"> </div>

src/resumes/material-dark.vue

@@ -79,7 +79,7 @@
       <div class="section-headline">
         {{ lang.headings.skills }}
       </div>
-      <div class="skill" v-for="skill in person.skills">
+      <div class="skill" v-for="skill in person.skills" :key="skill.name">
         <div class="right">
           <span>{{skill.name}}&nbsp;</span>
           <div class="progress">
@@ -99,7 +99,7 @@
     </div>
 
     <div class="section-headline">{{ lang.headings.experience }}</div>
-    <div class="block" v-for="experience in person.experience">
+    <div class="block" v-for="experience in person.experience" :key="experience.company">
       <div class="block-helper"></div>
       <div class="headline">{{experience.position}} - {{experience.company}}</h3>
         <div class="subheadline">{{experience.timeperiod}}</div>
@@ -109,7 +109,7 @@
       </div>
     </div>
     <div class="section-headline">{{ lang.headings.education }}</div>
-    <div class="block" v-for="education in person.education">
+    <div class="block" v-for="education in person.education" :key="education.degree">
       <div class="block-helper"></div>
       <div class="headline">{{education.degree}}</div>
       <p class="info">

src/resumes/oblique.vue

@@ -18,7 +18,7 @@
     <div class="experience">
       <h3>{{ lang.headings.experience }}</h3>
 
-      <div class="experience-block" v-for="experience in person.experience">
+      <div class="experience-block" v-for="experience in person.experience" :key="experience.company">
         <div class="row">
           <span class="job-title"> {{experience.position}} </span>
           <i class="material-icons">details</i>
@@ -33,7 +33,7 @@
     </div>
     <div class="education">
       <h3>{{ lang.headings.education }}</h3>
-      <div class="education-block" v-for="education in person.education">
+      <div class="education-block" v-for="education in person.education" :key="education.degree">
         <div class="row">
           <span class="degree">{{education.degree}}</span>
         </div>
@@ -44,7 +44,7 @@
     </div>
     <div class="skill-section">
       <h3>{{ lang.headings.skills }}</h3>
-      <div class="skills" v-for="skill in person.skills">
+      <div class="skills" v-for="skill in person.skills" :key="skill.name">
         <div class="skill-block">
           <i class="material-icons">details</i>
           <span class="skill">{{skill.name}}</span>

src/resumes/purple.vue

@@ -20,19 +20,23 @@
         <div id="experience-container">
             <h2 id="experience-title">{{ lang.headings.experience }}</h2>
             <div class="spacer"></div>
-            <div class="experience" v-for="experience in person.experience">
+            <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 in experience.list"><span class="list-item-black">{{item}}</span></li>
+                    <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.headings.education }}</h2>
             <div class="spacer"></div>
-            <div class="education" v-for="education in person.education">
+            <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>
@@ -42,7 +46,11 @@
             <div class="spacer"></div>
             <p id="skill-description">{{person.skillDescription}}</p>
             <ul id="skill-list">
-                <li class="skill" v-for="skill in person.skills"><span class="list-item-black">{{skill.name}}</span></li>
+                <li class="skill" v-for="skill in person.skills" :key="skill.name">
+                  <span class="list-item-black">
+                    {{skill.name}}
+                  </span>
+                </li>
             </ul>
         </div>
     </div>

src/resumes/resumes.js

@@ -1,9 +1,10 @@
 // If you create a new resume, import it here:
-import '../resumes/material-dark.vue';
-import '../resumes/left-right.vue';
-import '../resumes/oblique.vue';
-import '../resumes/side-bar.vue';
-import '../resumes/purple.vue';
+import './material-dark.vue';
+import './left-right.vue';
+import './oblique.vue';
+import './side-bar.vue';
+import './purple.vue';
+import './side-bar-rtl.vue';
 
 import { PERSON } from '../person';
 import { terms } from '../terms';

src/resumes/side-bar-rtl.vue

@@ -0,0 +1,240 @@
+<template>
+  <div id="resume2" class="resume">
+      <div class="top-row">
+          <span class="person-name">
+            {{person.name.first}} {{person.name.middle}} {{person.name.last}}
+          </span>
+          <span class="person-position">
+            {{person.position}}
+          </span>
+      </div>
+      <div class="right-col">
+          <div class="person-image">
+              <div class="image-centerer">
+                  <div class="img"></div>
+              </div>
+          </div>
+          <div class="contact">
+              <h3>{{ lang.headings.contact }}</h3>
+              <div class="contact-row">
+                  <a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a>
+              </div>
+              <div class="contact-row dots">
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+              </div>
+              <div class="contact-row">
+                  <a href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
+              </div>
+              <div class="contact-row dots">
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+              </div>
+              <div class="contact-row">
+                  {{person.contact.street}} <br> {{person.contact.city}}
+              </div>
+              <div class="contact-row dots">
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+                  <i class="fa fa-circle" aria-hidden="true"></i>
+              </div>
+              <div class="contact-row">
+                  <a :href="'https://github.com/'+person.contact.github">https://github.com/{{person.contact.github}}</a>
+              </div>
+          </div>
+      </div>
+      <div class="left-col">
+          <div class="experience">
+              <h3>{{ lang.headings.experience }}</h3>
+                  <div class="experience-block" v-for="experience in person.experience">
+                      <div class="row">
+                          <span class="company"> {{experience.company}} -</span>
+                          <span class="job-title"> {{experience.position}} </span>
+                      </div>
+                      <div class="row">
+                          <span class="time-period"> {{experience.timeperiod}}</span>
+                      </div>
+                      <div class="row">
+                          <span class="job-description"> {{experience.description}} </span>
+                      </div>
+                  </div>
+          </div>
+          <div class="education">
+              <h3>{{ lang.headings.education }}</h3>
+                  <div class="education-block" v-for="education in person.education">
+                      <div class="row">
+                          <span class="degree">{{education.degree}}</span>
+                      </div>
+                      <div class="row">
+                          <span class="degree-description">{{education.description}}</span>
+                      </div>
+                  </div>
+          </div>
+          <div class="skills-block">
+              <h3>{{ lang.headings.skills }}</h3>
+              <div class="skills">
+                      <div class="skill" v-for="skill in person.skills">
+                          <span class="skill-name">{{skill.name}}</span>
+                      </div>
+              </div>
+              <span class="skills-other"> {{person.skillDescription}} </span>
+          </div>
+      </div>
+  </div>
+
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { getVueOptions } from './resumes';
+
+let name = 'side-bar-rtl';
+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;
+  text-align:right;
+  direction: rtl;
+  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;
+    }
+  }
+  .right-col {
+    width:26%;
+    float:right;
+    padding-right:8%;
+    padding-left: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);
+    }
+  }
+  .left-col {
+    width:50%;
+    float:left;
+    padding-right:4%;
+    padding-left: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:right;
+          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>

src/resumes/side-bar.vue

@@ -25,7 +25,7 @@
                   <i class="fa fa-circle" aria-hidden="true"></i>
               </div>
               <div class="contact-row">
-                  <a href="'tel:'+person.contact.phone">{{person.contact.phone}}</a>
+                  <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>
@@ -48,7 +48,7 @@
       <div class="right-col">
           <div class="experience">
               <h3>{{ lang.headings.experience }}</h3>
-                  <div class="experience-block" v-for="experience in person.experience">
+                  <div class="experience-block" v-for="experience in person.experience" :key="experience.company">
                       <div class="row">
                           <span class="company"> {{experience.company}} -</span>
                           <span class="job-title"> {{experience.position}} </span>
@@ -63,7 +63,7 @@
           </div>
           <div class="education">
               <h3>{{ lang.headings.education }}</h3>
-                  <div class="education-block" v-for="education in person.education">
+                  <div class="education-block" v-for="education in person.education" :key="education.degree">
                       <div class="row">
                           <span class="degree">{{education.degree}}</span>
                       </div>
@@ -75,7 +75,7 @@
           <div class="skills-block">
               <h3>{{ lang.headings.skills }}</h3>
               <div class="skills">
-                      <div class="skill" v-for="skill in person.skills">
+                      <div class="skill" v-for="skill in person.skills" :key="skill.name">
                           <span class="skill-name">{{skill.name}}</span>
                       </div>
               </div>

src/terms.js

@@ -12,9 +12,11 @@ import ru from './lang/ru';
 import ptbr from './lang/pt-br';
 import hu from './lang/hu';
 import pl from './lang/pl';
+import he from './lang/he';
 import ja from './lang/ja';
 import zhtw from './lang/zh-tw';
+import nl from './lang/nl';
 
 export const terms = {
-  en, de, fr, pt, cn, it, es, th, 'pt-br': ptbr, ru, sv, id, hu, pl, ja, 'zh-tw': zhtw
+  en, de, fr, pt, cn, it, es, th, 'pt-br': ptbr, ru, sv, id, hu, pl, ja, nl, he, 'zh-tw': zhtw
 };