From 1c86f3569ea584624a3e7883694c50d9756b3863 Mon Sep 17 00:00:00 2001 From: webfussel Date: Wed, 22 May 2024 08:02:36 +0200 Subject: [PATCH] ADD: Technologies --- Globals.css | 7 ++- Skills.ts | 33 ++++++--------- components/Customers/Customers.css | 3 -- components/Customers/Customers.vue | 2 +- components/Header/Header.css | 2 - components/Services/Services.css | 1 - components/Skills/Skills.vue | 13 ++++++ components/Technology/Technology.css | 10 +++++ components/Technology/Technology.vue | 21 +++++++++ public/img/network/matthias.jpg | Bin 0 -> 102311 bytes public/img/skills/bootstrap.svg | 7 --- public/img/skills/fontawesome.png | Bin 6774 -> 0 bytes public/img/skills/github.svg | 7 --- public/img/skills/jira.svg | 1 - public/img/skills/jquery.png | Bin 7027 -> 0 bytes public/img/skills/material.png | Bin 15448 -> 0 bytes public/img/skills/rust.svg | 61 +++++++++++++++++++++++++++ public/img/skills/vitest.svg | 5 +++ public/img/skills/webpack.svg | 7 --- 19 files changed, 131 insertions(+), 49 deletions(-) create mode 100644 components/Technology/Technology.css create mode 100644 components/Technology/Technology.vue create mode 100644 public/img/network/matthias.jpg delete mode 100644 public/img/skills/bootstrap.svg delete mode 100644 public/img/skills/fontawesome.png delete mode 100644 public/img/skills/github.svg delete mode 100644 public/img/skills/jira.svg delete mode 100644 public/img/skills/jquery.png delete mode 100644 public/img/skills/material.png create mode 100644 public/img/skills/rust.svg create mode 100644 public/img/skills/vitest.svg delete mode 100644 public/img/skills/webpack.svg diff --git a/Globals.css b/Globals.css index d0e1b48..5eed569 100644 --- a/Globals.css +++ b/Globals.css @@ -89,7 +89,7 @@ body { html { scroll-behavior: smooth; - scrollbar-gutter: stable both-edges; + scrollbar-gutter: stable; overflow-y: auto; overflow-x: hidden; @@ -123,6 +123,11 @@ a { transition: var(--transition-time); } +ul { + list-style: none; + display: flex; +} + span.highlight { color: var(--color-orange); } diff --git a/Skills.ts b/Skills.ts index 46d1adf..df7f400 100644 --- a/Skills.ts +++ b/Skills.ts @@ -10,29 +10,27 @@ 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 wpImg = '/img/skills/webpack.svg' const glImg = '/img/skills/gitlab.svg' -const ghImg = '/img/skills/github.svg' -const jestImg = '/img/skills/jest.svg' +const vitestImg = '/img/skills/vitest.svg' const njsImg = '/img/skills/nodejs.svg' -const jqImg = '/img/skills/jquery.png' const ngImg = '/img/skills/angular.svg' const javaImg = '/img/skills/java.svg' -const jiraImg = '/img/skills/jira.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' export type ISkill = { name: string img: string + link ?: string } export const js: ISkill = {name: 'JavaScript', img: jsImg} -export const ts: ISkill = {name: 'TypeScript', img: tsImg} -export const vue: ISkill = {name: 'Vuejs', img: vueImg} -export const react: ISkill = {name: 'React', img: reactImg} -export const pcss: ISkill = {name: 'PostCSS', img: postCssImg} +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} @@ -40,15 +38,12 @@ export const phaser: ISkill = {name: 'Phaser 3', img: phaserImg} export const unity: ISkill = {name: 'Unity 3D', img: unityImg} export const cs: ISkill = {name: 'c sharp', img: csImg} export const ase: ISkill = {name: 'Aseprite', img: aseImg} -export const wp: ISkill = {name: 'webpack', img: wpImg} -export const gl: ISkill = {name: 'GitLab', img: glImg} -export const gh: ISkill = {name: 'GitHub', img: ghImg} -export const jest: ISkill = {name: 'Jest', img: jestImg} -export const njs: ISkill = {name: 'Nodejs', img: njsImg} -export const jq: ISkill = {name: 'jQuery', img: jqImg} +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} -export const jira: ISkill = {name: 'Jira', img: jiraImg} -export const jetbrains: ISkill = {name: 'JetBrains IDEs', img: jetbrainsImg} -export const nuxt: ISkill = {name: 'Nuxt', img: nuxtImg} +export const java: ISkill = {name: 'Java', img: javaImg, link: 'https://www.java.com/de/'} +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} diff --git a/components/Customers/Customers.css b/components/Customers/Customers.css index c82b98a..4de18a4 100644 --- a/components/Customers/Customers.css +++ b/components/Customers/Customers.css @@ -28,7 +28,6 @@ overflow: hidden; & .skill { - height: 30px; } & .bg { @@ -81,10 +80,8 @@ } & ul { - display: flex; gap: 1rem; justify-content: center; - list-style: none; } & a { diff --git a/components/Customers/Customers.vue b/components/Customers/Customers.vue index 1fb7550..bfc2ecf 100644 --- a/components/Customers/Customers.vue +++ b/components/Customers/Customers.vue @@ -21,7 +21,7 @@

{{ pr.title }}

{{ d }}

diff --git a/components/Header/Header.css b/components/Header/Header.css index d205af8..292c8e4 100644 --- a/components/Header/Header.css +++ b/components/Header/Header.css @@ -128,8 +128,6 @@ } & ul { - display: flex; - list-style: none; gap: var(--spacing-standard); transform: scale(1); diff --git a/components/Services/Services.css b/components/Services/Services.css index c82fa96..6be666c 100644 --- a/components/Services/Services.css +++ b/components/Services/Services.css @@ -25,7 +25,6 @@ } & ul { - list-style: none; gap: 1rem; & li { diff --git a/components/Skills/Skills.vue b/components/Skills/Skills.vue index 779dd26..4645991 100644 --- a/components/Skills/Skills.vue +++ b/components/Skills/Skills.vue @@ -12,6 +12,14 @@ +
+

Technologien

+ +

Du brauchst was davon? Kein Ding.