Initial commit

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>

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-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>
+</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>