From 335b0cb8e423e99e56a3254371acd9ece02e2a54 Mon Sep 17 00:00:00 2001
From: Hendrik Schmitz <hendrikschmitz306@gmail.com>
Date: Thu, 1 Aug 2024 13:32:20 +0200
Subject: [PATCH] Generate skill sections

---
 app/[locale]/page.tsx         |   2 +-
 components/Skills.tsx         |  19 ++++-
 content/skill-categories.json |  51 +++++++++++++
 content/skills.json           | 134 ++++++++++++++++++++++------------
 cv/generate-tex-files.ts      |  41 +++++++++--
 5 files changed, 193 insertions(+), 54 deletions(-)
 create mode 100644 content/skill-categories.json

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 69fdbb14f1..0e718398f0 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -37,7 +37,7 @@ export default async function Home({
       <Experience messages={messages} locale={params.locale} />
       <Education messages={messages} locale={params.locale} />
       <Projects messages={messages} locale={params.locale} />
-      <Skills messages={messages} />
+      <Skills messages={messages} locale={params.locale} />
       <Contact messages={messages} />
       <Footer />
     </>
diff --git a/components/Skills.tsx b/components/Skills.tsx
index 0c6ecef90b..6406f8ab5c 100644
--- a/components/Skills.tsx
+++ b/components/Skills.tsx
@@ -1,10 +1,23 @@
 import rawSkills from "@/content/skills.json";
-import { Messages } from "@/util/i18n";
+import categories from "@/content/skill-categories.json";
+import { Locale, Messages, getMultilingualContent } from "@/util/i18n";
 import styles from "./Skills.module.scss";
 
-const skills = rawSkills.map((skill) => skill.name).sort();
+export default function Skills({
+  messages,
+  locale,
+}: {
+  messages: Messages;
+  locale: Locale;
+}) {
+  const displayedSkillCategories = Object.entries(categories)
+    .filter(([id, category]) => category.displayOnWebpage)
+    .map(([id]) => id);
+  const skills = rawSkills
+    .filter((skill) => displayedSkillCategories.includes(skill.category))
+    .map((skill) => getMultilingualContent(skill.name, locale))
+    .sort();
 
-export default function Skills({ messages }: { messages: Messages }) {
   return (
     <div id="skills" className={styles.skills}>
       <h2 className="heading">{messages.header.sections.skills}</h2>
diff --git a/content/skill-categories.json b/content/skill-categories.json
new file mode 100644
index 0000000000..51c19966c3
--- /dev/null
+++ b/content/skill-categories.json
@@ -0,0 +1,51 @@
+{
+    "languages": {
+        "label": {
+            "de": "Sprachen",
+            "en": "Languages"
+        },
+        "displayOnWebpage": false
+    },
+    "programming-languages": {
+        "label": {
+            "de": "Programmiersprachen",
+            "en": "Programming languages"
+        },
+        "displayOnWebpage": true
+    },
+    "frameworks-technologies": {
+        "label": {
+            "de": "Frameworks & Technologien",
+            "en": "Frameworks & Technologies"
+        },
+        "displayOnWebpage": true
+    },
+    "build-tools": {
+        "label": {
+            "de": "Build tools",
+            "en": "Build tools"
+        },
+        "displayOnWebpage": true
+    },
+    "infrastructure": {
+        "label": {
+            "de": "DevOps",
+            "en": "DevOps"
+        },
+        "displayOnWebpage": true
+    },
+    "quality-assurance": {
+        "label": {
+            "de": "Qualitätssicherung",
+            "en": "Quality Assurance"
+        },
+        "displayOnWebpage": true
+    },
+    "programming-concepts": {
+        "label": {
+            "de": "Programmierkonzepte",
+            "en": "Programming concepts"
+        },
+        "displayOnWebpage": true
+    }
+}
\ No newline at end of file
diff --git a/content/skills.json b/content/skills.json
index 5207d98e22..098070d4ca 100644
--- a/content/skills.json
+++ b/content/skills.json
@@ -2,201 +2,245 @@
   {
     "category": "infrastructure",
     "name": "CI/CD",
-    "level": 0
+    "level": 5
   },
   {
     "category": "programming-languages",
-    "name": "CSS/SCSS",
-    "level": 0
+    "name": "CSS",
+    "level": 5.5
+  },
+  {
+    "category": "programming-languages",
+    "name": "SCSS",
+    "level": 5.5,
+    "groupWith": "CSS"
   },
   {
     "category": "infrastructure",
     "name": "Docker",
-    "level": 0
+    "level": 4.5
   },
   {
     "category": "quality-assurance",
     "name": "E2E-Testing",
-    "level": 0
+    "level": 4.5
   },
   {
     "category": "frameworks-technologies",
     "name": "Gatsby.js",
-    "level": 0
+    "level": 4,
+    "hideOnCv": true
   },
   {
     "category": "build-tools",
     "name": "Gradle",
-    "level": 0
+    "level": 4.5
   },
   {
     "category": "frameworks-technologies",
     "name": "Gridsome",
-    "level": 0
+    "level": 4,
+    "hideOnCv": true
   },
   {
     "category": "frameworks-technologies",
     "name": "Hibernate",
-    "level": 0
+    "level": 4.5
   },
   {
     "category": "programming-languages",
     "name": "HTML",
-    "level": 0
+    "level": 5.5
+  },
+  {
+    "category": "programming-languages",
+    "name": "Shell",
+    "level": 4
   },
   {
     "category": "quality-assurance",
     "name": "Integration testing",
-    "level": 0
+    "level": 5
   },
   {
     "category": "quality-assurance",
     "name": "Jasmine",
-    "level": 0
+    "level": 5.5
   },
   {
     "category": "quality-assurance",
     "name": "Jest",
-    "level": 0
+    "level": 5.5,
+    "groupWith": "Jasmine"
   },
   {
     "category": "programming-languages",
     "name": "Java",
-    "level": 0
+    "level": 5.5
   },
   {
     "category": "programming-languages",
     "name": "Kotlin",
-    "level": 0
+    "level": 5.5,
+    "groupWith": "Java"
   },
   {
     "category": "programming-languages",
     "name": "Javascript",
-    "level": 0
+    "level": 6
   },
   {
     "category": "frameworks-technologies",
     "name": "JPA",
-    "level": 0
+    "level": 4.5,
+    "hideOnCv": true
   },
   {
     "category": "quality-assurance",
     "name": "Unit testing",
-    "level": 0
+    "level": 6
   },
   {
     "category": "programming-languages",
     "name": "Typescript",
-    "level": 0
+    "groupWith": "Javascript",
+    "level": 6
   },
   {
     "category": "infrastructure",
     "name": "Kubernetes",
-    "level": 0
+    "level": 4,
+    "groupWith": "Docker"
   },
   {
     "category": "infrastructure",
     "name": "Linux",
-    "level": 0
+    "level": 4,
+    "hideOnCv": true
   },
   {
     "category": "frameworks-technologies",
     "name": "Liquibase",
-    "level": 0
+    "level": 2,
+    "hideOnCv": true
   },
   {
     "category": "build-tools",
     "name": "Maven",
-    "level": 0
+    "level": 5.5
   },
   {
     "category": "programming-concepts",
     "name": "Micro services",
-    "level": 0
+    "level": 5
   },
   {
     "category": "programming-concepts",
     "name": "Test-driven development",
-    "level": 0
+    "level": 5.5
   },
   {
     "category": "infrastructure",
     "name": "Netlify",
-    "level": 0
+    "level": 5,
+    "hideOnCv": true
   },
   {
     "category": "frameworks-technologies",
     "name": "Next.js",
-    "level": 0
+    "level": 3.5,
+    "hideOnCv": true
   },
   {
     "category": "frameworks-technologies",
     "name": "Nuxt",
-    "level": 0
+    "level": 4.5,
+    "hideOnCv": true
   },
   {
     "category": "quality-assurance",
     "name": "Playwright",
-    "level": 0
-  },
-  {
-    "category": "frameworks-technologies",
-    "name": "PostgreSQL",
-    "level": 0
+    "level": 4.5
   },
   {
     "category": "programming-concepts",
     "name": "Process Mining",
-    "level": 0
+    "level": 0,
+    "hideOnCv": true
   },
   {
     "category": "programming-languages",
     "name": "Python",
-    "level": 0
+    "level": 4
   },
   {
     "category": "frameworks-technologies",
     "name": "Quarkus",
-    "level": 0
+    "groupWith": "Spring",
+    "level": 5.5
   },
   {
     "category": "frameworks-technologies",
     "name": "React",
-    "level": 0
+    "level": 4
   },
   {
     "category": "programming-concepts",
     "name": "REST",
-    "level": 0
+    "level": 5.5
   },
   {
     "category": "frameworks-technologies",
     "name": "Spring",
-    "level": 0
+    "level": 5
   },
   {
     "category": "programming-languages",
     "name": "SQL",
-    "level": 0
+    "level": 4.5
   },
   {
     "category": "build-tools",
     "name": "vite",
-    "level": 0
+    "level": 6
   },
   {
     "category": "build-tools",
     "name": "Webpack",
-    "level": 0
+    "level": 5.5
   },
   {
     "category": "quality-assurance",
     "name": "vitest",
-    "level": 0
+    "level": 6
   },
   {
     "category": "frameworks-technologies",
     "name": "vue.js",
-    "level": 0
+    "level": 6
+  },
+  {
+    "category": "languages",
+    "name": {
+      "de": "Deutsch (Muttersprache)",
+      "en": "German (Native)"
+    },
+    "level": 6
+  },
+  {
+    "category": "languages",
+    "name": {
+      "de": "Englisch (Verhandlungssicher)",
+      "en": "English (Mastery)"
+    },
+    "level": 5
+  },
+  {
+    "category": "languages",
+    "name": {
+      "de": "Französisch (Konversationssicher)",
+      "en": "French (Intermediate)"
+    },
+    "level": 3.5
   }
 ]
\ No newline at end of file
diff --git a/cv/generate-tex-files.ts b/cv/generate-tex-files.ts
index 0fbcb2480f..452a765bac 100644
--- a/cv/generate-tex-files.ts
+++ b/cv/generate-tex-files.ts
@@ -2,9 +2,13 @@ import fs from 'fs';
 import about from "@/content/about.json"
 import experience from "@/content/experience.json" 
 import education from "@/content/education.json"
+import skills from "@/content/skills.json";
+import categories from "@/content/skill-categories.json";
 import { formatDateRangeCV } from '@/util/date-time';
 import { Locale, getMessages, getMultilingualContent, supportedLocales } from '@/util/i18n';
 
+const displayedSkills = skills.filter(skill => !skill.hideOnCv);
+
 for(const locale of supportedLocales) {
   generateTemplate(locale);
 }
@@ -15,6 +19,31 @@ async function generateTemplate(locale: Locale) {
   const birthday = new Intl.DateTimeFormat(locale, {
     dateStyle: "long"
   }).format(new Date(about.birthday));
+
+  const skillCategories = Object.entries(categories)
+    .map(([id, category]) => {
+      return {
+        ...category,
+        id,
+        label: getMultilingualContent(category.label, locale),
+        skills: displayedSkills.filter(skill => skill.category === id && !skill.groupWith).map(skill => {
+          const name = getMultilingualContent(skill.name,locale);
+          const groupedSkills = displayedSkills.filter(otherSkill => otherSkill.groupWith === name);
+          return {
+            ...skill,
+            label: [name,...groupedSkills.map(groupedSkill => getMultilingualContent(groupedSkill.name,locale))].join("\\char`\\/")
+          }
+        })
+      }
+    })
+
+    const [firstCategory, secondCategory, ...otherCategories] = skillCategories;
+
+    const makeCustomSkills = (skillCategory: typeof firstCategory) => {
+      const sortedSkills = skillCategory.skills.sort((a,b) => a.level - b.level)
+      return String.raw`\customskills{${skillCategory.label}}{${sortedSkills.map(skill => `${skill.label}/${skill.level}`)}}{}`;
+    }
+
   
   const localizedTemplate = String.raw`
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@ -92,9 +121,9 @@ async function generateTemplate(locale: Locale) {
     %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
     %%%%%%Skill bar section, each skill must have a value between 0 an 6 (float)%%%%%%%
     %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-    \customskills{Sprachen}{{Französisch (Konversationssicher)/3.5},{Englisch (Verhandlungssicher)/5},{Deutsch (Muttersprache)/6}}{}
+    ${makeCustomSkills(firstCategory)}
     
-    \customskills{Programmiersprachen}{{Shell/4},{Python/4},{Java\char${"`"}\/Kotlin/5.5},{CSS\char${"`"}\/SCSS/5.5},{JavaScript\char${"`"}\/Typescript/6}}{Skala: 0 (Grundkenntnisse) - 6 (Experte)}
+    ${makeCustomSkills(secondCategory)}
     
     \makefootersidenodevfill
     
@@ -141,9 +170,9 @@ ${getMultilingualContent(exp.keyPoints, locale).map(item =>
     %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
     %%%%%%Skill bar section, each skill must have a value between 0 an 6 (float)%%%%%%%
     %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-    \customskills{Frameworks \& Technologien}{{React/4},{Docker\char${"`"}\/Kubernetes/4},{Nuxt/4.5},{CI\char${"`"}\/CD/5},{Quarkus\char${"`"}\/Spring/5.5},{Vue.js/6}}{}
-
-    \customskills{Agile Entwicklung}{{Product Owner/2},{Kanban/3},{Scrum Master/4},{Scrum/5}}{Skala: 0 (Grundkenntnisse) - 6 (Experte)}
+${otherCategories.map(category => 
+`    ${makeCustomSkills(category)}`
+).join("\n")}
 
     \makefooterprofile{}
     
@@ -183,3 +212,5 @@ try {
   console.error('Error writing file: ' + filePath, err);
 }
 }
+
+