ADD: project component

Finish Project component

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;
-                    }
-                }
-            }
-        }
     }
 }
 

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;
+            }
+        }
+    }
 }

app/components/Project.vue

@@ -1,6 +1,21 @@
 <template>
   <article class="Project">
-
+    <div class="bg">
+      <img height="350" width="400" loading="lazy" :alt="title" :src="`/img/projects/${img}.webp`" aria-hidden="true"/>
+    </div>
+    <div>
+      <main>
+        <small class="customer">{{ company }}</small>
+        <h3 class="title">{{ title }}</h3>
+        <ul>
+          <li v-for="skill in tech">
+            <Technology v-bind="skill" link="" />
+          </li>
+        </ul>
+        <p v-for="d in desc">{{ d }}</p>
+        <a v-if="link" :href="link" target="_blank">Zur Seite</a>
+      </main>
+    </div>
   </article>
 </template>
 
@@ -11,7 +26,10 @@ type Props = {
   img : string
   company : string
   title : string
+  desc : string[]
   link ?: string
   tech : Skill[]
 }
+
+defineProps<Props>()
 </script>

app/components/Section/Customers.vue

@@ -15,24 +15,7 @@
     </div>
     <h2 class="margin-top-big">Projektauswahl</h2>
     <div class="projects-list margin-top">
-        <article v-for="pr in projects">
+      <Project v-for="pr in projects" v-bind="pr" />
-          <div class="bg">
-            <img height="350" width="400" loading="lazy" :alt="pr.title" :src="pr.image" aria-hidden="true"/>
-          </div>
-          <div>
-            <main>
-              <small class="customer">{{ pr.customer }}</small>
-              <h3 class="title">{{ pr.title }}</h3>
-              <ul>
-                <li v-for="skill in pr.technologies">
-                  <Technology v-bind="skill" link="" />
-                </li>
-              </ul>
-              <p v-for="d in pr.desc">{{ d }}</p>
-              <a v-if="pr.link" :href="pr.link" target="_blank">Zur {{pr.type ?? 'Seite'}}</a>
-            </main>
-          </div>
-        </article>
     </div>
   </section>
 </template>
@@ -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',
+    company: 'webfussel',
-    image: '/img/projects/propapier.webp',
+    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',
+    company: 'SAE Institute Germany',
-    image: '/img/projects/education.webp',
+    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',
+    company: 'DEKRA',
-    image: '/img/projects/dekra.webp',
+    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]
-  // },
 ]
 </script>