From d280515d1e9a51d13d3817a0c22231926c9d44ef Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Thu, 20 Oct 2022 23:43:44 +0200
Subject: [PATCH] some badge styling

---
 data/skills.tsx                 | 54 ++++++++++++++++-----------------
 pages/me.tsx                    |  8 +++--
 styles/Blog/AboutMe.module.scss | 14 +++++++++
 3 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/data/skills.tsx b/data/skills.tsx
index 344686c..c951d0c 100644
--- a/data/skills.tsx
+++ b/data/skills.tsx
@@ -24,120 +24,120 @@ export interface SkillSet {
     additional?: AdditionalSkill[];
 }
 
-export const skills = (size?: string): SkillSet => {
+export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSet => {
     return {
         cards: [{
             title: "Programming Languages",
             skillBars: [{
                 name: "TypeScript",
-                icon: <Icon path={mdiLanguageTypescript} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons || "2em"} />,
                 pct: 100
             }, {
                 name: "JavaScript",
-                icon: <Icon path={mdiLanguageJavascript} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons || "2em"} />,
                 pct: 100
             }, {
                 name: "Java",
-                icon: <Icon path={mdiLanguageJava} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguageJava} size={sizeCardIcons || "2em"} />,
                 pct: 80
             }, {
                 name: "Python 3",
-                icon: <Icon path={mdiLanguagePython} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguagePython} size={sizeCardIcons || "2em"} />,
                 pct: 95
             }, {
                 name: "PHP",
-                icon: <Icon path={mdiLanguagePhp} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguagePhp} size={sizeCardIcons || "2em"} />,
                 pct: 50
             }, {
                 name: "Bash",
-                icon: <Icon path={mdiBash} size={size || "2em"} />,
+                icon: <Icon path={mdiBash} size={sizeCardIcons || "2em"} />,
                 pct: 60
             }, {
                 name: "C/C++",
-                icon: <Icon path={mdiLanguageCpp} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons || "2em"} />,
                 pct: 60
             }, {
                 name: "Rust",
-                icon: <Icon path={mdiLanguageRust} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguageRust} size={sizeCardIcons || "2em"} />,
                 pct: 80
             }, {
                 name: "C#",
-                icon: <Icon path={mdiLanguageCsharp} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguageCsharp} size={sizeCardIcons || "2em"} />,
                 pct: 40
             }]
         }, {
             title: "Web Technologies",
             skillBars: [{
                 name: "TypeScript",
-                icon: <Icon path={mdiLanguageTypescript} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons || "2em"} />,
                 pct: 100
             }, {
                 name: "JavaScript",
-                icon: <Icon path={mdiLanguageJavascript} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons || "2em"} />,
                 pct: 100
             }, {
                 name: "React",
-                icon: <Icon path={mdiReact} size={size || "2em"} />,
+                icon: <Icon path={mdiReact} size={sizeCardIcons || "2em"} />,
                 pct: 80
             }, {
                 name: "HTML5",
-                icon: <Html5 size={size || "2em"} />,
+                icon: <Html5 size={sizeCardIcons || "2em"} />,
                 pct: 80
             }, {
                 name: "CSS3",
-                icon: <CssThree size={size || "2em"} />,
+                icon: <CssThree size={sizeCardIcons || "2em"} />,
                 pct: 90
             }],
             additional: [{
                 name: "Express",
-                icon: <Express size={size || "2em"} />
+                icon: <Express size={sizeBadgeIcons || "1em"} />
             }, {
                 name: "Sass",
-                icon: <Sass size={size || "2em"} />
+                icon: <Sass size={sizeBadgeIcons || "1em"} />
             }, {
                 name: "Spring Boot",
-                icon: <Springboot size={size || "2em"} />
+                icon: <Springboot size={sizeBadgeIcons || "1em"} />
             }]
         }, {
             title: "Embedded Programming",
             skillBars: [{
                 name: "C/C++",
-                icon: <Icon path={mdiLanguageCpp} size={size || "2em"} />,
+                icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons || "2em"} />,
                 pct: 60
             }],
             additional: [{
                 name: "Arduino",
-                icon: <Arduino size={size || "2em"} />
+                icon: <Arduino size={sizeBadgeIcons || "1em"} />
             }, {
                 name: "ESP",
-                icon: <Espressif size={size || "2em"} />
+                icon: <Espressif size={sizeBadgeIcons || "1em"} />
             }]
         }, {
             title: "Operating Systems",
             skillBars: [],
             additional: [{
                 name: "Windows",
-                icon: <Windows size={size || "2em"} />
+                icon: <Windows size={sizeBadgeIcons || "1em"} />
             }, {
                 name: "Linux",
-                icon: <Linux size={size || "2em"} />
+                icon: <Linux size={sizeBadgeIcons || "1em"} />
             }, {
                 name: "Android",
-                icon: <Android size={size || "2em"} />
+                icon: <Android size={sizeBadgeIcons || "1em"} />
             }]
         }, {
             title: "Languages",
             skillBars: [{
                 name: "German (native)",
-                icon: <span style={{ fontSize: size || "2em" }}>🇩🇪</span>,
+                icon: <span style={{ fontSize: sizeCardIcons || "2em" }}>🇩🇪</span>,
                 pct: 100
             }, {
                 name: "English (C1)",
-                icon: <span style={{ fontSize: size || "2em" }}>🇬🇧</span>,
+                icon: <span style={{ fontSize: sizeCardIcons || "2em" }}>🇬🇧</span>,
                 pct: 90
             }, {
                 name: "Russian (basics)",
-                icon: <span style={{ fontSize: size || "2em", fontFamily: "Arial" }}>🇷🇺</span>,
+                icon: <span style={{ fontSize: sizeCardIcons || "2em", fontFamily: "Arial" }}>🇷🇺</span>,
                 pct: 30
             }],
             additional: []
diff --git a/pages/me.tsx b/pages/me.tsx
index ac2f797..9b0a4ee 100644
--- a/pages/me.tsx
+++ b/pages/me.tsx
@@ -25,10 +25,14 @@ const SkillBar: NextPage<{ skill: Skill }> = ({ skill }) => {
 const SkillCard: NextPage<{ card: SkillCard }> = ({ card }) => {
     return <div className={styles.card}>
     <h3>{card.title}</h3>
+    <div className={styles.skillBarsSet}>
     {card.skillBars.sort((bar1, bar2) => bar2.pct - bar1.pct).map((skill, i) =>
         <SkillBar key={i} skill={skill} />
-    )}<br/>
-    {card.additional?.map((skill, i) => <Badge additional={skill} key={i} />)}
+    )}
+    </div><br />
+    <div className={styles.badgeSet}>
+        {card.additional?.map((skill, i) => <Badge additional={skill} key={i} />)}
+    </div>
 </div>;
 };
 
diff --git a/styles/Blog/AboutMe.module.scss b/styles/Blog/AboutMe.module.scss
index 90045ff..413742c 100644
--- a/styles/Blog/AboutMe.module.scss
+++ b/styles/Blog/AboutMe.module.scss
@@ -20,6 +20,20 @@
     }
 }
 
+.badgeSet {
+    display: flex;
+    flex-direction: row;
+}
+
+.badge {
+    display: grid;
+    grid-template-columns: 1em auto;
+    column-gap: 5px;
+    border: 1px solid var(--blog_content-border);
+    border-radius: 0.5em;
+    padding: 5px;
+}
+
 @keyframes barFill {
     0% {
         width: 1em;