Add tech and update portfolio

components/ProjectCard.vue

@@ -14,7 +14,7 @@
             height="200"
           >
             <v-carousel-item v-for="image of images" :key="image"
-              :src="`${cdn}${image}`"
+              :src="`https://${$config.public.cdn}${image}`"
               cover
               @click="showImageCarousel"
             ></v-carousel-item>
@@ -23,36 +23,22 @@
       </v-card-text>
       <div class="d-flex flex-column" style="width: 100%;">
         <v-card-item>
+          <span v-if="overline" class="text-overline text-primary">{{ $t(overline) }}</span>
           <v-card-title class="d-flex font-weight-bold">
-            <span v-if="projectUrl">
-              <a :href="`https://${projectUrl}`" target="_blank" class="link">
-                {{ title }}
-              </a>
-            </span>
-            <span v-else-if="repoUrl">
-              <a :href="`https://${repoUrl}`" target="_blank" class="link">
+            <span v-if="links.length > 0">
+              <a :href="`https://${links[0].url}`" target="_blank" class="link">
                 {{ title }}
               </a>
             </span>
             <span v-else>{{ title }}</span>
             <v-spacer></v-spacer>
             <v-btn
-              v-if="repoUrl"
+              v-for="link in [...links].reverse()" :key="link.url"
               variant="text"
-              icon="mdi-github"
+              :icon="link.icon"
               density="comfortable"
               color="on-surface"
-              :href="`https://${repoUrl}`"
-              target="_blank"
-              class="link"
-            />
-            <v-btn
-              v-if="projectUrl"
-              variant="text"
-              icon="mdi-open-in-new"
-              density="comfortable"
-              color="on-surface"
-              :href="`https://${projectUrl}`"
+              :href="`https://${link.url}`"
               target="_blank"
               class="link"
             />
@@ -81,41 +67,27 @@
       height="auto"
     >
       <v-carousel-item v-for="image of images" :key="image"
-        :src="`${cdn}${image}`"
+        :src="`https://${$config.public.cdn}${image}`"
         @click="showImageCarousel"
       ></v-carousel-item>
     </v-carousel>
     <v-card-item>
+      <span v-if="overline" class="text-overline text-primary">{{ $t(overline) }}</span>
       <v-card-title class="d-flex font-weight-bold">
-        <span v-if="projectUrl">
-          <a :href="`https://${projectUrl}`" target="_blank" class="link">
-            {{ title }}
-          </a>
-        </span>
-        <span v-else-if="repoUrl">
-          <a :href="`https://${repoUrl}`" target="_blank" class="link">
+        <span v-if="links.length > 0">
+          <a :href="`https://${links[0].url}`" target="_blank" class="link">
             {{ title }}
           </a>
         </span>
         <span v-else>{{ title }}</span>
         <v-spacer></v-spacer>
         <v-btn
-          v-if="repoUrl"
+          v-for="link in [...links].reverse()" :key="link.url"
           variant="text"
-          icon="mdi-github"
+          :icon="link.icon"
           density="comfortable"
           color="on-surface"
-          :href="`https://${repoUrl}`"
-          target="_blank"
-          class="link"
-        />
-        <v-btn
-          v-if="projectUrl"
-          variant="text"
-          icon="mdi-open-in-new"
-          density="comfortable"
-          color="on-surface"
-          :href="`https://${projectUrl}`"
+          :href="`https://${link.url}`"
           target="_blank"
           class="link"
         />
@@ -160,7 +132,7 @@
 import { badgen } from 'badgen'
 import { siAndroid, siAmazonaws, siMicrosoftazure, siFirebase, siGithub,
   siHeroku, siCoffeescript, siYoutubegaming, siMysql, siNuxtdotjs, siPhp,
-  siVuedotjs, siVuetify, siIbmwatson, siWordpress } from 'simple-icons'
+  siJavascript, siVuedotjs, siVuetify, siIbmwatson, siWordpress, siTypescript } from 'simple-icons'
 
 export default {
   name: 'PortfolioPage',
@@ -172,13 +144,21 @@ export default {
     title: String,
     subtitle: String,
     description: String,
-    tech: Array,
-    images: Array,
-    projectUrl: String,
-    repoUrl: String,
+    overline: String,
+    tech: {
+      type: Array,
+      default: []
+    },
+    images: {
+      type: Array,
+      default: []
+    },
+    links: {
+      type: Array,
+      default: []
+    }
   },
   data: () => ({
-    cdn: 'https://d29l6egdxvgg9c.cloudfront.net/',
     technologies: {
       android: { title: 'Android', color: '3DDC84', icon: siAndroid },
       aws: { title: 'AWS', color: '232F3E', icon: siAmazonaws },
@@ -187,14 +167,14 @@ export default {
       ghpages: { title: 'GH Pages', color: '222222', icon: siGithub },
       heroku: { title: 'Heroku', color: '430098', icon: siHeroku },
       java: { title: 'Java', color: 'FF7800', icon: siCoffeescript },
+      js: { title: 'JavaScript', color: 'F7DF1E', icon: siJavascript },
       libgdx: { title: 'libGDX', color: '990000', icon: siYoutubegaming },
       mysql: { title: 'MySQL', color: '4479A1', icon: siMysql },
-      nuxt2: { title: 'Nuxt 2', color: '00DC82', icon: siNuxtdotjs },
-      nuxt3: { title: 'Nuxt 3', color: '00DC82', icon: siNuxtdotjs },
+      nuxt: { title: 'Nuxt', color: '00DC82', icon: siNuxtdotjs },
       php: { title: 'PHP', color: '777BB4', icon: siPhp },
-      vue2: { title: 'Vue', color: '4FC08D', icon: siVuedotjs },
-      vuetify2: { title: 'Vuetify', color: '1867C0', icon: siVuetify },
-      vuetify3: { title: 'Vuetify', color: '1867C0', icon: siVuetify },
+      ts: { title: 'TypeScript', color: '3178C6', icon: siTypescript },
+      vue: { title: 'Vue', color: '4FC08D', icon: siVuedotjs },
+      vuetify: { title: 'Vuetify', color: '1867C0', icon: siVuetify },
       watson: { title: 'Watson', color: 'BE95FF', icon: siIbmwatson },
       wordpress: { title: 'WordPress', color: '21759B', icon: siWordpress }
     },
@@ -220,7 +200,7 @@ export default {
       return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
     },
     showImageCarousel () {
-      this.$refs.imageCarousel.images = this.images.map(i => this.cdn+i)
+      this.$refs.imageCarousel.images = this.images.map(i => `https://${this.$config.public.cdn+i}`)
       this.$refs.imageCarousel.index = this.carouselIndex
       this.$refs.imageCarousel.show = true
     }

pages/portfolio.vue

@@ -38,10 +38,10 @@
           :title="project.title"
           :subtitle="project.subtitle"
           :description="project.description"
+          :overline="project.overline"
           :tech="project.tech"
           :images="project.images"
-          :project-url="project.projectUrl"
-          :repo-url="project.repoUrl"
+          :links="project.links"
         />
       </v-col>
     </v-row>
@@ -57,6 +57,8 @@ definePageMeta({
   }
 })
 
+const runtimeConfig = useRuntimeConfig()
+
 export default {
   name: 'PortfolioPage',
   data: () => ({
@@ -70,8 +72,10 @@ export default {
         title: 'Torii SRS (v2-beta)',
         subtitle: 'Progressive Web App (SPA)',
         description: 'toriiWeb',
-        tech: ['vue2', 'vuetify2', 'mysql', 'php', 'aws', 'azure', 'watson', 'heroku'],
-        projectUrl: 'beta.torii-srs.com',
+        tech: ['js', 'vue', 'vuetify', 'mysql', 'php', 'aws', 'azure', 'watson', 'heroku'],
+        links: [
+          { url: 'beta.torii-srs.com', icon: 'mdi-open-in-new' }
+        ],
         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',
@@ -82,8 +86,11 @@ export default {
         title: 'Torii SRS (v1)',
         subtitle: 'Cross-Platform App',
         description: 'toriiJava',
+        overline: 'toriiInfo',
         tech: ['java', 'libgdx', 'mysql', 'php', 'aws', 'wordpress'],
-        projectUrl: 'torii-srs.com',
+        links: [
+          { url: 'torii-srs.com', icon: 'mdi-open-in-new' }
+        ],
         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'
@@ -93,9 +100,12 @@ export default {
         title: 'IU Quiz App',
         subtitle: 'Web App (SPA)',
         description: 'iuQuizApp',
-        tech: ['nuxt2', 'vuetify2', 'firebase'],
-        repoUrl: 'github.com/Rakantor/iu-quiz-app',
-        projectUrl: 'iu-quiz-app.web.app',
+        tech: ['js', 'vue', 'nuxt', 'vuetify', 'firebase'],
+        links: [
+          { url: 'iu-quiz-app.web.app', icon: 'mdi-open-in-new' },
+          { url: 'github.com/Rakantor/iu-quiz-app', icon: 'mdi-github' },
+          { url: `${runtimeConfig.public.cdn}iu-quiz-app-projektbericht.pdf`, icon: 'mdi-file-pdf-box' }
+        ],
         images: ['iu-quiz-app-2.jpg']
       },
       {
@@ -109,9 +119,11 @@ export default {
         title: 'Personal Website',
         subtitle: 'Web App (SPA)',
         description: 'personalWebsite',
-        tech: ['nuxt3', 'vuetify3', 'ghpages'],
-        repoUrl: 'github.com/Rakantor/personal-portfolio',
-        projectUrl: 'mave.dev',
+        tech: ['ts', 'vue', 'nuxt', 'vuetify', 'ghpages'],
+        links: [
+          { url: 'mave.dev', icon: 'mdi-open-in-new' },
+          { url: 'github.com/Rakantor/personal-portfolio', icon: 'mdi-github' }
+        ],
         images: ['personal-website-1.jpg'],
       },
       {
@@ -119,12 +131,17 @@ export default {
         subtitle: 'Android App',
         description: 'iuGamerApp',
         tech: ['java', 'android', 'firebase'],
-        repoUrl: 'github.com/Rakantor/iubh-gamer-app',
+        links: [
+          { url: 'github.com/Rakantor/iubh-gamer-app', icon: 'mdi-github' }
+        ],
         images: ['iu-gamer-app-1.jpg', 'iu-gamer-app-2.jpg']
       }
     ]
   }),
   computed: {
+    cdn () {
+      return this.$config.public.cdn
+    },
     viewCols () {
       const horizontal = {
         cols: 12,