Rakantor/personal-portfolio
1
0
Fork 0
mirror of https://github.com/Rakantor/personal-portfolio.git synced 2025-12-17 19:36:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup code

Browse Source
This commit is contained in:
Rakantor
2023-04-29 14:27:21 +02:00
parent bccd82fcf9
commit 48e8007717
3 changed files with 54 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
nuxt.config.ts
View File

@@ -3,22 +3,18 @@ import vuetify from 'vite-plugin-vuetify'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
ssr: false,
css: [
'vuetify/styles',
'~/assets/variables.scss'
],
vite: {
ssr: {
noExternal: ['vuetify'] // add the vuetify vite plugin
}
},
build: {
transpile: ['vuetify']
},
app: {
head: {
// titleTemplate: '%s | Home',
@@ -40,10 +36,8 @@ export default defineNuxtConfig({
],
}
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
@@ -56,7 +50,6 @@ export default defineNuxtConfig({
)
}
],
i18n: {
// { vueI18n: './i18n.config.ts' }
// TODO: Revert to config file once the bug in 8.0.0-beta.11 has been fixed

27
pages/bio.vue
View File

@@ -1,14 +1,13 @@
<template>
<v-row>
<v-col cols="12">
<span class="text-h5 text-md-h4 text-high-emphasis">{{ $t('bioTitle') }}</span>
<span class="text-h5 text-md-h4 text-high-emphasis">
{{ $t('bioTitle') }}
</span>
</v-col>
<v-col cols="12">
<v-sheet color="transparent" class="text-medium-emphasis">
<i18n-t
keypath="bioBody"
tag="p"
>
<i18n-t keypath="bioBody" tag="p">
<template v-slot:mmorpg>
<NuxtLink :href="mmorpgWikiUrl" target="_blank">MMORPG</NuxtLink>
</template>
@@ -43,7 +42,9 @@
>
<v-icon :icon="value.icon" :size="getButtonSize(value.level) - 10"></v-icon>
</v-btn>
<span class="text-overline text-primary d-flex flex-column ma-0 pa-0">{{ value.title }}</span>
<span class="text-overline text-primary d-flex flex-column ma-0 pa-0">
{{ value.title }}
</span>
</v-col>
</v-row>
</v-col>
@@ -109,6 +110,7 @@ export default {
// const frameworks = _groupBy(this.frameworks, e => e.level)
const tech = _groupBy(this.tech, e => e.level)
const os = _groupBy(this.os, e => e.level)
return [
{
title: 'languagesFrameworks',
@@ -123,17 +125,18 @@ export default {
data: Object.keys(os).sort().reverse().map(e => os[e])
}
]
},
skills () {
return [...this.languages, ...this.frameworks, ...this.tech, ...this.os]
}
},
methods: {
getButtonSize (level) {
const large = this.$vuetify.display.smAndDown ? 64 : 96
const medium = this.$vuetify.display.smAndDown ? 48 : 64
const small = this.$vuetify.display.smAndDown ? 32 : 48
switch (level) {
case 1: return this.$vuetify.display.smAndDown ? 32 : 48
case 2: return this.$vuetify.display.smAndDown ? 48 : 64
default: return this.$vuetify.display.smAndDown ? 64 : 96
case 1: return small
case 2: return medium
default: return large
}
}
}

142
pages/portfolio.vue
View File

@@ -2,7 +2,9 @@
<ImageCarousel ref="imageCarousel" />
<v-row>
<v-col cols="12">
<span class="text-h5 font-weight-medium">{{ $t('portfolioTitle') }}</span>
<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">
@@ -10,7 +12,6 @@
v-model="carouselIndex[index]"
:show-arrows="project.images.length > 1 ? 'hover' : false"
:hide-delimiters="project.images.length <= 1"
hide-delimiter-background
height="auto"
>
<v-carousel-item v-for="image of project.images" :key="image"
@@ -50,14 +51,14 @@
<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].iconUrl)"
: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].iconUrl}${tech[t].color}&label`"
:src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].icon}${tech[t].color}&label`"
:height="20"
class="ma-1"
/>
@@ -69,7 +70,7 @@
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].iconUrl}${tech[t].color}&label`"
:src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].icon}${tech[t].color}&label`"
:height="20"
class="ma-1"
/>
@@ -89,13 +90,13 @@ import { siAndroid, siAmazonaws, siMicrosoftazure, siFirebase, siGithub,
siVuedotjs, siVuetify, siIbmwatson, siWordpress } from 'simple-icons'
export default {
name: 'PortfolioComponent',
name: 'PortfolioPage',
data: () => ({
cdn: 'https://d29l6egdxvgg9c.cloudfront.net/',
projects: [
{
{
title: 'Torii SRS (v2-beta)',
subtitle: 'Progressive Web App',
subtitle: 'Progressive Web App (SPA)',
description: 'toriiWeb',
tech: ['vue2', 'vuetify2', 'mysql', 'php', 'aws', 'azure', 'watson', 'heroku'],
projectUrl: 'beta.torii-srs.com',
@@ -107,7 +108,7 @@ export default {
},
{
title: 'Torii SRS (v1)',
subtitle: 'Cross-platform app',
subtitle: 'Cross-Platform App',
description: 'toriiJava',
tech: ['java', 'libgdx', 'mysql', 'php', 'aws', 'wordpress'],
projectUrl: 'torii-srs.com',
@@ -118,7 +119,7 @@ export default {
},
{
title: 'IU Quiz App',
subtitle: 'Web App',
subtitle: 'Web App (SPA)',
description: 'iuQuizApp',
tech: ['nuxt2', 'vuetify2', 'firebase'],
repoUrl: 'github.com/Rakantor/iu-quiz-app',
@@ -127,14 +128,14 @@ export default {
},
{
title: 'Menacing Blue',
subtitle: 'Cross-platform app',
subtitle: 'Cross-Platform App',
description: 'pmb',
tech: ['java', 'libgdx'],
images: ['pmb-6.png', 'pmb-1.png', 'pmb-2.png', 'pmb-3.png', 'pmb-4.png', 'pmb-5.png', 'pmb-7.jpg']
},
{
title: 'Personal Website',
subtitle: 'Web App',
subtitle: 'Web App (SPA)',
description: 'personalWebsite',
tech: ['nuxt3', 'vuetify3', 'ghpages'],
repoUrl: 'github.com/Rakantor/personal-portfolio',
@@ -144,7 +145,7 @@ export default {
},
{
title: 'IU Gamer App',
subtitle: 'Android app',
subtitle: 'Android App',
description: 'iuGamerApp',
tech: ['java', 'android', 'firebase'],
repoUrl: 'github.com/Rakantor/iubh-gamer-app',
@@ -152,105 +153,40 @@ export default {
}
],
tech: {
android: {
title: 'Android',
color: '3DDC84',
iconUrl: siAndroid,
},
aws: {
title: 'AWS',
color: '232F3E',
iconUrl: siAmazonaws,
},
azure: {
title: 'Azure',
color: '0078D4',
iconUrl: siMicrosoftazure,
},
firebase: {
title: 'Firebase',
color: 'FFCA28',
iconUrl: siFirebase,
},
ghpages: {
title: 'GH Pages',
color: '222222',
iconUrl: siGithub,
},
heroku: {
title: 'Heroku',
color: '430098',
iconUrl: siHeroku,
},
java: {
title: 'Java',
color: 'FF7800',
iconUrl: siCoffeescript,
},
libgdx: {
title: 'libGDX',
color: '990000',
iconUrl: siYoutubegaming,
},
mysql: {
title: 'MySQL',
color: '4479A1',
iconUrl: siMysql,
},
nuxt2: {
title: 'Nuxt 2',
color: '00DC82',
iconUrl: siNuxtdotjs,
},
nuxt3: {
title: 'Nuxt 3',
color: '00DC82',
iconUrl: siNuxtdotjs,
},
php: {
title: 'PHP',
color: '777BB4',
iconUrl: siPhp,
},
vue2: {
title: 'Vue 2',
color: '4FC08D',
iconUrl: siVuedotjs,
},
vuetify2: {
title: 'Vuetify 2',
color: '1867C0',
iconUrl: siVuetify,
},
vuetify3: {
title: 'Vuetify 3',
color: '1867C0',
iconUrl: siVuetify,
},
watson: {
title: 'Watson',
color: 'BE95FF',
iconUrl: siIbmwatson,
},
wordpress: {
title: 'WordPress',
color: '21759B',
iconUrl: siWordpress,
}
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: {
generateBadgen (label, iconUrl) {
// const iconColor = iconUrl.hex
/*
* https://github.com/badgen/badgen
*/
generateBadgen (label, icon) {
// const iconColor = icon.hex
const iconColor = 'FFFFFF' // white
const iconSvg = iconUrl.svg.replace('<path ', `<path fill="#${iconColor}" `)
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),
style: 'classic',
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)}`
})