Add horizontal projects list layout

pages/portfolio.vue

@@ -1,85 +1,48 @@
 <template>
   <div>
-    <ImageCarousel ref="imageCarousel" />
     <v-row>
       <v-col cols="12">
+        <v-sheet
+          width="100%"
+          color="transparent"
+          class="d-flex flex-no-wrap justify-space-between"
+          :class="view === 'horizontal' ? 'page-content' : ''"
+        >
           <span class="text-h5 font-weight-medium">
             {{ $t('portfolioTitle') }}
           </span>
+          <v-btn-toggle
+            v-model="selectedViewIndex"
+            mandatory
+            density="compact"
+            color="primary"
+          >
+            <v-btn>
+              <v-icon icon="mdi-view-sequential" color="white"></v-icon>
+            </v-btn>
+            <v-btn>
+              <v-icon icon="mdi-view-column" color="white"></v-icon>
+            </v-btn>
+          </v-btn-toggle>
+        </v-sheet>
       </v-col>
-      <v-col v-for="(project, index) of projects" :key="index" cols="12" lg="4" md="6">
+      <v-col v-for="(project, index) of projects" :key="index"
-        <v-card height="100%" class="d-flex flex-column">
+        :cols="viewCols.cols"
-          <v-carousel
+        :sm="viewCols.sm"
-            v-model="carouselIndex[index]"
+        :md="viewCols.md"
-            :show-arrows="project.images.length > 1 ? 'hover' : false"
+        :lg="viewCols.lg"
-            :hide-delimiters="project.images.length <= 1"
+        :xl="viewCols.xl"
-            height="auto"
       >
-            <v-carousel-item v-for="image of project.images" :key="image"
+        <ProjectCard
-              :src="`${cdn}${image}`"
+          :view="view"
-              :class="project.class"
+          :title="project.title"
-              @click="showImageCarousel(project.images, carouselIndex[index])"
+          :subtitle="project.subtitle"
-            ></v-carousel-item>
+          :description="project.description"
-          </v-carousel>
+          :tech="project.tech"
-          <v-card-item>
+          :images="project.images"
-            <v-card-title class="d-flex">
+          :project-url="project.projectUrl"
-              <span>{{ project.title }}</span>
+          :repo-url="project.repoUrl"
-              <v-spacer></v-spacer>
-              <v-btn
-                v-if="project.repoUrl"
-                variant="text"
-                icon="mdi-github"
-                density="comfortable"
-                color="on-surface"
-                :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-surface"
-                :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-spacer></v-spacer>
-          <v-card-actions class="d-flex flex-row flex-wrap justify-center align-center">
-            <img v-for="t of project.tech" :key="tech[t].title"
-              :src="generateBadgen(tech[t].title, tech[t].icon)"
-              :height="20"
-              class="ma-1"
-            />
-
-            <!-- colored badges
-            <img v-for="t of project.tech" :key="tech[t].title"
-              :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].icon}${tech[t].color}&label`"
-              :height="20"
-              class="ma-1"
-            />
-            -->
-
-            <!-- colored badges w/ links to brand websites
-            <a v-for="t of project.tech" :key="tech[t].title"
-              :href="`https://${tech[t].projectUrl}`"
-              target="_blank"
-            >
-              <img v-for="t of project.tech" :key="tech[t].title"
-                :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].icon}${tech[t].color}&label`"
-                :height="20"
-                class="ma-1"
-              />
-            </a>
-            -->
-
-          </v-card-actions>
-        </v-card>
       </v-col>
     </v-row>
   </div>
@@ -94,15 +57,14 @@ definePageMeta({
   }
 })
 
-import { badgen } from 'badgen'
-import { siAndroid, siAmazonaws, siMicrosoftazure, siFirebase, siGithub,
-  siHeroku, siCoffeescript, siYoutubegaming, siMysql, siNuxtdotjs, siPhp,
-  siVuedotjs, siVuetify, siIbmwatson, siWordpress } from 'simple-icons'
-
 export default {
   name: 'PortfolioPage',
   data: () => ({
-    cdn: 'https://d29l6egdxvgg9c.cloudfront.net/',
+    selectedViewIndex: 0,
+    views: {
+      horizontal: 0,
+      vertical: 1
+    },
     projects: [
       {
         title: 'Torii SRS (v2-beta)',
@@ -151,7 +113,6 @@ export default {
         repoUrl: 'github.com/Rakantor/personal-portfolio',
         projectUrl: 'mave.dev',
         images: ['personal-website-1.jpg'],
-        class: 'pa-2'
       },
       {
         title: 'IU Gamer App',
@@ -161,51 +122,28 @@ export default {
         repoUrl: 'github.com/Rakantor/iubh-gamer-app',
         images: ['iu-gamer-app-1.jpg', 'iu-gamer-app-2.jpg']
       }
-    ],
+    ]
-    tech: {
-      android: { title: 'Android', color: '3DDC84', icon: siAndroid },
-      aws: { title: 'AWS', color: '232F3E', icon: siAmazonaws },
-      azure: { title: 'Azure', color: '0078D4', icon: siMicrosoftazure },
-      firebase: { title: 'Firebase', color: 'FFCA28', icon: siFirebase },
-      ghpages: { title: 'GH Pages', color: '222222', icon: siGithub },
-      heroku: { title: 'Heroku', color: '430098', icon: siHeroku },
-      java: { title: 'Java', color: 'FF7800', icon: siCoffeescript },
-      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 },
-      php: { title: 'PHP', color: '777BB4', icon: siPhp },
-      vue2: { title: 'Vue 2', color: '4FC08D', icon: siVuedotjs },
-      vuetify2: { title: 'Vuetify 2', color: '1867C0', icon: siVuetify },
-      vuetify3: { title: 'Vuetify 3', color: '1867C0', icon: siVuetify },
-      watson: { title: 'Watson', color: 'BE95FF', icon: siIbmwatson },
-      wordpress: { title: 'WordPress', color: '21759B', icon: siWordpress }
-    },
-    carouselIndex: []
   }),
-  methods: {
+  computed: {
-    /*
+    viewCols () {
-     * https://github.com/badgen/badgen
+      const horizontal = {
-     */
+        cols: 12,
-    generateBadgen (label, icon) {
+        sm: 12,
-      // const iconColor = icon.hex
+        md: 12,
-      const iconColor = 'FFFFFF' // white
+        lg: 12,
-      const iconSvg = icon.svg.replace('<path ', `<path fill="#${iconColor}" `) // Change SVG icon color
+        xl: 12
-      const svg = badgen({
+      }
-        label: '',
+      const vertical = {
-        status: label,
+        cols: 12,
-        // color: iconColor,
+        sm: 6,
-        color: this.$vuetify.theme.current.colors.backgroundTertiary.slice(1), // Remove leading '#' from hex string
+        md: 6,
-        style: 'classic', // Can be 'classic' or 'flat'
+        lg: 4,
-        icon: `data:image/svg+xml;utf8,${encodeURIComponent(iconSvg)}`
+        xl: 4
-      })
+      }
-
+      return this.view === 'horizontal' ? horizontal : vertical
-      return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
     },
-    showImageCarousel (images, carouselIndex) {
+    view () {
-      this.$refs.imageCarousel.images = images.map(i => this.cdn+i)
+      return this.selectedViewIndex === this.views.horizontal && this.$vuetify.display.smAndUp ? 'horizontal' : 'vertical'
-      this.$refs.imageCarousel.index = carouselIndex
-      this.$refs.imageCarousel.show = true
     }
   }
 }