From c871d962b5a3ffa6664f736663febfcf72127cfa Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Thu, 27 Oct 2022 09:01:52 +0200
Subject: [PATCH] Styling complete

---
 data/skills.tsx                 | 38 +++++++++++++++++++++++++++------
 pages/me.tsx                    |  1 -
 styles/Blog/AboutMe.module.scss |  8 ++++++-
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/data/skills.tsx b/data/skills.tsx
index 2b42181..010aee6 100644
--- a/data/skills.tsx
+++ b/data/skills.tsx
@@ -80,11 +80,16 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
                 icon: <Icon path={mdiLanguageCsharp} size={sizeCardIcons} />,
                 pct: 40
             }],
-            /*colors: {
-                background: "#690000",
-                bars: "#fff",
-                heading: "#fff"
-            }*/
+            colors: {
+                background: "#C3A3F7",
+                bars: "#8771AB",
+                heading: "#55476B",
+                useDarkColor: true,
+                badges: {
+                    background: "#55476B",
+                    useDarkColor: false,
+                }
+            }
         }, {
             title: "Web Technologies",
             skillBars: [{
@@ -164,7 +169,17 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
             }, {
                 name: "Android",
                 icon: <Android size={sizeBadgeIcons} />
-            }]
+            }],
+            colors: {
+                background: "#4DEB8C",
+                bars: "#38AB66",
+                heading: "#236B40",
+                useDarkColor: true,
+                badges: {
+                    background: "#236B40",
+                    useDarkColor: false
+                }
+            }
         }, {
             title: "Languages",
             skillBars: [{
@@ -180,7 +195,16 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
                 icon: <Icon path={mdiTranslateVariant} size={sizeCardIcons} />,
                 pct: 30
             }],
-            additional: []
+            colors: {
+                background: "#EB783F",
+                bars: "#AB582E",
+                heading: "#6B371D",
+                useDarkColor: true,
+                badges: {
+                    background: "#6B371D",
+                    useDarkColor: false,
+                }
+            }
         }]
     };
 };
diff --git a/pages/me.tsx b/pages/me.tsx
index 69d74f4..55b1e24 100644
--- a/pages/me.tsx
+++ b/pages/me.tsx
@@ -1,6 +1,5 @@
 import type { NextPage } from "next";
 import { useEffect } from "react";
-import Color from "color";
 import Layout from "../components/Blog/Layout";
 
 import styles from "../styles/Blog/AboutMe.module.scss";
diff --git a/styles/Blog/AboutMe.module.scss b/styles/Blog/AboutMe.module.scss
index 13e2ddb..be690e2 100644
--- a/styles/Blog/AboutMe.module.scss
+++ b/styles/Blog/AboutMe.module.scss
@@ -46,6 +46,11 @@
     padding: 5px;
     background: var(--badge-bg, transparent);
     color: var(--badge-color, inherit);
+    margin-right: 10px;
+
+    &:last-of-type {
+        margin-right: 0;
+    }
 
     & > span {
         align-self: center;
@@ -69,6 +74,7 @@
     padding: 10px;
     border: 1px solid var(--blog_content-border);
     border-radius: 0.5em;
+    box-shadow: 2px 2px 5px 0px var(--blog_color);
 
     margin-bottom: 20px;
 
@@ -107,7 +113,7 @@
 
     & > div:nth-of-type(3) {
         text-align: center;
-        margin-top: -5px;
+        margin-top: -2px;
         font-size: small;
     }