Update skills section

src/_data/author.json

@@ -9,10 +9,13 @@
   "skills": [
     "HTML",
     "CSS",
-    "Bootstrap",
     "Javascript",
+    "Accessibilité",
+    "Bootstrap",
+    "Figma",
     "jQuery",
-    "Figma"
+    "SCSS",
+    "Git"
   ],
   "lang": [
     "Français (langue maternelle)",

src/css/components/competences.css

@@ -1,12 +1,23 @@
-.competences-section .col {
+.skills-gallery {
-  width: 100%;
+  display: grid;
-  margin-bottom: 2rem;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
 }
-@media screen and (min-width: 991px) {
+.skill {
-  .competences-section > div {
+  font-size: 2rem;
-    flex-direction: row;
+  font-size: clamp(2rem, 1.2967rem + 2.1978vw, 3rem);
+  font-weight: 500;
+  text-align: center;
+}
+
+@media screen and (min-width: 768px) {
+  .skill {
+    text-align: left;
   }
-  .competences-section .col {
+}
-    width: 40%;
+
+@media screen and (min-width: 991px) {
+  .skills-gallery {
+    row-gap: 3.5rem;
   }
 }

src/pages/sections/competences.liquid

@@ -2,15 +2,12 @@
 title: Compétences
 displayedTitle: Mes compétences
 order: 1
-classes: 'competences-section langues-section'
+showTitle: false
 ---
 
-<div class="flex justify-center">
+
-  <div class="col">
+<ul class="skills-gallery">
-    {% render "partials/components/list", title: "Compétences techniques", content: author.skills %}
+  {% for skill in author.skills %}
-    </div>
+    <li class="skill">{{skill}}</li>
-    
+  {% endfor %}
-    <div class="col">
+</ul>
-    {% render "partials/components/list", title: "Langues", content: author.lang %}
-  </div>
-</div>