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: , 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: - }] + }], + 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: , 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; }