From bd945e1ea960e6becb216830ba483472b3098400 Mon Sep 17 00:00:00 2001 From: webfussel Date: Fri, 24 May 2024 09:01:22 +0200 Subject: [PATCH] ADD: optimize images --- Skills.ts | 42 ++++++------ components/Customers/Customers.vue | 22 +++---- components/Intro/Intro.css | 8 +++ components/Intro/Intro.vue | 5 +- components/Services/Services.vue | 8 +-- public/img/customers/bounce.png | Bin 164257 -> 0 bytes public/img/customers/bounce.webp | Bin 0 -> 4172 bytes public/img/customers/dekra.png | Bin 34854 -> 0 bytes public/img/customers/dekra.webp | Bin 0 -> 1728 bytes public/img/customers/einsundeins.png | Bin 10979 -> 0 bytes public/img/customers/einsundeins.webp | Bin 0 -> 1384 bytes public/img/customers/gmx.png | Bin 65841 -> 0 bytes public/img/customers/gmx.webp | Bin 0 -> 3376 bytes public/img/customers/koerrie.webp | Bin 153790 -> 1734 bytes public/img/customers/pembe.svg | 11 ---- public/img/customers/pembe.webp | Bin 0 -> 720 bytes public/img/customers/sae.png | Bin 8097 -> 0 bytes public/img/customers/sae.webp | Bin 0 -> 1250 bytes public/img/customers/webde.png | Bin 11654 -> 0 bytes public/img/customers/webde.webp | Bin 0 -> 1846 bytes public/img/network/maria.webp | Bin 0 -> 8074 bytes public/img/network/matthias.jpg | Bin 102311 -> 0 bytes public/img/network/matthias.webp | Bin 0 -> 12354 bytes public/img/network/maximilian.webp | Bin 0 -> 6308 bytes public/img/network/robert.jpg | Bin 233026 -> 0 bytes public/img/network/robert.webp | Bin 0 -> 9034 bytes public/{profile.webp => img/profile_big.webp} | Bin public/img/profile_small.webp | Bin 0 -> 94492 bytes public/img/projects/bounce.jpg | Bin 89576 -> 0 bytes public/img/projects/bounce.webp | Bin 0 -> 45454 bytes public/img/projects/dekra.png | Bin 1386089 -> 0 bytes public/img/projects/dekra.webp | Bin 0 -> 59390 bytes public/img/projects/education.jpg | Bin 189620 -> 0 bytes public/img/projects/education.webp | Bin 0 -> 39882 bytes public/img/projects/krrie.webp | Bin 50816 -> 54532 bytes public/img/projects/pp.webp | Bin 36900 -> 30588 bytes public/img/projects/shnaik.webp | Bin 5960 -> 4726 bytes public/img/projects/twitsplit.webp | Bin 32688 -> 0 bytes public/img/projects/uitools.png | Bin 137778 -> 0 bytes public/img/projects/uitools.webp | Bin 0 -> 11158 bytes public/img/projects/webde.webp | Bin 49752 -> 51874 bytes public/img/projects/worldgen.webp | Bin 88036 -> 82326 bytes public/img/skills/angular.svg | 7 -- public/img/skills/angular.webp | Bin 0 -> 1724 bytes public/img/skills/aseprite.png | Bin 3591 -> 0 bytes public/img/skills/aseprite.webp | Bin 0 -> 1218 bytes public/img/skills/cs.svg | 15 ----- public/img/skills/cs.webp | Bin 0 -> 1846 bytes public/img/skills/css.svg | 1 - public/img/skills/css.webp | Bin 0 -> 1466 bytes public/img/skills/gitlab.svg | 11 ---- public/img/skills/gitlab.webp | Bin 0 -> 1886 bytes public/img/skills/gulp.svg | 10 --- public/img/skills/html.svg | 1 - public/img/skills/html.webp | Bin 0 -> 1398 bytes public/img/skills/ie.svg | 4 -- public/img/skills/jasmine.svg | 8 --- public/img/skills/java.svg | 13 ---- public/img/skills/java.webp | Bin 0 -> 1372 bytes public/img/skills/javascript.svg | 5 -- public/img/skills/javascript.webp | Bin 0 -> 1118 bytes public/img/skills/jest.svg | 16 ----- public/img/skills/jetbrains.svg | 1 - public/img/skills/jetbrains.webp | Bin 0 -> 1626 bytes public/img/skills/karma.svg | 7 -- public/img/skills/nodejs.svg | 7 -- public/img/skills/nodejs.webp | Bin 0 -> 1390 bytes public/img/skills/nuxt.svg | 3 - public/img/skills/nuxt.webp | Bin 0 -> 1544 bytes public/img/skills/phaser.png | Bin 9506 -> 0 bytes public/img/skills/phaser.webp | Bin 0 -> 3936 bytes public/img/skills/php.svg | 8 --- public/img/skills/postcss.svg | 1 - public/img/skills/postcss.webp | Bin 0 -> 2046 bytes public/img/skills/protactor.svg | 8 --- public/img/skills/react.svg | 11 ---- public/img/skills/react.webp | Bin 0 -> 2568 bytes public/img/skills/rust.svg | 61 ------------------ public/img/skills/rust.webp | Bin 0 -> 884 bytes public/img/skills/sass.svg | 4 -- public/img/skills/sass.webp | Bin 0 -> 1884 bytes public/img/skills/tw.svg | 1 - public/img/skills/tw.webp | Bin 0 -> 1524 bytes public/img/skills/typescript.svg | 6 -- public/img/skills/typescript.webp | Bin 0 -> 1040 bytes public/img/skills/unity.png | Bin 8056 -> 0 bytes public/img/skills/unity.webp | Bin 0 -> 1280 bytes public/img/skills/vitest.svg | 5 -- public/img/skills/vitest.webp | Bin 0 -> 1284 bytes public/img/skills/vue.svg | 4 -- public/img/skills/vue.webp | Bin 0 -> 1254 bytes 91 files changed, 48 insertions(+), 266 deletions(-) delete mode 100644 public/img/customers/bounce.png create mode 100644 public/img/customers/bounce.webp delete mode 100644 public/img/customers/dekra.png create mode 100644 public/img/customers/dekra.webp delete mode 100644 public/img/customers/einsundeins.png create mode 100644 public/img/customers/einsundeins.webp delete mode 100644 public/img/customers/gmx.png create mode 100644 public/img/customers/gmx.webp delete mode 100644 public/img/customers/pembe.svg create mode 100644 public/img/customers/pembe.webp delete mode 100644 public/img/customers/sae.png create mode 100644 public/img/customers/sae.webp delete mode 100644 public/img/customers/webde.png create mode 100644 public/img/customers/webde.webp create mode 100644 public/img/network/maria.webp delete mode 100644 public/img/network/matthias.jpg create mode 100644 public/img/network/matthias.webp create mode 100644 public/img/network/maximilian.webp delete mode 100644 public/img/network/robert.jpg create mode 100644 public/img/network/robert.webp rename public/{profile.webp => img/profile_big.webp} (100%) create mode 100644 public/img/profile_small.webp delete mode 100644 public/img/projects/bounce.jpg create mode 100644 public/img/projects/bounce.webp delete mode 100644 public/img/projects/dekra.png create mode 100644 public/img/projects/dekra.webp delete mode 100644 public/img/projects/education.jpg create mode 100644 public/img/projects/education.webp delete mode 100644 public/img/projects/twitsplit.webp delete mode 100644 public/img/projects/uitools.png create mode 100644 public/img/projects/uitools.webp delete mode 100644 public/img/skills/angular.svg create mode 100644 public/img/skills/angular.webp delete mode 100644 public/img/skills/aseprite.png create mode 100644 public/img/skills/aseprite.webp delete mode 100644 public/img/skills/cs.svg create mode 100644 public/img/skills/cs.webp delete mode 100644 public/img/skills/css.svg create mode 100644 public/img/skills/css.webp delete mode 100644 public/img/skills/gitlab.svg create mode 100644 public/img/skills/gitlab.webp delete mode 100644 public/img/skills/gulp.svg delete mode 100644 public/img/skills/html.svg create mode 100644 public/img/skills/html.webp delete mode 100644 public/img/skills/ie.svg delete mode 100644 public/img/skills/jasmine.svg delete mode 100644 public/img/skills/java.svg create mode 100644 public/img/skills/java.webp delete mode 100644 public/img/skills/javascript.svg create mode 100644 public/img/skills/javascript.webp delete mode 100644 public/img/skills/jest.svg delete mode 100644 public/img/skills/jetbrains.svg create mode 100644 public/img/skills/jetbrains.webp delete mode 100644 public/img/skills/karma.svg delete mode 100644 public/img/skills/nodejs.svg create mode 100644 public/img/skills/nodejs.webp delete mode 100644 public/img/skills/nuxt.svg create mode 100644 public/img/skills/nuxt.webp delete mode 100644 public/img/skills/phaser.png create mode 100644 public/img/skills/phaser.webp delete mode 100644 public/img/skills/php.svg delete mode 100644 public/img/skills/postcss.svg create mode 100644 public/img/skills/postcss.webp delete mode 100644 public/img/skills/protactor.svg delete mode 100644 public/img/skills/react.svg create mode 100644 public/img/skills/react.webp delete mode 100644 public/img/skills/rust.svg create mode 100644 public/img/skills/rust.webp delete mode 100644 public/img/skills/sass.svg create mode 100644 public/img/skills/sass.webp delete mode 100644 public/img/skills/tw.svg create mode 100644 public/img/skills/tw.webp delete mode 100644 public/img/skills/typescript.svg create mode 100644 public/img/skills/typescript.webp delete mode 100644 public/img/skills/unity.png create mode 100644 public/img/skills/unity.webp delete mode 100644 public/img/skills/vitest.svg create mode 100644 public/img/skills/vitest.webp delete mode 100644 public/img/skills/vue.svg create mode 100644 public/img/skills/vue.webp 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 @@