diff --git a/Globals.css b/Globals.css index ad05479..0ae500e 100644 --- a/Globals.css +++ b/Globals.css @@ -139,6 +139,23 @@ span.highlight { min-height: 100vh; } +.margin-top { + margin-top: 3rem; +} + +.margin-top-big { + margin-top: 6rem; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +.default-gap { + gap: 3rem; +} + .z-0 { box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); } diff --git a/Skills.ts b/Skills.ts new file mode 100644 index 0000000..46d1adf --- /dev/null +++ b/Skills.ts @@ -0,0 +1,54 @@ +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 wpImg = '/img/skills/webpack.svg' +const glImg = '/img/skills/gitlab.svg' +const ghImg = '/img/skills/github.svg' +const jestImg = '/img/skills/jest.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' + +export type ISkill = { + name: string + img: 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 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 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 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 tw: ISkill = {name: 'Tailwind', img: twImg} diff --git a/components/Customers/Customers.css b/components/Customers/Customers.css index d3a7cd7..079598c 100644 --- a/components/Customers/Customers.css +++ b/components/Customers/Customers.css @@ -1,8 +1,7 @@ .Customers { & .customer-list { - margin-top: 3rem; display: flex; - gap: 3rem; + flex-wrap: wrap; & img { height: 50px; @@ -12,4 +11,99 @@ } } } + + & .projects-list { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + + + & > article { + flex-grow: 1; + flex-shrink: 0; + flex-basis: clamp(350px, calc(33% - 3rem), 400px); + height: 350px; + display: grid; + overflow: hidden; + + & .skill { + height: 30px; + } + + & .bg { + padding: 0; + height: 350px; + width: 100%; + + & img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + & > * { + grid-column: 1; + grid-row: 1; + } + + & > div { + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(1px); + transition: var(--transition-time); + height: 100%; + + text-shadow: 0 0 5px rgba(0, 0, 0, .7); + text-align: center; + padding: 1rem; + + & > main { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + + max-height: 6rem; + overflow: hidden; + transition: var(--transition-time); + + & .customer { + font-size: 1rem; + color: var(--color-white-transparent); + } + + & .title { + margin-top: -1rem; + } + + & ul { + display: flex; + gap: 1rem; + justify-content: center; + list-style: none; + } + + & a { + color: var(--color-orange); + + &:hover { + color: var(--color-white); + } + } + } + + &:hover { + backdrop-filter: blur(5px); + + & > main { + max-height: 25rem; + } + } + } + } + } } diff --git a/components/Customers/Customers.vue b/components/Customers/Customers.vue index cf2e4a1..f194de0 100644 --- a/components/Customers/Customers.vue +++ b/components/Customers/Customers.vue @@ -4,15 +4,37 @@

Kunden & Projekte

Meine bisherigen Geschäftpartner

-
+
+

Projektauswahl

+
+
+
+ +
+
+
+ {{ pr.customer }} +

{{ pr.title }}

+
    +
  • + +
    • +
+

{{ d }}

+ Zur Seite +
+
+
+
diff --git a/components/Intro/Intro.css b/components/Intro/Intro.css index f28d4e3..3c628a8 100644 --- a/components/Intro/Intro.css +++ b/components/Intro/Intro.css @@ -3,7 +3,6 @@ background-repeat: no-repeat; display: grid; grid-template-columns: 1fr 1fr; - gap: 3rem; .intro-img { width: 750px; @@ -21,22 +20,9 @@ .intro-text { height: 100%; - display: flex; justify-content: center; - flex-direction: column; z-index: 1; - h2 { - display: flex; - flex-direction: column; - } - - h3, - .fulltext, - .cta { - margin-top: 2rem; - } - .fulltext { color: var(--color-white-transparent); } diff --git a/components/Intro/Intro.vue b/components/Intro/Intro.vue index a839c21..a6fd59d 100644 --- a/components/Intro/Intro.vue +++ b/components/Intro/Intro.vue @@ -1,9 +1,9 @@ + + + + + diff --git a/public/img/skills/html.svg b/public/img/skills/html.svg new file mode 100644 index 0000000..c62fabb --- /dev/null +++ b/public/img/skills/html.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/skills/ie.svg b/public/img/skills/ie.svg new file mode 100644 index 0000000..108213f --- /dev/null +++ b/public/img/skills/ie.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/public/img/skills/jasmine.svg b/public/img/skills/jasmine.svg new file mode 100644 index 0000000..a0dbbd8 --- /dev/null +++ b/public/img/skills/jasmine.svg @@ -0,0 +1,8 @@ + + + + + + + diff --git a/public/img/skills/java.svg b/public/img/skills/java.svg new file mode 100644 index 0000000..dfa38c5 --- /dev/null +++ b/public/img/skills/java.svg @@ -0,0 +1,13 @@ + + + + + + + \ No newline at end of file diff --git a/public/img/skills/javascript.svg b/public/img/skills/javascript.svg new file mode 100644 index 0000000..9218b96 --- /dev/null +++ b/public/img/skills/javascript.svg @@ -0,0 +1,5 @@ + + + + diff --git a/public/img/skills/jest.svg b/public/img/skills/jest.svg new file mode 100644 index 0000000..8efda35 --- /dev/null +++ b/public/img/skills/jest.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/skills/jetbrains.svg b/public/img/skills/jetbrains.svg new file mode 100644 index 0000000..f1c6c5e --- /dev/null +++ b/public/img/skills/jetbrains.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/skills/jira.svg b/public/img/skills/jira.svg new file mode 100644 index 0000000..425970f --- /dev/null +++ b/public/img/skills/jira.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/skills/jquery.png b/public/img/skills/jquery.png new file mode 100644 index 0000000..58c1ead Binary files /dev/null and b/public/img/skills/jquery.png differ diff --git a/public/img/skills/karma.svg b/public/img/skills/karma.svg new file mode 100644 index 0000000..9c46587 --- /dev/null +++ b/public/img/skills/karma.svg @@ -0,0 +1,7 @@ + + + + diff --git a/public/img/skills/material.png b/public/img/skills/material.png new file mode 100644 index 0000000..e7c4a70 Binary files /dev/null and b/public/img/skills/material.png differ diff --git a/public/img/skills/nodejs.svg b/public/img/skills/nodejs.svg new file mode 100644 index 0000000..e1ac7ce --- /dev/null +++ b/public/img/skills/nodejs.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/public/img/skills/nuxt.svg b/public/img/skills/nuxt.svg new file mode 100644 index 0000000..ff4336a --- /dev/null +++ b/public/img/skills/nuxt.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/skills/phaser.png b/public/img/skills/phaser.png new file mode 100644 index 0000000..6dcef8e Binary files /dev/null and b/public/img/skills/phaser.png differ diff --git a/public/img/skills/php.svg b/public/img/skills/php.svg new file mode 100644 index 0000000..40f58d8 --- /dev/null +++ b/public/img/skills/php.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/public/img/skills/postcss.svg b/public/img/skills/postcss.svg new file mode 100644 index 0000000..b19d3d7 --- /dev/null +++ b/public/img/skills/postcss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/skills/protactor.svg b/public/img/skills/protactor.svg new file mode 100644 index 0000000..7554bbb --- /dev/null +++ b/public/img/skills/protactor.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/public/img/skills/react.svg b/public/img/skills/react.svg new file mode 100644 index 0000000..a604a7a --- /dev/null +++ b/public/img/skills/react.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/public/img/skills/sass.svg b/public/img/skills/sass.svg new file mode 100644 index 0000000..681513d --- /dev/null +++ b/public/img/skills/sass.svg @@ -0,0 +1,4 @@ + + + diff --git a/public/img/skills/tw.svg b/public/img/skills/tw.svg new file mode 100644 index 0000000..3a20a9e --- /dev/null +++ b/public/img/skills/tw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/skills/typescript.svg b/public/img/skills/typescript.svg new file mode 100644 index 0000000..3978701 --- /dev/null +++ b/public/img/skills/typescript.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/public/img/skills/unity.png b/public/img/skills/unity.png new file mode 100644 index 0000000..7b31b40 Binary files /dev/null and b/public/img/skills/unity.png differ diff --git a/public/img/skills/vue.svg b/public/img/skills/vue.svg new file mode 100644 index 0000000..6a0ca83 --- /dev/null +++ b/public/img/skills/vue.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/img/skills/webpack.svg b/public/img/skills/webpack.svg new file mode 100644 index 0000000..2ff9c8a --- /dev/null +++ b/public/img/skills/webpack.svg @@ -0,0 +1,7 @@ + + + + +