diff --git a/Skills.ts b/Skills.ts index 3659fbf..0a6b4ce 100644 --- a/Skills.ts +++ b/Skills.ts @@ -1,24 +1,24 @@ -const jsImg = '/img/skills/javascript.svg' -const tsImg = '/img/skills/typescript.svg' -const vueImg = '/img/skills/vue.svg' -const reactImg = '/img/skills/react.svg' -const postCssImg = '/img/skills/postcss.svg' -const scssImg = '/img/skills/sass.svg' -const cssImg = '/img/skills/css.svg' -const htmlImg = '/img/skills/html.svg' -const phaserImg = '/img/skills/phaser.png' -const unityImg = '/img/skills/unity.png' -const csImg = '/img/skills/cs.svg' -const aseImg = '/img/skills/aseprite.png' -const glImg = '/img/skills/gitlab.svg' -const vitestImg = '/img/skills/vitest.svg' -const njsImg = '/img/skills/nodejs.svg' -const ngImg = '/img/skills/angular.svg' -const javaImg = '/img/skills/java.svg' -const jetbrainsImg = '/img/skills/jetbrains.svg' -const nuxtImg = '/img/skills/nuxt.svg' -const twImg = '/img/skills/tw.svg' -const rustImg = '/img/skills/rust.svg' +const jsImg = '/img/skills/javascript.webp' +const tsImg = '/img/skills/typescript.webp' +const vueImg = '/img/skills/vue.webp' +const reactImg = '/img/skills/react.webp' +const postCssImg = '/img/skills/postcss.webp' +const scssImg = '/img/skills/sass.webp' +const cssImg = '/img/skills/css.webp' +const htmlImg = '/img/skills/html.webp' +const phaserImg = '/img/skills/phaser.webp' +const unityImg = '/img/skills/unity.webp' +const csImg = '/img/skills/cs.webp' +const aseImg = '/img/skills/aseprite.webp' +const glImg = '/img/skills/gitlab.webp' +const vitestImg = '/img/skills/vitest.webp' +const njsImg = '/img/skills/nodejs.webp' +const ngImg = '/img/skills/angular.webp' +const javaImg = '/img/skills/java.webp' +const jetbrainsImg = '/img/skills/jetbrains.webp' +const nuxtImg = '/img/skills/nuxt.webp' +const twImg = '/img/skills/tw.webp' +const rustImg = '/img/skills/rust.webp' export type ISkill = { name: string diff --git a/components/Customers/Customers.vue b/components/Customers/Customers.vue index bfc2ecf..645fc9a 100644 --- a/components/Customers/Customers.vue +++ b/components/Customers/Customers.vue @@ -39,25 +39,25 @@ import { ase, cs, css, html, js, ng, njs, nuxt, phaser, scss, ts, tw, unity, vue const customers = [ { name: 'Dekra', - logo: '/img/customers/dekra.png', + logo: '/img/customers/dekra.webp', link: 'https://dekra.de' }, { name: 'Bounce Commerce', - logo: '/img/customers/bounce.png', + logo: '/img/customers/bounce.webp', link: 'https://bounce-commerce.de', white: true, }, { name: 'GMX', - logo: '/img/customers/gmx.png', + logo: '/img/customers/gmx.webp', link: 'https://gmx.net', white: true, }, { name: 'WEB.DE', - logo: '/img/customers/webde.png', + logo: '/img/customers/webde.webp', link: 'https://web.de', }, { name: '1&1', - logo: '/img/customers/einsundeins.png', + logo: '/img/customers/einsundeins.webp', link: 'https://1und1.de', }, { name: 'Körrie', @@ -65,12 +65,12 @@ const customers = [ link: 'https://körrie.de', }, { name: 'Pembe', - logo: '/img/customers/pembe.svg', + logo: '/img/customers/pembe.webp', link: 'https://pembe.io', white: true, }, { name: 'SAE Institute Germany', - logo: '/img/customers/sae.png', + logo: '/img/customers/sae.webp', link: 'https://www.sae.edu/deu/en/sae-home/', white: true, } @@ -80,7 +80,7 @@ const projects = [ { title: 'Unterricht', customer: 'SAE Institute Germany', - image: '/img/projects/education.jpg', + image: '/img/projects/education.webp', desc: [ 'Vorbereitung und Durchführung von Unterricht in JavaScript und TypeScript.', ], @@ -89,7 +89,7 @@ const projects = [ title: 'Headless CMS & Cache', customer: 'Dekra', link: 'https://dekra.de', - image: '/img/projects/dekra.png', + image: '/img/projects/dekra.webp', desc: [ 'Anbindung an ein Headless CMS und Entwicklung der dazugehörigen Komponentenbibliothek, sowie Serverseitiges Caching.', ], @@ -99,7 +99,7 @@ const projects = [ title: 'Bounce Script', customer: 'Bounce Commerce', link: 'https://bounce-commerce.de', - image: '/img/projects/bounce.jpg', + image: '/img/projects/bounce.webp', desc: [ 'Script zum Einbinden in Web Shops für Bounce Management.', 'Pures JavaScript, so klein gehalten wie möglich zur einfach Integration.', @@ -131,7 +131,7 @@ const projects = [ title: 'UI Tools', customer: 'webfussel', link: 'https://uitools.webfussel.de', - image: '/img/projects/uitools.png', + image: '/img/projects/uitools.webp', desc: [ 'Eine kleine Sammlung an Tools für die Erstellung von UIs:', 'Farbpalette, Kontraste und CSS Variablen.', diff --git a/components/Intro/Intro.css b/components/Intro/Intro.css index 5277080..2fc7d0b 100644 --- a/components/Intro/Intro.css +++ b/components/Intro/Intro.css @@ -29,6 +29,14 @@ } } +@media (width <= 430px) { + .Intro { + .intro-img{ + width: 430px; + } + } +} + @media (width < 900px) { .Intro { grid-template-columns: 1fr; diff --git a/components/Intro/Intro.vue b/components/Intro/Intro.vue index ee41242..94e62e0 100644 --- a/components/Intro/Intro.vue +++ b/components/Intro/Intro.vue @@ -24,7 +24,10 @@