From f39e02c5b7c5f634faf71d12ddbaa45c0c9e5a9c Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Mon, 8 May 2023 01:09:25 +0200
Subject: [PATCH] Add horizontal projects list layout

---
 pages/portfolio.vue | 192 +++++++++++++++-----------------------------
 1 file changed, 65 insertions(+), 127 deletions(-)

diff --git a/pages/portfolio.vue b/pages/portfolio.vue
index c3c365a..f09d4bd 100644
--- a/pages/portfolio.vue
+++ b/pages/portfolio.vue
@@ -1,85 +1,48 @@
 <template>
   <div>
-    <ImageCarousel ref="imageCarousel" />
     <v-row>
       <v-col cols="12">
-        <span class="text-h5 font-weight-medium">
-          {{ $t('portfolioTitle') }}
-        </span>
-      </v-col>
-      <v-col v-for="(project, index) of projects" :key="index" cols="12" lg="4" md="6">
-        <v-card height="100%" class="d-flex flex-column">
-          <v-carousel
-            v-model="carouselIndex[index]"
-            :show-arrows="project.images.length > 1 ? 'hover' : false"
-            :hide-delimiters="project.images.length <= 1"
-            height="auto"
+        <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-carousel-item v-for="image of project.images" :key="image"
-              :src="`${cdn}${image}`"
-              :class="project.class"
-              @click="showImageCarousel(project.images, carouselIndex[index])"
-            ></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-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-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="viewCols.cols"
+        :sm="viewCols.sm"
+        :md="viewCols.md"
+        :lg="viewCols.lg"
+        :xl="viewCols.xl"
+      >
+        <ProjectCard
+          :view="view"
+          :title="project.title"
+          :subtitle="project.subtitle"
+          :description="project.description"
+          :tech="project.tech"
+          :images="project.images"
+          :project-url="project.projectUrl"
+          :repo-url="project.repoUrl"
+        />
       </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: {
-    /*
-     * https://github.com/badgen/badgen
-     */
-    generateBadgen (label, icon) {
-      // const iconColor = icon.hex
-      const iconColor = 'FFFFFF' // white
-      const iconSvg = icon.svg.replace('<path ', `<path fill="#${iconColor}" `) // Change SVG icon color
-      const svg = badgen({
-        label: '',
-        status: label,
-        // color: iconColor,
-        color: this.$vuetify.theme.current.colors.backgroundTertiary.slice(1), // Remove leading '#' from hex string
-        style: 'classic', // Can be 'classic' or 'flat'
-        icon: `data:image/svg+xml;utf8,${encodeURIComponent(iconSvg)}`
-      })
-
-      return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
+  computed: {
+    viewCols () {
+      const horizontal = {
+        cols: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+        xl: 12
+      }
+      const vertical = {
+        cols: 12,
+        sm: 6,
+        md: 6,
+        lg: 4,
+        xl: 4
+      }
+      return this.view === 'horizontal' ? horizontal : vertical
     },
-    showImageCarousel (images, carouselIndex) {
-      this.$refs.imageCarousel.images = images.map(i => this.cdn+i)
-      this.$refs.imageCarousel.index = carouselIndex
-      this.$refs.imageCarousel.show = true
+    view () {
+      return this.selectedViewIndex === this.views.horizontal && this.$vuetify.display.smAndUp ? 'horizontal' : 'vertical'
     }
   }
 }