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

34
pages/bio.vue
View File

@@ -1,23 +1,20 @@
<template>
<v-row>
<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 cols="12">
<v-sheet color="transparent" :max-width="600">
<v-sheet color="transparent" class="text-medium-emphasis">
<p>
My interest in programming was sparked in 2007 when I began tinkering with SQL
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>
(success!)
</p>
<p>
Eager to learn more, I attended a
<a href="https://en.wikipedia.org/wiki/H%C3%B6here_Technische_Lehranstalt" target="_blank">HTL</a>
in an attempt to setup a private server for my favorite
<a :href="mmorpgWikiUrl" target="_blank">MMORPG</a>
(it was a success!)
Eager to dive deeper into the world of coding, I attended a
<a :href="htlWikiUrl" target="_blank">HTL</a>
specializing in IT in 2009, where I learned C, Java, HTML and CSS.
</p>
<p>
Some years later, I pursued a degree in <a href="https://en.wikipedia.org/wiki/Business_informatics">BI</a>
Some years later, I pursued a degree in
<a :href="biWikiUrl" target="_blank">BI</a>
with a specialization in Web and App development.
</p>
<br/>
@@ -27,7 +24,7 @@
</v-sheet>
</v-col>
<v-col v-for="set, ind in sets" :key="ind" cols="12">
<v-card variant="outlined">
<v-card>
<v-card-item>
<v-card-title>{{ set.title }}</v-card-title>
</v-card-item>
@@ -64,15 +61,15 @@ import _groupBy from 'lodash-es/groupBy'
export default {
name: 'BioPage',
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: [
{ 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: 2 },
{ title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.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: '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: 'CSS', icon: 'mdi-language-css3', url: 'w3.org/Style/CSS', 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 }
],
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: 'BootstrapVue', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', 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>
<v-row justify="center">
<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 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 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>
</v-col>
<v-col cols="12">
<v-btn
depressed
outlined
variant="outlined"
color="primary"
prepend-icon="mdi-email-outline"
:href="`mailto:<${$myEmail}>`"
>
Contact me
Get in touch
</v-btn>
</v-col>
</v-row>

71
pages/portfolio.vue
View File

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