Generate skill sections

drik98 · Aug 1, 2024 · 1e1403d · 1e1403d
1 parent 05d89fe
commit 1e1403d
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 54 deletions.
diff --git 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
@@ -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/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
   }
 ]