webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: optimize technology width

Browse source
This commit is contained in:
webfussel 2024-05-30 09:08:49 +02:00
parent 282e2086b0
commit 677519fe23
2 changed files with 28 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

39
Skills.ts
View file

@ -24,26 +24,27 @@ export type ISkill = {
name: string name: string
img: string img: string
link ?: string link ?: string
width ?: number
} }
export const js: ISkill = {name: 'JavaScript', img: jsImg} export const ng: ISkill = {name: 'Angular', img: ngImg, width: 48}
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 ase: ISkill = {name: 'Aseprite', img: aseImg} export const ase: ISkill = {name: 'Aseprite', img: aseImg}
export const gl: ISkill = {name: 'GitLab', img: glImg, link: 'https://gitlab.com'} export const cs: ISkill = {name: 'C#', img: csImg}
export const vitest: ISkill = {name: 'Vitest', img: vitestImg, link: 'https://vitest.dev'} export const css: ISkill = {name: 'CSS', img: cssImg, width: 44}
export const njs: ISkill = {name: 'Nodejs', img: njsImg, link: 'https://nodejs.org/en'} export const gl: ISkill = {name: 'GitLab', img: glImg, link: 'https://gitlab.com', width: 55}
export const ng: ISkill = {name: 'Angular', img: ngImg} export const html: ISkill = {name: 'HTML', img: htmlImg, width: 44}
export const java: ISkill = {name: 'Java', img: javaImg, link: 'https://www.java.com/de/'} 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 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 scss: ISkill = {name: 'SCSS', img: scssImg, width: 67}
export const nuxt: ISkill = {name: 'Nuxt', img: nuxtImg, link: 'https://nuxt.com'} export const tw: ISkill = {name: 'Tailwind', img: twImg, width: 84}
export const tw: ISkill = {name: 'Tailwind', img: twImg} 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}

12
components/Technology.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<div class="Technology flex-col" :class="[size]"> <div class="Technology flex-col" :class="[size]">
<a v-if="link" :href="link" target="_blank" rel="noopener noreferrer"> <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> </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> <span class="tip">{{name}}</span>
</div> </div>
</template> </template>
@ -13,12 +13,16 @@ type Props = {
img: string img: string
name: string name: string
link?: string link?: string
width?: number
size?: 'm' | 'l' size?: 'm' | 'l'
} }
const {name} = withDefaults(defineProps<Props>(), { const {name, size, width} = withDefaults(defineProps<Props>(), {
size: 'm' size: 'm',
width: 50,
}) })
const altText = () => `Icon für ${name}` const altText = () => `Icon für ${name}`
const getPixelForSize = () => size === 'm' ? 30 : 50
const getWidth = () => width / 50 * getPixelForSize()
</script> </script>