💫 improve badges display and source

Author: ad2ien

content/it-xp/2025-04-04-main-skills.md

@@ -0,0 +1,62 @@
+[
+  {
+    "logo": "openjdk",
+    "name": "Java",
+    "color": "black",
+    "category": "dev"
+  },
+  {
+    "logo": "python",
+    "name": "Python",
+    "color": "3776AB",
+    "category": "dev"
+  },
+  {
+    "logo": "go",
+    "name": "Golang",
+    "color": "black",
+    "category": "dev"
+  },
+  {
+    "logo": "typescript",
+    "name": "Typescript",
+    "color": "3776AB",
+    "category": "dev"
+  },
+  {
+    "logo": "linux",
+    "name": "Linux",
+    "color": "FCC624",
+    "category": "devops"
+  },
+  {
+    "logo": "github",
+    "name": "Github%20CI",
+    "color": "181717",
+    "category": "devops"
+  },
+  {
+    "logo": "ansible",
+    "name": "Ansible",
+    "color": "EE0000",
+    "category": "devops"
+  },
+  {
+    "logo": "docker",
+    "name": "Docker",
+    "color": "2496ED",
+    "category": "devops"
+  },
+  {
+    "logo": "kubernetes",
+    "name": "Kubernetes",
+    "color": "326CE5",
+    "category": "devops"
+  },
+  {
+    "logo": "terraform",
+    "name": "Terraform",
+    "color": "844FBA",
+    "category": "devops"
+  }
+]

content/main-skill-badges.json

@@ -75,11 +75,13 @@ <h2 class="font-semibold text-center mt-4">In a nutshell</h2>
   <div class="content-center">
     <h2 class="font-semibold text-center mt-4">{{ trans(key="main-skills", lang=lang) }}</h2>
   </div>
-  <div class="flex flex-wrap justify-center">
+  <div class="flex flex-wrap justify-center space-x-2 space-y-4">
 
-    {% set badges = get_page(path="it-xp/2025-04-04-main-skills.md") %}
-    {{ badges.content | safe }}
-    
+    {% set badges = load_data(path="content/main-skill-badges.json") %}
+    <div></div>
+    {% for img in badges %}
+        <img src="https://img.shields.io/badge/{{ img.category }}-{{ img.name }}-{{ img.color }}?logo={{ img.logo }}" alt="{{ img.name }}" />
+    {% endfor %}
   </div>
 
   {% set it_xp_term = terms | filter(attribute="slug", value="it-xp") | first %}