From 048660c9df11150820305c14c25f70f7b352b618 Mon Sep 17 00:00:00 2001 From: Rakantor Date: Mon, 8 May 2023 16:42:01 +0200 Subject: [PATCH] Add tech and update portfolio --- components/ProjectCard.vue | 88 +++++++++++++++----------------------- pages/portfolio.vue | 41 ++++++++++++------ 2 files changed, 63 insertions(+), 66 deletions(-) diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue index 84a5ff7..884d184 100644 --- a/components/ProjectCard.vue +++ b/components/ProjectCard.vue @@ -14,7 +14,7 @@ height="200" > @@ -23,36 +23,22 @@
+ {{ $t(overline) }} - - - {{ title }} - - - - + + {{ title }} {{ title }} - @@ -81,41 +67,27 @@ height="auto" > + {{ $t(overline) }} - - - {{ title }} - - - - + + {{ title }} {{ title }} - @@ -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 } diff --git a/pages/portfolio.vue b/pages/portfolio.vue index f09d4bd..923c947 100644 --- a/pages/portfolio.vue +++ b/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" /> @@ -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,