Update page

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" />
+      <v-app-bar-nav-icon
-      <div v-else>
+        v-if="smAndDown"
-        <v-btn plain active-class="link-active" to="/">Home</v-btn>
+        @click.stop="drawer = !drawer"
-        <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-toggle v-else :model-value="0" mandatory variant="plain" selected-class="link-active">
-        <v-btn plain active-class="link-active" :href="`mailto:${myName}<${myEmail}>`">Contact</v-btn>
+        <v-btn :ripple="false" to="/">Home</v-btn>
-      </div>
+        <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',
+    test: 0,
-    myEmail: 'rakantor.dev@gmail.com',
     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) {
+.v-btn--variant-plain {
-  color: inherit;
+  color: rgb(var(--v-theme-on-background));
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
+  opacity: 0.87;
-.v-btn--plain:hover {
+
-  color: var(--v-primary-base);
+  &:hover {
-}
+    color: rgb(var(--v-theme-primary));
-.v-btn--plain:focus {
+  }
-  color: var(--v-primary-base);
+
+  &:focus {
+    color: rgb(var(--v-theme-primary));
+  }
 }
 </style>

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>
+      <v-sheet color="transparent" :max-width="600">
-        Hello there! I'm Manuel, a software dev based in Vienna, Austria. I C.
+        <p>
-        A year later, I continued to learn Java. I HTML and CSS
+          My interest in programming was sparked in 2007 when I began tinkering with SQL
-        full-stack web development in 2018.
+          to setup a private server for my favorite
-      </span>
+          <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">
+      <v-card variant="outlined">
-        <template #activator="{ props }">
+        <v-card-item>
-          <v-btn
+          <v-card-title>{{ set.title }}</v-card-title>
-            variant="text"
+        </v-card-item>
-            :size="getButtonSize(value.level)"
+        <v-card-text class="text-center">
-            :icon="value.icon"
+          <v-row>
-            color="primary"
+            <v-col v-for="(v, i) in set.data" :key="i" cols="12">
-            class="mx-1"
+              <v-tooltip v-for="(value, index) in v" :key="index" location="bottom" :text="value.title">
-            :href="`https://${value.url}`"
+                <template #activator="{ props }">
-            target="_blank"
+                  <v-btn
-            v-bind="props"
+                    variant="text"
-          />
+                    :icon="value.icon"
-        </template>
+                    :size="getButtonSize(value.level)"
-      </v-tooltip>
+                    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: 'Nuxt.js', icon: 'mdi-nuxt', url: 'nuxt.com', level: 3 },
-      { title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 },
       { 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: 'Vuetify.js', icon: 'mdi-vuetify', url: 'vuetifyjs.com', level: 3 },
-      { title: 'BootstrapVue', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', level: 2 }
+      { 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: 'Microsoft Windows', icon: 'mdi-microsoft-windows', url: 'microsoft.com/windows', level: 3 },
-      { title: 'Linux Mint', icon: 'mdi-linux-mint', url: 'linuxmint.com', level: 1 },
+      { 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: 'Apple iOS', icon: 'mdi-apple-ios', url: 'apple.com/ios', level: 1 },
-      { title: 'macOS', icon: 'mdi-apple-finder', url: 'apple.com/macos', level: 1 },
+      { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 1 },
     ]
   }),
   computed: {
     sets () {
-      const set = _groupBy(this.skills, e => e.level)
+      const languages = _groupBy([...this.languages, ...this.frameworks], e => e.level)
-      return Object.keys(set).sort().reverse().map(e => set[e])
+      // 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 1: return 48
-        case 2: return 'large'
+        case 2: return 64
-        default: return 'x-large'
+        default: return 96
       }
     }
   }

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">
+    <v-col cols="12" class="my-6">
-      <span class="text-h6">
+      <p class="text-h6" style="max-width: 600px;">
         I'm a Software Developer based in Vienna, Austria.<br/>
-        I make all kind of applications.
+        I develop various types of applications.
-      </span>
+        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>

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
+        <v-carousel
-          src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
+          show-arrows="hover"
-          cover
+          hide-delimiter-background
-        ></v-img>
+          height="auto"
-        <v-card-title>
+        >
-          <span v-if="project.projectUrl">
+          <v-carousel-item v-for="image of project.images" :key="image"
-            <a :href="`https://${project.projectUrl}`" target="_blank" class="link">{{ project.title }}</a>
+            :src="`${cdn}${image}`"
-          </span>
+            :aspect-ratio="1/1"
-          <span v-else>{{ project.title }}</span>
+          ></v-carousel-item>
-        </v-card-title>
+        </v-carousel>
-        <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
+        <v-card-item>
-        <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-title class="d-flex">
-        <v-card-text class="text-caption">
+            <span>{{ project.title }}</span>
-          {{ project.description }}
+            <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',
+        description: 'toriiSRSv2',
-        projectUrl: 'beta.torii-srs.com'
+        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',
+        title: 'Torii SRS (v1)',
-        subtitle: 'Cross-platform desktop and mobile app',
+        subtitle: 'Cross-platform app',
-        description: 'Java libGDX MySQL PHP AWS WordPress',
+        description: 'toriiSRSv1',
-        projectUrl: 'torii-srs.com'
+        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',
-      },
+        images: []
-      {
-        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'
       }
-    ]
+    ],
+    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>