Dev

.github/workflows/cd.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@master
 
       - name: Setup node env
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3.0.0
         with:
           node-version: ${{ matrix.node }}
 

.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@master
 
       - name: Setup node env 🏗
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3.0.0
         with:
           node-version: ${{ matrix.node }}
           check-latest: true

data/education.js

@@ -0,0 +1,55 @@
+const educations = [
+  {
+    school: "3iL Ingénieurs",
+    fields: ["Computer Science"],
+    city: "Limoges",
+    country: "France",
+    from: "September 2017",
+    to: "July 2022",
+    diplomas: [
+      {
+        date: "September 2022",
+        name: "Engineering Degree",
+        info: "with high honors",
+      },
+      {
+        date: "June 2021",
+        name: "TOEIC",
+        info: "with a score of 920/990",
+      },
+    ],
+  },
+  {
+    school: "Université du Québec à Chicoutimi (UQAC)",
+    fields: ["Computer Science", "Maths"],
+    city: "Chicoutimi",
+    country: "Québec",
+    from: "September 2021",
+    to: "December 2021",
+  },
+  {
+    school: "Integrated Preparatory Class (3iL)",
+    fields: ["Computer Science", "Maths"],
+    city: "Limoges",
+    country: "France",
+    from: "September 2017",
+    to: "May 2019",
+  },
+  {
+    school: "Lycée Saint Pierre Saint Paul",
+    fields: ["General", "Science"],
+    city: "Dreux",
+    country: "France",
+    from: "September 2014",
+    to: "July 2017",
+    diplomas: [
+      {
+        date: "July 2017",
+        name: "Scientific Bachelor Degree",
+        info: "with high honours",
+      },
+    ],
+  },
+];
+
+export default educations;

package.json

@@ -29,15 +29,15 @@
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/style-resources": "^1.2.1",
     "eslint": "^7.29.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.4.0",
     "eslint-plugin-nuxt": "^3.1.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.4.1",
+    "eslint-plugin-vue": "^8.5.0",
     "fibers": "^5.0.1",
     "gh-pages": "^3.2.3",
     "prettier": "^2.5.1",
     "push-dir": "^0.4.1",
-    "sass": "^1.49.8",
-    "sass-loader": "^10.2.0"
+    "sass": "^1.49.9",
+    "sass-loader": "^10.2.1"
   }
 }

pages/about.vue

@@ -97,6 +97,49 @@
       This allows me to plan my weeks and days to be more productive.
     </p>
 
+    <div id="education-wrapper">
+      <h2 class="page-title-h2">Education</h2>
+
+      <div id="schools-wrapper">
+        <div
+          v-for="(edu, eduIdx) in educations"
+          :key="eduIdx"
+          class="school-container"
+        >
+          <div class="school-info">
+            <h3 class="school-name">{{ edu.school }}</h3>
+            <div class="school-date secondary">
+              {{ edu.from
+              }}<span v-if="edu.to !== ''" class="secondary">
+                - {{ edu.to }}</span
+              >
+            </div>
+          </div>
+
+          <p class="school-location">{{ edu.city }} - {{ edu.country }}</p>
+
+          <p class="school-fields secondary">Fields :</p>
+          <span
+            v-for="(field, fieldIdx) in edu.fields"
+            :key="fieldIdx"
+            class="accent hover field"
+            >{{ field }}</span
+          >
+          <div v-if="edu.diplomas">
+            <ul class="school-diplomas">
+              <li
+                v-for="(diploma, diplomasIdx) in edu.diplomas"
+                :key="diplomasIdx"
+              >
+                {{ diploma.date }} - <b>{{ diploma.name }}</b>
+                {{ diploma.info }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div id="experience-wrapper">
       <h2 class="page-title-h2">Experience</h2>
 
@@ -134,10 +177,13 @@
 
 <script>
 import jobs from "@/data/experience";
+import educations from "@/data/education";
+
 export default {
   data() {
     return {
       jobs,
+      educations,
     };
   },
   head: {
@@ -181,16 +227,20 @@ export default {
   }
 }
 
-#experience-wrapper {
+#experience-wrapper,
+#education-wrapper {
   margin-bottom: 40px;
 
-  & #jobs-wrapper {
+  #jobs-wrapper,
+  #schools-wrapper {
     margin-top: 20px;
     display: flex;
     flex-direction: column;
     row-gap: 55px;
-    & .job-container {
-      & .job-info {
+    .job-container,
+    .school-container {
+      .job-info,
+      .school-info {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -201,54 +251,60 @@ export default {
           margin-bottom: 10px;
         }
 
-        & .job-title {
+        .job-title,
+        .school-name {
           font-size: 18px;
         }
 
-        & .job-date {
+        .job-date,
+        .school-date {
           font-size: 14px;
           font-style: italic;
         }
       }
 
-      & .job-company {
+      .job-company,
+      .school-location {
         margin-bottom: 5px;
         font-size: 14px;
         font-weight: bold;
       }
 
-      & .job-tech {
+      .job-tech,
+      .school-fields {
         margin-bottom: 12px;
         font-size: 14px;
         display: inline;
         // font-style: italic;
       }
 
-      span.tech {
+      span.tech,
+      span.field {
         display: inline-block;
         margin-right: 8px;
         font-size: 14px;
         margin-top: 8px;
       }
 
-      & .job-actions {
+      .job-actions,
+      .school-diplomas {
         list-style: none;
         margin-top: 15px;
 
-        & li {
+        li {
           line-height: 28px;
           position: relative;
           margin-left: 20px;
           color: $light-transparent;
-        }
 
-        & li::before {
-          position: absolute;
-          content: "\2022";
-          color: $secondary-transparent;
-          font-weight: bold;
-          display: inline-block;
-          left: -18px;
+          &::before {
+            position: absolute;
+            content: "\2022";
+            color: $secondary-transparent;
+            font-weight: bold;
+            display: inline-block;
+            left: -18px;
+          }
         }
       }
     }