add language support

src/lang/de.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+const de = {
+  headings: {
+    contact: 'Kontakt',
+    experience: 'Erfahrung',
+    education: 'Schulbildung',
+    skills: 'Fähigkeiten',
+  }
+};
+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/person.js

@@ -82,5 +82,6 @@ export const PERSON = {
     city: 'New York',
     website: 'johndoe.com',
     github: 'johnyD'
-  }
+  },
+  lang: "de"
 };

src/resumes/left-right.vue

@@ -13,7 +13,7 @@
   </div>
   <div class="left half">
     <div class="experience">
-      <h3>Experience</h3>
+      <h3>{{ terms[person.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>{{ terms[person.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>{{ terms[person.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>{{ terms[person.lang].headings.skills }}</h3>
     <div class="skills">
       <div class="skill-block" v-for="skill in person.skills">
         <span class="skill">{{skill.name}}</span>
@@ -73,13 +73,15 @@
 import {
   PERSON
 } from '../person';
+import { terms } from '../terms';
 
 import Vue from 'vue';
 export default Vue.component('left-right', {
   name: 'left-right',
   data () {
     return {
-      person: PERSON
+      person: PERSON,
+      terms: terms
     };
   }
 });

src/resumes/material-dark.vue

@@ -5,7 +5,7 @@
     <div class="heading" id="myselfpic">
     </div>
     <div class="section-headline">
-      Contact
+      {{ terms[person.lang].headings.contact }}
     </div>
     <div class="item">
       <div class="icon">
@@ -77,7 +77,7 @@
 
     <div class="item last">
       <div class="section-headline">
-        Skills
+        {{ terms[person.lang].headings.skills }}
       </div>
       <div class="skill" v-for="skill in person.skills">
         <div class="right">
@@ -98,7 +98,7 @@
       <div>{{person.position}}</div>
     </div>
 
-    <div class="section-headline">Working experience</div>
+    <div class="section-headline">{{ terms[person.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">{{ terms[person.lang].headings.education }}</div>
     <div class="block" v-for="education in person.education">
       <div class="block-helper"></div>
       <div class="headline">{{education.degree}}</div>
@@ -126,13 +126,15 @@
 import {
   PERSON
 } from '../person';
+import { terms } from '../terms';
 
 import Vue from 'vue';
 export default Vue.component('material-dark', {
   name: 'material-dark',
   data () {
     return {
-      person: PERSON
+      person: PERSON,
+      terms: terms
     };
   }
 });

src/resumes/oblique.vue

@@ -16,7 +16,7 @@
   </div>
   <div class="resume-content">
     <div class="experience">
-      <h3>Experience</h3>
+      <h3>{{ terms[person.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>{{ terms[person.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>{{ terms[person.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>{{ terms[person.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>
@@ -76,13 +76,15 @@
 import {
   PERSON
 } from '../person';
+import { terms } from '../terms';
 
 import Vue from 'vue';
 export default Vue.component('oblique', {
   name: 'oblique',
   data () {
     return {
-      person: PERSON
+      person: PERSON,
+      terms: terms
     };
   }
 });

src/resumes/side-bar.vue

@@ -15,7 +15,7 @@
               </div>
           </div>
           <div class="contact">
-              <h3>Contact</h3>
+              <h3>{{ terms[person.lang].headings.contact }}</h3>
               <div class="contact-row">
                   <a :href="'mailto:'+person.contact.email">{{person.contact.email}}</a>
               </div>
@@ -47,7 +47,7 @@
       </div>
       <div class="right-col">
           <div class="experience">
-              <h3>Experience</h3>
+              <h3>{{ terms[person.lang].headings.experience }}</h3>
                   <div class="experience-block" v-for="experience in person.experience">
                       <div class="row">
                           <span class="company"> {{experience.company}} -</span>
@@ -62,7 +62,7 @@
                   </div>
           </div>
           <div class="education">
-              <h3>Education</h3>
+              <h3>{{ terms[person.lang].headings.education }}</h3>
                   <div class="education-block" v-for="education in person.education">
                       <div class="row">
                           <span class="degree">{{education.degree}}</span>
@@ -73,7 +73,7 @@
                   </div>
           </div>
           <div class="skills-block">
-              <h3>Skills</h3>
+              <h3>{{ terms[person.lang].headings.skills }}</h3>
               <div class="skills">
                       <div class="skill" v-for="skill in person.skills">
                           <span class="skill-name">{{skill.name}}</span>
@@ -91,13 +91,15 @@
 import {
   PERSON
 } from '../person';
+import { terms } from '../terms';
 
 import Vue from 'vue';
 export default Vue.component('side-bar', {
   name: 'side-bar',
   data () {
     return {
-      person: PERSON
+      person: PERSON,
+      terms: terms
     };
   }
 });

src/resumes/template.vue

@@ -6,6 +6,7 @@
 
 <script>
 import { PERSON as person } from '../person';
+import { terms } from '../terms';
 
 import Vue from 'vue';
 // TODO rename vue component
@@ -13,7 +14,7 @@ export default Vue.component('template', {
   name: 'template',
   data () {
     return {
-      person
+      person, terms
     };
   }
 });

src/terms.js

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