Styling complete

data/skills.tsx

@@ -80,11 +80,16 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
                 icon: <Icon path={mdiLanguageCsharp} size={sizeCardIcons} />,
                 pct: 40
             }],
-            /*colors: {
+            colors: {
-                background: "#690000",
+                background: "#C3A3F7",
-                bars: "#fff",
+                bars: "#8771AB",
-                heading: "#fff"
+                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,
+                }
+            }
         }]
     };
 };

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

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