From 8d282499bde3d256f3b549ee32f1c2307ac078a3 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Mon, 20 May 2024 21:10:23 +0200
Subject: [PATCH] ADD: Skills

---
 Globals.css                  | 18 ++++++++++----
 app.vue                      |  1 +
 components/Header/Header.css | 27 +++++----------------
 components/Header/Header.vue |  4 ++--
 components/Intro/Intro.css   |  2 +-
 components/Intro/Intro.vue   |  2 +-
 components/Skills/Skills.css | 32 +++++++++++++++++++++++++
 components/Skills/Skills.vue | 46 ++++++++++++++++++++++++++++++++++++
 8 files changed, 103 insertions(+), 29 deletions(-)
 create mode 100644 components/Skills/Skills.css
 create mode 100644 components/Skills/Skills.vue

diff --git a/Globals.css b/Globals.css
index 6081c86..acae070 100644
--- a/Globals.css
+++ b/Globals.css
@@ -7,8 +7,8 @@
 }
 
 ::selection {
-    background: #6c5ce7;
-    color: #dfe6e9;
+    background: var(--color-orange);
+    color: var(--color-black);
 }
 
 ::-webkit-scrollbar {
@@ -37,15 +37,18 @@
 }
 
 :root {
-    --spacing-standard: 25px;
+    --spacing-standard: 3rem;
     --transition-time: 250ms;
     --radius-standard: 4px;
 
     --color-white: #ecf0f1;
     --color-white-transparent: rgba(236, 240, 241, 0.8);
+
     --color-black: #2a2723;
+    --color-black-transparent: #2a2723aa;
 
     --color-orange: #ff9100;
+    --color-orange-black: #332b22;
 
     --color-red: #822419;
     --color-green: #236b40;
@@ -104,6 +107,10 @@ h1, h2, h3, h4, h5, h6 {
     font-family: 'Roboto Condensed', sans-serif;
 }
 
+h2 {
+    font-size: 4rem;
+}
+
 h3 {
     font-size: 1.5rem;
 }
@@ -117,7 +124,6 @@ a {
 .content {
     position: relative;
     z-index: 100;
-    min-height: 100vh;
     padding: 150px 15vw;
 
     & h2 {
@@ -125,6 +131,10 @@ a {
     }
 }
 
+.full {
+    min-height: 100vh;
+}
+
 .z-0 {
     box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
 }
diff --git a/app.vue b/app.vue
index b9e4ab4..d9d995a 100644
--- a/app.vue
+++ b/app.vue
@@ -4,6 +4,7 @@
   <div>
     <Header />
     <Intro />
+    <Skills />
   </div>
 </template>
 <script setup lang="ts">
diff --git a/components/Header/Header.css b/components/Header/Header.css
index 38179dc..960d977 100644
--- a/components/Header/Header.css
+++ b/components/Header/Header.css
@@ -32,11 +32,11 @@
     }
 
     & h1 {
+        flex: 2;
         cursor: default;
         display: flex;
         align-items: center;
         gap: 1rem;
-        flex: 4;
 
         & svg {
             --size: 40px;
@@ -46,7 +46,7 @@
     }
 
     & nav {
-        flex: 5;
+        flex: 3;
         position: relative;
         font-weight: normal;
         font-size: 1.2rem;
@@ -119,15 +119,9 @@
         }
     }
 
-    &.sticks {
-        --color-burger: var(--color-black);
-        --color-link: var(--color-black);
-        --color-header: var(--color-black);
-
-        & > .wrapper {
-            background: var(--color-white-transparent);
-            border-radius: 20px;
-        }
+    &.sticks > .wrapper {
+        background: var(--color-black-transparent);
+        border-radius: 20px;
     }
 
     & input[type="checkbox"] {
@@ -164,17 +158,8 @@
 
 
 
-@media screen and (width < 990px) {
+@media screen and (width < 1180px) {
     .Header {
-        & .wrapper {
-            background: var(--color-black);
-            border-radius: 15px;
-
-            & > label > span {
-                color: var(--color-black);
-            }
-        }
-
         & > .wrapper.wrapper > label {
             display: block;
         }
diff --git a/components/Header/Header.vue b/components/Header/Header.vue
index 17407a3..3a127d8 100644
--- a/components/Header/Header.vue
+++ b/components/Header/Header.vue
@@ -61,8 +61,8 @@ const burgerLabel = computed(() => isBurgerOpen.value ? burgerCloseLabel : burge
 
 const nav = [
   {
-    href: '#about',
-    label: 'About',
+    href: '#intro',
+    label: 'Über mich',
     'aria-label': 'Link dieser Seite: About'
   }, {
     href: '#customers',
diff --git a/components/Intro/Intro.css b/components/Intro/Intro.css
index 30ec6bd..0308be7 100644
--- a/components/Intro/Intro.css
+++ b/components/Intro/Intro.css
@@ -7,6 +7,7 @@
 
     .intro-img {
         width: 750px;
+        display: flex;
         position: absolute;
         bottom: 0;
         right: 0;
@@ -32,7 +33,6 @@
         h2 {
             display: flex;
             flex-direction: column;
-            font-size: 4rem;
         }
 
         h3,
diff --git a/components/Intro/Intro.vue b/components/Intro/Intro.vue
index 1b03b7d..a839c21 100644
--- a/components/Intro/Intro.vue
+++ b/components/Intro/Intro.vue
@@ -1,7 +1,7 @@
 <style scoped src="./Intro.css"/>
 
 <template>
-  <section class="Intro content">
+  <section id="intro" class="Intro content full">
     <div class="intro-text">
       <h2>
         <span class="greeting">Moin.</span>
diff --git a/components/Skills/Skills.css b/components/Skills/Skills.css
new file mode 100644
index 0000000..6b3f619
--- /dev/null
+++ b/components/Skills/Skills.css
@@ -0,0 +1,32 @@
+.Skills {
+    background: var(--color-orange-black);
+    background-image: radial-gradient(circle at 90vw 0, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
+    background-repeat: no-repeat;
+
+    & .skills-wrapper {
+        margin-top: 3rem;
+        display: flex;
+        gap: 3rem;
+    }
+
+    & article {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        padding: 2rem;
+        background: var(--color-black);
+        border-radius: 20px;
+
+        & p:last-of-type {
+            margin-top: 2rem;
+        }
+    }
+
+    & .bottom {
+        margin-top: 3rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 3rem;
+    }
+}
diff --git a/components/Skills/Skills.vue b/components/Skills/Skills.vue
new file mode 100644
index 0000000..f4f4e18
--- /dev/null
+++ b/components/Skills/Skills.vue
@@ -0,0 +1,46 @@
+<style scoped src="./Skills.css"/>
+
+<template>
+  <section class="Skills content">
+    <h2>Meine Expertise.</h2>
+    <div class="skills-wrapper">
+      <article class="z-2" v-for="skill in skills">
+        <h3>{{skill.title}}</h3>
+        <main>
+          <p v-for="t in skill.text">{{t}}</p>
+        </main>
+      </article>
+    </div>
+    <div class="bottom">
+      <h3>Du brauchst was davon? Kein Ding.</h3>
+      <Button class="cta" label="Lass mal reden" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const skills = [
+  {
+    title: 'Komponenten',
+    text: [
+      'Komponenten sind die Teile in deiner Applikation, die alles ansehnlich machen.',
+      'Mit sauber implementierten, responsiven Bausteinen kannst du deine Seite gut Strukturieren, Daten sauber darstellen und den User einspannen.',
+      'Vom kleinen Button bis hin zur Umfangreichen Tabelle bau ich dir (fast) alles.'
+    ],
+  }, {
+    title: 'APIs',
+    text: [
+      'Du hast Daten in einer Datenbank liegen, aber keine Ahnung, wie du da gescheit rankommen sollst?',
+      'Liegen deine Daten eventuell sogar verstreut an mehreren Orten, über Datenbanken, Dateien und anderen Storagemöglichkeiten verteilt?',
+      'Kein Ding. Ich bau dir eine Schnittstelle, die alles easy zusammenträgt.'
+    ],
+  }, {
+    title: 'Headless CMS Anbindung',
+    text: [
+      'Wenn man ein Headless CMS anbinden will, dann verknüpft das Komponenten und APIs.',
+      'Für eine saubere und dynamische Einbindung reicht die Library, die euch vom Hersteller zur Verfügung gestellt wird, oft nicht aus.',
+      'Übersichtliche Projektstruktur und saubere Auflösung der Daten - das gibt\'s bei mir.'
+    ],
+  }
+]
+</script>