From 42f28f397aa1796942696f827f339f2b6019d795 Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Sun, 23 Apr 2023 23:37:19 +0200
Subject: [PATCH] Update layout and style

---
 layouts/default.vue | 31 +++++++++-----------
 pages/bio.vue       | 34 +++++++++++-----------
 pages/index.vue     | 13 +++++----
 pages/portfolio.vue | 71 +++++++++++++++++++++++----------------------
 4 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index eb91623..13bdbae 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,27 +1,25 @@
 <template>
   <v-app class="v-app-bg">
     <v-navigation-drawer
-      v-model="drawer"
-      :mini-variant="miniVariant"
-      fixed
-      right
+      :model-value="drawer"
+      location="right"
       app
       color="backgroundSecondary"
-      
+      disable-resize-watcher
     >
       <v-list nav :lines="false">
         <v-list-item
-          v-for="(item, i) in items"
+          v-for="(page, i) in pages"
           :key="i"
-          :to="item.to"
+          :to="page.url"
           active-color="primary"
           router
           exact
         >
           <template v-slot:prepend>
-            <v-icon :icon="item.icon"></v-icon>
+            <v-icon :icon="page.icon"></v-icon>
           </template>
-          <v-list-item-title v-text="item.title" />
+          <v-list-item-title v-text="page.title" />
         </v-list-item>
       </v-list>
       <template #append>
@@ -63,7 +61,7 @@
       </v-btn-toggle>
     </v-app-bar>
     <v-main>
-      <v-container class="my-16">
+      <v-container class="pa-md-16 my-16">
         <slot />
       </v-container>
     </v-main>
@@ -90,24 +88,21 @@ export default {
   },
   data: () => ({
     drawer: false,
-    miniVariant: false,
-    selectedItem: 0,
-    test: 0,
-    items: [
+    pages: [
       {
         icon: 'mdi-home',
         title: 'Home',
-        to: '/',
+        url: '/',
       },
       {
         icon: 'mdi-text-account',
         title: 'About',
-        to: '/bio',
+        url: '/bio',
       },
       {
         icon: 'mdi-briefcase',
         title: 'Work',
-        to: '/portfolio',
+        url: '/portfolio',
       }
     ]
   })
@@ -124,7 +119,7 @@ export default {
 .v-btn--variant-plain {
   color: rgb(var(--v-theme-on-background));
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  opacity: 0.87;
+  opacity: 1;
 
   &:hover {
     color: rgb(var(--v-theme-primary));
diff --git a/pages/bio.vue b/pages/bio.vue
index 72e95b2..8bff381 100644
--- a/pages/bio.vue
+++ b/pages/bio.vue
@@ -1,23 +1,20 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <span class="text-h4">My Journey as a Developer</span>
+      <span class="text-h4 text-high-emphasis">My Journey as a Developer</span>
     </v-col>
     <v-col cols="12">
-      <v-sheet color="transparent" :max-width="600">
+      <v-sheet color="transparent" class="text-medium-emphasis">
         <p>
           My interest in programming was sparked in 2007 when I began tinkering with SQL
-          to setup a private server for my favorite
-          <a href="https://en.wikipedia.org/wiki/Massively_multiplayer_online_role-playing_game" target="_blank">MMORPG</a>
-          (success!)
-        </p>
-        <p>
-          Eager to learn more, I attended a
-          <a href="https://en.wikipedia.org/wiki/H%C3%B6here_Technische_Lehranstalt" target="_blank">HTL</a>
+          in an attempt to setup a private server for my favorite
+          <a :href="mmorpgWikiUrl" target="_blank">MMORPG</a>
+          (it was a success!)
+          Eager to dive deeper into the world of coding, I attended a
+          <a :href="htlWikiUrl" target="_blank">HTL</a>
           specializing in IT in 2009, where I learned C, Java, HTML and CSS.
-        </p>
-        <p>
-          Some years later, I pursued a degree in <a href="https://en.wikipedia.org/wiki/Business_informatics">BI</a>
+          Some years later, I pursued a degree in
+          <a :href="biWikiUrl" target="_blank">BI</a>
           with a specialization in Web and App development.
         </p>
         <br/>
@@ -27,7 +24,7 @@
       </v-sheet>
     </v-col>
     <v-col v-for="set, ind in sets" :key="ind" cols="12">
-      <v-card variant="outlined">
+      <v-card>
         <v-card-item>
           <v-card-title>{{ set.title }}</v-card-title>
         </v-card-item>
@@ -64,15 +61,15 @@ import _groupBy from 'lodash-es/groupBy'
 export default {
   name: 'BioPage',
   data: () => ({
+    mmorpgWikiUrl: 'https://en.wikipedia.org/wiki/Massively_multiplayer_online_role-playing_game',
+    htlWikiUrl: 'https://en.wikipedia.org/wiki/H%C3%B6here_Technische_Lehranstalt',
+    biWikiUrl: 'https://en.wikipedia.org/wiki/Business_informatics',
     languages: [
       { title: 'Java', icon: 'mdi-language-java', url: 'java.com', level: 3 },
-      { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 3 },
-      { title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 2 },
+      { title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 1 },
       { title: 'Python', icon: 'mdi-language-python', url: 'python.org', level: 1 },
       { title: 'JavaScript (ES6+)', icon: 'mdi-language-javascript', url: 'javascript.com', level: 3 },
       { title: 'TypeScript', icon: 'mdi-language-typescript', url: 'typescriptlang.org/', level: 1 },
-      { title: 'Vue.js', icon: 'mdi-vuejs', url: 'vuejs.org', level: 3 },
-      { title: 'Nuxt.js', icon: 'mdi-nuxt', url: 'nuxt.com', level: 3 },
       { title: 'HTML', icon: 'mdi-language-html5', url: 'html.spec.whatwg.org/multipage', level: 2 },
       { title: 'CSS', icon: 'mdi-language-css3', url: 'w3.org/Style/CSS', level: 2 },
       { title: 'PHP', icon: 'mdi-language-php', url: 'php.net', level: 2 },
@@ -80,6 +77,9 @@ export default {
       { title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 }
     ],
     frameworks: [
+      { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 2 },
+      { title: 'Vue.js', icon: 'mdi-vuejs', url: 'vuejs.org', level: 3 },
+      { title: 'Nuxt.js', icon: 'mdi-nuxt', url: 'nuxt.com', level: 3 },
       { title: 'Vuetify.js', icon: 'mdi-vuetify', url: 'vuetifyjs.com', level: 3 },
       { title: 'BootstrapVue', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', level: 1 },
       { title: 'libGDX', icon: 'mdi-alpha-l-box-outline', url: 'libgdx.com', level: 1 }
diff --git a/pages/index.vue b/pages/index.vue
index 8c2e7b5..23d717f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,24 +1,25 @@
 <template>
   <v-row justify="center">
     <v-col cols="12">
-      <span class="text-h3">{{ $t('greeting') }}</span>
+      <span class="text-h4 text-md-h3 text-lg-h2 text-high-emphasis">
+        {{ $t('greeting') }}
+      </span>
     </v-col>
     <v-col cols="12" class="my-6">
-      <p class="text-h6" style="max-width: 600px;">
+      <p class="text-body-1 text-md-h6 text-medium-emphasis" style="max-width: 550px;">
         I'm a Software Developer based in Vienna, Austria.<br/>
         I develop various types of applications.
-        Explore my portfolio to view a showcase of my projects ✌️
+        Explore my <NuxtLink to="/portfolio">portfolio</NuxtLink> to view a showcase of my projects.
       </p>
     </v-col>
     <v-col cols="12">
       <v-btn
-        depressed
-        outlined
+        variant="outlined"
         color="primary"
         prepend-icon="mdi-email-outline"
         :href="`mailto:<${$myEmail}>`"
       >
-        Contact me
+        Get in touch
       </v-btn>
     </v-col>
   </v-row>
diff --git a/pages/portfolio.vue b/pages/portfolio.vue
index 61ff3ee..517ae18 100644
--- a/pages/portfolio.vue
+++ b/pages/portfolio.vue
@@ -1,18 +1,21 @@
 <template>
+  <ImageCarousel ref="imageCarousel" />
   <v-row>
     <v-col cols="12">
       <span class="text-h5 font-weight-medium">Some of my projects</span>
     </v-col>
     <v-col v-for="(project, index) of projects" :key="index" cols="12" lg="4" md="6">
-      <v-card color="backgroundSecondary">
+      <v-card height="100%" class="d-flex flex-column">
         <v-carousel
-          show-arrows="hover"
+          v-model="carouselIndex[index]"
+          :show-arrows="project.images.length > 1 ? 'hover' : false"
+          :hide-delimiters="project.images.length <= 1"
           hide-delimiter-background
           height="auto"
         >
           <v-carousel-item v-for="image of project.images" :key="image"
             :src="`${cdn}${image}`"
-            :aspect-ratio="1/1"
+            @click="showImageCarousel(project.images, carouselIndex[index])"
           ></v-carousel-item>
         </v-carousel>
         <v-card-item>
@@ -42,19 +45,26 @@
           </v-card-title>
           <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
         </v-card-item>
+        <v-spacer></v-spacer>
         <v-card-text>{{ $t(project.description) }}</v-card-text>
-        <v-card-text class="d-flex flex-row flex-wrap justify-start">
-          <a v-for="t of project.tech" :key="tech[t].title"
+        <v-spacer></v-spacer>
+        <v-card-actions class="d-flex flex-row flex-wrap justify-center align-center">
+          <!--a v-for="t of project.tech" :key="tech[t].title"
             :href="`https://${tech[t].projectUrl}`"
             target="_blank"
           >
             <img
               :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].iconUrl}`"
               :height="20"
-              class="ma-1"
+              class="mx-1 mb-1"
             />
-          </a>
-        </v-card-text>
+          </a-->
+          <img v-for="t of project.tech" :key="tech[t].title"
+            :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].iconUrl}`"
+            :height="20"
+            class="ma-1"
+          />
+        </v-card-actions>
       </v-card>
     </v-col>
   </v-row>
@@ -67,9 +77,9 @@ export default {
     cdn: 'https://d29l6egdxvgg9c.cloudfront.net/',
     projects: [
     {
-        title: 'Torii SRS (v2 Beta)',
+        title: 'Torii SRS (v2-beta)',
         subtitle: 'Progressive Web App',
-        description: 'toriiSRSv2',
+        description: 'toriiWeb',
         tech: ['vue2', 'vuetify2', 'mysql', 'php', 'aws', 'azure', 'watson', 'heroku'],
         projectUrl: 'beta.torii-srs.com',
         images: [
@@ -81,7 +91,7 @@ export default {
       {
         title: 'Torii SRS (v1)',
         subtitle: 'Cross-platform app',
-        description: 'toriiSRSv1',
+        description: 'toriiJava',
         tech: ['java', 'libgdx', 'mysql', 'php', 'aws', 'wordpress'],
         projectUrl: 'torii-srs.com',
         images: [
@@ -96,28 +106,28 @@ export default {
         tech: ['nuxt2', 'vuetify2', 'firebase'],
         repoUrl: 'github.com/Rakantor/iu-quiz-app',
         projectUrl: 'iu-quiz-app.web.app',
-        images: ['torii-v1-1.jpg']
+        images: ['iu-quiz-app-2.jpg']
       },
       {
         title: 'Menacing Blue',
         subtitle: 'Cross-platform app',
         description: 'pmb',
         tech: ['java', 'libgdx'],
-        images: ['pmb-6.png', 'pmb-1.png', 'pmb-2.png', 'pmb-3.png', 'pmb-4.png', 'pmb-5.png']
+        images: ['pmb-6.png', 'pmb-1.png', 'pmb-2.png', 'pmb-3.png', 'pmb-4.png', 'pmb-5.png', 'pmb-7.jpg']
       },
       {
         title: 'Personal Website',
-        subtitle: 'The thing you\'re looking at right now',
-        description: '',
+        subtitle: 'Web App',
+        description: 'personalWebsite',
         tech: ['nuxt3', 'vuetify3', 'ghpages'],
         repoUrl: 'github.com/Rakantor/personal-portfolio',
         projectUrl: 'mave.dev',
-        images: ['torii-v1-1.jpg']
+        images: ['personal-website-1.jpg']
       },
       {
         title: 'IU Gamer App',
         subtitle: 'Android app',
-        description: '',
+        description: 'iuGamerApp',
         tech: ['android', 'firebase'],
         repoUrl: 'github.com/Rakantor/iubh-gamer-app',
         images: []
@@ -127,89 +137,80 @@ export default {
       android: {
         title: 'Android',
         iconUrl: 'https://cdn.simpleicons.org/android&label&color=3DDC84',
-        projectUrl: 'android.com'
       },
       aws: {
         title: 'AWS',
         iconUrl: 'https://cdn.simpleicons.org/amazonaws&label&color=232F3E',
-        projectUrl: 'nuxt.com'
       },
       azure: {
         title: 'Azure',
         iconUrl: 'https://cdn.simpleicons.org/microsoftazure&label&color=0078D4',
-        projectUrl: 'nuxt.com'
       },
       firebase: {
         title: 'Firebase',
         iconUrl: 'https://cdn.simpleicons.org/firebase&label&color=FFCA28',
-        projectUrl: 'nuxt.com'
       },
       ghpages: {
         title: 'GH Pages',
         iconUrl: 'https://cdn.simpleicons.org/github&label&color=222222',
-        projectUrl: 'nuxt.com'
       },
       heroku: {
         title: 'Heroku',
         iconUrl: 'https://cdn.simpleicons.org/heroku&label&color=430098',
-        projectUrl: 'nuxt.com'
       },
       java: {
         title: 'Java',
         iconUrl: 'https://cdn.simpleicons.org/coffeescript&label&color=FF7800',
-        projectUrl: 'nuxt.com'
       },
       libgdx: {
         title: 'libGDX',
         iconUrl: 'https://cdn.simpleicons.org/youtubegaming&label&color=990000',
-        projectUrl: 'nuxtjs.org'
       },
       mysql: {
         title: 'MySQL',
         iconUrl: 'https://cdn.simpleicons.org/mysql&label&color=4479A1',
-        projectUrl: 'nuxtjs.org'
       },
       nuxt2: {
         title: 'Nuxt 2',
         iconUrl: 'https://cdn.simpleicons.org/nuxtdotjs&label&color=00DC82',
-        projectUrl: 'nuxtjs.org'
       },
       nuxt3: {
         title: 'Nuxt 3',
         iconUrl: 'https://cdn.simpleicons.org/nuxtdotjs&label&color=00DC82',
-        projectUrl: 'nuxt.com'
       },
       php: {
         title: 'PHP',
         iconUrl: 'https://cdn.simpleicons.org/php&label&color=777BB4',
-        projectUrl: 'nuxt.com'
       },
       vue2: {
         title: 'Vue 2',
         iconUrl: 'https://cdn.simpleicons.org/vuedotjs&label&color=4FC08D',
-        projectUrl: 'nuxt.com'
       },
       vuetify2: {
         title: 'Vuetify 2',
         iconUrl: 'https://cdn.simpleicons.org/vuetify&label&color=1867C0',
-        projectUrl: 'nuxt.com'
       },
       vuetify3: {
         title: 'Vuetify 3',
         iconUrl: 'https://cdn.simpleicons.org/vuetify&label&color=1867C0',
-        projectUrl: 'nuxt.com'
       },
       watson: {
         title: 'Watson',
         iconUrl: 'https://cdn.simpleicons.org/ibmwatson&label&color=BE95FF',
-        projectUrl: 'nuxt.com'
       },
       wordpress: {
         title: 'WordPress',
         iconUrl: 'https://cdn.simpleicons.org/wordpress&label&color=21759B',
-        projectUrl: 'nuxt.com'
       }
+    },
+    carouselIndex: []
+  }),
+  methods: {
+    showImageCarousel (images, carouselIndex) {
+      this.$refs.imageCarousel.images = images.map(i => this.cdn+i)
+      this.$refs.imageCarousel.index = carouselIndex
+      this.$refs.imageCarousel.show = true
     }
-  })
+  }
 }
 </script>