mirror of
https://github.com/Rakantor/personal-portfolio.git
synced 2025-12-17 19:36:32 +01:00
Update page
This commit is contained in:
122
pages/bio.vue
122
pages/bio.vue
@@ -1,30 +1,59 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<span class="text-h4">About me</span>
|
||||
<span class="text-h4">My Journey as a Developer</span>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<span>
|
||||
Hello there! I'm Manuel, a software dev based in Vienna, Austria. I C.
|
||||
A year later, I continued to learn Java. I HTML and CSS
|
||||
full-stack web development in 2018.
|
||||
</span>
|
||||
<v-sheet color="transparent" :max-width="600">
|
||||
<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>
|
||||
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>
|
||||
with a specialization in Web and App development.
|
||||
</p>
|
||||
<br/>
|
||||
<p>
|
||||
Here's some of the tech that I've used and worked with before:
|
||||
</p>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col v-for="set, ind in sets" :key="ind" cols="12">
|
||||
<v-tooltip v-for="(value, index) in set" :key="index" location="bottom" :text="value.title">
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
variant="text"
|
||||
:size="getButtonSize(value.level)"
|
||||
:icon="value.icon"
|
||||
color="primary"
|
||||
class="mx-1"
|
||||
:href="`https://${value.url}`"
|
||||
target="_blank"
|
||||
v-bind="props"
|
||||
/>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-card variant="outlined">
|
||||
<v-card-item>
|
||||
<v-card-title>{{ set.title }}</v-card-title>
|
||||
</v-card-item>
|
||||
<v-card-text class="text-center">
|
||||
<v-row>
|
||||
<v-col v-for="(v, i) in set.data" :key="i" cols="12">
|
||||
<v-tooltip v-for="(value, index) in v" :key="index" location="bottom" :text="value.title">
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
variant="text"
|
||||
:icon="value.icon"
|
||||
:size="getButtonSize(value.level)"
|
||||
color="primary"
|
||||
class="mx-1"
|
||||
:href="`https://${value.url}`"
|
||||
target="_blank"
|
||||
v-bind="props"
|
||||
>
|
||||
<v-icon :icon="value.icon" :size="getButtonSize(value.level) - 10"></v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -38,42 +67,63 @@ export default {
|
||||
languages: [
|
||||
{ title: 'Java', icon: 'mdi-language-java', url: 'java.com', level: 3 },
|
||||
{ title: 'Android', icon: 'mdi-android', url: 'android.com', level: 3 },
|
||||
{ title: 'C', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 2 },
|
||||
{ title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 2 },
|
||||
{ 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: 'nuxtjs.org', level: 3 },
|
||||
{ title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 },
|
||||
{ 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 },
|
||||
{ title: 'SQL', icon: 'mdi-database', url: 'iso.org/standard/63555.html', level: 2 }
|
||||
{ title: 'SQL', icon: 'mdi-database', url: 'iso.org/standard/63555.html', level: 2 },
|
||||
{ title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 }
|
||||
],
|
||||
frameworks: [
|
||||
{ title: 'Vuetify', icon: 'mdi-vuetify', url: 'vuetifyjs.com', level: 3 },
|
||||
{ title: 'BootstrapVue', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', level: 2 }
|
||||
{ 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 }
|
||||
],
|
||||
tech: [
|
||||
{ title: 'Amazon Web Services', icon: 'mdi-aws', url: 'aws.amazon.com', level: 3 },
|
||||
{ title: 'Google Firebase', icon: 'mdi-firebase', url: 'firebase.google.com', level: 3 },
|
||||
{ title: 'Microsoft Azure', icon: 'mdi-microsoft-azure', url: 'azure.microsoft.com', level: 1 },
|
||||
{ title: 'Heroku', icon: 'mdi-alpha-h-box-outline', url: 'heroku.com', level: 1 },
|
||||
{ title: 'Heroku', icon: 'brands:heroku', url: 'heroku.com', level: 1 },
|
||||
{ title: 'WordPress', icon: 'mdi-wordpress', url: 'wordpress.com', level: 1 },
|
||||
{ title: 'Unity', icon: 'mdi-unity', url: 'unity.com', level: 1 },
|
||||
{ title: 'Unreal Engine', icon: 'mdi-unreal', url: 'unrealengine.com', level: 1 }
|
||||
],
|
||||
os: [
|
||||
{ title: 'Microsoft Windows', icon: 'mdi-microsoft-windows', url: 'microsoft.com/windows', level: 1 },
|
||||
{ title: 'Linux Mint', icon: 'mdi-linux-mint', url: 'linuxmint.com', level: 1 },
|
||||
{ title: 'Microsoft Windows', icon: 'mdi-microsoft-windows', url: 'microsoft.com/windows', level: 3 },
|
||||
{ title: 'Apple macOS', icon: 'brands:apple', url: 'apple.com/macos', level: 3 },
|
||||
{ title: 'Linux Mint', icon: 'mdi-linux-mint', url: 'linuxmint.com', level: 3 },
|
||||
{ title: 'Fedora Workstation', icon: 'mdi-fedora', url: 'getfedora.org', level: 3 },
|
||||
{ title: 'Arch Linux', icon: 'mdi-arch', url: 'archlinux.org', level: 1 },
|
||||
{ title: 'Ubuntu', icon: 'mdi-ubuntu', url: 'ubuntu.com', level: 1 },
|
||||
{ title: 'Fedora Workstation', icon: 'mdi-fedora', url: 'getfedora.org', level: 1 },
|
||||
{ title: 'macOS', icon: 'mdi-apple-finder', url: 'apple.com/macos', level: 1 },
|
||||
{ title: 'Apple iOS', icon: 'mdi-apple-ios', url: 'apple.com/ios', level: 1 },
|
||||
{ title: 'Android', icon: 'mdi-android', url: 'android.com', level: 1 },
|
||||
]
|
||||
}),
|
||||
computed: {
|
||||
sets () {
|
||||
const set = _groupBy(this.skills, e => e.level)
|
||||
return Object.keys(set).sort().reverse().map(e => set[e])
|
||||
const languages = _groupBy([...this.languages, ...this.frameworks], e => e.level)
|
||||
// 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: "Languages & Frameworks",
|
||||
data: Object.keys(languages).sort().reverse().map(e => languages[e])
|
||||
},
|
||||
{
|
||||
title: "Tools & Platforms",
|
||||
data: Object.keys(tech).sort().reverse().map(e => tech[e])
|
||||
},
|
||||
{
|
||||
title: "Operating Systems",
|
||||
data: Object.keys(os).sort().reverse().map(e => os[e])
|
||||
}
|
||||
]
|
||||
},
|
||||
skills () {
|
||||
return [...this.languages, ...this.frameworks, ...this.tech, ...this.os]
|
||||
@@ -82,9 +132,9 @@ export default {
|
||||
methods: {
|
||||
getButtonSize (level) {
|
||||
switch (level) {
|
||||
case 1: return 'small'
|
||||
case 2: return 'large'
|
||||
default: return 'x-large'
|
||||
case 1: return 48
|
||||
case 2: return 64
|
||||
default: return 96
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user