ADD: projects

Globals.css

@@ -42,7 +42,7 @@
     --radius-standard: 4px;
 
     --color-white: #ecf0f1;
-    --color-white-transparent: rgba(236, 240, 241, 0.8);
+    --color-white-transparent: rgba(236, 240, 241, 0.7);
 
     --color-black: #2a2723;
     --color-black-transparent: #2a2723aa;

components/Customers/Customers.vue

@@ -80,7 +80,6 @@ const projects = [
   {
     title: 'Unterricht',
     customer: 'SAE Institute Germany',
-    link: 'https://www.sae.edu/deu/en/sae-home/',
     image: '/img/projects/education.jpg',
     desc: [
       'Vorbereitung und Durchführung von Unterricht in JavaScript und TypeScript.',

components/Intro/Intro.css

@@ -24,7 +24,7 @@
         z-index: 1;
 
         .fulltext {
-            color: var(--color-white-transparent);
+            color: var(--color-white);
         }
     }
 }

components/Services/Services.css

@@ -7,37 +7,68 @@
         display: flex;
         flex-wrap: wrap;
         align-items: stretch;
-    }
 
-    & article {
+        & article {
-        flex-grow: 1;
+            flex-grow: 1;
-        flex-shrink: 0;
+            flex-shrink: 0;
-        flex-basis: clamp(400px, calc(33% - 3rem), 500px);
+            flex-basis: clamp(400px, calc(33% - 3rem), 500px);
-        position: relative;
+            position: relative;
 
-        & .chip {
+            & .chip {
-            position: absolute;
+                position: absolute;
-            right: -1rem;
+                right: -1rem;
-            top: calc(-1rem - 3px);
+                top: calc(-1rem - 3px);
-        }
+            }
 
-        & header {
+            & header {
-            display: flex;
-        }
-
-        & ul {
-            list-style: none;
-            gap: 1rem;
-
-            & li {
                 display: flex;
-                align-items: center;
+            }
+
+            & ul {
+                list-style: none;
                 gap: 1rem;
+
+                & li {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                }
+            }
+
+            & .extra {
+                margin-top: auto;
             }
         }
+    }
 
-        & .extra {
+    .network-list {
-            margin-top: auto;
+        & article {
+            width: clamp(400px, calc(33% - 3rem), 500px);
+            align-items: center;
+            gap: 1rem;
+
+            & img {
+                border: 4px solid var(--color-orange);
+                border-radius: 50%;
+                width: 150px;
+            }
+
+            & main {
+                margin-top: -1rem;
+            }
+
+            & span {
+                font-family: 'Roboto Condensed', sans-serif;
+                font-weight: bold;
+
+                &:not(:last-child):after {
+                    content: " | "
+                }
+            }
+
+            & p {
+                text-align: center;
+            }
         }
     }
 }

components/Services/Services.vue

@@ -4,8 +4,8 @@
   <section id="services" class="Services content">
     <h2>Services.</h2>
     <h3>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h3>
-    <p class="margin-top">Hinter meinen Angeboten gibt es keinerlei Abos oder versteckte Kosten. Aus Transparenzgründen sei
+    <p class="margin-top">Hinter meinen Angeboten gibt es <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
-      aber gesagt, dass sich alle Preise <span class="highlight">zzgl. 19% Umsatzsteuer</span> verstehen.</p>
+      Aus Transparenzgründen sei aber gesagt, dass sich alle Preise zzgl. 19% Umsatzsteuer verstehen.</p>
     <div class="service-list margin-top default-gap">
       <article v-for="service in services" class="z-2 card flex-col default-gap">
         <h3 class="flex-col default-gap">
@@ -21,15 +21,20 @@
             <span>{{point}}</span>
           </li>
         </ul>
-        <div class="extra flex-col">
-          <small v-for="extra in service.extra">* {{ extra }}</small>
-        </div>
       </article>
     </div>
     <h3 class="margin-top-big">Mein Netzwerk</h3>
     <p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge! Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen!</p>
-    <div class="network-list">
+    <div class="network-list margin-top">
-
+      <article v-for="person in network" class="flex-col">
+        <img :src="person.img" :alt="`Bild von ${person.name}`" />
+        <h3>{{person.name}}</h3>
+        <main>
+          <span v-for="tag in person.tags">{{tag}}</span>
+        </main>
+        <p>{{person.flavour}}</p>
+        <Button :href="person.link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" />
+      </article>
     </div>
   </section>
 </template>
@@ -40,7 +45,7 @@ import check from 'iconoir/icons/regular/double-check.svg'
 const services = [
   {
     title: 'Bug Research',
-    price: '149 € / Einmalig',
+    price: '99 € / Einmalig',
     availability: 'Frei',
     smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
     button: 'Jetzt untersuchen lassen',
@@ -48,10 +53,21 @@ const services = [
       'Untersuchung des Source Code',
       'Konkrete Behebungsempfehlung',
       'Ergebnisse in spätestens 7 Tagen',
+      'Fix problemlos anschließend buchen'
+    ],
+  }, {
+    title: 'Projektbuchung',
+    price: 'ab 999 € je nach Umfang',
+    availability: '3 Slots Frei',
+    smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
+    button: 'Jetzt durchstarten',
+    list: [
+      'Aufstellung der Anforderungen',
+      'Untersuchung geeigneter Technologien',
+      'Regelmäßige Projektupdates',
+      'Fixe Kosten und Featuresets',
+      'Nur 50% Projektpreis als Anzahlung'
     ],
-    extra: [
-      'Behebung je nach Schwere gegen Aufpreis möglich'
-    ]
   }, {
     title: 'Stundenbuchung',
     availability: 'Frei ab 16.12.24',
@@ -59,30 +75,22 @@ const services = [
     smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
     button: 'Jetzt buchen',
     list: [
+      'Flexible Aufgabenverteilung',
       'Arbeiten nach agilen Prinzipien',
-      'Teilnahme an agilen Meetings',
       'Monatliche Rechnungsstellung',
       'Kündigungsfrist von einer Woche',
+      'Ab 80 Stunden flexibel buchbar',
     ],
-    extra: [
+  }
-      'Mindestabnahme 160 Stunden'
+]
-    ]
+
-  }, {
+const network = [
-    title: 'Projektbuchung',
+  {
-    price: 'ab 5.499 € je nach Umfang',
+    name: 'Robert Janus',
-    availability: '3 Slots Frei',
+    img: '/img/network/robert.jpg',
-    smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
+    tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
-    button: 'Jetzt durchstarten',
+    flavour: 'Professionell und entspannt. Hat immer ein offenes Ohr und schnelle Reaktionszeiten.',
-    list: [
+    link: 'https://roberjanus.de/webertoire',
-      'Aufstellung der Anforderungen',
-      'Untersuchung geeigneter Technologien',
-      'Regelmäßiger Austausch',
-      'Klare Kostenübersicht'
-    ],
-    extra: [
-      'Anzahlung 50% des Projektpreises',
-      'Enddatum je nach Umfang'
-    ]
   }
 ]
 </script>