Initial commit

layouts/default.vue

@@ -7,26 +7,33 @@
       right
       app
       color="backgroundSecondary"
+      
     >
-      <v-list>
+      <v-list nav>
-        <v-list-item
+        <v-list-item-group
-          v-for="(item, i) in items"
+          v-model="selectedItem"
-          :key="i"
+          color="primary"
-          :to="item.to"
-          router
-          exact
         >
-          <v-list-item-action>
+          <v-list-item
-            <v-icon>{{ item.icon }}</v-icon>
+            v-for="(item, i) in items"
-          </v-list-item-action>
+            :key="i"
-          <v-list-item-content>
+            :to="item.to"
-            <v-list-item-title v-text="item.title" />
+            router
-          </v-list-item-content>
+            exact
-        </v-list-item>
+          >
+            <v-list-item-action>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title v-text="item.title" />
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-item-group>
       </v-list>
       <template #append>
         <div class="pa-2">
-          <v-btn block outlined color="primary" :href="`mailto:${myEmail}`">
+          <v-btn block outlined color="primary" :href="`mailto:${myName}<${myEmail}>`">
+            <v-icon left>mdi-email-outline</v-icon>
             Contact
           </v-btn>
         </div>
@@ -46,7 +53,7 @@
         <v-btn plain active-class="link-active" to="/">Home</v-btn>
         <v-btn plain active-class="link-active" to="/bio">About</v-btn>
         <v-btn plain active-class="link-active" to="/portfolio">Work</v-btn>
-        <v-btn plain active-class="link-active" :href="`mailto:${myEmail}`">Contact</v-btn>
+        <v-btn plain active-class="link-active" :href="`mailto:${myName}<${myEmail}>`">Contact</v-btn>
       </div>
     </v-app-bar>
     <v-main>
@@ -68,31 +75,30 @@
 <script>
 export default {
   name: 'DefaultLayout',
-  data() {
+  data: () => ({
-    return {
+    drawer: false,
-      drawer: false,
+    miniVariant: false,
-      items: [
+    selectedItem: 0,
-        {
+    myName: 'Manuel',
-          icon: 'mdi-home',
+    myEmail: 'rakantor.dev@gmail.com',
-          title: 'Home',
+    items: [
-          to: '/',
+      {
-        },
+        icon: 'mdi-home',
-        {
+        title: 'Home',
-          icon: 'mdi-text-account',
+        to: '/',
-          title: 'About',
+      },
-          to: '/bio',
+      {
-        },
+        icon: 'mdi-text-account',
-        {
+        title: 'About',
-          icon: 'mdi-briefcase',
+        to: '/bio',
-          title: 'Work',
+      },
-          to: '/portfolio',
+      {
-        }
+        icon: 'mdi-briefcase',
-      ],
+        title: 'Work',
-      miniVariant: false,
+        to: '/portfolio',
-      myName: 'Rakantor',
+      }
-      myEmail: 'rakantor.dev@gmail.com'
+    ]
-    }
+  }),
-  },
   computed: {
     theme () {
       return (this.$vuetify.theme.dark) ? 'dark' : 'light'
@@ -105,7 +111,14 @@ export default {
 .link-active {
   color: var(--v-primary-base);
 }
+.v-btn--plain >>> .v-btn__content {
+  color: inherit;
+  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
 .v-btn--plain:hover {
   color: var(--v-primary-base);
 }
+.v-btn--plain:focus {
+  color: var(--v-primary-base);
+}
 </style>

pages/bio.vue

@@ -5,15 +5,16 @@
     </v-col>
     <v-col cols="12">
       <span>
-        Hey there! I'm Manuel, a software dev based in Vienna, Austria. I C.
+        Hello there! I'm Manuel, a software dev based in Vienna, Austria. I C.
         A year later, I continued to learn Java. I HTML and CSS
         full-stack web development in 2018.
       </span>
     </v-col>
     <v-col cols="12">
-      <ul>
+      <v-chip v-for="(value, index) in languages" :key="index" outlined color="primary" class="mx-1">{{ value }}</v-chip>
-        <li v-for="(value, index) in languages" :key="index">{{ value }}</li>
+    </v-col>
-      </ul>
+    <v-col cols="12">
+      <v-chip v-for="(value, index) in tech" :key="index" outlined class="mx-1">{{ value }}</v-chip>
     </v-col>
   </v-row>
 </template>
@@ -21,10 +22,9 @@
 <script>
 export default {
   name: 'BioPage',
-  data () {
+  data: () => ({
-    return {
+    languages: ['Java', 'Android', 'JavaScript (ES6+)', 'Vue.js', 'Nuxt.js', 'Vuetify', 'BootstrapVue', 'PHP', 'SQL'],
-      languages: ['Java', 'Android']
+    tech: ['AWS', 'Heroku', 'WordPress', 'Firebase']
-    }
+  })
-  }
 }
 </script>

pages/index.vue

@@ -1,10 +1,10 @@
 <template>
   <v-row justify="center" align="center">
     <v-col cols="12">
-      <span class="text-h3">Hi,<br/>I'm Manuel,<br/>Software Engineer.</span>
+      <span class="text-h3">Hi, my name is Manuel.</span>
     </v-col>
     <v-col cols="12">
-      <span class="text-h6">I'm a Software Developer based in Vienna, Austria. I make all kind of applications.</span>
+      <span class="text-h6">I'm a Software Developer based in Vienna, Austria.<br/>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">

pages/portfolio.vue

@@ -5,18 +5,38 @@
     </v-col>
     <v-col v-for="(project, index) of projects" :key="index" cols="12" md="6">
       <v-card color="backgroundSecondary">
+        <v-card-title>
+          <span v-if="project.projectUrl">
+            <a :href="`https://${project.projectUrl}`" target="_blank" class="link">{{ project.title }}</a>
+          </span>
+          <span v-else>{{ project.title }}</span>
+        </v-card-title>
+        <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
         <v-img
           height="250"
           src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
         ></v-img>
-        <v-card-title>{{ project.title }}</v-card-title>
+        <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien justo, vehicula at rutrum sed, maximus nec ante. Fusce maximus nulla vel elit scelerisque, eget eleifend neque tincidunt. Cras malesuada ultrices massa ac tempor. Donec faucibus orci eu arcu condimentum, quis congue neque sollicitudin. Etiam vel consequat lectus. Cras vel metus id odio ultrices tincidunt. Sed vitae neque non eros molestie convallis eget non ligula. Nam ullamcorper dolor risus, in dapibus sapien pellentesque in. Praesent dapibus justo eu egestas sagittis. Nam vel ipsum mauris. In hendrerit odio a magna viverra, vehicula vehicula urna tempor. Vestibulum vel vestibulum lorem. Integer luctus nulla libero, egestas efficitur ex sagittis sed. In fermentum cursus eleifend.</v-card-text>
-        <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
-        <v-card-text>Desktop/Android application written in Java</v-card-text>
         <v-card-text class="text-caption">
-          {{ project.info }}
+          {{ project.description }}
         </v-card-text>
         <v-card-actions>
-          <v-btn depressed outlined color="primary">Visit Project Website</v-btn>
+          <v-btn
+            v-if="project.repoUrl"
+            icon
+            :href="`https://${project.repoUrl}`"
+            target="_blank"
+          >
+            <v-icon>mdi-github</v-icon>
+          </v-btn>
+          <v-btn
+            v-if="project.projectUrl"
+            icon
+            :href="`https://${project.projectUrl}`"
+            target="_blank"
+          >
+            <v-icon>mdi-open-in-new</v-icon>
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-col>
@@ -26,36 +46,49 @@
 <script>
 export default {
   name: 'PortfolioComponent',
-  data () {
+  data: () => ({
-    return {
+    projects: [
-      projects: [
+      {
-        {
+        title: 'Torii SRS 2.0',
-          title: 'Torii SRS 2.0',
+        subtitle: 'Progressive Web App',
-          subtitle: 'Progressive Web App',
+        description: 'Vue.js Vuetify.js Chart.js MySQL PHP AWS Azure Watson Heroku',
-          info: 'Vue.js Vuetify.js Chart.js MySQL PHP AWS Azure Watson Heroku'
+        projectUrl: 'beta.torii-srs.com'
-        },
+      },
-        {
+      {
-          title: 'Torii SRS 1.0',
+        title: 'Torii SRS 1.0',
-          subtitle: 'Cross-platform desktop and mobile app',
+        subtitle: 'Cross-platform desktop and mobile app',
-          info: 'Java libGDX MySQL PHP AWS WordPress'
+        description: 'Java libGDX MySQL PHP AWS WordPress',
-        },
+        projectUrl: 'torii-srs.com'
-        {
+      },
-          title: 'IU Gamer App',
+      {
-          subtitle: 'Cross-platform desktop and mobile app',
+        title: 'IU Gamer App',
-          info: 'Android (Java) Firebase'
+        subtitle: 'Android app',
-        },
+        description: 'Android (Java) Firebase'
-        {
+      },
-          title: 'Menacing Blue',
+      {
-          subtitle: '2000s Pokémon inspired Cross-platform 2D game',
+        title: 'Menacing Blue',
-          info: 'Java libGDX'
+        subtitle: '2000s Pokémon inspired Cross-platform 2D game',
-        },
+        description: 'Java libGDX'
-        {
+      },
-          title: 'Personal Portfolio Website',
+      {
-          subtitle: 'The thing you\'re looking at right now',
+        title: 'Personal Portfolio Website',
-          info: 'Nuxt.js Vuetify.js Github-Pages'
+        subtitle: 'The thing you\'re looking at right now',
-        }
+        description: 'Nuxt.js Vuetify.js GitHub-Pages',
-      ]
+        repoUrl: 'github.com/Rakantor/personal-portfolio',
-    }
+        projectUrl: 'mave.dev'
-  }
+      }
+    ]
+  })
 }
-</script>
+</script>
+
+<style scoped>
+.link {
+  color: inherit;
+  text-decoration: none;
+  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.link:hover {
+  color: var(--v-primary-base);
+}
+</style>