Initial commit

assets/variables.scss

@@ -1,4 +1,4 @@
 // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
 //
 // The variables you want to modify
-// $font-size-root: 20px;
+// $font-size-root: 20px;

layouts/default.vue

@@ -23,18 +23,17 @@
             <v-list-item-title v-text="item.title" />
           </v-list-item-content>
         </v-list-item>
-        <v-list-item :href="`mailto:${myEmail}`">
-          <v-list-item-action>
-            <v-icon>mdi-email</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>Contact</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
       </v-list>
+      <template #append>
+        <div class="pa-2">
+          <v-btn block outlined color="primary" :href="`mailto:${myEmail}`">
+            Contact
+          </v-btn>
+        </div>
+      </template>
     </v-navigation-drawer>
     <v-app-bar fixed flat app color="transparent">
-      <v-avatar size="48" class="mr-3">
+      <v-avatar size="48" color="backgroundSecondary" class="mr-3" style="cursor: pointer" @click.native="$router.push('/')">
         <img
           src="@/assets/avatar_transparent.png"
           alt="Manuel"
@@ -44,14 +43,14 @@
       <v-spacer />
       <v-app-bar-nav-icon v-if="$vuetify.breakpoint.smAndDown" @click.stop="drawer = !drawer" />
       <div v-else>
-        <v-btn plain to="/">Home</v-btn>
+        <v-btn plain active-class="link-active" to="/">Home</v-btn>
-        <v-btn plain to="/bio">About</v-btn>
+        <v-btn plain active-class="link-active" to="/bio">About</v-btn>
-        <v-btn plain to="/portfolio">Work</v-btn>
+        <v-btn plain active-class="link-active" to="/portfolio">Work</v-btn>
-        <v-btn plain :href="`mailto:${myEmail}`">Contact</v-btn>
+        <v-btn plain active-class="link-active" :href="`mailto:${myEmail}`">Contact</v-btn>
       </div>
     </v-app-bar>
     <v-main>
-      <v-container>
+      <v-container class="my-16">
         <Nuxt />
       </v-container>
     </v-main>
@@ -90,7 +89,7 @@ export default {
         }
       ],
       miniVariant: false,
-      myName: 'Manuel Vogel',
+      myName: 'Rakantor',
       myEmail: 'rakantor.dev@gmail.com'
     }
   },
@@ -101,3 +100,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.link-active {
+  color: var(--v-primary-base);
+}
+.v-btn--plain:hover {
+  color: var(--v-primary-base);
+}
+</style>

nuxt.config.js

@@ -56,6 +56,7 @@ export default {
   vuetify: {
     customVariables: ['~/assets/variables.scss'],
     theme: {
+      options: { customProperties: true },
       dark: true,
       themes: {
         dark: {

pages/bio.vue

@@ -10,11 +10,21 @@
         full-stack web development in 2018.
       </span>
     </v-col>
+    <v-col cols="12">
+      <ul>
+        <li v-for="(value, index) in languages" :key="index">{{ value }}</li>
+      </ul>
+    </v-col>
   </v-row>
 </template>
 
 <script>
 export default {
-  name: 'BioPage'
+  name: 'BioPage',
+  data () {
+    return {
+      languages: ['Java', 'Android']
+    }
+  }
 }
 </script>

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row justify="center" align="center" class="my-16">
+  <v-row justify="center" align="center">
     <v-col cols="12">
       <span class="text-h3">Hi,<br/>I'm Manuel,<br/>Software Engineer.</span>
     </v-col>
@@ -7,7 +7,10 @@
       <span class="text-h6">I'm a Software Developer based in Vienna, Austria. I make all kind of applications.</span>
     </v-col>
     <v-col cols="12">
-      <v-btn depressed outlined color="primary" href="mailto:rakantor.dev@gmail.com">Contact me</v-btn>
+      <v-btn depressed outlined color="primary" href="mailto:rakantor.dev@gmail.com">
+        <v-icon left>mdi-email-outline</v-icon>
+        Contact me
+      </v-btn>
     </v-col>
   </v-row>
 </template>

store/README.md

@@ -1,10 +0,0 @@
-# STORE
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-This directory contains your Vuex Store files.
-Vuex Store option is implemented in the Nuxt.js framework.
-
-Creating a file in this directory automatically activates the option in the framework.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).