diff --git a/app/assets/css/customers.css b/app/assets/css/customers.css index 4f3373b..330d753 100755 --- a/app/assets/css/customers.css +++ b/app/assets/css/customers.css @@ -17,88 +17,6 @@ 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; - - & .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.88); - 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 { - gap: 1rem; - justify-content: center; - } - - & a { - color: var(--color-orange); - - &:hover { - color: var(--color-white); - } - } - } - - &:hover { - backdrop-filter: blur(5px); - - & > main { - max-height: 25rem; - } - } - } - } } } diff --git a/app/assets/css/project.css b/app/assets/css/project.css index 8d32cb8..d64ae40 100644 --- a/app/assets/css/project.css +++ b/app/assets/css/project.css @@ -1,3 +1,80 @@ .Project { + flex-grow: 1; + flex-shrink: 0; + flex-basis: clamp(350px, calc(33% - 3rem), 400px); + height: 350px; + display: grid; + overflow: hidden; + & .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.88); + 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 { + gap: 1rem; + justify-content: center; + } + + & a { + color: var(--color-orange); + + &:hover { + color: var(--color-white); + } + } + } + + &:hover { + backdrop-filter: blur(5px); + + & > main { + max-height: 25rem; + } + } + } } \ No newline at end of file diff --git a/app/components/Project.vue b/app/components/Project.vue index 6d64dc7..cc44a5d 100644 --- a/app/components/Project.vue +++ b/app/components/Project.vue @@ -1,6 +1,21 @@ @@ -11,7 +26,10 @@ type Props = { img : string company : string title : string + desc : string[] link ?: string tech : Skill[] } + +defineProps() \ No newline at end of file diff --git a/app/components/Section/Customers.vue b/app/components/Section/Customers.vue index a1b0337..851eac3 100755 --- a/app/components/Section/Customers.vue +++ b/app/components/Section/Customers.vue @@ -15,24 +15,7 @@

Projektauswahl

- +
@@ -103,113 +86,79 @@ const customers = [ ] const projects = [ - // { - // title: 'Kauft Körrie! App', - // customer: 'KVK Berlin', - // image: '/img/projects/koerrie_app.webp', - // desc: [ - // 'Entwicklung einer Android Info-App für die Gewürzmischungen "Körrie" und passendem Zubehör.', - // 'Zusätzlich die Übertragung des Körrie-O-Mat von der Landingpage in die App mit Ergebnisverlauf.', - // ], - // technologies: [flutter, dart, android], - // link: 'https://play.google.com/store/apps/details?id=com.koerrieomat&hl=de', - // type: 'App', - // }, { title: 'ProPapier', - customer: 'webfussel', - image: '/img/projects/propapier.webp', + company: 'webfussel', + img: 'propapier', desc: [ 'Klopapier-Preise einfach vergleichen.', 'Zahlst du zu viel für\'s Papier?', ], - technologies: [nuxt, ts, pcss], + tech: [nuxt, ts, pcss], link: 'https://pro-papier.de', }, { title: 'Unterricht', - customer: 'SAE Institute Germany', - image: '/img/projects/education.webp', + company: 'SAE Institute Germany', + img: 'education', desc: [ 'Vorbereitung und Durchführung von Unterricht in JavaScript und TypeScript.', ], - technologies: [js, ts] + tech: [js, ts] }, { title: 'Headless CMS & Cache', - customer: 'DEKRA', - image: '/img/projects/dekra.webp', + company: 'DEKRA', + img: 'dekra', desc: [ 'Anbindung an ein Headless CMS und Entwicklung der dazugehörigen Komponentenbibliothek unter Einsatz von Tailwind, sowie serverseitiges Caching.', ], - technologies: [ts, nuxt, tw, njs] + tech: [ts, nuxt, tw, njs] }, { title: 'Bounce Script', - customer: 'Bounce Commerce', + company: 'Bounce Commerce', link: 'https://bounce-commerce.de', - image: '/img/projects/bounce.webp', + img: 'bounce', desc: [ 'Script zum Einbinden in Web Shops für Bounce Management.', 'Pures JavaScript, so klein gehalten wie möglich zur einfach Integration.', ], - technologies: [js] + tech: [js] }, { title: 'WEB.DE / GMX', - customer: '1&1 Mail & Media', + company: '1&1 Mail & Media', link: 'https://web.de', - image: '/img/projects/webde.webp', + img: 'webde', desc: [ 'Neubau der Seiten web.de und GMX mit einem komponentenbasierten Ansatz unter Verwendung von VueJS.', 'Optimiert für moderne Browser, während Internet Explorer in einer Extraversion angefertigt wurde.', ], - technologies: [js, vue, scss] + tech: [js, vue, scss] }, { title: 'Körrie! Landingpage', - customer: 'KVK Berlin', + company: 'KVK Berlin', link: 'https://körrie.de', - image: '/img/projects/krrie.webp', + img: 'krrie', desc: [ 'Neubau der Landingpage für "Kauft Körrie!". Die Prämisse war: Kein Schnickschnack.', 'Deshalb aufgebaut mit simplem Js, HTML und CSS', ], - technologies: [html, css, js], + tech: [html, css, js], }, { title: 'UI Tools', - customer: 'webfussel', + company: 'webfussel', link: 'https://uitools.webfussel.de', - image: '/img/projects/uitools.webp', + img: 'uitools', desc: [ 'Eine kleine Sammlung an Tools für die Erstellung von UIs.', 'Farbpalette, Kontraste und CSS Variablen.', 'Ist in aktiver Entwicklung.', ], - technologies: [nuxt, ts, pcss] + tech: [nuxt, ts, pcss] }, - // { - // customer: 'webfussel', - // title: 'Shnaik - Teh Gaem', - // link: 'https://shnaik.webfussel.de', - // image: '/img/projects/shnaik.webp', - // desc: [ - // 'Nachbau des bekannten Spiels "Snake" für die damaligen Nokia Handys.', - // 'Meine erste Erfahrung mit Gaming Libraries und wurde eher als Experiment und Zeitvertreib angefertigt.', - // ], - // technologies: [ts, css] - // }, - // { - // title: 'PixelPalette', - // customer: 'webfussel', - // link: 'https://pixelpalette.webfussel.de', - // image: '/img/projects/pp.webp', - // desc: [ - // 'Ich hatte einige Tage eine Idee, wie man Grafiken mit 4 Farben - angelehnt den Gameboy - komprimieren und im Speicher unterbringen kann.', - // 'Prototypisch zum Spaß erstellt.', - // ], - // technologies: [js, html, css] - // }, ]