Feat: Ajout des traductions (missing about page)

Author: MrAnyx

assets/scss/variables.scss

@@ -1,20 +1,24 @@
 $dark: #222831;
 $dark-transparent: #222831b9;
 
-$semi-dark: #393E46;
+$semi-dark: #393e46;
+$semi-dark-light: #59616e;
 $semi-dark-less-transparent: #393e46a9;
-$semi-dark-transparent: #393E4677;
+$semi-dark-transparent: #393e4677;
 $semi-dark-very-transparent: #393e4615;
 
-$accent: #FFD369;
+$accent: #ffd369;
 $accent2: #7c4b88;
 $accent-less-transparent: #ffd2696b;
 $accent-semi-less-transparent: #ffd2692a;
 $accent-semi-transparent: #ffd26913;
 $accent-transparent: #ffd2690a;
 
-$light: #EEEEEE;
+$light: #eeeeee;
 $light-transparent: #eeeeeec9;
 
-$secondary: #9BA4B4;
-$secondary-transparent: #9BA4B469;
+$semi-light: #6f7a8d;
+$semi-light-light: #a0aabb;
+
+$secondary: #9ba4b4;
+$secondary-transparent: #9ba4b469;

components/Footer.vue

@@ -9,9 +9,7 @@
         ><eva-icon name="twitter-outline" class="icon"></eva-icon>
       </a>
 
-      <a
-        href="https://www.linkedin.com/in/rob-bch/"
-        target="_blank"
+      <a href="https://www.linkedin.com/in/rob-bch/" target="_blank"
         ><eva-icon name="linkedin-outline" class="icon"></eva-icon>
       </a>
 
@@ -25,11 +23,12 @@
     </div>
 
     <div id="footer-credits">
-      Made with <a href="https://nuxtjs.org/" class="accent">NuxtJS</a>
+      {{ $t("footer.credits.madeWith") }}
+      <a href="https://nuxtjs.org/" class="accent">Nuxt</a>
 
       <br />
 
-      Licensed under
+      {{ $t("footer.credits.license") }}
 
       <a
         href="https://github.com/Codeon-org/codeon.fr/blob/master/LICENSE"
@@ -45,14 +44,10 @@
 
 <script>
 export default {
-  data() {
-    return {
-      year: 2021,
-    };
-  },
-
-  mounted() {
-    this.year = new Date().getFullYear();
+  computed: {
+    year() {
+      return new Date().getFullYear();
+    },
   },
 };
 </script>

components/LocaleDropdown.vue

@@ -0,0 +1,135 @@
+<template>
+  <a v-click-outside="close" class="dropdown" @click="toggle">
+    <div class="button-content">
+      <eva-icon
+        name="globe-outline"
+        class="icon-globe"
+        width="22px"
+        height="22px"
+      ></eva-icon>
+      <eva-icon
+        :name="chevronIcon"
+        class="icon-indicator"
+        width="22px"
+        height="22px"
+      ></eva-icon>
+    </div>
+    <div class="dropdown-content" :class="{ show: show }">
+      <nuxt-link
+        :to="switchLocalePath('fr')"
+        :class="{ active: $i18n.locale === 'fr' }"
+      >
+        {{ $t("header.locale.french") }}
+      </nuxt-link>
+      <nuxt-link
+        :to="switchLocalePath('en')"
+        :class="{ active: $i18n.locale === 'en' }"
+      >
+        {{ $t("header.locale.english") }}
+      </nuxt-link>
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  directives: {
+    "click-outside": {
+      bind(el, binding, vnode) {
+        el.clickOutsideEvent = function (event) {
+          if (!(el === event.target || el.contains(event.target))) {
+            vnode.context[binding.expression](event);
+          }
+        };
+        document.body.addEventListener("click", el.clickOutsideEvent);
+      },
+      unbind(el) {
+        document.body.removeEventListener("click", el.clickOutsideEvent);
+      },
+    },
+  },
+  data: () => ({
+    show: false,
+  }),
+  computed: {
+    chevronIcon() {
+      return this.show ? "chevron-up" : "chevron-down";
+    },
+  },
+  methods: {
+    toggle() {
+      this.show = !this.show;
+    },
+    close() {
+      this.show = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dropdown {
+  position: relative;
+  display: inline-block;
+  background: transparent;
+  cursor: pointer;
+
+  .button-content {
+    user-select: none;
+    display: flex;
+    align-items: center;
+
+    .icon-globe {
+      fill: $semi-light;
+      transition: fill 300ms ease-in-out;
+    }
+    .icon-indicator {
+      fill: $light;
+    }
+
+    .icon-globe,
+    .icon-indicator {
+      pointer-events: none;
+      width: 22px;
+      height: 22px;
+    }
+  }
+
+  &:hover {
+    .icon-globe {
+      fill: $semi-light-light;
+    }
+  }
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  top: 50px;
+  right: 0;
+  background-color: $semi-dark-transparent;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  border-radius: 6px;
+  overflow: hidden;
+
+  a {
+    color: $light;
+    padding: 8px 16px;
+    text-decoration: none;
+    display: block;
+
+    &.active {
+      background-color: $accent-less-transparent;
+    }
+
+    &:hover {
+      background-color: $semi-dark-light;
+    }
+  }
+}
+
+.show {
+  display: block;
+}
+</style>

components/Navbar.vue

@@ -3,57 +3,53 @@
     <nuxt-link
       v-for="(link, index) in links"
       :key="index"
-      :class="{ active: $nuxt.$route.path === link.link }"
-      :to="link.link"
+      :class="{ active: $nuxt.$route.name.includes(link.link) }"
+      :to="localePath(link.link)"
     >
-      <span class="link-icon">{{ link.icon }}</span> {{ link.text }}
+      <span class="link-icon">{{ link.icon }}</span> {{ $t(link.text) }}
     </nuxt-link>
+    <LocaleDropdown />
   </div>
 </template>
 
 <script>
+import LocaleDropdown from "./LocaleDropdown.vue";
+
 export default {
+  components: {
+    LocaleDropdown,
+  },
   data() {
     return {
       links: [
         {
           icon: "🏡",
-
-          text: "Home",
-
-          link: "/",
+          text: "header.links.home",
+          link: "index",
         },
 
         {
           icon: "📚",
-
-          text: "Blog",
-
-          link: "/blog",
+          text: "header.links.blog",
+          link: "blog",
         },
 
         {
           icon: "💡",
-
-          text: "Projects",
-
-          link: "/projects",
+          text: "header.links.projects",
+          link: "projects",
         },
 
         {
           icon: "💻",
-
-          text: "Tools",
-
-          link: "/tools",
+          text: "header.links.tools",
+          link: "tools",
         },
 
         {
           icon: "📝",
-
-          text: "About",
-
-          link: "/about",
+          text: "header.links.about",
+          link: "about",
         },
       ],
     };
@@ -64,29 +60,17 @@ export default {
 <style lang="scss" scoped>
 #container {
   width: 100%;
-
   height: 70px;
-
   background-color: $dark-transparent;
-
   backdrop-filter: blur(10px);
-
   position: fixed;
-
   z-index: 5;
-
   top: 0;
-
   left: 0;
-
   display: flex;
-
   flex-direction: row;
-
   justify-content: center;
-
   align-items: center;
-
   column-gap: 12px;
 
   @include xs-screen {
@@ -95,28 +79,20 @@ export default {
 
   & a {
     color: $light;
-
     text-decoration: none;
-
     font-size: 16px;
-
     padding: 8px 12px;
-
     border-radius: 6px;
-
-    transition: background-color 0.12s ease-in-out;
+    transition: background-color 0.3s ease-in-out;
 
     @include xs-screen {
       font-size: 14px;
-
       padding: 6px 8px;
-
       border-radius: 4px;
     }
 
     &:hover {
       background-color: $semi-dark-transparent;
-
       transition: background-color 0.3s ease-in-out;
     }
 
@@ -129,12 +105,10 @@ export default {
 
   & a.active {
     color: $accent;
-
     transition: background-color 0.3s ease-in-out;
 
     &:hover {
       background-color: $accent-semi-transparent;
-
       transition: background-color 0.3s ease-in-out;
     }
   }

data/education.js

@@ -1,7 +1,7 @@
 const educations = [
   {
     school: "3iL Ingénieurs",
-    fields: ["Computer Science", "Maths", "Management", "Network"],
+    fields: ["Programming", "Network", "Databases", "Management"],
     country: "France",
     from: "September 2017",
     to: "September 2022",
@@ -20,19 +20,14 @@ const educations = [
   },
   {
     school: "Université du Québec à Chicoutimi (UQAC)",
-    fields: [
-      "Computer Science",
-      "Maths",
-      "Artificial Intelligence",
-      "Machine Learning",
-    ],
+    fields: ["Artificial Intelligence", "Cybersecurity", "Algorithmic"],
     country: "Québec",
     from: "September 2021",
     to: "December 2021",
   },
   {
     school: "Integrated Preparatory Class (3iL)",
-    fields: ["Computer Science", "Maths", "Management"],
+    fields: ["Maths", "Network", "Programming", "Databases"],
     country: "France",
     from: "September 2017",
     to: "May 2019",