From 677519fe230a896868e8366cfae62db1dcec4d6b Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Thu, 30 May 2024 09:08:49 +0200
Subject: [PATCH] fix: optimize technology width

---
 Skills.ts                 | 39 ++++++++++++++++++++-------------------
 components/Technology.vue | 12 ++++++++----
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/Skills.ts b/Skills.ts
index 0a6b4ce..c90bab7 100644
--- a/Skills.ts
+++ b/Skills.ts
@@ -24,26 +24,27 @@ export type ISkill = {
   name: string
   img: string
   link ?: string
+  width ?: number
 }
 
-export const js: ISkill = {name: 'JavaScript', img: jsImg}
-export const ts: ISkill = {name: 'TypeScript', img: tsImg, link: 'https://www.typescriptlang.org'}
-export const vue: ISkill = {name: 'Vuejs', img: vueImg, link: 'https://vuejs.org'}
-export const react: ISkill = {name: 'React', img: reactImg, link: 'https://reactjs.org'}
-export const pcss: ISkill = {name: 'PostCSS', img: postCssImg, link: 'https://postcss.org'}
-export const scss: ISkill = {name: 'SCSS', img: scssImg}
-export const css: ISkill = {name: 'CSS', img: cssImg}
-export const html: ISkill = {name: 'HTML', img: htmlImg}
-export const phaser: ISkill = {name: 'Phaser 3', img: phaserImg}
-export const unity: ISkill = {name: 'Unity 3D', img: unityImg}
-export const cs: ISkill = {name: 'C#', img: csImg}
+export const ng: ISkill = {name: 'Angular', img: ngImg, width: 48}
 export const ase: ISkill = {name: 'Aseprite', img: aseImg}
-export const gl: ISkill = {name: 'GitLab', img: glImg, link: 'https://gitlab.com'}
-export const vitest: ISkill = {name: 'Vitest', img: vitestImg, link: 'https://vitest.dev'}
-export const njs: ISkill = {name: 'Nodejs', img: njsImg, link: 'https://nodejs.org/en'}
-export const ng: ISkill = {name: 'Angular', img: ngImg}
-export const java: ISkill = {name: 'Java', img: javaImg, link: 'https://www.java.com/de/'}
+export const cs: ISkill = {name: 'C#', img: csImg}
+export const css: ISkill = {name: 'CSS', img: cssImg, width: 44}
+export const gl: ISkill = {name: 'GitLab', img: glImg, link: 'https://gitlab.com', width: 55}
+export const html: ISkill = {name: 'HTML', img: htmlImg, width: 44}
+export const java: ISkill = {name: 'Java', img: javaImg, link: 'https://www.java.com/de/', width: 37}
+export const js: ISkill = {name: 'JavaScript', img: jsImg}
+export const jetbrains: ISkill = {name: 'JetBrains IDEs', img: jetbrainsImg, link: 'https://www.jetbrains.com', width: 60}
+export const njs: ISkill = {name: 'Nodejs', img: njsImg, link: 'https://nodejs.org/en', width: 46}
+export const nuxt: ISkill = {name: 'Nuxt', img: nuxtImg, link: 'https://nuxt.com', width: 75}
+export const phaser: ISkill = {name: 'Phaser 3', img: phaserImg, width: 58}
+export const pcss: ISkill = {name: 'PostCSS', img: postCssImg, link: 'https://postcss.org'}
+export const react: ISkill = {name: 'React', img: reactImg, link: 'https://reactjs.org', width: 56}
 export const rust: ISkill = {name: 'Rust', img: rustImg, link: 'https://www.rust-lang.org'}
-export const jetbrains: ISkill = {name: 'JetBrains IDEs', img: jetbrainsImg, link: 'https://www.jetbrains.com'}
-export const nuxt: ISkill = {name: 'Nuxt', img: nuxtImg, link: 'https://nuxt.com'}
-export const tw: ISkill = {name: 'Tailwind', img: twImg}
+export const scss: ISkill = {name: 'SCSS', img: scssImg, width: 67}
+export const tw: ISkill = {name: 'Tailwind', img: twImg, width: 84}
+export const ts: ISkill = {name: 'TypeScript', img: tsImg, link: 'https://www.typescriptlang.org'}
+export const unity: ISkill = {name: 'Unity 3D', img: unityImg}
+export const vitest: ISkill = {name: 'Vitest', img: vitestImg, link: 'https://vitest.dev', width: 55}
+export const vue: ISkill = {name: 'Vue', img: vueImg, link: 'https://vuejs.org', width: 58}
diff --git a/components/Technology.vue b/components/Technology.vue
index 0aaa939..a238f74 100644
--- a/components/Technology.vue
+++ b/components/Technology.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="Technology flex-col" :class="[size]">
     <a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">
-      <img loading="lazy" :src="img" :alt="altText()" :height="size === 'm' ? 30 : 50" :class="[size]"/>
+      <img loading="lazy" :src="img" :alt="altText()" :height="getPixelForSize()" :width="getWidth()" :class="[size]"/>
     </a>
-    <img v-else loading="lazy" :height="size === 'm' ? 30 : 50" :src="img" :alt="altText()"/>
+    <img v-else loading="lazy" :height="getPixelForSize()" :width="getWidth()" :src="img" :alt="altText()"/>
     <span class="tip">{{name}}</span>
   </div>
 </template>
@@ -13,12 +13,16 @@ type Props = {
   img: string
   name: string
   link?: string
+  width?: number
   size?: 'm' | 'l'
 }
 
-const {name} = withDefaults(defineProps<Props>(), {
-  size: 'm'
+const {name, size, width} = withDefaults(defineProps<Props>(), {
+  size: 'm',
+  width: 50,
 })
 
 const altText = () => `Icon für ${name}`
+const getPixelForSize = () => size === 'm' ? 30 : 50
+const getWidth = () => width / 50 * getPixelForSize()
 </script>