From 3b269ae45ffa4c50ee31d1ceaa539baf34171c2b Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Thu, 20 Apr 2023 22:15:48 +0200
Subject: [PATCH] Update page

---
 layouts/default.vue |  54 +++++-----
 pages/bio.vue       | 122 ++++++++++++++-------
 pages/index.vue     |  13 +--
 pages/portfolio.vue | 255 ++++++++++++++++++++++++++++++++------------
 4 files changed, 308 insertions(+), 136 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 6c13ae8..eb91623 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app dark class="v-app-bg">
+  <v-app class="v-app-bg">
     <v-navigation-drawer
       v-model="drawer"
       :mini-variant="miniVariant"
@@ -31,14 +31,14 @@
             outlined
             color="primary"
             prepend-icon="mdi-email-outline"
-            :href="`mailto:${myName}<${myEmail}>`"
+            :href="`mailto:<${$myEmail}>`"
           >
             Contact
           </v-btn>
         </div>
       </template>
     </v-navigation-drawer>
-    <v-app-bar fixed flat app color="transparent">
+    <v-app-bar app color="background" class="px-md-10 py-md-4">
       <template v-slot:prepend>
         <v-avatar
           size="48"
@@ -49,15 +49,18 @@
           <img src="~/assets/avatar_transparent.png" width="55" />
         </v-avatar>
       </template>
-      <v-app-bar-title class="text-subtitle-1" v-text="myName" />
+      <!-- v-app-bar-title class="text-subtitle-1" v-text="$myName" /-->
       <v-spacer />
-      <v-app-bar-nav-icon v-if="smAndDown" @click.stop="drawer = !drawer" />
-      <div v-else>
-        <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:${myName}<${myEmail}>`">Contact</v-btn>
-      </div>
+      <v-app-bar-nav-icon
+        v-if="smAndDown"
+        @click.stop="drawer = !drawer"
+      />
+      <v-btn-toggle v-else :model-value="0" mandatory variant="plain" selected-class="link-active">
+        <v-btn :ripple="false" to="/">Home</v-btn>
+        <v-btn :ripple="false" to="/bio">About</v-btn>
+        <v-btn :ripple="false" to="/portfolio">Work</v-btn>
+        <v-btn :ripple="false" :href="`mailto:<${$myEmail}>`">Contact</v-btn>
+      </v-btn-toggle>
     </v-app-bar>
     <v-main>
       <v-container class="my-16">
@@ -67,9 +70,8 @@
     <v-footer app absolute color="transparent">
       <v-row justify="center" no-gutters>
         <v-col cols="12" class="text-center">
-          <v-divider></v-divider>
           <span class="text-caption">
-            &copy; {{ new Date().getFullYear() }} | {{ myName }}
+            &copy; {{ new Date().getFullYear() }} {{ $myName }}
           </span>
         </v-col>
       </v-row>
@@ -90,8 +92,7 @@ export default {
     drawer: false,
     miniVariant: false,
     selectedItem: 0,
-    myName: 'Manuel',
-    myEmail: 'rakantor.dev@gmail.com',
+    test: 0,
     items: [
       {
         icon: 'mdi-home',
@@ -113,21 +114,24 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .v-app-bg {
   background: rgb(var(--v-theme-background))
 }
 .link-active {
-  color: var(--v-primary-base);
+  color: rgb(var(--v-theme-primary)) !important;
 }
-.v-btn--plain:deep(.v-btn__content) {
-  color: inherit;
+.v-btn--variant-plain {
+  color: rgb(var(--v-theme-on-background));
   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);
+  opacity: 0.87;
+
+  &:hover {
+    color: rgb(var(--v-theme-primary));
+  }
+
+  &:focus {
+    color: rgb(var(--v-theme-primary));
+  }
 }
 </style>
\ No newline at end of file
diff --git a/pages/bio.vue b/pages/bio.vue
index 2d0b061..72e95b2 100644
--- a/pages/bio.vue
+++ b/pages/bio.vue
@@ -1,30 +1,59 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <span class="text-h4">About me</span>
+      <span class="text-h4">My Journey as a Developer</span>
     </v-col>
     <v-col cols="12">
-      <span>
-        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-sheet color="transparent" :max-width="600">
+        <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>
+          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>
+          with a specialization in Web and App development.
+        </p>
+        <br/>
+        <p>
+          Here's some of the tech that I've used and worked with before:
+        </p>
+      </v-sheet>
     </v-col>
     <v-col v-for="set, ind in sets" :key="ind" cols="12">
-      <v-tooltip v-for="(value, index) in set" :key="index" location="bottom" :text="value.title">
-        <template #activator="{ props }">
-          <v-btn
-            variant="text"
-            :size="getButtonSize(value.level)"
-            :icon="value.icon"
-            color="primary"
-            class="mx-1"
-            :href="`https://${value.url}`"
-            target="_blank"
-            v-bind="props"
-          />
-        </template>
-      </v-tooltip>
+      <v-card variant="outlined">
+        <v-card-item>
+          <v-card-title>{{ set.title }}</v-card-title>
+        </v-card-item>
+        <v-card-text class="text-center">
+          <v-row>
+            <v-col v-for="(v, i) in set.data" :key="i" cols="12">
+              <v-tooltip v-for="(value, index) in v" :key="index" location="bottom" :text="value.title">
+                <template #activator="{ props }">
+                  <v-btn
+                    variant="text"
+                    :icon="value.icon"
+                    :size="getButtonSize(value.level)"
+                    color="primary"
+                    class="mx-1"
+                    :href="`https://${value.url}`"
+                    target="_blank"
+                    v-bind="props"
+                  >
+                    <v-icon :icon="value.icon" :size="getButtonSize(value.level) - 10"></v-icon>
+                  </v-btn>
+                </template>
+              </v-tooltip>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
     </v-col>
   </v-row>
 </template>
@@ -38,42 +67,63 @@ export default {
     languages: [
       { title: 'Java', icon: 'mdi-language-java', url: 'java.com', level: 3 },
       { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 3 },
-      { title: 'C', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 2 },
+      { title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 2 },
       { 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: 'nuxtjs.org', level: 3 },
-      { title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 },
+      { 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 },
-      { title: 'SQL', icon: 'mdi-database', url: 'iso.org/standard/63555.html', level: 2 }
+      { title: 'SQL', icon: 'mdi-database', url: 'iso.org/standard/63555.html', level: 2 },
+      { title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 }
     ],
     frameworks: [
-      { title: 'Vuetify', icon: 'mdi-vuetify', url: 'vuetifyjs.com', level: 3 },
-      { title: 'BootstrapVue', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', level: 2 }
+      { 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 }
     ],
     tech: [
       { title: 'Amazon Web Services', icon: 'mdi-aws', url: 'aws.amazon.com', level: 3 },
       { title: 'Google Firebase', icon: 'mdi-firebase', url: 'firebase.google.com', level: 3 },
       { title: 'Microsoft Azure', icon: 'mdi-microsoft-azure', url: 'azure.microsoft.com', level: 1 },
-      { title: 'Heroku', icon: 'mdi-alpha-h-box-outline', url: 'heroku.com', level: 1 },
+      { title: 'Heroku', icon: 'brands:heroku', url: 'heroku.com', level: 1 },
       { title: 'WordPress', icon: 'mdi-wordpress', url: 'wordpress.com', level: 1 },
       { title: 'Unity', icon: 'mdi-unity', url: 'unity.com', level: 1 },
       { title: 'Unreal Engine', icon: 'mdi-unreal', url: 'unrealengine.com', level: 1 }
     ],
     os: [
-      { title: 'Microsoft Windows', icon: 'mdi-microsoft-windows', url: 'microsoft.com/windows', level: 1 },
-      { title: 'Linux Mint', icon: 'mdi-linux-mint', url: 'linuxmint.com', level: 1 },
+      { title: 'Microsoft Windows', icon: 'mdi-microsoft-windows', url: 'microsoft.com/windows', level: 3 },
+      { title: 'Apple macOS', icon: 'brands:apple', url: 'apple.com/macos', level: 3 },
+      { title: 'Linux Mint', icon: 'mdi-linux-mint', url: 'linuxmint.com', level: 3 },
+      { title: 'Fedora Workstation', icon: 'mdi-fedora', url: 'getfedora.org', level: 3 },
+      { title: 'Arch Linux', icon: 'mdi-arch', url: 'archlinux.org', level: 1 },
       { title: 'Ubuntu', icon: 'mdi-ubuntu', url: 'ubuntu.com', level: 1 },
-      { title: 'Fedora Workstation', icon: 'mdi-fedora', url: 'getfedora.org', level: 1 },
-      { title: 'macOS', icon: 'mdi-apple-finder', url: 'apple.com/macos', level: 1 },
+      { title: 'Apple iOS', icon: 'mdi-apple-ios', url: 'apple.com/ios', level: 1 },
+      { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 1 },
     ]
   }),
   computed: {
     sets () {
-      const set = _groupBy(this.skills, e => e.level)
-      return Object.keys(set).sort().reverse().map(e => set[e])
+      const languages = _groupBy([...this.languages, ...this.frameworks], e => e.level)
+      // const frameworks = _groupBy(this.frameworks, e => e.level)
+      const tech = _groupBy(this.tech, e => e.level)
+      const os = _groupBy(this.os, e => e.level)
+      return [
+        {
+          title: "Languages & Frameworks",
+          data: Object.keys(languages).sort().reverse().map(e => languages[e])
+        },
+        {
+          title: "Tools & Platforms",
+          data: Object.keys(tech).sort().reverse().map(e => tech[e])
+        },
+        {
+          title: "Operating Systems",
+          data: Object.keys(os).sort().reverse().map(e => os[e])
+        }
+      ]
     },
     skills () {
       return [...this.languages, ...this.frameworks, ...this.tech, ...this.os]
@@ -82,9 +132,9 @@ export default {
   methods: {
     getButtonSize (level) {
       switch (level) {
-        case 1: return 'small'
-        case 2: return 'large'
-        default: return 'x-large'
+        case 1: return 48
+        case 2: return 64
+        default: return 96
       }
     }
   }
diff --git a/pages/index.vue b/pages/index.vue
index e92221f..8c2e7b5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,14 @@
 <template>
   <v-row justify="center">
     <v-col cols="12">
-      <span class="text-h3">Hi, my name is Manuel.</span>
+      <span class="text-h3">{{ $t('greeting') }}</span>
     </v-col>
-    <v-col cols="12">
-      <span class="text-h6">
+    <v-col cols="12" class="my-6">
+      <p class="text-h6" style="max-width: 600px;">
         I'm a Software Developer based in Vienna, Austria.<br/>
-        I make all kind of applications.
-      </span>
+        I develop various types of applications.
+        Explore my portfolio to view a showcase of my projects ✌️
+      </p>
     </v-col>
     <v-col cols="12">
       <v-btn
@@ -15,7 +16,7 @@
         outlined
         color="primary"
         prepend-icon="mdi-email-outline"
-        href="mailto:rakantor.dev@gmail.com"
+        :href="`mailto:<${$myEmail}>`"
       >
         Contact me
       </v-btn>
diff --git a/pages/portfolio.vue b/pages/portfolio.vue
index 0c55602..61ff3ee 100644
--- a/pages/portfolio.vue
+++ b/pages/portfolio.vue
@@ -3,37 +3,58 @@
     <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" md="6">
+    <v-col v-for="(project, index) of projects" :key="index" cols="12" lg="4" md="6">
       <v-card color="backgroundSecondary">
-        <v-img
-          src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
-          cover
-        ></v-img>
-        <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-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.description }}
+        <v-carousel
+          show-arrows="hover"
+          hide-delimiter-background
+          height="auto"
+        >
+          <v-carousel-item v-for="image of project.images" :key="image"
+            :src="`${cdn}${image}`"
+            :aspect-ratio="1/1"
+          ></v-carousel-item>
+        </v-carousel>
+        <v-card-item>
+          <v-card-title class="d-flex">
+            <span>{{ project.title }}</span>
+            <v-spacer></v-spacer>
+            <v-btn
+              v-if="project.repoUrl"
+              variant="text"
+              icon="mdi-github"
+              density="comfortable"
+              color="on-backgroundSecondary"
+              :href="`https://${project.repoUrl}`"
+              target="_blank"
+              class="link"
+            />
+            <v-btn
+              v-if="project.projectUrl"
+              variant="text"
+              icon="mdi-open-in-new"
+              density="comfortable"
+              color="on-backgroundSecondary"
+              :href="`https://${project.projectUrl}`"
+              target="_blank"
+              class="link"
+            />
+          </v-card-title>
+          <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
+        </v-card-item>
+        <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"
+            :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"
+            />
+          </a>
         </v-card-text>
-        <v-card-actions>
-          <v-btn
-            v-if="project.repoUrl"
-            icon="mdi-github"
-            :href="`https://${project.repoUrl}`"
-            target="_blank"
-          />
-          <v-btn
-            v-if="project.projectUrl"
-            icon="mdi-open-in-new"
-            :href="`https://${project.projectUrl}`"
-            target="_blank"
-          />
-        </v-card-actions>
       </v-card>
     </v-col>
   </v-row>
@@ -43,56 +64,152 @@
 export default {
   name: 'PortfolioComponent',
   data: () => ({
+    cdn: 'https://d29l6egdxvgg9c.cloudfront.net/',
     projects: [
-      {
-        title: 'Torii SRS 2.0',
+    {
+        title: 'Torii SRS (v2 Beta)',
         subtitle: 'Progressive Web App',
-        description: 'Vue.js Vuetify.js Chart.js MySQL PHP AWS Azure Watson Heroku',
-        projectUrl: 'beta.torii-srs.com'
+        description: 'toriiSRSv2',
+        tech: ['vue2', 'vuetify2', 'mysql', 'php', 'aws', 'azure', 'watson', 'heroku'],
+        projectUrl: 'beta.torii-srs.com',
+        images: [
+          'torii-v2-01.jpg', 'torii-v2-03.jpg', 'torii-v2-04.jpg',
+          'torii-v2-05.jpg', 'torii-v2-06.jpg', 'torii-v2-07.jpg',
+          'torii-v2-08.jpg', 'torii-v2-09.jpg', 'torii-v2-10.jpg'
+        ]
       },
       {
-        title: 'Torii SRS 1.0',
-        subtitle: 'Cross-platform desktop and mobile app',
-        description: 'Java libGDX MySQL PHP AWS WordPress',
-        projectUrl: 'torii-srs.com'
+        title: 'Torii SRS (v1)',
+        subtitle: 'Cross-platform app',
+        description: 'toriiSRSv1',
+        tech: ['java', 'libgdx', 'mysql', 'php', 'aws', 'wordpress'],
+        projectUrl: 'torii-srs.com',
+        images: [
+          'torii-v1-1.jpg', 'torii-v1-2.png', 'torii-v1-3.png',
+          'torii-v1-4.png', 'torii-v1-5.png', 'torii-v1-6.png'
+        ]
+      },
+      {
+        title: 'IU Quiz App',
+        subtitle: 'Web App',
+        description: 'iuQuizApp',
+        tech: ['nuxt2', 'vuetify2', 'firebase'],
+        repoUrl: 'github.com/Rakantor/iu-quiz-app',
+        projectUrl: 'iu-quiz-app.web.app',
+        images: ['torii-v1-1.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']
+      },
+      {
+        title: 'Personal Website',
+        subtitle: 'The thing you\'re looking at right now',
+        description: '',
+        tech: ['nuxt3', 'vuetify3', 'ghpages'],
+        repoUrl: 'github.com/Rakantor/personal-portfolio',
+        projectUrl: 'mave.dev',
+        images: ['torii-v1-1.jpg']
       },
       {
         title: 'IU Gamer App',
         subtitle: 'Android app',
-        description: 'Android (Java) Firebase',
+        description: '',
+        tech: ['android', 'firebase'],
         repoUrl: 'github.com/Rakantor/iubh-gamer-app',
-      },
-      {
-        title: 'IU Quiz App',
-        subtitle: 'Nuxt.js Web App',
-        description: 'Android (Java) Firebase',
-        repoUrl: 'github.com/Rakantor/iu-quiz-app',
-        projectUrl: 'iu-quiz-app.web.app'
-      },
-      {
-        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'
+        images: []
       }
-    ]
+    ],
+    tech: {
+      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'
+      }
+    }
   })
 }
 </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