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

Update layout and style

Browse Source
This commit is contained in:
Rakantor
2023-04-23 23:37:19 +02:00
parent 2abac9a712
commit 42f28f397a
4 changed files with 73 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
layouts/default.vue
View File

@@ -1,27 +1,25 @@
<template> <template>
<v-app class="v-app-bg"> <v-app class="v-app-bg">
<v-navigation-drawer <v-navigation-drawer
v-model="drawer" :model-value="drawer"
:mini-variant="miniVariant" location="right"
fixed
right
app app
color="backgroundSecondary" color="backgroundSecondary"
disable-resize-watcher
> >
<v-list nav :lines="false"> <v-list nav :lines="false">
<v-list-item <v-list-item
v-for="(item, i) in items" v-for="(page, i) in pages"
:key="i" :key="i"
:to="item.to" :to="page.url"
active-color="primary" active-color="primary"
router router
exact exact
> >
<template v-slot:prepend> <template v-slot:prepend>
<v-icon :icon="item.icon"></v-icon> <v-icon :icon="page.icon"></v-icon>
</template> </template>
<v-list-item-title v-text="item.title" /> <v-list-item-title v-text="page.title" />
</v-list-item> </v-list-item>
</v-list> </v-list>
<template #append> <template #append>
@@ -63,7 +61,7 @@
</v-btn-toggle> </v-btn-toggle>
</v-app-bar> </v-app-bar>
<v-main> <v-main>
<v-container class="my-16"> <v-container class="pa-md-16 my-16">
<slot /> <slot />
</v-container> </v-container>
</v-main> </v-main>
@@ -90,24 +88,21 @@ export default {
}, },
data: () => ({ data: () => ({
drawer: false, drawer: false,
miniVariant: false, pages: [
selectedItem: 0,
test: 0,
items: [
{ {
icon: 'mdi-home', icon: 'mdi-home',
title: 'Home', title: 'Home',
to: '/', url: '/',
}, },
{ {
icon: 'mdi-text-account', icon: 'mdi-text-account',
title: 'About', title: 'About',
to: '/bio', url: '/bio',
}, },
{ {
icon: 'mdi-briefcase', icon: 'mdi-briefcase',
title: 'Work', title: 'Work',
to: '/portfolio', url: '/portfolio',
} }
] ]
}) })
@@ -124,7 +119,7 @@ export default {
.v-btn--variant-plain { .v-btn--variant-plain {
color: rgb(var(--v-theme-on-background)); color: rgb(var(--v-theme-on-background));
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.87; opacity: 1;
&:hover { &:hover {
color: rgb(var(--v-theme-primary)); color: rgb(var(--v-theme-primary));

34
pages/bio.vue
View File

@@ -1,23 +1,20 @@
<template> <template>
<v-row> <v-row>
<v-col cols="12"> <v-col cols="12">
<span class="text-h4">My Journey as a Developer</span> <span class="text-h4 text-high-emphasis">My Journey as a Developer</span>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-sheet color="transparent" :max-width="600"> <v-sheet color="transparent" class="text-medium-emphasis">
<p> <p>
My interest in programming was sparked in 2007 when I began tinkering with SQL My interest in programming was sparked in 2007 when I began tinkering with SQL
to setup a private server for my favorite in an attempt to setup a private server for my favorite
<a href="https://en.wikipedia.org/wiki/Massively_multiplayer_online_role-playing_game" target="_blank">MMORPG</a> <a :href="mmorpgWikiUrl" target="_blank">MMORPG</a>
(success!) (it was a success!)
</p> Eager to dive deeper into the world of coding, I attended a
<p> <a :href="htlWikiUrl" target="_blank">HTL</a>
Eager to learn more, I attended a
<a href="https://en.wikipedia.org/wiki/H%C3%B6here_Technische_Lehranstalt" target="_blank">HTL</a>
specializing in IT in 2009, where I learned C, Java, HTML and CSS. specializing in IT in 2009, where I learned C, Java, HTML and CSS.
</p> Some years later, I pursued a degree in
<p> <a :href="biWikiUrl" target="_blank">BI</a>
Some years later, I pursued a degree in <a href="https://en.wikipedia.org/wiki/Business_informatics">BI</a>
with a specialization in Web and App development. with a specialization in Web and App development.
</p> </p>
<br/> <br/>
@@ -27,7 +24,7 @@
</v-sheet> </v-sheet>
</v-col> </v-col>
<v-col v-for="set, ind in sets" :key="ind" cols="12"> <v-col v-for="set, ind in sets" :key="ind" cols="12">
<v-card variant="outlined"> <v-card>
<v-card-item> <v-card-item>
<v-card-title>{{ set.title }}</v-card-title> <v-card-title>{{ set.title }}</v-card-title>
</v-card-item> </v-card-item>
@@ -64,15 +61,15 @@ import _groupBy from 'lodash-es/groupBy'
export default { export default {
name: 'BioPage', name: 'BioPage',
data: () => ({ data: () => ({
mmorpgWikiUrl: 'https://en.wikipedia.org/wiki/Massively_multiplayer_online_role-playing_game',
htlWikiUrl: 'https://en.wikipedia.org/wiki/H%C3%B6here_Technische_Lehranstalt',
biWikiUrl: 'https://en.wikipedia.org/wiki/Business_informatics',
languages: [ languages: [
{ title: 'Java', icon: 'mdi-language-java', url: 'java.com', level: 3 }, { title: 'Java', icon: 'mdi-language-java', url: 'java.com', level: 3 },
{ title: 'Android', icon: 'mdi-android', url: 'android.com', level: 3 }, { title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 1 },
{ title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 2 },
{ title: 'Python', icon: 'mdi-language-python', url: 'python.org', level: 1 }, { title: 'Python', icon: 'mdi-language-python', url: 'python.org', level: 1 },
{ title: 'JavaScript (ES6+)', icon: 'mdi-language-javascript', url: 'javascript.com', level: 3 }, { title: 'JavaScript (ES6+)', icon: 'mdi-language-javascript', url: 'javascript.com', level: 3 },
{ title: 'TypeScript', icon: 'mdi-language-typescript', url: 'typescriptlang.org/', level: 1 }, { title: 'TypeScript', icon: 'mdi-language-typescript', url: 'typescriptlang.org/', level: 1 },
{ title: 'Vue.js', icon: 'mdi-vuejs', url: 'vuejs.org', level: 3 },
{ title: 'Nuxt.js', icon: 'mdi-nuxt', url: 'nuxt.com', level: 3 },
{ title: 'HTML', icon: 'mdi-language-html5', url: 'html.spec.whatwg.org/multipage', level: 2 }, { title: 'HTML', icon: 'mdi-language-html5', url: 'html.spec.whatwg.org/multipage', level: 2 },
{ title: 'CSS', icon: 'mdi-language-css3', url: 'w3.org/Style/CSS', level: 2 }, { title: 'CSS', icon: 'mdi-language-css3', url: 'w3.org/Style/CSS', level: 2 },
{ title: 'PHP', icon: 'mdi-language-php', url: 'php.net', level: 2 }, { title: 'PHP', icon: 'mdi-language-php', url: 'php.net', level: 2 },
@@ -80,6 +77,9 @@ export default {
{ title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 } { title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 }
], ],
frameworks: [ frameworks: [
{ title: 'Android', icon: 'mdi-android', url: 'android.com', level: 2 },
{ title: 'Vue.js', icon: 'mdi-vuejs', url: 'vuejs.org', level: 3 },
{ title: 'Nuxt.js', icon: 'mdi-nuxt', url: 'nuxt.com', level: 3 },
{ title: 'Vuetify.js', icon: 'mdi-vuetify', url: 'vuetifyjs.com', level: 3 }, { title: 'Vuetify.js', icon: 'mdi-vuetify', url: 'vuetifyjs.com', level: 3 },
{ title: 'BootstrapVue', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', level: 1 }, { title: 'BootstrapVue', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', level: 1 },
{ title: 'libGDX', icon: 'mdi-alpha-l-box-outline', url: 'libgdx.com', level: 1 } { title: 'libGDX', icon: 'mdi-alpha-l-box-outline', url: 'libgdx.com', level: 1 }

13
pages/index.vue
View File

@@ -1,24 +1,25 @@
<template> <template>
<v-row justify="center"> <v-row justify="center">
<v-col cols="12"> <v-col cols="12">
<span class="text-h3">{{ $t('greeting') }}</span> <span class="text-h4 text-md-h3 text-lg-h2 text-high-emphasis">
{{ $t('greeting') }}
</span>
</v-col> </v-col>
<v-col cols="12" class="my-6"> <v-col cols="12" class="my-6">
<p class="text-h6" style="max-width: 600px;"> <p class="text-body-1 text-md-h6 text-medium-emphasis" style="max-width: 550px;">
I'm a Software Developer based in Vienna, Austria.<br/> I'm a Software Developer based in Vienna, Austria.<br/>
I develop various types of applications. I develop various types of applications.
Explore my portfolio to view a showcase of my projects ✌️ Explore my <NuxtLink to="/portfolio">portfolio</NuxtLink> to view a showcase of my projects.
</p> </p>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-btn <v-btn
depressed variant="outlined"
outlined
color="primary" color="primary"
prepend-icon="mdi-email-outline" prepend-icon="mdi-email-outline"
:href="`mailto:<${$myEmail}>`" :href="`mailto:<${$myEmail}>`"
> >
Contact me Get in touch
</v-btn> </v-btn>
</v-col> </v-col>
</v-row> </v-row>

71
pages/portfolio.vue
View File

@@ -1,18 +1,21 @@
<template> <template>
<ImageCarousel ref="imageCarousel" />
<v-row> <v-row>
<v-col cols="12"> <v-col cols="12">
<span class="text-h5 font-weight-medium">Some of my projects</span> <span class="text-h5 font-weight-medium">Some of my projects</span>
</v-col> </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" cols="12" lg="4" md="6">
<v-card color="backgroundSecondary"> <v-card height="100%" class="d-flex flex-column">
<v-carousel <v-carousel
show-arrows="hover" v-model="carouselIndex[index]"
:show-arrows="project.images.length > 1 ? 'hover' : false"
:hide-delimiters="project.images.length <= 1"
hide-delimiter-background hide-delimiter-background
height="auto" height="auto"
> >
<v-carousel-item v-for="image of project.images" :key="image" <v-carousel-item v-for="image of project.images" :key="image"
:src="`${cdn}${image}`" :src="`${cdn}${image}`"
:aspect-ratio="1/1" @click="showImageCarousel(project.images, carouselIndex[index])"
></v-carousel-item> ></v-carousel-item>
</v-carousel> </v-carousel>
<v-card-item> <v-card-item>
@@ -42,19 +45,26 @@
</v-card-title> </v-card-title>
<v-card-subtitle>{{ project.subtitle }}</v-card-subtitle> <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
</v-card-item> </v-card-item>
<v-spacer></v-spacer>
<v-card-text>{{ $t(project.description) }}</v-card-text> <v-card-text>{{ $t(project.description) }}</v-card-text>
<v-card-text class="d-flex flex-row flex-wrap justify-start"> <v-spacer></v-spacer>
<a v-for="t of project.tech" :key="tech[t].title" <v-card-actions class="d-flex flex-row flex-wrap justify-center align-center">
<!--a v-for="t of project.tech" :key="tech[t].title"
:href="`https://${tech[t].projectUrl}`" :href="`https://${tech[t].projectUrl}`"
target="_blank" target="_blank"
> >
<img <img
:src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].iconUrl}`" :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].iconUrl}`"
:height="20" :height="20"
class="ma-1" class="mx-1 mb-1"
/> />
</a> </a-->
</v-card-text> <img v-for="t of project.tech" :key="tech[t].title"
:src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].iconUrl}`"
:height="20"
class="ma-1"
/>
</v-card-actions>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
@@ -67,9 +77,9 @@ export default {
cdn: 'https://d29l6egdxvgg9c.cloudfront.net/', cdn: 'https://d29l6egdxvgg9c.cloudfront.net/',
projects: [ projects: [
{ {
title: 'Torii SRS (v2 Beta)', title: 'Torii SRS (v2-beta)',
subtitle: 'Progressive Web App', subtitle: 'Progressive Web App',
description: 'toriiSRSv2', description: 'toriiWeb',
tech: ['vue2', 'vuetify2', 'mysql', 'php', 'aws', 'azure', 'watson', 'heroku'], tech: ['vue2', 'vuetify2', 'mysql', 'php', 'aws', 'azure', 'watson', 'heroku'],
projectUrl: 'beta.torii-srs.com', projectUrl: 'beta.torii-srs.com',
images: [ images: [
@@ -81,7 +91,7 @@ export default {
{ {
title: 'Torii SRS (v1)', title: 'Torii SRS (v1)',
subtitle: 'Cross-platform app', subtitle: 'Cross-platform app',
description: 'toriiSRSv1', description: 'toriiJava',
tech: ['java', 'libgdx', 'mysql', 'php', 'aws', 'wordpress'], tech: ['java', 'libgdx', 'mysql', 'php', 'aws', 'wordpress'],
projectUrl: 'torii-srs.com', projectUrl: 'torii-srs.com',
images: [ images: [
@@ -96,28 +106,28 @@ export default {
tech: ['nuxt2', 'vuetify2', 'firebase'], tech: ['nuxt2', 'vuetify2', 'firebase'],
repoUrl: 'github.com/Rakantor/iu-quiz-app', repoUrl: 'github.com/Rakantor/iu-quiz-app',
projectUrl: 'iu-quiz-app.web.app', projectUrl: 'iu-quiz-app.web.app',
images: ['torii-v1-1.jpg'] images: ['iu-quiz-app-2.jpg']
}, },
{ {
title: 'Menacing Blue', title: 'Menacing Blue',
subtitle: 'Cross-platform app', subtitle: 'Cross-platform app',
description: 'pmb', description: 'pmb',
tech: ['java', 'libgdx'], tech: ['java', 'libgdx'],
images: ['pmb-6.png', 'pmb-1.png', 'pmb-2.png', 'pmb-3.png', 'pmb-4.png', 'pmb-5.png'] 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', title: 'Personal Website',
subtitle: 'The thing you\'re looking at right now', subtitle: 'Web App',
description: '', description: 'personalWebsite',
tech: ['nuxt3', 'vuetify3', 'ghpages'], tech: ['nuxt3', 'vuetify3', 'ghpages'],
repoUrl: 'github.com/Rakantor/personal-portfolio', repoUrl: 'github.com/Rakantor/personal-portfolio',
projectUrl: 'mave.dev', projectUrl: 'mave.dev',
images: ['torii-v1-1.jpg'] images: ['personal-website-1.jpg']
}, },
{ {
title: 'IU Gamer App', title: 'IU Gamer App',
subtitle: 'Android app', subtitle: 'Android app',
description: '', description: 'iuGamerApp',
tech: ['android', 'firebase'], tech: ['android', 'firebase'],
repoUrl: 'github.com/Rakantor/iubh-gamer-app', repoUrl: 'github.com/Rakantor/iubh-gamer-app',
images: [] images: []
@@ -127,89 +137,80 @@ export default {
android: { android: {
title: 'Android', title: 'Android',
iconUrl: 'https://cdn.simpleicons.org/android&label&color=3DDC84', iconUrl: 'https://cdn.simpleicons.org/android&label&color=3DDC84',
projectUrl: 'android.com'
}, },
aws: { aws: {
title: 'AWS', title: 'AWS',
iconUrl: 'https://cdn.simpleicons.org/amazonaws&label&color=232F3E', iconUrl: 'https://cdn.simpleicons.org/amazonaws&label&color=232F3E',
projectUrl: 'nuxt.com'
}, },
azure: { azure: {
title: 'Azure', title: 'Azure',
iconUrl: 'https://cdn.simpleicons.org/microsoftazure&label&color=0078D4', iconUrl: 'https://cdn.simpleicons.org/microsoftazure&label&color=0078D4',
projectUrl: 'nuxt.com'
}, },
firebase: { firebase: {
title: 'Firebase', title: 'Firebase',
iconUrl: 'https://cdn.simpleicons.org/firebase&label&color=FFCA28', iconUrl: 'https://cdn.simpleicons.org/firebase&label&color=FFCA28',
projectUrl: 'nuxt.com'
}, },
ghpages: { ghpages: {
title: 'GH Pages', title: 'GH Pages',
iconUrl: 'https://cdn.simpleicons.org/github&label&color=222222', iconUrl: 'https://cdn.simpleicons.org/github&label&color=222222',
projectUrl: 'nuxt.com'
}, },
heroku: { heroku: {
title: 'Heroku', title: 'Heroku',
iconUrl: 'https://cdn.simpleicons.org/heroku&label&color=430098', iconUrl: 'https://cdn.simpleicons.org/heroku&label&color=430098',
projectUrl: 'nuxt.com'
}, },
java: { java: {
title: 'Java', title: 'Java',
iconUrl: 'https://cdn.simpleicons.org/coffeescript&label&color=FF7800', iconUrl: 'https://cdn.simpleicons.org/coffeescript&label&color=FF7800',
projectUrl: 'nuxt.com'
}, },
libgdx: { libgdx: {
title: 'libGDX', title: 'libGDX',
iconUrl: 'https://cdn.simpleicons.org/youtubegaming&label&color=990000', iconUrl: 'https://cdn.simpleicons.org/youtubegaming&label&color=990000',
projectUrl: 'nuxtjs.org'
}, },
mysql: { mysql: {
title: 'MySQL', title: 'MySQL',
iconUrl: 'https://cdn.simpleicons.org/mysql&label&color=4479A1', iconUrl: 'https://cdn.simpleicons.org/mysql&label&color=4479A1',
projectUrl: 'nuxtjs.org'
}, },
nuxt2: { nuxt2: {
title: 'Nuxt 2', title: 'Nuxt 2',
iconUrl: 'https://cdn.simpleicons.org/nuxtdotjs&label&color=00DC82', iconUrl: 'https://cdn.simpleicons.org/nuxtdotjs&label&color=00DC82',
projectUrl: 'nuxtjs.org'
}, },
nuxt3: { nuxt3: {
title: 'Nuxt 3', title: 'Nuxt 3',
iconUrl: 'https://cdn.simpleicons.org/nuxtdotjs&label&color=00DC82', iconUrl: 'https://cdn.simpleicons.org/nuxtdotjs&label&color=00DC82',
projectUrl: 'nuxt.com'
}, },
php: { php: {
title: 'PHP', title: 'PHP',
iconUrl: 'https://cdn.simpleicons.org/php&label&color=777BB4', iconUrl: 'https://cdn.simpleicons.org/php&label&color=777BB4',
projectUrl: 'nuxt.com'
}, },
vue2: { vue2: {
title: 'Vue 2', title: 'Vue 2',
iconUrl: 'https://cdn.simpleicons.org/vuedotjs&label&color=4FC08D', iconUrl: 'https://cdn.simpleicons.org/vuedotjs&label&color=4FC08D',
projectUrl: 'nuxt.com'
}, },
vuetify2: { vuetify2: {
title: 'Vuetify 2', title: 'Vuetify 2',
iconUrl: 'https://cdn.simpleicons.org/vuetify&label&color=1867C0', iconUrl: 'https://cdn.simpleicons.org/vuetify&label&color=1867C0',
projectUrl: 'nuxt.com'
}, },
vuetify3: { vuetify3: {
title: 'Vuetify 3', title: 'Vuetify 3',
iconUrl: 'https://cdn.simpleicons.org/vuetify&label&color=1867C0', iconUrl: 'https://cdn.simpleicons.org/vuetify&label&color=1867C0',
projectUrl: 'nuxt.com'
}, },
watson: { watson: {
title: 'Watson', title: 'Watson',
iconUrl: 'https://cdn.simpleicons.org/ibmwatson&label&color=BE95FF', iconUrl: 'https://cdn.simpleicons.org/ibmwatson&label&color=BE95FF',
projectUrl: 'nuxt.com'
}, },
wordpress: { wordpress: {
title: 'WordPress', title: 'WordPress',
iconUrl: 'https://cdn.simpleicons.org/wordpress&label&color=21759B', iconUrl: 'https://cdn.simpleicons.org/wordpress&label&color=21759B',
projectUrl: 'nuxt.com'
} }
},
carouselIndex: []
}),
methods: {
showImageCarousel (images, carouselIndex) {
this.$refs.imageCarousel.images = images.map(i => this.cdn+i)
this.$refs.imageCarousel.index = carouselIndex
this.$refs.imageCarousel.show = true
} }
}) }
} }
</script> </script>