merge with upstream

.travis.yml

@@ -0,0 +1,22 @@
+sudo: required
+
+dist: trusty
+
+language: node_js
+
+node_js: stable
+
+cache:
+  directories:
+    - node_modules
+
+before_deploy:
+  - npm run build
+
+deploy:
+  provider: pages
+  skip_cleanup: true
+  github_token: $GITHUB_TOKEN
+  local_dir: dist
+  on:
+    branch: master

DEVELOPER.md

@@ -19,12 +19,9 @@ In the directory `src/resumes` you will find all existing templates.
 
 1. Create a copy of `src/resumes/template.vue`.
 
-2. Rename file and update component name:
+2. Rename file and update template name:
 ```javascript
-export default Vue.component('TEMPLATE-NAME', {
+let name = 'TEMPLATE-NAME';
-  name: 'TEMPLATE-NAME',
-  ...
-});
 ```
 
 3. Import the newly added template in `src/resumes/resumes.js`.

ISSUE_TEMPLATE.md

@@ -0,0 +1,22 @@
+<!-- REMOVE EVERYTHING WRITTEN IN UPPERCASE -->
+
+### Case
+<!-- IS IT A:
+- BUG
+- FEATURE REQUEST
+- ENHANCEMENT
+- HELP QUESTION
+-->
+
+## Issue
+<!-- DESCRIBE WHY YOU OPEN THIS ISSUE -->
+
+## Info
+- Operating System: <!-- LINUX / OSX / WINDOWS -->
+- Node-Version: <!-- RUN 'node -v' TO CHECK YOUR VERSION -->
+
+## Reproduce
+<!--
+  IF YOU HAVE A BUG,
+  WRITE DOWN EACH STEP TO REPRODUCE THE PROBLEM
+-->

PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,23 @@
+<!-- REMOVE EVERYTHING WRITTEN IN UPPERCASE -->
+
+## This PR contains:
+<!--
+ - IMPROVED DOCS
+ - A TYPO-FIX
+ - A BUGFIX
+ - A NEW FEATURE
+ - A BREAKING CHANGE
+ - SOMETHING ELSE
+-->
+
+## Describe the problem you have without this PR
+<!-- DESCRIBE PROBLEM HERE OR LINK TO AN ISSUE -->
+
+<!--
+
+IMPORTANT: READ THIS BEFORE SUBMISSION:
+
+- IF YOUR PULL-REQUEST CONTAINS A NEW FEATURE, IT MUST HAVE BEEN DISCUSSED AT AN ISSUE BEFORE
+- DO NOT ADD GENERATED FILES TO THE PULL-REQUEST (NOTHING FROM THE pdf-FOLDER)
+
+-->

README.md

@@ -17,7 +17,6 @@
 <br>
 
 <p align="left">
-<img src="src/assets/preview/resume-material-blue.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;" />
@@ -29,6 +28,8 @@
 
 ## How to use
 
+best-resume-ever requires at least node v.7.6.
+
 1. Clone this repository.
 
 2. Run `npm install`.
@@ -53,7 +54,7 @@ Please read the <a href="DEVELOPER.md">developer docs</a> on how to create or up
 
 ## Contribute
 
-Feel free to add your own templates, fix bugs or improve the docs. Any kind of help is appreciated!
+Feel free to add your own templates, fix bugs or improve the docs. Any kind of help is appreciated! If you any kind of changes to an existing template, please commit them as new templates.
 
 <br>
 

build/webpack.prod.conf.js

@@ -0,0 +1,124 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+var env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: {
+        safe: true
+      }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/index.js

@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: '/best-resume-ever/',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

package.json

@@ -5,6 +5,7 @@
   "author": "salomonelli",
   "scripts": {
     "dev": "node build/dev-server.js",
+    "build": "node build/build.js",
     "start": "node build/dev-server.js",
     "pdf": "node node/app.js",
     "template": "node node/template/template.js",
@@ -30,20 +31,15 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^7.1.2",
-    "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.26.0",
-    "chai": "^4.1.2",
     "chalk": "^1.1.3",
-    "chromedriver": "^2.32.1",
     "concurrently": "^3.5.0",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
     "cpx": "^1.5.0",
-    "cross-env": "^5.0.5",
-    "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
     "electroshot": "^1.4.0",
     "eslint": "^4.6.1",
@@ -63,25 +59,12 @@
     "html-webpack-plugin": "^2.30.1",
     "http": "0.0.0",
     "http-proxy-middleware": "^0.17.3",
-    "inject-loader": "^3.0.1",
-    "karma": "^1.7.1",
-    "karma-coverage": "^1.1.1",
-    "karma-mocha": "^1.3.0",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "^1.3.2",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.31",
-    "karma-webpack": "^2.0.4",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "lolex": "^1.5.2",
-    "mocha": "^3.5.0",
-    "nightwatch": "^0.9.16",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
     "ora": "^1.3.0",
-    "phantomjs-prebuilt": "^2.1.15",
     "postcss": "^6.0.11",
     "postcss-cssnext": "^2.11.0",
     "rename": "^1.0.4",
@@ -90,11 +73,8 @@
     "rimraf": "^2.6.0",
     "rx": "^4.1.0",
     "rxjs": "^5.4.3",
-    "selenium-server": "^3.5.3",
     "semver": "^5.4.1",
     "shelljs": "^0.7.6",
-    "sinon": "^2.3.4",
-    "sinon-chai": "^2.13.0",
     "url-exists": "^1.0.3",
     "url-loader": "^0.5.9",
     "vue-loader": "^12.2.1",
@@ -107,12 +87,7 @@
     "webpack-merge": "^4.1.0"
   },
   "engines": {
-    "node": ">= 4.0.0",
+    "node": ">= 7.4.0",
-    "npm": ">= 3.0.0"
+    "npm": ">= 5.0.0"
-  },
+  }
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ]
 }

src/lang/de.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+const de = {
+  headings: {
+    contact: 'Kontakt',
+    experience: 'Berufserfahrung',
+    education: 'Schulbildung',
+    skills: 'Qualifikationen'
+  }
+};
+export default de;

src/lang/en.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+const en = {
+  headings: {
+    contact: 'Contact',
+    experience: 'Experience',
+    education: 'Education',
+    skills: 'Skills'
+  }
+};
+export default en;

src/lang/fr.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+const fr = {
+  headings: {
+    contact: 'Contact',
+    experience: 'Expériences professionelles',
+    education: 'Formation',
+    skills: 'Compétences'
+  }
+};
+export default fr;

src/pages/home.vue

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

src/person.js

@@ -2,6 +2,7 @@
 export const PERSON = {
   name: {
     first: 'John',
+    middle: '',
     last: 'Doe',
   },
   position: 'Software Developer',
@@ -19,7 +20,7 @@ export const PERSON = {
       company: 'Company B',
       position: 'Frontend Developer',
       timeperiod: 'January 2015 - December 2015',
-      description: 'Fulfillment of extremly important tasks.'
+      description: 'Fulfillment of extremely important tasks.'
     },
     {
       company: 'Company C',
@@ -81,5 +82,6 @@ export const PERSON = {
     city: 'New York',
     website: 'johndoe.com',
     github: 'johnyD'
-  }
+  },
+  lang: 'en' // en, de, fr
 };

src/resumes/left-right.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="resume" id="resume1">
   <div class="row text-center">
-    <span class="name">{{person.name.first}}  {{person.name.last}}</span>
+    <span class="name">{{person.name.first}} {{person.name.middle}} {{person.name.last}}</span>
   </div>
   <div class="row text-center">
     <p class="position center">{{person.position}}</p>
@@ -13,7 +13,7 @@
   </div>
   <div class="left half">
     <div class="experience">
-      <h3>Experience</h3>
+      <h3>{{ lang.headings.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>
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="contact">
-      <h3>Contact</h3>
+      <h3>{{ lang.headings.contact }}</h3>
       <table>
         <tr>
           <td><a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a></td>
@@ -49,13 +49,13 @@
   </div>
   <div class="right half">
     <div class="education">
-      <h3>Education</h3>
+      <h3>{{ lang.headings.education }}</h3>
       <div class="education-block" v-for="education in person.education">
         <span class="degree">{{education.degree}}</span>
         <span class="degree-description">{{education.description}}</span>
       </div>
     </div>
-    <h3>Skills</h3>
+    <h3>{{ lang.headings.skills }}</h3>
     <div class="skills">
       <div class="skill-block" v-for="skill in person.skills">
         <span class="skill">{{skill.name}}</span>
@@ -70,19 +70,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-
 import Vue from 'vue';
-export default Vue.component('left-right', {
+import { getVueOptions } from './resumes';
-  name: 'left-right',
+
-  data () {
+let name = 'left-right';
-    return {
+export default Vue.component(name, getVueOptions(name));
-      person: PERSON
-    };
-  }
-});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/resumes/material-blue.vue

@@ -1,391 +0,0 @@
-<template>
-<div class="resume" id="material-blue">
-  <meta name="name" content="material blue" />
-  <meta name="author" content="pubkey" link="https://github.com/pubkey" />
-  <div class="leftCol m_box">
-      <div class="heading" id="myselfpic">
-          <div class="title">
-              <h2>{{person.name.first}}  {{person.name.last}}</h2>
-              <div>{{person.position}}</div>
-          </div>
-      </div>
-
-      <div class="item">
-          <div class="icon">
-              <i class="fa fa-user"></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="fa fa-location-arrow"></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="fa fa-phone"></i>
-                    </div>
-                    <div class="text">
-                        <h4>{{person.contact.phone}}</h4>
-                        <span>mobile</span>
-                    </div>
-                </div>
-            </a>
-
-      <a :href="'mailto:'+person.contact.email">
-          <div class="item">
-              <div class="icon">
-                  <i class="fa fa-envelope"></i>
-              </div>
-              <div class="text">
-                  <h4>{{person.contact.email}}</h4>
-                  <span>private</span>
-              </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">
-                  <h4>@{{person.contact.github}}</h4>
-                  <span>https://github.com/{{person.contact.github}}</span>
-              </div>
-          </div>
-      </a>
-
-      <div class="item last">
-          <div class="icon">
-              <i class="fa fa-cogs"></i>
-          </div>
-          <div class="text">
-              <h3>Skills</h3>
-              <div style="width: 100%; height: 15px;"></div>
-          </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="block">
-          <div class="icon">
-              <i class="fa fa-suitcase"></i>
-          </div>
-          <div class="content">
-              <h2>Experience</h2>
-                  <div class="item" v-for="experience in person.experience">
-                      <h3>{{experience.position}} - {{experience.company}}</h3>
-                      <span>{{experience.timeperiod}}</span>
-                      <p>
-                          {{experience.description}}
-                      </p>
-                  </div>
-          </div>
-      </div>
-
-      <div class="block">
-          <div class="icon">
-              <i class="fa fa-graduation-cap"></i>
-          </div>
-          <div class="content">
-              <h2>Education</h2>
-
-                  <div class="item" v-for="education in person.education">
-                      <h3>{{education.degree}}</h3>
-                      <span>{{education.timeperiod}}</span>
-                      <p> {{education.description}} </p>
-                  </div>
-          </div>
-      </div>
-  </div>
-  <div style="clear:both;"></div>
-</div>
-</template>
-
-<script>
-import {
-  PERSON
-} from '../person';
-
-import Vue from 'vue';
-export default Vue.component('material-blue', {
-  name: 'material-blue',
-  data () {
-    return {
-      person: PERSON
-    };
-  }
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="less" scoped>
-#material-blue {
-  font-family:'roboto', sans-serif;
-  background-color:#cccccc;
-  font-size:15px;
-  line-height:1.5;
-  color:#767270;
-  letter-spacing:0.072em;
-  font-weight:normal;
-  h1, h3, h5, h6 {
-    font-weight:400;
-    margin:0;
-  }
-  .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 {
-    display:inline-block;
-    font-family:FontAwesome;
-    font-style:normal;
-    font-weight:normal;
-    line-height:1;
-    -webkit-font-smoothing:antialiased;
-    -moz-osx-font-smoothing:grayscale;
-    font-size:26px;
-  }
-  h2 {
-    font-weight:400;
-    font-weight:500;
-    margin:0;
-    margin:0;
-    font-size:22pt;
-    line-height:37pt;
-  }
-  h4 {
-    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;
-    .block {
-      box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
-      width:100%;
-      min-height:50px;
-      flex:1;
-      position:relative;
-      background-color:white;
-      padding-top:24px;
-      padding-bottom:10px;
-      margin-top:6px;
-      margin-bottom:6px;
-      .icon {
-        width:16%;
-        float:left;
-        margin-left:0;
-        .fa {
-          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;
-          span {
-            color:#5da4d9;
-            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;
-    background-color:#5da4d9;
-    overflow:hidden;
-    display:block;
-    a {
-      color:white;
-      text-decoration:none;
-    }
-    .heading {
-      background-color:white;
-      background-repeat:no-repeat;
-      background-size:cover;
-      background-position:center;
-      position:relative;
-      width:100%;
-      height:340px;
-    }
-    .title {
-      position:absolute;
-      right:25px;
-      bottom:25px;
-      span {
-        margin-top:-5px;
-        font-size:10pt;
-        margin:0;
-        padding:0;
-        line-height:15pt;
-      }
-    }
-    .item {
-      width:100%;
-      margin-top:13px;
-      float:left;
-      .icon {
-        width:20%;
-        margin-top:8px;
-        float:left;
-      }
-      .fa {
-        display:inherit;
-        text-align:center;
-      }
-      .text {
-        float:right;
-        width:69%;
-        padding-right:10%;
-        padding-bottom:13px;
-        border-bottom:1px solid #4783c2;
-        li {
-          padding-top:0;
-        }
-      }
-      span {
-        font-weight:300;
-      }
-      .skill {
-        clear:both;
-        width:77%;
-        margin-left:14%;
-        padding-top:4px;
-        .left {
-          float:left;
-          width:10%;
-          padding-top:3px;
-          i:nth-child(2) {
-            float:left;
-            padding-top:4px;
-          }
-        }
-        .right {
-          float:right;
-          width:90%;
-          .progress {
-            float:left;
-            position:relative;
-            height:2px;
-            display:block;
-            width:95%;
-            background-color:#4783c2;
-            border-radius:2px;
-            margin:0.5rem 0 1rem;
-            overflow:visible;
-            .determinate {
-              background-color:white;
-              position:absolute;
-              top:0;
-              bottom:0;
-              .fa {
-                font-size:12px;
-                position:absolute;
-                top:-4px;
-                right:-2px;
-                margin-left:50%;
-              }
-            }
-          }
-        }
-      }
-    }
-    .item.last .text {
-      border-bottom-style:none;
-      padding-bottom:0;
-    }
-  }
-  #myselfpic {
-    background-image:url('../assets/person.jpg');
-    color:black;
-  }
-  #githubIcon {
-    width:25px;
-    padding-left:17px;
-  }
-}
-</style>

src/resumes/material-dark.vue

@@ -5,7 +5,7 @@
     <div class="heading" id="myselfpic">
     </div>
     <div class="section-headline">
-      Contact
+      {{ lang.headings.contact }}
     </div>
     <div class="item">
       <div class="icon">
@@ -77,7 +77,7 @@
 
     <div class="item last">
       <div class="section-headline">
-        Skills
+        {{ lang.headings.skills }}
       </div>
       <div class="skill" v-for="skill in person.skills">
         <div class="right">
@@ -94,11 +94,11 @@
 
   <div class="rightCol">
     <div class="title">
-      <h2>{{person.name.first}}  {{person.name.last}}</h2>
+      <h2>{{person.name.first}} {{person.name.middle}} {{person.name.last}}</h2>
       <div>{{person.position}}</div>
     </div>
 
-    <div class="section-headline">Working experience</div>
+    <div class="section-headline">{{ lang.headings.experience }}</div>
     <div class="block" v-for="experience in person.experience">
       <div class="block-helper"></div>
       <div class="headline">{{experience.position}} - {{experience.company}}</h3>
@@ -108,7 +108,7 @@
         </p>
       </div>
     </div>
-    <div class="section-headline">Education</div>
+    <div class="section-headline">{{ lang.headings.education }}</div>
     <div class="block" v-for="education in person.education">
       <div class="block-helper"></div>
       <div class="headline">{{education.degree}}</div>
@@ -123,19 +123,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-
 import Vue from 'vue';
-export default Vue.component('material-dark', {
+import { getVueOptions } from './resumes';
-  name: 'material-dark',
+
-  data () {
+let name = 'material-dark';
-    return {
+export default Vue.component(name, getVueOptions(name));
-      person: PERSON
-    };
-  }
-});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/resumes/oblique.vue

@@ -5,7 +5,7 @@
     <div class="person-header">
       <div class="person-wrapper">
         <div class="person">
-          <div class="name">{{person.name.first}} {{person.name.last}}</div>
+          <div class="name">{{person.name.first}} {{person.name.middle}} {{person.name.last}}</div>
           <div class="position">{{person.position}}</div>
         </div>
         <div class="img">
@@ -16,7 +16,7 @@
   </div>
   <div class="resume-content">
     <div class="experience">
-      <h3>Experience</h3>
+      <h3>{{ lang.headings.experience }}</h3>
 
       <div class="experience-block" v-for="experience in person.experience">
         <div class="row">
@@ -32,7 +32,7 @@
       </div>
     </div>
     <div class="education">
-      <h3>Education</h3>
+      <h3>{{ lang.headings.education }}</h3>
       <div class="education-block" v-for="education in person.education">
         <div class="row">
           <span class="degree">{{education.degree}}</span>
@@ -43,7 +43,7 @@
       </div>
     </div>
     <div class="skill-section">
-      <h3>Skills</h3>
+      <h3>{{ lang.headings.skills }}</h3>
       <div class="skills" v-for="skill in person.skills">
         <div class="skill-block">
           <i class="material-icons">details</i>
@@ -55,7 +55,7 @@
       <span>{{person.skillDescription}} </span>
     </div>
     <div class="contact">
-      <h3>Contact</h3>
+      <h3>{{ lang.headings.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>
@@ -73,19 +73,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-
 import Vue from 'vue';
-export default Vue.component('oblique', {
+import { getVueOptions } from './resumes';
-  name: 'oblique',
+
-  data () {
+let name = 'oblique';
-    return {
+export default Vue.component(name, getVueOptions(name));
-      person: PERSON
-    };
-  }
-});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/resumes/resumes.js

@@ -4,3 +4,27 @@ import '../resumes/left-right.vue';
 import '../resumes/oblique.vue';
 import '../resumes/side-bar.vue';
 import '../resumes/purple.vue';
+
+import { PERSON } from '../person';
+import { terms } from '../terms';
+
+// Called by templates to decrease redundancy
+function getVueOptions (name) {
+  let opt = {
+    name: name,
+    data () {
+      return {
+        person: PERSON,
+        terms: terms
+      };
+    },
+    computed: {
+      lang () {
+        return this.terms[this.person.lang];
+      }
+    }
+  };
+  return opt;
+}
+
+export { getVueOptions };

src/resumes/side-bar.vue

@@ -1,8 +1,12 @@
 <template>
   <div id="resume2" class="resume">
       <div class="top-row">
-          <span class="person-name">  {{person.name.first}}  {{person.name.last}}    </span>
+          <span class="person-name">
-          <span class="person-position">  {{person.position}}    </span>
+            {{person.name.first}} {{person.name.middle}} {{person.name.last}}
+          </span>
+          <span class="person-position">
+            {{person.position}}
+          </span>
       </div>
       <div class="left-col">
           <div class="person-image">
@@ -11,7 +15,7 @@
               </div>
           </div>
           <div class="contact">
-              <h3>Contact</h3>
+              <h3>{{ lang.headings.contact }}</h3>
               <div class="contact-row">
                   <a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a>
               </div>
@@ -43,7 +47,7 @@
       </div>
       <div class="right-col">
           <div class="experience">
-              <h3>Experience</h3>
+              <h3>{{ lang.headings.experience }}</h3>
                   <div class="experience-block" v-for="experience in person.experience">
                       <div class="row">
                           <span class="company"> {{experience.company}} -</span>
@@ -58,7 +62,7 @@
                   </div>
           </div>
           <div class="education">
-              <h3>Education</h3>
+              <h3>{{ lang.headings.education }}</h3>
                   <div class="education-block" v-for="education in person.education">
                       <div class="row">
                           <span class="degree">{{education.degree}}</span>
@@ -69,7 +73,7 @@
                   </div>
           </div>
           <div class="skills-block">
-              <h3>Skills</h3>
+              <h3>{{ lang.headings.skills }}</h3>
               <div class="skills">
                       <div class="skill" v-for="skill in person.skills">
                           <span class="skill-name">{{skill.name}}</span>
@@ -84,19 +88,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-
 import Vue from 'vue';
-export default Vue.component('side-bar', {
+import { getVueOptions } from './resumes';
-  name: 'side-bar',
+
-  data () {
+let name = 'side-bar';
-    return {
+export default Vue.component(name, getVueOptions(name));
-      person: PERSON
-    };
-  }
-});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/resumes/template.vue

@@ -5,20 +5,11 @@
 </template>
 
 <script>
-import {
-  PERSON
-} from '../person';
-
 import Vue from 'vue';
-// TODO rename vue component
+import { getVueOptions } from './resumes';
-export default Vue.component('template', {
+
-  name: 'template',
+let name = 'TEMPLATE-NAME'; // TODO change name
-  data () {
+export default Vue.component(name, getVueOptions(name));
-    return {
-      person: PERSON
-    };
-  }
-});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/terms.js

@@ -0,0 +1,7 @@
+import en from './lang/en';
+import de from './lang/de';
+import fr from './lang/fr';
+
+export const terms = {
+  en, de, fr
+};