ADD material-dark

GeckoChildCrash6178.extra

@@ -0,0 +1 @@
+MozCrashReason=MOZ_CRASH(Aborting on channel error.)

GeckoChildCrash7205.extra

@@ -0,0 +1 @@
+MozCrashReason=MOZ_CRASH(Aborting on channel error.)

GeckoChildCrash8017.extra

@@ -0,0 +1 @@
+MozCrashReason=MOZ_CRASH(Aborting on channel error.)

GeckoChildCrash9214.extra

@@ -0,0 +1 @@
+MozCrashReason=MOZ_CRASH(Aborting on channel error.)

src/App.vue

@@ -9,7 +9,7 @@
 <script>
 export default {
   name: 'app'
-}
+};
 </script>
 
 <style>
@@ -25,6 +25,10 @@ export default {
     -webkit-print-color-adjust: exact;
     box-sizing: border-box;
 }
+.resume{
+  height: 100%;
+  width: 100%;
+}
 .page {
     background: white;
     position: relative;

src/components/resume-material-dark.vue

@@ -1,5 +1,6 @@
 <template>
-<div class="resume leftCol m_box">
+<div class="resume">
+  <div class="leftCol m_box">
     <div class="shadow"></div>
     <div class="heading" id="myselfpic">
     </div>
@@ -69,45 +70,56 @@
           <i class="material-icons">language</i>
         </div>
         <div class="text">
-        <span>{{person.contact.website}}m</span>
+          <span>{{person.contact.website}}</span>
         </div>
       </div>
     </a>
-</div>
-<div class="rightCol">
+
+    <div class="item last">
+      <div class="section-headline">
+        Skills
+      </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="title">
       <h2>{{person.name.first}}  {{person.name.last}}</h2>
       <div>{{person.position}}</div>
     </div>
 
     <div class="section-headline">Working experience</div>
-
-
-  {{#person.experience}}
-  <div class="block">
+      <div class="block" v-for="experience in person.experience">
         <div class="block-helper"></div>
-    <div class="headline">{{position}} - {{company}}</h3>
-      <div class="subheadline">{{timeperiod}}</div>
+        <div class="headline">{{experience.position}} - {{experience.company}}</h3>
+          <div class="subheadline">{{experience.timeperiod}}</div>
           <p class="info">
-        {{description}}
+            {{experience.description}}
           </p>
         </div>
       </div>
-  {{/person.experience}}
-
     <div class="section-headline">Education</div>
-
-  {{#person.education}}
-  <div class="block">
+      <div class="block" v-for="education in person.education">
         <div class="block-helper"></div>
-    <div class="headline">{{degree}}</div>
+        <div class="headline">{{education.degree}}</div>
         <p class="info">
-      {{timeperiod}}, {{description}}
+          {{education.timeperiod}}, {{education.description}}
         </p>
       </div>
-  {{/person.education}}
+  </div>
+
+  <div style="clear:both;"></div>
 </div>
-<div style="clear:both;"></div>
 </template>
 
 <script>
@@ -116,10 +128,10 @@ import {
 } from '../person';
 export default {
   name: 'hello',
-  data() {
+  data () {
     return {
       person: PERSON
-    }
+    };
   }
 };
 </script>
@@ -128,6 +140,7 @@ export default {
 <style scoped>
 .resume {
   font-family: 'Roboto' !important;
+  background: #CCCCCC;
 }
 
 a {

src/main.js

@@ -1,10 +1,10 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App'
-import router from './router'
+import Vue from 'vue';
+import App from './App';
+import router from './router';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 /* eslint-disable no-new */
 new Vue({
@@ -12,4 +12,4 @@ new Vue({
   router,
   template: '<App/>',
   components: { App }
-})
+});

src/router/index.js

@@ -1,15 +1,14 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import ResumeMaterialDark from '@/components/resume-material-dark'
-
-Vue.use(Router)
+import Vue from 'vue';
+import Router from 'vue-router';
+import ResumeMaterialDark from '@/components/resume-material-dark';
+Vue.use(Router);
 
 export default new Router({
   routes: [
     {
       path: '/resume-material-dark',
-      name: 'resume-material-dark',
+      name: 'ResumeMaterialDark',
       component: ResumeMaterialDark
     }
   ]
-})
+});