From f367ba9db99693a94edd72fd7640b4eff6af13e4 Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Sun, 17 Apr 2022 15:42:45 +0200
Subject: [PATCH] Initial commit

---
 layouts/default.vue |  95 ++++++++++++++++++++++-----------------
 pages/bio.vue       |  18 ++++----
 pages/index.vue     |   4 +-
 pages/portfolio.vue | 107 +++++++++++++++++++++++++++++---------------
 4 files changed, 135 insertions(+), 89 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 5a1d342..2613cdb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -7,26 +7,33 @@
       right
       app
       color="backgroundSecondary"
+      
     >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
+      <v-list nav>
+        <v-list-item-group
+          v-model="selectedItem"
+          color="primary"
         >
-          <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
+            v-for="(item, i) in items"
+            :key="i"
+            :to="item.to"
+            router
+            exact
+          >
+            <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() {
-    return {
-      drawer: false,
-      items: [
-        {
-          icon: 'mdi-home',
-          title: 'Home',
-          to: '/',
-        },
-        {
-          icon: 'mdi-text-account',
-          title: 'About',
-          to: '/bio',
-        },
-        {
-          icon: 'mdi-briefcase',
-          title: 'Work',
-          to: '/portfolio',
-        }
-      ],
-      miniVariant: false,
-      myName: 'Rakantor',
-      myEmail: 'rakantor.dev@gmail.com'
-    }
-  },
+  data: () => ({
+    drawer: false,
+    miniVariant: false,
+    selectedItem: 0,
+    myName: 'Manuel',
+    myEmail: 'rakantor.dev@gmail.com',
+    items: [
+      {
+        icon: 'mdi-home',
+        title: 'Home',
+        to: '/',
+      },
+      {
+        icon: 'mdi-text-account',
+        title: 'About',
+        to: '/bio',
+      },
+      {
+        icon: 'mdi-briefcase',
+        title: 'Work',
+        to: '/portfolio',
+      }
+    ]
+  }),
   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>
\ No newline at end of file
diff --git a/pages/bio.vue b/pages/bio.vue
index 343144b..54c3805 100644
--- a/pages/bio.vue
+++ b/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>
-        <li v-for="(value, index) in languages" :key="index">{{ value }}</li>
-      </ul>
+      <v-chip v-for="(value, index) in languages" :key="index" outlined color="primary" class="mx-1">{{ value }}</v-chip>
+    </v-col>
+    <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 () {
-    return {
-      languages: ['Java', 'Android']
-    }
-  }
+  data: () => ({
+    languages: ['Java', 'Android', 'JavaScript (ES6+)', 'Vue.js', 'Nuxt.js', 'Vuetify', 'BootstrapVue', 'PHP', 'SQL'],
+    tech: ['AWS', 'Heroku', 'WordPress', 'Firebase']
+  })
 }
 </script>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 0e070e6..e0c69c9 100644
--- a/pages/index.vue
+++ b/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">
diff --git a/pages/portfolio.vue b/pages/portfolio.vue
index 2dca6c9..8f2805f 100644
--- a/pages/portfolio.vue
+++ b/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-subtitle>{{ project.subtitle }}</v-card-subtitle>
-        <v-card-text>Desktop/Android application written in Java</v-card-text>
+        <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-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 () {
-    return {
-      projects: [
-        {
-          title: 'Torii SRS 2.0',
-          subtitle: 'Progressive Web App',
-          info: 'Vue.js Vuetify.js Chart.js MySQL PHP AWS Azure Watson Heroku'
-        },
-        {
-          title: 'Torii SRS 1.0',
-          subtitle: 'Cross-platform desktop and mobile app',
-          info: 'Java libGDX MySQL PHP AWS WordPress'
-        },
-        {
-          title: 'IU Gamer App',
-          subtitle: 'Cross-platform desktop and mobile app',
-          info: 'Android (Java) Firebase'
-        },
-        {
-          title: 'Menacing Blue',
-          subtitle: '2000s Pokémon inspired Cross-platform 2D game',
-          info: 'Java libGDX'
-        },
-        {
-          title: 'Personal Portfolio Website',
-          subtitle: 'The thing you\'re looking at right now',
-          info: 'Nuxt.js Vuetify.js Github-Pages'
-        }
-      ]
-    }
-  }
+  data: () => ({
+    projects: [
+      {
+        title: 'Torii SRS 2.0',
+        subtitle: 'Progressive Web App',
+        description: 'Vue.js Vuetify.js Chart.js MySQL PHP AWS Azure Watson Heroku',
+        projectUrl: 'beta.torii-srs.com'
+      },
+      {
+        title: 'Torii SRS 1.0',
+        subtitle: 'Cross-platform desktop and mobile app',
+        description: 'Java libGDX MySQL PHP AWS WordPress',
+        projectUrl: 'torii-srs.com'
+      },
+      {
+        title: 'IU Gamer App',
+        subtitle: 'Android app',
+        description: 'Android (Java) Firebase'
+      },
+      {
+        title: 'Menacing Blue',
+        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',
+        description: 'Nuxt.js Vuetify.js GitHub-Pages',
+        repoUrl: 'github.com/Rakantor/personal-portfolio',
+        projectUrl: 'mave.dev'
+      }
+    ]
+  })
 }
-</script>
\ No newline at end of file
+</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>
\ No newline at end of file