From 2a498201271419eccbc2bea8865321056974a0b1 Mon Sep 17 00:00:00 2001 From: Rakantor Date: Fri, 5 May 2023 01:26:27 +0200 Subject: [PATCH] Refactor variable names --- pages/bio.vue | 93 +++++++++++++++++++++++++++------------------------ 1 file changed, 49 insertions(+), 44 deletions(-) diff --git a/pages/bio.vue b/pages/bio.vue index 48c637b..c857a6c 100644 --- a/pages/bio.vue +++ b/pages/bio.vue @@ -37,13 +37,13 @@ - + {{ value.title }} @@ -68,64 +68,69 @@ export default { 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: '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: '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: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 } + { title: 'Java', icon: 'mdi-language-java', url: 'java.com', emphasis: 'high' }, + { title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.org', emphasis: 'low' }, + { title: 'Python', icon: 'mdi-language-python', url: 'python.org', emphasis: 'low' }, + { title: 'JavaScript (ES6+)', icon: 'mdi-language-javascript', url: 'javascript.com', emphasis: 'high' }, + { title: 'TypeScript', icon: 'mdi-language-typescript', url: 'typescriptlang.org/', emphasis: 'low' }, + { title: 'HTML', icon: 'mdi-language-html5', url: 'html.spec.whatwg.org/multipage', emphasis: 'medium' }, + { title: 'CSS', icon: 'mdi-language-css3', url: 'w3.org/Style/CSS', emphasis: 'medium' }, + { title: 'PHP', icon: 'mdi-language-php', url: 'php.net', emphasis: 'medium' }, + { title: 'SQL', icon: 'mdi-database', url: 'iso.org/standard/63555.html', emphasis: 'medium' }, + { title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', emphasis: 'medium' } ], frameworks: [ - { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 2 }, - { title: 'Vue.js', icon: 'mdi-vuejs', url: 'vuejs.org', level: 3 }, - { title: 'Nuxt', icon: 'mdi-nuxt', url: 'nuxt.com', level: 3 }, - { title: 'Vuetify', icon: 'mdi-vuetify', url: 'vuetifyjs.com', level: 3 }, - { title: 'Bootstrap', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', level: 1 }, - { title: 'libGDX', icon: 'mdi-alpha-l-box-outline', url: 'libgdx.com', level: 1 } + { title: 'Android', icon: 'mdi-android', url: 'android.com', emphasis: 'medium' }, + { title: 'Vue.js', icon: 'mdi-vuejs', url: 'vuejs.org', emphasis: 'high' }, + { title: 'Nuxt', icon: 'mdi-nuxt', url: 'nuxt.com', emphasis: 'high' }, + { title: 'Vuetify', icon: 'mdi-vuetify', url: 'vuetifyjs.com', emphasis: 'high' }, + { title: 'Bootstrap', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', emphasis: 'low' }, + { title: 'libGDX', icon: 'mdi-alpha-l-box-outline', url: 'libgdx.com', emphasis: 'low' } ], tech: [ - { title: 'Amazon Web Services', icon: 'mdi-aws', url: 'aws.amazon.com', level: 3 }, - { title: 'Firebase', icon: 'mdi-firebase', url: 'firebase.google.com', level: 3 }, - { title: 'Azure', icon: 'mdi-microsoft-azure', url: 'azure.microsoft.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 } + { title: 'Amazon Web Services', icon: 'mdi-aws', url: 'aws.amazon.com', emphasis: 'high' }, + { title: 'Firebase', icon: 'mdi-firebase', url: 'firebase.google.com', emphasis: 'high' }, + { title: 'Azure', icon: 'mdi-microsoft-azure', url: 'azure.microsoft.com', emphasis: 'low' }, + { title: 'Heroku', icon: 'brands:heroku', url: 'heroku.com', emphasis: 'low' }, + { title: 'WordPress', icon: 'mdi-wordpress', url: 'wordpress.com', emphasis: 'low' }, + { title: 'Unity', icon: 'mdi-unity', url: 'unity.com', emphasis: 'low' }, + { title: 'Unreal Engine', icon: 'mdi-unreal', url: 'unrealengine.com', emphasis: 'low' } ], os: [ - { title: '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: 'Apple iOS', icon: 'mdi-apple-ios', url: 'apple.com/ios', level: 1 }, - { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 1 }, + { title: 'Windows', icon: 'mdi-microsoft-windows', url: 'microsoft.com/windows', emphasis: 'medium' }, + { title: 'macOS', icon: 'brands:apple', url: 'apple.com/macos', emphasis: 'medium' }, + { title: 'Linux Mint', icon: 'mdi-linux-mint', url: 'linuxmint.com', emphasis: 'medium' }, + { title: 'Fedora', icon: 'mdi-fedora', url: 'getfedora.org', emphasis: 'medium' }, + { title: 'Arch Linux', icon: 'mdi-arch', url: 'archlinux.org', emphasis: 'low' }, + { title: 'Ubuntu', icon: 'mdi-ubuntu', url: 'ubuntu.com', emphasis: 'low' }, + { title: 'iOS', icon: 'mdi-apple-ios', url: 'apple.com/ios', emphasis: 'low' }, + { title: 'Android', icon: 'mdi-android', url: 'android.com', emphasis: 'low' }, ] }), computed: { sets () { - 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) + const languages = _groupBy([...this.languages, ...this.frameworks], e => e.emphasis) + // const frameworks = _groupBy(this.frameworks, e => e.emphasis) + const tech = _groupBy(this.tech, e => e.emphasis) + const os = _groupBy(this.os, e => e.emphasis) + + function compareEmphasis (x, y) { + const map = { low: 1, medium: 2, high: 3 } + return map[y] - map[x] + } return [ { title: 'languagesFrameworks', - data: Object.keys(languages).sort().reverse().map(e => languages[e]) + data: Object.keys(languages).sort(compareEmphasis).map(e => languages[e]) }, { title: 'toolsPlatforms', - data: Object.keys(tech).sort().reverse().map(e => tech[e]) + data: Object.keys(tech).sort(compareEmphasis).map(e => tech[e]) }, { title: 'os', - data: Object.keys(os).sort().reverse().map(e => os[e]) + data: Object.keys(os).sort(compareEmphasis).map(e => os[e]) } ] }, @@ -138,14 +143,14 @@ export default { } }, methods: { - brandIconSize (level) { + brandIconSize (emphasis) { 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 small - case 2: return medium + switch (emphasis) { + case 'low': return small + case 'medium': return medium default: return large } }