Add more flex utilities

src/_data/author.json

@@ -3,9 +3,22 @@
   "mail": "thomas@amstutz.it",
   "phone": "",
   "about": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio doloribus, iure eum nostrum error tempora facilis ea.",
+  "skills": [
+    "HTML",
+    "CSS",
+    "Bootstrap",
+    "Javascript",
+    "jQuery",
+    "Figma"
+  ],
+  "lang": [
+    "Français (langue maternelle)",
+    "Anglais",
+    "Allemand (Connaissance scolaires)"
+  ],
   "socials": [
     {
-      "title": "My personal Github", 
+      "title": "Mon Github", 
       "icon": "icon-github", 
       "link": "https://github.com/TheThomaas"
     }

src/_includes/partials/components/list.liquid

@@ -0,0 +1,10 @@
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+{% if content %}
+  <ul style="list-style-type: initial">
+    {% for element in content %}
+      <li>{{ element }}</li>
+    {% endfor %}
+  </ul>
+{% endif %}

src/_includes/partials/components/socials.liquid

@@ -4,7 +4,7 @@
       <li><a href="{{ social.link }}" class="{{ social.icon }} {% if showLabel == true %}{{ position | default: "icon--left" }}{% endif %}" title="{{ social.title }}" target="_blank">{% if showLabel == true %}{{ social.title }}{% endif %}</a></li>
     {% endfor %}
     {% if mail %}
-      <li><a href="mailto:{{ mail }}" class="icon-mail {% if showLabel == true %}{{ position | default: "icon--left" }}{% endif %}" title="Send me an e-mail" target="_blank">{% if showLabel == true %}Send me an e-mail{% endif %}</a></li>
+      <li><a href="mailto:{{ mail }}" class="icon-mail {% if showLabel == true %}{{ position | default: "icon--left" }}{% endif %}" title="Contactez moi par mail" target="_blank">{% if showLabel == true %}Contactez moi par mail{% endif %}</a></li>
     {% endif %}
   {% endif %}
 </ul>

src/_includes/partials/footer.liquid

@@ -1,9 +1,9 @@
 <footer class="wrapper-full">
     <div>
         <ul class="list-inline">
-            <li>Built with <a href='https://11ty.dev/' target='_blank' rel='nofollow'>Eleventy</a></li>
+            <li>Réalisé avec <a href='https://11ty.dev/' target='_blank' rel='nofollow'>Eleventy</a></li>
             {% if site.repository and site.repository != "" %}
-                <li>Source on <a href="{{site.repository}}" target="_blank" rel="nofollow">{{site.repoSrc}}</a></li>
+                <li>Source sur <a href="{{site.repository}}" target="_blank" rel="nofollow">{{site.repoSrc}}</a></li>
             {% endif %}
         </ul>
         

src/pages/subpages/competences.liquid

@@ -1,29 +1,16 @@
 ---
 title: Compétences
+displayedTitle: Mes compétences
 order: 1
-showTitle: false
 classes: 'competences-section langues-section'
 ---
 
-<div>
+<div class="flex justify-center">
   <div class="col">
-    <h2>{{title}}</h2>
-    <ul style="list-style-type: initial">
-      <li>HTML</li>
-      <li>CSS</li>
-      <li>Bootstrap</li>
-      <li>Javascript</li>
-      <li>jQuery</li>
-      <li>Eleventy</li>
-    </ul>
-  </div>
+    {% render "partials/components/list", title: "Compétences techniques", content: author.skills %}
+    </div>
     
-  <div class="col">
-    <h2>Langues</h2>
-    <ul style="list-style-type: initial">
-      <li>Français (langue maternelle)</li>
-      <li>Anglais</li>
-      <li>Allemand (Connaissance scolaires)</li>
-    </ul>
+    <div class="col">
+    {% render "partials/components/list", title: "Langues", content: author.lang %}
   </div>
 </div>

src/pages/subpages/download.liquid

@@ -1,11 +1,11 @@
 ---
-title: Download
+title: Téléchargement
 showTitle: false
 order: 4
 ---
 
-<div class="flex-container justify-center download">
-    <p>You want to print this document ?</p>
+<div class="flex justify-center items-center download">
+    <p>Vous souhaitez imprimer ce document ?</p>
     <i>--></i>
-    <button type="button" onclick="window.print()" class="btn btn-download icon--right icon-download">Download as PDF</button>
+    <button type="button" onclick="window.print()" class="btn btn-download icon--right icon-download">Télécharger en PDF</button>
 </div>

src/pages/subpages/experiences.liquid

@@ -1,5 +1,6 @@
 ---
-title: Experiences
+title: Expériences
+displayedTitle: Mes expériences
 order: 3
 ---
 

src/pages/subpages/hero.liquid

@@ -1,8 +1,8 @@
 ---
-title: About me
+title: A propos
 order: 0
 template: 'hero'
 eleventyComputed:
     description: "{{ author.about }}"
-    displayedTitle: "Hello!<br>Moi c'est {{ author.name }}"
+    displayedTitle: "Moi c'est {{ author.name }}<br>Et je suis développeur web"
 ---

src/pages/subpages/projects.liquid

@@ -1,5 +1,6 @@
 ---
-title: Projects
+title: Projets
+displayedTitle: Mes projets
 order: 2
 ---
 

src/scss/components/_utilities.scss

@@ -28,21 +28,24 @@
   background-color: var(--background-color, none);
 }
 
-.flex-container {
+.flex {
   display: inline-flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.items-center {
   align-items: center;
-
-  &.flex-col {
-    flex-direction: column;
-  }
-
-  &.justify-around {
-    justify-content: space-around;
-  }
-  
-  &.justify-center {
-    justify-content: center;
-  }
 }
 
 .sr-only {

src/scss/critical.scss

@@ -301,14 +301,6 @@ section {
 }
 
 .competences-section {
-  margin-left: 4vw;
-
-  > div {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
-
   .col {
     width: 100%;
     margin-bottom: 2rem;