From 43a05ac0e54c39ce363e7e602df68d440ead3a05 Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Fri, 24 Sep 2021 12:07:10 +0000
Subject: [PATCH] Add Skills

---
 content/skills.json         | 115 ++++++++++++++++++++++++++++++++++++
 locales/de/translation.json |   3 +-
 locales/en/translation.json |   3 +-
 src/pages/index.js          |  27 ++++++++-
 src/pages/index.module.scss |  66 +++++++++++++++++++++
 5 files changed, 210 insertions(+), 4 deletions(-)
 create mode 100644 content/skills.json

diff --git a/content/skills.json b/content/skills.json
new file mode 100644
index 0000000..627ee6c
--- /dev/null
+++ b/content/skills.json
@@ -0,0 +1,115 @@
+[
+    {
+        "name": "Gatsby",
+        "href": "https://gatsbyjs.com/",
+        "type": "framework"
+    },
+    {
+        "name": "React",
+        "href": "https://reactjs.org/",
+        "type": "framework"
+    },
+    {
+        "name": "JavaScript",
+        "type": "language"
+    },
+    {
+        "name": "HTML",
+        "type": "language"
+    },
+    {
+        "name": "NodeJS",
+        "href": "https://nodejs.org/",
+        "type": "language"
+    },
+    {
+        "name": "CSS",
+        "type": "language"
+    },
+    {
+        "name": "SCSS / Sass",
+        "href": "https://sass-lang.com/",
+        "type": "language"
+    },
+    {
+        "name": "Java",
+        "type": "language"
+    },
+    {
+        "name": "TypeScript",
+        "href": "https://www.typescriptlang.org/",
+        "type": "language"
+    },
+    {
+        "name": "GoLang",
+        "href": "https://golang.org/",
+        "type": "language"
+    },
+    {
+        "name": "MySQL",
+        "type": "language"
+    },
+    {
+        "name": "Cloudflare Workers",
+        "href": "https://workers.cloudflare.com/",
+        "type": "platform"
+    },
+    {
+        "name": "Cloudflare Pages",
+        "href": "https://pages.cloudflare.com/",
+        "type": "platform"
+    },
+    {
+        "name": "Ubuntu Linux",
+        "href": "https://ubuntu.com/",
+        "type": "os"
+    },
+    {
+        "name": "Manjaro Linux",
+        "href": "https://manjaro.org/",
+        "type": "os"
+    },
+    {
+        "name": "Debian Linux",
+        "href": "https://www.debian.org/",
+        "type": "os"
+    },
+    {
+        "name": "Microsoft Windows",
+        "type": "os"
+    },
+    {
+        "name": "JetBrains IDEs",
+        "href": "https://www.jetbrains.com/",
+        "type": "program"
+    },
+    {
+        "name": "Visual Studio Code",
+        "href": "https://code.visualstudio.com/",
+        "type": "program"
+    },
+    {
+        "name": "Yarn",
+        "href": "https://yarnpkg.com/",
+        "type": "program"
+    },
+    {
+        "name": "NPM",
+        "href": "https://www.npmjs.com/",
+        "type": "program"
+    },
+    {
+        "name": "Docker",
+        "href": "https://www.docker.com/",
+        "type": "program"
+    },
+    {
+        "name": "LibreOffice",
+        "href": "https://libreoffice.org/",
+        "type": "program"
+    },
+    {
+        "name": "Microsoft Office",
+        "type": "program"
+    }
+]
\ No newline at end of file
diff --git a/locales/de/translation.json b/locales/de/translation.json
index e4a022d..f45cf08 100644
--- a/locales/de/translation.json
+++ b/locales/de/translation.json
@@ -31,5 +31,6 @@
     "seeMore": "Mehr erkunden",
     "donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
     "donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
-    "sponsorGitHub": "Über GitHub unterstützen"
+    "sponsorGitHub": "Über GitHub unterstützen",
+    "mySkills": "Meine Fähigkeiten"
 }
diff --git a/locales/en/translation.json b/locales/en/translation.json
index a98a643..d90b5be 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -31,5 +31,6 @@
     "seeMore": "See more",
     "donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!",
     "donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
-    "sponsorGitHub": "Sponsor using GitHub"
+    "sponsorGitHub": "Sponsor using GitHub",
+    "mySkills": "My Skills"
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index d9816db..e33997d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -27,6 +27,13 @@ export const query = graphql`
                 contactMastodonHref
             }
         }
+        allSkillsJson(sort: {fields: type, order: ASC}) {
+            nodes {
+                name
+                type
+                href
+            }
+        }
         allProjectsJson(
             filter: { lang: { eq: $language }, featured: { gte: 0 } }
             sort: { fields: featured, order: ASC }
@@ -179,9 +186,25 @@ const IndexPage = (props) => {
                     </div>
                 </div>
             </section>
-            <section className="aboutSection">
+            <section className={styles.aboutSection}>
                 <article>
-                    <MDXRenderer>{file.childMdx.body}</MDXRenderer>
+                    <div className={styles.aboutText}>
+                        <MDXRenderer>{file.childMdx.body}</MDXRenderer>
+                    </div>
+                    <div className={styles.skills}>
+                        <h2><Trans>mySkills</Trans></h2>
+                        <div className={styles.skillList}>
+                            {
+                                props.data.allSkillsJson.nodes.map((skill) => {
+                                    return (
+                                        skill.href ? 
+                                        <a className={styles.skill + " " + styles["skill_"+skill.type]} href={skill.href} target="_blank" rel="noreferrer">{skill.name}</a> : 
+                                        <span className={styles.skill + " " + styles["skill_"+skill.type]}>{skill.name}</span>
+                                    )
+                                })
+                            }
+                        </div>
+                    </div>
                 </article>
             </section>
             <a
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 42d8fb7..056bd11 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -191,3 +191,69 @@
     margin-top: 40px;
     padding: 10px 20px;
 }
+
+.aboutSection {
+    > article {
+        display: flex;
+        align-items: center;
+
+        > div {
+            width: calc(50% - 40px);
+            flex-shrink: 0;
+        }
+
+        .aboutText {
+            margin-right: 20px;
+        }
+
+        .skills {
+            margin-left: 20px;
+
+            .skillList {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+
+                .skill {
+                    border: thin solid currentColor;
+                    border-radius: 100px;
+                    padding: 5px 10px;
+                    margin: 5px;
+
+                    &.skill_framework {
+                        color: #e52b3e;
+                    }
+
+                    &.skill_language {
+                        color: #6848da;
+                    }
+
+                    &.skill_platform {
+                        color: #e5752b;
+                    }
+
+                    &.skill_os {
+                        color: #2b66e5;
+                    }
+
+                    &.skill_program {
+                        color: #18bb20;
+                    }
+                }
+            }
+        }
+        
+        @media(max-width: 900px) {
+            flex-direction: column;
+
+            > div {
+                width: 100%;
+            }
+
+            .skills, .aboutText {
+                margin-left: 0;
+                margin-right: 0;
+            }
+        }
+    }
+}