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

add: stuff to bottom, remove some techs

Browse source
This commit is contained in:
webfussel 2024-05-31 19:43:13 +02:00
parent f13d74d2d8
commit 2b4f34671e
5 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/footer.css
View file

@ -8,6 +8,7 @@
& p { & p {
color: var(--color-white-transparent); color: var(--color-white-transparent);
white-space: nowrap;
} }
& .sitemap { & .sitemap {

4
assets/css/technology.css
View file

@ -2,6 +2,10 @@
position: relative; position: relative;
align-items: center; align-items: center;
&.s img {
height: 15px;
}
&.m img { &.m img {
height: 30px; height: 30px;
} }

1
components/Footer.vue
View file

@ -6,6 +6,7 @@
</li> </li>
</ul> </ul>
<p>Natürlich ohne Cookies und Tracker.</p> <p>Natürlich ohne Cookies und Tracker.</p>
<p>Made with nuxt, typescript & postcss</p>
<p>&copy; 2024 by <a href="https://webfussel.de">webfussel</a></p> <p>&copy; 2024 by <a href="https://webfussel.de">webfussel</a></p>
</footer> </footer>
</template> </template>

4
components/Skills.vue
View file

@ -30,7 +30,7 @@
import { gl, java, jetbrains, njs, nuxt, pcss, react, rust, ts, vitest, vue } from '~/Skills' import { gl, java, jetbrains, njs, nuxt, pcss, react, rust, ts, vitest, vue } from '~/Skills'
const technologies = [ts, pcss, vue, react, nuxt, njs, java, rust, vitest, gl, jetbrains] const technologies = [nuxt, ts, pcss, vue, react, njs, vitest, gl, jetbrains]
const skills = [ const skills = [
{ {
@ -52,7 +52,7 @@ const skills = [
text: [ text: [
'Wenn man ein Headless CMS anbinden will, dann verknüpft das Komponenten und APIs.', 'Wenn man ein Headless CMS anbinden will, dann verknüpft das Komponenten und APIs.',
'Für eine saubere und dynamische Einbindung reicht die Library, die euch vom Hersteller zur Verfügung gestellt wird, oft nicht aus.', 'Für eine saubere und dynamische Einbindung reicht die Library, die euch vom Hersteller zur Verfügung gestellt wird, oft nicht aus.',
'Übersichtliche Projektstruktur und saubere Auflösung der Daten - das gibt\'s bei mir.' 'Übersichtliche Projektstruktur und saubere Auflösung der Daten - mit Fusselgarantie.'
], ],
} }
] ]

12
components/Technology.vue
View file

@ -1,7 +1,7 @@
<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="getPixelForSize()" :width="getWidth()" :class="[size]"/> <img loading="lazy" :src="img" :alt="altText()" :height="getPixelForSize()" :width="getWidth()" />
</a> </a>
<img v-else loading="lazy" :height="getPixelForSize()" :width="getWidth()" :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>
@ -14,7 +14,7 @@ type Props = {
name: string name: string
link?: string link?: string
width?: number width?: number
size?: 'm' | 'l' size?: 's' | 'm' | 'l'
} }
const {name, size, width} = withDefaults(defineProps<Props>(), { const {name, size, width} = withDefaults(defineProps<Props>(), {
@ -22,7 +22,13 @@ const {name, size, width} = withDefaults(defineProps<Props>(), {
width: 50, width: 50,
}) })
const sizes = {
s: 15,
m: 30,
l: 50,
}
const altText = () => `Icon für ${name}` const altText = () => `Icon für ${name}`
const getPixelForSize = () => size === 'm' ? 30 : 50 const getPixelForSize = () => sizes[size]
const getWidth = () => width / 50 * getPixelForSize() const getWidth = () => width / 50 * getPixelForSize()
</script> </script>