Add tags to projects

src/_includes/partials/components/card.liquid

@@ -11,6 +11,11 @@
     <div class="content">
       <h3>{{ title }}</h3>
       <p>{{ description }}</p>
+      <ul class="list-inline">
+        {% for tag in tags %}
+          <li><span class="badge">{{ tag }}</span></li>
+        {% endfor %}
+      </ul>
     </div>
   </article>
 </li>

src/_includes/partials/components/project-grid.liquid

@@ -6,7 +6,8 @@
           background: data.background, 
           links: data.links, 
           title: data.title, 
-          description: data.description %}
+          description: data.description,
+          tags: data.tags %}
     {%- endfor -%}
   </ul>
 {% endif %}

src/css/main.css

@@ -104,4 +104,16 @@ main li {
 section {
   margin-block: 3.5rem;
   padding-block: 2rem;
+}
+
+.badge {
+  display: inline-flex;
+  justify-content: center;
+  line-height: 1;
+  padding: .2em .3em;
+  font-size: .75em;
+  border-radius: .4em;
+  color: var(--badge-color, var(--color-secondary-600));
+  background: color-mix(in srgb, var(--badge-color, var(--color-secondary-600)) 40%, white 100%);
+  border: 1px solid color-mix(in srgb, var(--badge-color, var(--color-secondary-600)) 90%, white 100%);
 }

src/projects/cancre-simulator.md

@@ -5,6 +5,9 @@ links:
   - title: Voir sur Github
     link: https://github.com
     icon: simple-icons:github
+tags:
+  - C#
+  - Unity
 ---
 
 * desc1

src/projects/guess-who.md

@@ -5,4 +5,6 @@ links:
   - title: Voir sur Github
     link: https://github.com
     icon: simple-icons:github
+tags:
+  - Python
 ---

src/projects/ldap.md

@@ -8,4 +8,7 @@ links:
   - title: Voir sur Github
     link: https://github.com
     icon: simple-icons:github
+tags:
+  - PHP
+  - LDAP
 ---

src/projects/sigfox.md

@@ -8,4 +8,7 @@ links:
   - title: Voir sur Github
     link: https://github.com
     icon: simple-icons:github
+tags:
+  - JS
+  - IOT
 ---

src/projects/snake.md

@@ -1,9 +1,10 @@
 ---
 title: Snake
 description: Un snake réalisé en Java
-background: rgb(255, 143, 143)
 links:
   - title: Voir sur Github
     link: https://github.com
     icon: simple-icons:github
+tags:
+  - Java
 ---