mirror of
https://github.com/Rakantor/personal-portfolio.git
synced 2025-12-17 11:36:32 +01:00
Add horizontal projects list layout
This commit is contained in:
@@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user