Fix footer + Add Posts preview + fix header + about + blog + index page

2026-01-14 20:19:35 +01:00 · 2020-10-29 23:35:18 +01:00
parent 9933439ee8
commit 181ea0bba3
52 changed files with 1514 additions and 219 deletions
--- a/build/App.js
+++ b/build/App.js
@@ -8,8 +8,9 @@ import NuxtBuildIndicator from './components/nuxt-build-indicator'
 import '..\\src\\assets\\css\\tailwind.css'

 import _6f6c098b from '..\\src\\templates\\layouts\\default.vue'
+import _1a3aec5f from '..\\src\\templates\\layouts\\dev.vue'

-const layouts = { "_default": sanitizeComponent(_6f6c098b) }
+const layouts = { "_default": sanitizeComponent(_6f6c098b),"_dev": sanitizeComponent(_1a3aec5f) }

 export default {
  render (h, props) {
--- a/build/color-mode/color-scheme.js
+++ b/build/color-mode/color-scheme.js
@@ -0,0 +1,25 @@
+export default {
+  name: 'ColorScheme',
+  functional: true,
+  props: {
+    placeholder: String,
+    tag: {
+      type: String,
+      default: 'span'
+    }
+  },
+  render (createElement, { parent, data, props, children }) {
+    const { $colorMode } = parent
+
+    if (!$colorMode.unknown) {
+      return children
+    }
+    // transform props for <client-only>
+    props = {
+      placeholder: props.placeholder,
+      placeholderTag: props.tag
+    }
+
+    return createElement('client-only', { ...data, props }, children)
+  }
+}
--- a/build/color-mode/plugin.client.js
+++ b/build/color-mode/plugin.client.js
@@ -0,0 +1,106 @@
+import Vue from 'vue'
+import colorSchemeComponent from './color-scheme'
+
+Vue.component('ColorScheme', colorSchemeComponent)
+
+const storageKey = 'nuxt-color-mode'
+const colorMode = window['__NUXT_COLOR_MODE__']
+const getForcedColorMode = route => route.matched[0] && route.matched[0].components.default.options.colorMode
+
+export default function (ctx, inject) {
+  let data = ctx.nuxtState.colorMode
+  // For SPA mode or fallback
+  if (!data) {
+    data = {
+      preference: colorMode.preference,
+      value: colorMode.value,
+      unknown: false
+    }
+    const pageColorMode = getForcedColorMode(ctx.route)
+    if (pageColorMode) {
+      data.value = pageColorMode
+      data.forced = true
+      colorMode.addClass(pageColorMode)
+    }
+  }
+  // Get current page component
+  const $colorMode = new Vue({
+    data,
+    watch: {
+      preference (preference) {
+        if (this.forced) {
+          return
+        }
+        if (preference === 'system') {
+          this.value = colorMode.getColorScheme()
+          this._watchMedia()
+        } else {
+          this.value = preference
+        }
+
+        this._storePreference(preference)
+      },
+      value (newValue, oldValue) {
+        colorMode.removeClass(oldValue)
+        colorMode.addClass(newValue)
+      }
+    },
+    created () {
+      if (this.preference === 'system') {
+        this._watchMedia()
+      }
+      if (window.localStorage) {
+        this._watchStorageChange()
+      }
+    },
+    methods: {
+      _watchMedia () {
+        if (this._darkWatcher || !window.matchMedia) {
+          return
+        }
+
+        this._darkWatcher = window.matchMedia('(prefers-color-scheme: dark)')
+        this._darkWatcher.addListener((e) => {
+          if (!this.forced && this.preference === 'system') {
+            this.value = colorMode.getColorScheme()
+          }
+        })
+      },
+      _watchStorageChange () {
+        window.addEventListener('storage', (e) => {
+          if (e.key === storageKey) {
+            this.preference = e.newValue
+          }
+        })
+      },
+      _storePreference (preference) {
+        // Local storage to sync with other tabs
+        window.localStorage.setItem(storageKey, preference)
+      }
+    }
+  })
+
+  window.onNuxtReady(() => {
+    if ($colorMode.unknown) {
+      $colorMode.preference = colorMode.preference
+      $colorMode.value = colorMode.value
+      $colorMode.unknown = false
+    }
+    ctx.app.router.beforeEach((route, from, next) => {
+      const forcedColorMode = getForcedColorMode(route)
+
+      if (forcedColorMode && forcedColorMode !== 'system') {
+        $colorMode.value = forcedColorMode
+        $colorMode.forced = true
+      } else {
+        if (forcedColorMode === 'system') {
+          console.warn('You cannot force the colorMode to system at the page level.')
+        }
+        $colorMode.forced = false
+        $colorMode.value = $colorMode.preference === 'system' ? colorMode.getColorScheme() : $colorMode.preference
+      }
+      next()
+    })
+  })
+  inject('colorMode', $colorMode)
+}
--- a/build/color-mode/plugin.server.js
+++ b/build/color-mode/plugin.server.js
@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import colorSchemeComponent from './color-scheme'
+
+Vue.component('ColorScheme', colorSchemeComponent)
+
+export default function (ctx, inject) {
+  const preference = 'system'
+
+  const colorMode = {
+    preference,
+    value: preference,
+    unknown: true,
+    forced: false
+  }
+
+  if (ctx.route.matched[0]) {
+    const pageColorMode = ctx.route.matched[0].components.default.options.colorMode
+    if (pageColorMode && pageColorMode !== 'system') {
+      colorMode.value = pageColorMode
+      colorMode.forced = true
+
+      ctx.app.head.bodyAttrs = ctx.app.head.bodyAttrs || {}
+      ctx.app.head.bodyAttrs['data-color-mode-forced'] = pageColorMode
+    } else if (pageColorMode === 'system') {
+      console.warn('You cannot force the colorMode to system at the page level.')
+    }
+  }
+
+  ctx.beforeNuxtRender(({ nuxtState }) => {
+    nuxtState.colorMode = colorMode
+  })
+
+  inject('colorMode', colorMode)
+}
--- a/build/components/index.js
+++ b/build/components/index.js
@@ -1,9 +1,9 @@
 export { default as Footer } from '../..\\src\\components\\Footer.vue'
-export { default as GoToTop } from '../..\\src\\components\\GoToTop.vue'
 export { default as Header } from '../..\\src\\components\\Header.vue'
-export { default as LangSwitcher } from '../..\\src\\components\\LangSwitcher.vue'
+export { default as HomePost } from '../..\\src\\components\\HomePost.vue'
+export { default as Post } from '../..\\src\\components\\Post.vue'

 export const LazyFooter = import('../..\\src\\components\\Footer.vue' /* webpackChunkName: "components_Footer" */).then(c => c.default || c)
-export const LazyGoToTop = import('../..\\src\\components\\GoToTop.vue' /* webpackChunkName: "components_GoToTop" */).then(c => c.default || c)
 export const LazyHeader = import('../..\\src\\components\\Header.vue' /* webpackChunkName: "components_Header" */).then(c => c.default || c)
-export const LazyLangSwitcher = import('../..\\src\\components\\LangSwitcher.vue' /* webpackChunkName: "components_LangSwitcher" */).then(c => c.default || c)
+export const LazyHomePost = import('../..\\src\\components\\HomePost.vue' /* webpackChunkName: "components_HomePost" */).then(c => c.default || c)
+export const LazyPost = import('../..\\src\\components\\Post.vue' /* webpackChunkName: "components_Post" */).then(c => c.default || c)
--- a/build/index.js
+++ b/build/index.js
@@ -14,6 +14,8 @@ import { setContext, getLocation, getRouteData, normalizeError } from './utils'

 import nuxt_plugin_plugin_030ac950 from 'nuxt_plugin_plugin_030ac950' // Source: .\\components\\plugin.js (mode: 'all')
 import nuxt_plugin_axios_63fe537b from 'nuxt_plugin_axios_63fe537b' // Source: .\\axios.js (mode: 'all')
+import nuxt_plugin_pluginserver_7dcd890e from 'nuxt_plugin_pluginserver_7dcd890e' // Source: .\\color-mode\\plugin.server.js (mode: 'server')
+import nuxt_plugin_pluginclient_18141786 from 'nuxt_plugin_pluginclient_18141786' // Source: .\\color-mode\\plugin.client.js (mode: 'client')

 // Component: <ClientOnly>
 Vue.component(ClientOnly.name, ClientOnly)
@@ -59,7 +61,7 @@ async function createApp(ssrContext, config = {}) {
  // here we inject the router and store to all child components,
  // making them available everywhere as `this.$router` and `this.$store`.
  const app = {
-    head: {"title":"artsite","meta":[{"charset":"utf-8"},{"name":"viewport","content":"width=device-width, initial-scale=1"},{"hid":"description","name":"description","content":""}],"link":[{"rel":"icon","type":"image\u002Fx-icon","href":"\u002Ffavicon.ico"}],"style":[],"script":[]},
+    head: {"title":"artsite","meta":[{"charset":"utf-8"},{"name":"viewport","content":"width=device-width, initial-scale=1"},{"hid":"description","name":"description","content":""}],"link":[{"rel":"icon","type":"image\u002Fx-icon","href":"\u002Ffavicon.ico"}],"style":[],"script":[{"hid":"nuxt-color-mode-script","innerHTML":"!function (){\"use strict\";var e=window,s=document,o=s.documentElement,a=[\"dark\",\"light\"],t=window.localStorage.getItem(\"nuxt-color-mode\")||\"system\",c=\"system\"===t?l():t,i=s.body.getAttribute(\"data-color-mode-forced\");function r(e){var s=\"\"+e+\"-mode\";o.classList?o.classList.add(s):o.className+=\" \"+s}function n(s){return e.matchMedia(\"(prefers-color-scheme\"+s+\")\")}function l(){if(e.matchMedia&&\"not all\"!==n(\"\").media)for(var s of a)if(n(\":\"+s).matches)return s;return\"dark\"}i&&(c=i),r(c),e[\"__NUXT_COLOR_MODE__\"]={preference:t,value:c,getColorScheme:l,addClass:r,removeClass:function(e){var s=\"\"+e+\"-mode\";o.classList?o.classList.remove(s):o.className=o.className.replace(new RegExp(s,\"g\"),\"\")}}}();\n","pbody":true}],"__dangerouslyDisableSanitizersByTagID":{"nuxt-color-mode-script":["innerHTML"]}},

    router,
    nuxt: {
@@ -181,6 +183,14 @@ async function createApp(ssrContext, config = {}) {
    await nuxt_plugin_axios_63fe537b(app.context, inject)
  }

+  if (process.server && typeof nuxt_plugin_pluginserver_7dcd890e === 'function') {
+    await nuxt_plugin_pluginserver_7dcd890e(app.context, inject)
+  }
+
+  if (process.client && typeof nuxt_plugin_pluginclient_18141786 === 'function') {
+    await nuxt_plugin_pluginclient_18141786(app.context, inject)
+  }
+
  // Lock enablePreview in context
  if (process.static && process.client) {
    app.context.enablePreview = function () {
--- a/build/router.js
+++ b/build/router.js
@@ -4,6 +4,8 @@ import { interopDefault } from './utils'
 import scrollBehavior from './router.scrollBehavior.js'

 const _3829e6ee = () => interopDefault(import('..\\src\\templates\\pages\\about.vue' /* webpackChunkName: "templates/pages/about" */))
+const _35b3d65e = () => interopDefault(import('..\\src\\templates\\pages\\blog.vue' /* webpackChunkName: "templates/pages/blog" */))
+const _12f401b6 = () => interopDefault(import('..\\src\\templates\\pages\\dev.vue' /* webpackChunkName: "templates/pages/dev" */))
 const _57e1c1b3 = () => interopDefault(import('..\\src\\templates\\pages\\index.vue' /* webpackChunkName: "templates/pages/index" */))

 // TODO: remove in Nuxt 3
@@ -26,6 +28,14 @@ export const routerOptions = {
    path: "/about",
    component: _3829e6ee,
    name: "about"
+  }, {
+    path: "/blog",
+    component: _35b3d65e,
+    name: "blog"
+  }, {
+    path: "/dev",
+    component: _12f401b6,
+    name: "dev"
  }, {
    path: "/",
    component: _57e1c1b3,
--- a/build/routes.json
+++ b/build/routes.json
@@ -6,6 +6,20 @@
    "chunkName": "templates/pages/about",
    "_name": "_3829e6ee"
  },
+  {
+    "name": "blog",
+    "path": "/blog",
+    "component": "C:\\\\Users\\\\arthu\\\\Documents\\\\Workspace\\\\artsite\\\\src\\\\templates\\\\pages\\\\blog.vue",
+    "chunkName": "templates/pages/blog",
+    "_name": "_35b3d65e"
+  },
+  {
+    "name": "dev",
+    "path": "/dev",
+    "component": "C:\\\\Users\\\\arthu\\\\Documents\\\\Workspace\\\\artsite\\\\src\\\\templates\\\\pages\\\\dev.vue",
+    "chunkName": "templates/pages/dev",
+    "_name": "_12f401b6"
+  },
  {
    "name": "index",
    "path": "/",
--- a/build/vetur/tags.json
+++ b/build/vetur/tags.json
@@ -5,22 +5,22 @@
  "LazyFooter": {
    "description": "Auto imported from components/Footer.vue"
  },
-  "GoToTop": {
-    "description": "Auto imported from components/GoToTop.vue"
-  },
-  "LazyGoToTop": {
-    "description": "Auto imported from components/GoToTop.vue"
-  },
  "Header": {
    "description": "Auto imported from components/Header.vue"
  },
  "LazyHeader": {
    "description": "Auto imported from components/Header.vue"
  },
-  "LangSwitcher": {
-    "description": "Auto imported from components/LangSwitcher.vue"
+  "HomePost": {
+    "description": "Auto imported from components/HomePost.vue"
  },
-  "LazyLangSwitcher": {
-    "description": "Auto imported from components/LangSwitcher.vue"
+  "LazyHomePost": {
+    "description": "Auto imported from components/HomePost.vue"
+  },
+  "Post": {
+    "description": "Auto imported from components/Post.vue"
+  },
+  "LazyPost": {
+    "description": "Auto imported from components/Post.vue"
  }
 }
--- a/config/ColorMode.ts
+++ b/config/ColorMode.ts
@@ -0,0 +1,6 @@
+export default {
+  preference: 'system',
+  fallback: 'dark',
+  classPrefix: '',
+  classSuffix: '-mode',
+}
--- a/config/index.ts
+++ b/config/index.ts
@@ -1,4 +1,5 @@
 import Axios from './Axios'
 import Head from './Head'
+import ColorMode from './ColorMode'

-export { Axios, Head }
+export { Axios, Head, ColorMode }
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,4 +1,4 @@
-import { Axios, Head } from './config'
+import { Axios, Head, ColorMode } from './config'

 export default {
  head: Head,
@@ -19,16 +19,15 @@ export default {
  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/tailwindcss',
+    ['@nuxtjs/color-mode', ColorMode],
  ],

  modules: [
-    ['@nuxtjs/axios', Axios],
+    ['@nuxtjs/axios', Axios]
  ],

  buildDir: 'build',
-
  srcDir: 'src',
-
  dir: {
    assets: 'assets',
    layouts: 'templates/layouts',
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
  "devDependencies": {
    "@nuxt/types": "^2.14.6",
    "@nuxt/typescript-build": "^2.0.3",
-    "@nuxtjs/tailwindcss": "^3.1.0"
+    "@nuxtjs/color-mode": "^2.0.0",
+    "@nuxtjs/tailwindcss": "^3.1.0",
+    "tailwindcss-dark-mode": "^1.1.7"
  }
 }
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -0,0 +1,3 @@
+img {
+  z-index: 0;
+}
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -1,5 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "./style.scss";
--- a/src/assets/img/Logo.jpg
+++ b/src/assets/img/Logo.jpg
--- a/src/assets/img/icons/airplane.svg
+++ b/src/assets/img/icons/airplane.svg
@@ -0,0 +1 @@
+<svg height="713pt" viewBox="0 -101 713.75189 713" width="713pt" xmlns="http://www.w3.org/2000/svg"><path d="m85.085938 304.40625c-6.144532 2.882812-8.855469 10.140625-6.117188 16.34375l28.066406 60.25c1.378906 3 3.894532 5.335938 6.988282 6.488281 1.355468.492188 2.792968.746094 4.238281.746094 1.808593.015625 3.59375-.371094 5.238281-1.117187l212.054688-99.046876-19.207032 200.824219c-.371094 3.953125 1.152344 7.839844 4.109375 10.480469 9.296875 7.695312 20.882813 12.078125 32.9375 12.472656 3.324219-.003906 6.628907-.421875 9.851563-1.242187 17.214844-4.492188 30.5625-19.832031 39.667968-46.03125l83.449219-247.101563 165.273438-77.09375c48.648437-22.699218 73.71875-68.726562 56.882812-104.652344-9.554687-18.777343-27.855469-31.550781-48.773437-34.054687-23.242188-3.507813-46.996094.148437-68.105469 10.484375l-190.726563 89.433594-205.0625-80.207032c-25.824218-9.726562-46.277343-9.476562-60.621093.878907-12.035157 9.875-18.882813 24.71875-18.589844 40.285156.125 3.949219 2.113281 7.601563 5.363281 9.859375l138.082032 94.921875-79.078126 37.421875-132.601562-33.683594c-5.433594-1.335937-11.089844 1.113282-13.84375 5.988282l-33.050781 59.496093c-1.714844 3.152344-1.984375 6.894531-.738281 10.261719 1.238281 3.371094 3.871093 6.039062 7.226562 7.328125l98.167969 40.542969zm57.121093-248.09375c.734375-5.273438 3.402344-10.074219 7.488281-13.472656 7.113282-5.117188 20.085938-4.367188 37.421876 2.117187l182.617187 71.226563-83.328125 38.917968zm-112.257812 180.117188 21.703125-38.542969 127.605468 31.679687c2.75.695313 5.652344.433594 8.238282-.742187l414.75-193.71875c16.488281-8.132813 35.058594-11.09375 53.261718-8.484375 12.765626 1.175781 24.136719 8.542968 30.4375 19.707031 10.46875 22.457031-10.109374 55.261719-44.914062 71.476563l-143.695312 67.363281 8.734374-25.828125c2.207032-6.644532-1.398437-13.824219-8.042968-16.027344-6.652344-2.203125-13.828125 1.402344-16.03125 8.046875l-102.660156 305.476563c-6.113282 17.34375-13.722657 27.699218-22.203126 29.9375-5.253906 1.011718-10.691406-.019532-15.21875-2.863282l24.949219-261.953125c.652344-6.886719-4.398437-13-11.292969-13.652343-6.886718-.660157-13 4.398437-13.65625 11.285156l-3.863281 40.039062-214.054687 99.789063-17.578125-37.421875 35.167969-16.460938c4.527343-1.996094 7.445312-6.472656 7.445312-11.414062 0-4.945313-2.917969-9.421875-7.445312-11.414063zm0 0"/></svg>
--- a/src/assets/img/icons/arrow-up.svg
+++ b/src/assets/img/icons/arrow-up.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 240.835 240.835" style="enable-background:new 0 0 240.835 240.835;" xml:space="preserve">
+<g>
+	<path id="Expand_Less" d="M129.007,57.819c-4.68-4.68-12.499-4.68-17.191,0L3.555,165.803c-4.74,4.74-4.74,12.427,0,17.155
+		c4.74,4.74,12.439,4.74,17.179,0l99.683-99.406l99.671,99.418c4.752,4.74,12.439,4.74,17.191,0c4.74-4.74,4.74-12.427,0-17.155
+		L129.007,57.819z"/>
+</g>
+</svg>
--- a/src/assets/img/icons/code.svg
+++ b/src/assets/img/icons/code.svg
@@ -0,0 +1,21 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="522.468px" height="522.469px" viewBox="0 0 522.468 522.469" style="enable-background:new 0 0 522.468 522.469;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M325.762,70.513l-17.706-4.854c-2.279-0.76-4.524-0.521-6.707,0.715c-2.19,1.237-3.669,3.094-4.429,5.568L190.426,440.53
+			c-0.76,2.475-0.522,4.809,0.715,6.995c1.237,2.19,3.09,3.665,5.568,4.425l17.701,4.856c2.284,0.766,4.521,0.526,6.71-0.712
+			c2.19-1.243,3.666-3.094,4.425-5.564L332.042,81.936c0.759-2.474,0.523-4.808-0.716-6.999
+			C330.088,72.747,328.237,71.272,325.762,70.513z"/>
+		<path d="M166.167,142.465c0-2.474-0.953-4.665-2.856-6.567l-14.277-14.276c-1.903-1.903-4.093-2.857-6.567-2.857
+			s-4.665,0.955-6.567,2.857L2.856,254.666C0.95,256.569,0,258.759,0,261.233c0,2.474,0.953,4.664,2.856,6.566l133.043,133.044
+			c1.902,1.906,4.089,2.854,6.567,2.854s4.665-0.951,6.567-2.854l14.277-14.268c1.903-1.902,2.856-4.093,2.856-6.57
+			c0-2.471-0.953-4.661-2.856-6.563L51.107,261.233l112.204-112.201C165.217,147.13,166.167,144.939,166.167,142.465z"/>
+		<path d="M519.614,254.663L386.567,121.619c-1.902-1.902-4.093-2.857-6.563-2.857c-2.478,0-4.661,0.955-6.57,2.857l-14.271,14.275
+			c-1.902,1.903-2.851,4.09-2.851,6.567s0.948,4.665,2.851,6.567l112.206,112.204L359.163,373.442
+			c-1.902,1.902-2.851,4.093-2.851,6.563c0,2.478,0.948,4.668,2.851,6.57l14.271,14.268c1.909,1.906,4.093,2.854,6.57,2.854
+			c2.471,0,4.661-0.951,6.563-2.854L519.614,267.8c1.903-1.902,2.854-4.096,2.854-6.57
+			C522.468,258.755,521.517,256.565,519.614,254.663z"/>
+	</g>
+</g>
+</svg>
--- a/src/assets/img/icons/cpu.svg
+++ b/src/assets/img/icons/cpu.svg
@@ -0,0 +1,56 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M292,210h-72c-5.523,0-10,4.478-10,10v72c0,5.522,4.477,10,10,10h72c5.523,0,10-4.478,10-10v-72
+			C302,214.478,297.523,210,292,210z M282,282h-52v-52h52V282z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M478,54c-18.748,0-34,15.252-34,34s15.252,34,34,34s34-15.252,34-34S496.748,54,478,54z M478,102c-7.72,0-14-6.28-14-14
+			c0-7.72,6.28-14,14-14c7.72,0,14,6.28,14,14C492,95.72,485.72,102,478,102z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M426.59,80.9c-1.86-1.859-4.44-2.93-7.07-2.93c-2.64,0-5.22,1.07-7.08,2.93c-1.86,1.86-2.92,4.44-2.92,7.07
+			c0,2.63,1.06,5.21,2.92,7.07c1.87,1.859,4.44,2.93,7.08,2.93c2.63,0,5.21-1.07,7.07-2.93c1.86-1.86,2.93-4.44,2.93-7.07
+			C429.52,85.34,428.45,82.76,426.59,80.9z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M415.534,266c4.281,13.883,17.229,24,32.497,24c18.748,0,34-15.252,34-34s-15.253-34-34-34
+			c-15.269,0-28.217,10.117-32.497,24H354v-78c0-5.522-4.477-10-10-10h-16V97.97h56.022c5.523,0,10-4.478,10-10
+			c0-5.522-4.477-10-10-10H318c-5.523,0-10,4.478-10,10V158h-42V96.467c13.882-4.281,24-17.228,24-32.497c0-18.748-15.252-34-34-34
+			s-34,15.252-34,34c0,15.269,10.118,28.217,24,32.497V158h-78c-5.523,0-10,4.478-10,10v16H97.969V66.506
+			C111.867,62.235,122,49.28,122,34c0-18.748-15.252-34-34-34S54,15.252,54,34c0,15.258,10.103,28.198,23.969,32.488V194
+			c0,5.522,4.477,10,10,10H158v42H96.466c-4.281-13.883-17.229-24-32.497-24c-18.748,0-34,15.252-34,34s15.252,34,34,34
+			c15.269,0,28.217-10.117,32.497-24H158v78c0,5.522,4.477,10,10,10h16v60.03h-56.022c-5.523,0-10,4.478-10,10
+			c0,5.522,4.477,10,10,10H194c5.523,0,10-4.478,10-10V354h42v61.533c-13.882,4.281-24,17.228-24,32.497c0,18.748,15.252,34,34,34
+			s34-15.252,34-34c0-15.269-10.118-28.217-24-32.497V354h78c5.523,0,10-4.478,10-10v-16h60.031v117.494
+			C400.133,449.765,390,462.72,390,478c0,18.748,15.252,34,34,34s34-15.252,34-34c0-15.258-10.103-28.198-23.969-32.488V318
+			c0-5.522-4.477-10-10-10H354v-42H415.534z M448.031,242c7.72,0,14,6.28,14,14c0,7.72-6.281,14-14,14c-7.72,0-14-6.28-14-14
+			C434.031,248.28,440.311,242,448.031,242z M88,48c-7.72,0-14-6.28-14-14c0-7.72,6.28-14,14-14c7.72,0,14,6.28,14,14
+			S95.72,48,88,48z M63.969,270c-7.72,0-14-6.28-14-14c0-7.72,6.28-14,14-14c7.72,0,14,6.28,14,14
+			C77.969,263.72,71.689,270,63.969,270z M242,63.97c0-7.72,6.28-14,14-14c7.72,0,14,6.28,14,14c0,7.72-6.28,14-14,14
+			C248.28,77.97,242,71.69,242,63.97z M270,448.03c0,7.72-6.28,14-14,14c-7.72,0-14-6.28-14-14c0-7.72,6.28-14,14-14
+			C263.72,434.03,270,440.31,270,448.03z M334,334H178V178h156V334z M424,464c7.72,0,14,6.28,14,14c0,7.72-6.28,14-14,14
+			c-7.72,0-14-6.28-14-14C410,470.28,416.28,464,424,464z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M34,390c-18.748,0-34,15.252-34,34s15.252,34,34,34s34-15.252,34-34S52.748,390,34,390z M34,438c-7.72,0-14-6.28-14-14
+			c0-7.72,6.28-14,14-14c7.72,0,14,6.28,14,14C48,431.72,41.72,438,34,438z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M99.57,416.96c-1.86-1.86-4.44-2.93-7.07-2.93s-5.21,1.069-7.07,2.93c-1.86,1.859-2.93,4.439-2.93,7.07
+			c0,2.63,1.07,5.21,2.93,7.069c1.86,1.86,4.44,2.931,7.07,2.931s5.21-1.07,7.07-2.931c1.86-1.859,2.93-4.439,2.93-7.069
+			C102.5,421.399,101.43,418.819,99.57,416.96z"/>
+	</g>
+</g>
+</svg>
--- a/src/assets/img/icons/cv.svg
+++ b/src/assets/img/icons/cv.svg
@@ -0,0 +1,70 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M61.069,169.93C59.21,168.069,56.63,167,54,167s-5.209,1.07-7.07,2.93C45.069,171.79,44,174.37,44,177
+			s1.069,5.21,2.93,7.069C48.79,185.93,51.37,187,54,187s5.21-1.07,7.069-2.931C62.93,182.21,64,179.63,64,177
+			S62.93,171.79,61.069,169.93z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M438,0H235.667c-5.522,0-10,4.478-10,10s4.478,10,10,10H438c5.514,0,10,4.486,10,10v452c0,5.514-4.486,10-10,10H74
+			c-5.514,0-10-4.486-10-10V214.333c0-5.522-4.478-10-10-10s-10,4.478-10,10V482c0,16.542,13.458,30,30,30h364
+			c16.542,0,30-13.458,30-30V30C468,13.458,454.542,0,438,0z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M256,40c-6.804,0-13.642,0.52-20.324,1.544c-5.459,0.838-9.206,5.941-8.369,11.4c0.837,5.459,5.943,9.201,11.4,8.369
+			C244.39,60.441,250.208,60,256,60c62.309,0,113.001,50.692,113.001,113.001c0,27.67-10.002,53.043-26.574,72.71
+			c-7.333-12.61-17.349-23.487-29.506-31.924c-7.095-4.924-14.718-8.854-22.698-11.763c9.108-8.903,14.777-21.31,14.777-35.022
+			v-9.75c0-27.02-21.981-49.001-49-49.001c-27.019,0-49,21.981-49,49.001v9.75c0,13.712,5.668,26.119,14.777,35.022
+			c-7.979,2.909-15.602,6.839-22.698,11.763c-12.215,8.478-22.271,19.416-29.613,32.102c-12.627-15.005-21.453-33.461-24.906-54.05
+			c-0.913-5.445-6.074-9.119-11.516-8.208c-5.447,0.913-9.122,6.069-8.209,11.516c5.142,30.66,21.059,58.724,44.82,79.021
+			c24.031,20.529,54.696,31.835,86.344,31.835c73.337,0,133.001-59.664,133.001-133.001S329.337,40,256,40z M227,157.251
+			c0-15.991,13.01-29.001,29-29.001s29,13.01,29,29.001v9.75c0,15.99-13.01,29-29,29s-29-13.01-29-29V157.251z M256,286.002
+			c-27.074,0-52.104-9.454-71.694-25.482c13.428-27.252,40.879-44.519,71.694-44.519c30.751,0,58.15,17.196,71.608,44.349
+			C308.101,276.371,283.154,286.002,256,286.002z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M348.357,398.002h-142c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h142c5.523,0,10-4.478,10-10
+			C358.357,402.48,353.879,398.002,348.357,398.002z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M170.71,344.93c-1.86-1.861-4.44-2.93-7.07-2.93s-5.21,1.07-7.07,2.93s-2.93,4.44-2.93,7.07
+			c0,2.639,1.071,5.21,2.93,7.069c1.86,1.861,4.44,2.931,7.07,2.931s5.21-1.07,7.07-2.931c1.87-1.859,2.93-4.439,2.93-7.069
+			S172.58,346.79,170.71,344.93z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M170.71,400.93c-1.86-1.861-4.43-2.93-7.07-2.93c-2.63,0-5.21,1.07-7.07,2.93s-2.93,4.44-2.93,7.07
+			c0,2.639,1.071,5.21,2.93,7.069c1.86,1.861,4.44,2.931,7.07,2.931s5.21-1.07,7.07-2.931c1.87-1.859,2.93-4.429,2.93-7.069
+			C173.64,405.37,172.58,402.79,170.71,400.93z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M348.357,342.002h-142c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h142c5.523,0,10-4.478,10-10
+			C358.357,346.48,353.879,342.002,348.357,342.002z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M161.626,57.629c-3.907-3.904-10.237-3.904-14.143,0l-32.566,32.566l-11.129-11.129c-3.907-3.904-10.237-3.904-14.143,0
+			c-3.905,3.906-3.905,10.238,0,14.143l18.2,18.2c1.953,1.952,4.511,2.929,7.071,2.929s5.118-0.977,7.072-2.928l39.638-39.638
+			C165.531,67.866,165.531,61.534,161.626,57.629z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M126,0C80.785,0,44,36.785,44,82c0,45.215,36.785,82,82,82c45.215,0,82-36.785,82-82C208,36.785,171.215,0,126,0z
+			 M126,144c-34.187,0-62-27.813-62-62s27.813-62,62-62s62,27.813,62,62S160.187,144,126,144z"/>
+	</g>
+</g>
+</svg>
--- a/src/assets/img/icons/experience.svg
+++ b/src/assets/img/icons/experience.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 510 510" height="512" viewBox="0 0 510 510" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m416 0h-322c-16.542 0-30 13.458-30 30v450c0 16.542 13.458 30 30 30h322c16.542 0 30-13.458 30-30v-450c0-16.542-13.458-30-30-30zm0 480h-322v-450h322c.019 459.847.1 450 0 450z"/><path d="m311 200c-41.07 0-74.19 35.101-70.736 76.895-.388 2.088-.264-6.619-.264 138.105 0 10.649 10.818 17.917 20.677 13.884l50.323-20.574 50.323 20.575c9.829 4.017 20.677-3.198 20.677-13.885v-144c0-39.149-31.851-71-71-71zm0 30c22.607 0 41 18.393 41 41s-18.393 41-41 41-41-18.393-41-41 18.393-41 41-41zm5.677 148.22c-3.639-1.487-7.715-1.487-11.354 0l-35.323 14.442v-63.751c24.578 17.452 57.397 17.47 82 0v63.751z"/><path d="m367 72h-224c-8.284 0-15 6.716-15 15s6.716 15 15 15h224c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m367 136h-224c-8.284 0-15 6.716-15 15s6.716 15 15 15h224c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m194.529 202h-55.059c-6.335 0-11.471 6.716-11.471 15s5.136 15 11.471 15h55.059c6.335 0 11.471-6.716 11.471-15s-5.136-15-11.471-15z"/><path d="m191 264h-48c-8.284 0-15 6.716-15 15s6.716 15 15 15h48c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m191 328h-48c-8.284 0-15 6.716-15 15s6.716 15 15 15h48c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m191 392h-48c-8.284 0-15 6.716-15 15s6.716 15 15 15h48c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/></g></svg>
--- a/src/assets/img/icons/fire.svg
+++ b/src/assets/img/icons/fire.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 511.999 511.999" height="512" viewBox="0 0 511.999 511.999" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m301 271.999c-17.901 0-33.997 7.881-45 20.354-11.003-12.474-27.099-20.354-45-20.354-33.084 0-60 26.916-60 60 0 58.223 50.122 102.503 100.256 119.23 1.54.513 3.142.77 4.744.77s3.204-.257 4.744-.77c50.67-16.906 100.256-61.394 100.256-119.23 0-33.084-26.917-60-60-60zm-44.999 148.938c-17.206-7.092-75.001-34.943-75.001-88.938 0-16.542 13.458-30 30-30s30 13.458 30 30c0 8.284 6.716 15 15 15s15-6.716 15-15c0-16.542 13.458-30 30-30s30 13.458 30 30c0 54.011-57.829 81.861-74.999 88.938z"/><path d="m398.444 108.682c-5.689 1.544-9.947 6.278-10.882 12.1-3.105 19.347-8.288 36.234-14.593 47.554-5.581 10.018-10.27 12.664-11.97 12.664-2.235 0-22.842-2.282-57.668-81.317-19.342-43.896-32.831-88.553-32.965-88.998-1.898-6.316-7.698-10.652-14.291-10.685-.025 0-.05 0-.076 0-6.563 0-12.369 4.268-14.321 10.54-.138.443-14.054 44.916-33.638 88.853-35.355 79.316-54.925 81.606-57.04 81.606-1.7 0-6.389-2.646-11.969-12.664-6.305-11.319-11.488-28.207-14.593-47.554-.935-5.821-5.192-10.556-10.882-12.1-5.688-1.543-11.756.387-15.505 4.938-45.746 55.521-67.051 110.613-67.051 173.38 0 122.219 94.8 225 225 225 130.245 0 225-102.821 225-225 0-62.767-21.306-117.858-67.05-173.379-3.749-4.55-9.816-6.481-15.506-4.938zm-142.444 373.317c-109.346 0-195-85.654-195-195 0-46.809 12.89-87.652 41.272-129.206 10.707 33.838 28.023 53.206 48.728 53.206 27.384 0 54.215-31.583 84.441-99.394 7.872-17.66 14.796-35.199 20.358-50.166 5.431 14.955 12.213 32.471 19.975 50.103 29.867 67.854 56.948 99.457 85.226 99.457 20.704 0 38.021-19.368 48.728-53.206 28.382 41.554 41.272 82.397 41.272 129.206 0 109.346-85.655 195-195 195z"/></g></svg>
--- a/src/assets/img/icons/formation.svg
+++ b/src/assets/img/icons/formation.svg
@@ -0,0 +1,25 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M511.238,492.3l-24.943-75.661c15.18-7.239,25.697-22.733,25.697-40.64c0-19.555-12.541-36.227-29.999-42.419V160.228
+			l21.686-10.798c5.086-2.532,8.305-7.721,8.314-13.403c0.009-5.682-3.192-10.881-8.27-13.43L262.726,1.599
+			c-4.235-2.126-9.226-2.126-13.461,0L8.27,122.597c-5.078,2.549-8.279,7.749-8.27,13.43c0.009,5.681,3.229,10.871,8.315,13.403
+			l81.685,40.673V286c0,4.31,1.854,8.411,5.088,11.259c2.957,2.603,73.412,63.74,160.909,63.74s157.952-61.137,160.909-63.74
+			c3.235-2.848,5.088-6.949,5.088-11.259v-95.897l29.999-14.938v158.414c-17.459,6.192-29.999,22.865-29.999,42.419
+			c0,17.908,10.517,33.401,25.697,40.64L422.748,492.3c-3.199,9.705,4.05,19.697,14.246,19.697h59.999
+			C507.211,511.996,514.43,501.983,511.238,492.3z M391.994,278.862C375.291,291.856,319.679,331,255.997,331
+			c-63.692,0-119.312-39.155-135.998-52.136v-73.823l129.312,64.388c2.105,1.048,4.396,1.573,6.686,1.573
+			c2.29,0,4.581-0.524,6.686-1.573l129.312-64.388V278.862z M255.997,239.244L48.541,135.947L255.997,31.789l207.455,104.158
+			L255.997,239.244z M457.732,481.997l9.261-28.091l9.261,28.091H457.732z M466.993,390.999c-8.271,0-15-6.729-15-15s6.729-15,15-15
+			s15,6.729,15,15S475.264,390.999,466.993,390.999z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M255.997,91.004c-24.813,0-44.999,20.187-44.999,44.999s20.187,44.999,44.999,44.999
+			c24.813,0,44.999-20.187,44.999-44.999S280.809,91.004,255.997,91.004z M255.997,151.003c-8.271,0-15-6.729-15-15s6.729-15,15-15
+			c8.271,0,15,6.729,15,15S264.267,151.003,255.997,151.003z"/>
+	</g>
+</g>
+</svg>
--- a/src/assets/img/icons/home.svg
+++ b/src/assets/img/icons/home.svg
@@ -0,0 +1 @@
+<svg height="511pt" viewBox="0 1 511 511.999" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m498.699219 222.695312c-.015625-.011718-.027344-.027343-.039063-.039062l-208.855468-208.847656c-8.902344-8.90625-20.738282-13.808594-33.328126-13.808594-12.589843 0-24.425781 4.902344-33.332031 13.808594l-208.746093 208.742187c-.070313.070313-.144532.144531-.210938.214844-18.28125 18.386719-18.25 48.21875.089844 66.558594 8.378906 8.382812 19.441406 13.234375 31.273437 13.746093.484375.046876.96875.070313 1.457031.070313h8.320313v153.695313c0 30.417968 24.75 55.164062 55.167969 55.164062h81.710937c8.285157 0 15-6.71875 15-15v-120.5c0-13.878906 11.292969-25.167969 25.171875-25.167969h48.195313c13.878906 0 25.167969 11.289063 25.167969 25.167969v120.5c0 8.28125 6.714843 15 15 15h81.710937c30.421875 0 55.167969-24.746094 55.167969-55.164062v-153.695313h7.71875c12.585937 0 24.421875-4.902344 33.332031-13.8125 18.359375-18.367187 18.367187-48.253906.027344-66.632813zm-21.242188 45.421876c-3.238281 3.238281-7.542969 5.023437-12.117187 5.023437h-22.71875c-8.285156 0-15 6.714844-15 15v168.695313c0 13.875-11.289063 25.164062-25.167969 25.164062h-66.710937v-105.5c0-30.417969-24.746094-55.167969-55.167969-55.167969h-48.195313c-30.421875 0-55.171875 24.75-55.171875 55.167969v105.5h-66.710937c-13.875 0-25.167969-11.289062-25.167969-25.164062v-168.695313c0-8.285156-6.714844-15-15-15h-22.328125c-.234375-.015625-.464844-.027344-.703125-.03125-4.46875-.078125-8.660156-1.851563-11.800781-4.996094-6.679688-6.679687-6.679688-17.550781 0-24.234375.003906 0 .003906-.003906.007812-.007812l.011719-.011719 208.847656-208.839844c3.234375-3.238281 7.535157-5.019531 12.113281-5.019531 4.574219 0 8.875 1.78125 12.113282 5.019531l208.800781 208.796875c.03125.03125.066406.0625.097656.09375 6.644531 6.691406 6.632813 17.539063-.03125 24.207032zm0 0"/></svg>
--- a/src/assets/img/icons/infinite.svg
+++ b/src/assets/img/icons/infinite.svg
@@ -0,0 +1 @@
+<svg height="490pt" viewBox="0 -138 490.66667 490" width="490pt" xmlns="http://www.w3.org/2000/svg"><path d="m388.179688 213.667969c-21.546876 0-42.238282-7.125-60.03125-20.652344-1.066407-.492187-2.070313-1.171875-2.941407-2.046875l-44.738281-44.417969c-4.179688-4.136719-4.203125-10.898437-.042969-15.082031 4.183594-4.179688 10.921875-4.160156 15.105469-.042969l42.921875 42.625c.320313.214844.640625.425781.9375.660157 14.402344 11.542968 31.277344 17.621093 48.789063 17.621093 44.757812 0 81.152343-38.269531 81.152343-85.332031s-36.414062-85.332031-81.152343-85.332031c-17.492188 0-34.367188 6.078125-48.789063 17.597656-.488281.40625-1.042969.746094-1.597656 1.066406l-172.84375 151.105469c-.789063.683594-1.640625 1.257812-2.558594 1.664062-17.75 13.460938-38.402344 20.566407-59.90625 20.566407-56.511719 0-102.484375-47.851563-102.484375-106.667969s45.972656-106.667969 102.484375-106.667969c21.546875 0 42.242187 7.125 60.03125 20.652344 1.070313.492187 2.070313 1.171875 2.945313 2.046875l44.738281 44.417969c4.179687 4.136719 4.199219 10.898437.039062 15.082031-4.160156 4.203125-10.898437 4.203125-15.101562.042969l-42.921875-42.644531c-.320313-.214844-.640625-.429688-.941406-.664063-14.398438-11.519531-31.273438-17.597656-48.789063-17.597656-44.734375 0-81.152344 38.269531-81.152344 85.332031s36.417969 85.332031 81.152344 85.332031c17.496094 0 34.367187-6.078125 48.789063-17.597656.492187-.40625 1.046874-.746094 1.601562-1.066406l172.84375-151.105469c.789062-.683594 1.640625-1.257812 2.558594-1.664062 17.75-13.460938 38.398437-20.566407 59.902344-20.566407 56.511718 0 102.488281 47.851563 102.488281 106.667969s-45.976563 106.667969-102.488281 106.667969zm0 0"/><path d="m202.667969 85.667969h-64c-5.890625 0-10.667969-4.78125-10.667969-10.667969s4.777344-10.667969 10.667969-10.667969h53.332031v-53.332031c0-5.886719 4.777344-10.667969 10.667969-10.667969 5.886719 0 10.664062 4.78125 10.664062 10.667969v64c0 5.886719-4.777343 10.667969-10.664062 10.667969zm0 0"/><path d="m288 213.667969c-5.886719 0-10.667969-4.78125-10.667969-10.667969v-64c0-5.886719 4.78125-10.667969 10.667969-10.667969h64c5.886719 0 10.667969 4.78125 10.667969 10.667969s-4.78125 10.667969-10.667969 10.667969h-53.332031v53.332031c0 5.886719-4.78125 10.667969-10.667969 10.667969zm0 0"/></svg>
--- a/src/assets/img/icons/lamp.svg
+++ b/src/assets/img/icons/lamp.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512.004 512.004" height="512" viewBox="0 0 512.004 512.004" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><path d="m335.341 512c-6.894.189-12.068-7.532-9.23-13.83 3.299-8.157 15.162-8.15 18.47 0 2.835 6.302-2.349 14.023-9.24 13.83z"/></g><g><g><path d="m414.135 427.346h-57.693v-9.096c0-19.436-15.813-35.25-35.25-35.25-18.953 0-34.461 15.037-35.22 33.807l-100.079-124.104c.913-3.76 1.398-7.685 1.398-11.722 0-7.308-1.587-14.251-4.433-20.505l45.375-61.58 17.986 17.987-3.017 3.017c-1.875 1.876-2.929 4.419-2.929 7.071s1.054 5.195 2.929 7.071l27.917 27.917c1.953 1.952 4.512 2.929 7.071 2.929 2.56 0 5.118-.977 7.071-2.929l48.455-48.455c8.137 8.134 18.955 12.613 30.462 12.613 11.509 0 22.329-4.481 30.467-12.619 16.797-16.799 16.799-44.13.005-60.928l48.456-48.456c3.905-3.905 3.905-10.237 0-14.142l-27.917-27.918c-1.875-1.875-4.419-2.929-7.071-2.929s-5.195 1.054-7.071 2.929l-3.018 3.018-43.939-43.938c-21.539-21.537-55.053-23.979-79.308-7.323l-6.096-6.096c-4.974-4.975-11.59-7.715-18.625-7.715-7.036 0-13.651 2.74-18.626 7.715l-42.573 42.574c-4.975 4.975-7.715 11.59-7.715 18.625 0 7.036 2.74 13.651 7.715 18.626l6.095 6.095c-9.406 13.697-12.722 30.347-9.947 46.126l-73.196 98.8c-14.294 8.73-23.856 24.479-23.856 42.419 0 23.134 15.898 42.624 37.343 48.119l79.18 98.245h-107.346c-17.185 0-31.166 13.981-31.166 31.166v43.49c0 5.522 4.477 10 10 10h209.67c5.522 0 10-4.478 10-10s-4.478-10-10-10h-199.671v-33.488c0-6.157 5.009-11.166 11.166-11.166h317.001c6.157 0 11.167 5.009 11.167 11.166v33.488h-40.342c-5.523 0-10 4.478-10 10s4.477 10 10 10h50.343c5.522 0 10-4.478 10-10v-43.488c-.001-17.185-13.982-31.166-31.168-31.166zm-33.632-227.99c-9.002 9.002-23.642 9-32.644.006l32.65-32.65c8.996 9.002 8.993 23.645-.006 32.644zm41.39-102.312-143.703 143.703-13.775-13.775 143.703-143.703zm-153.116 330.301h-38.61l-79.363-98.472c10.053-2.77 18.839-8.628 25.269-16.486zm71.17-392.069 43.939 43.938-123.525 123.526-43.938-43.939c-16.482-16.482-16.494-43.29-.037-59.787l63.737-63.737c8.247-8.247 19.08-12.371 29.912-12.371 10.832-.001 21.665 4.123 29.912 12.37zm-136.943 29.156 42.574-42.575c1.198-1.197 2.79-1.856 4.483-1.856s3.285.659 4.483 1.857l5.356 5.355-51.541 51.541-5.356-5.356c-1.197-1.197-1.857-2.789-1.857-4.483s.66-3.286 1.858-4.483zm-.724 108.511 11.649 11.649-43.542 59.092c-7.737-6.805-17.601-11.246-28.451-12.184l51.557-69.592c2.451 3.922 5.38 7.629 8.787 11.035zm-94.322 108.038c0-16.358 13.308-29.667 29.666-29.667s29.667 13.308 29.667 29.667c0 16.358-13.308 29.667-29.667 29.667-16.358 0-29.666-13.308-29.666-29.667zm197.984 146.365v-9.096c0-8.409 6.841-15.25 15.25-15.25s15.25 6.841 15.25 15.25v9.096z"/></g></g></g></svg>
--- a/src/assets/img/icons/moon.svg
+++ b/src/assets/img/icons/moon.svg
@@ -0,0 +1,14 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 312.999 312.999" style="enable-background:new 0 0 312.999 312.999;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M305.6,178.053c-3.2-0.8-6.4,0-9.2,2c-10.4,8.8-22.4,16-35.6,20.8c-12.4,4.8-26,7.2-40.4,7.2c-32.4,0-62-13.2-83.2-34.4
+			c-21.2-21.2-34.4-50.8-34.4-83.2c0-13.6,2.4-26.8,6.4-38.8c4.4-12.8,10.8-24.4,19.2-34.4c3.6-4.4,2.8-10.8-1.6-14.4
+			c-2.8-2-6-2.8-9.2-2c-34,9.2-63.6,29.6-84.8,56.8c-20.4,26.8-32.8,60-32.8,96.4c0,43.6,17.6,83.2,46.4,112s68.4,46.4,112,46.4
+			c36.8,0,70.8-12.8,98-34c27.6-21.6,47.6-52.4,56-87.6C314.4,184.853,311.2,179.253,305.6,178.053z M244.4,261.653
+			c-23.2,18.4-52.8,29.6-85.2,29.6c-38,0-72.4-15.6-97.2-40.4c-24.8-24.8-40.4-59.2-40.4-97.2c0-31.6,10.4-60.4,28.4-83.6
+			c12.4-16,28-29.2,46-38.4c-2,4.4-4,8.8-5.6,13.6c-5.2,14.4-7.6,29.6-7.6,45.6c0,38,15.6,72.8,40.4,97.6s59.6,40.4,97.6,40.4
+			c16.8,0,32.8-2.8,47.6-8.4c5.2-2,10.4-4,15.2-6.4C274,232.453,260.8,248.853,244.4,261.653z"/>
+	</g>
+</g>
+</svg>
--- a/src/assets/img/icons/motorbike.svg
+++ b/src/assets/img/icons/motorbike.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 511.999 511.999" height="512" viewBox="0 0 511.999 511.999" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><path d="m426.999 241.45c-4.138 0-8.203.312-12.185.887l-5.208-19.438c5.66-.948 11.469-1.449 17.394-1.449 8.243 0 16.466.964 24.439 2.864 3.856.919 7.891-.526 10.285-3.684 23.225-30.613 24.557-48.867 5.278-72.339-24.882-30.29-47.775-45.854-69.99-47.58-16.642-1.297-32.668 5.176-49.046 19.773-2.154 1.919-3.374 4.676-3.347 7.562.028 2.886 1.301 5.618 3.492 7.496l16.328 13.996c-.667 2.899-1.241 5.637-1.772 8.173-1.366 6.516-2.447 11.645-4.172 15.898-2.355-1.372-4.675-2.729-6.954-4.064-33.558-19.651-60.059-35.174-87.041-27.707-17.925 4.96-33.654 19.699-49.164 46.167l-75.842-21.703-4.683-14.486c-4.82-14.912-15.113-23.062-32.388-25.64l-85.783-14.529c-3.599-.612-7.244.79-9.51 3.652-2.266 2.861-2.792 6.73-1.374 10.094 21.365 50.643 29.458 64.021 59.955 79.174l73.611 36.572c18.995 9.437 25.798 16.651 31.65 33.563l14.445 41.748h-16.025c-4.968-42.171-40.908-75-84.392-75-46.869 0-85 38.131-85 85s38.131 85 85 85c43.485 0 79.425-32.829 84.392-75h22.945l9.781 28.27c1.394 4.028 5.188 6.73 9.45 6.73h105.86c3.191 0 6.192-1.523 8.075-4.101s2.422-5.899 1.451-8.939c-3.289-10.308-4.957-21.06-4.957-31.96 0-44.989 28.443-83.454 68.289-98.372l5.211 19.449c-31.314 12.544-53.5 43.182-53.5 78.924 0 46.869 38.131 85 85 85s85-38.131 85-85-38.129-85.001-84.998-85.001zm-341.999 150c-35.841 0-65-29.159-65-65s29.159-65 65-65c32.441 0 59.405 23.89 64.23 55h-20.363c-4.561-20.014-22.491-35-43.867-35-24.813 0-45 20.187-45 45s20.187 45 45 45c21.376 0 39.305-14.986 43.867-35h20.363c-4.825 31.11-31.789 55-64.23 55zm0-55h22.907c-3.866 8.82-12.676 15-22.907 15-13.785 0-25-11.215-25-25s11.215-25 25-25c10.231 0 19.041 6.18 22.907 15h-22.907c-5.523 0-10 4.478-10 10s4.477 10 10 10zm184.834-175.336c18.829-5.209 42.118 8.426 71.601 25.689.786.46 1.584.927 2.379 1.393-1.69.825-3.551 1.637-5.631 2.449l-48.057 18.762-54.871-15.702c11.624-18.683 22.992-29.385 34.579-32.591zm53.318 95.836h-32.66c-5.522 0-10 4.478-10 10s4.478 10 10 10h21.736c-2.775 6.409-5.026 13.093-6.704 20.001h-37.529c-5.522 0-10 4.478-10 10s4.478 10 10 10h34.362c-.237 3.136-.359 6.303-.359 9.499 0 8.438.841 16.803 2.508 25h-85.816l-28.818-83.287c-8.514-24.608-21.208-34.778-41.652-44.936l-73.61-36.572c-20.657-10.263-27.953-17.953-43.176-52.218l67.75 11.476c.07.012.139.023.209.033 11.036 1.63 14.273 5.482 16.388 12.022l6.323 19.558c1.025 3.17 3.561 5.621 6.764 6.538l159 45.5c2.104.603 4.35.497 6.388-.299l51.2-19.989c29.225-11.409 32.729-28.115 36.785-47.46.886-4.226 1.803-8.596 3.047-13.316.979-3.707-.25-7.647-3.161-10.143l-11.754-10.075c8.695-5.824 16.842-8.264 25.088-7.631 16.27 1.265 35.14 14.836 56.086 40.335 4.96 6.039 8.921 10.873 8.87 17.821l-13.614-5.603c-5.112-2.104-10.952.335-13.054 5.44-2.103 5.107.334 10.952 5.44 13.054l14.234 5.859c-1.148 1.857-2.445 3.821-3.925 5.922-7.405-1.348-14.946-2.028-22.501-2.028-43.222-.001-81.388 22.054-103.845 55.499zm103.847 134.5c-35.841 0-65-29.159-65-65 0-26.491 15.939-49.317 38.723-59.431l5.266 19.654c-14.254 7.56-23.989 22.549-23.989 39.777 0 24.813 20.187 45 45 45s45-20.187 45-45-20.187-45-45-45c-.568 0-1.131.022-1.693.043l-5.269-19.665c2.289-.245 4.61-.378 6.963-.378 35.841 0 65 29.159 65 65s-29.16 65-65.001 65zm-9.659-62.412c1.197 4.468 5.237 7.415 9.653 7.415.856 0 1.728-.111 2.594-.344 5.335-1.43 8.501-6.913 7.071-12.247l-5.93-22.133c12.023 1.806 21.271 12.203 21.271 24.721 0 13.785-11.215 25-25 25s-25-11.215-25-25c0-7.895 3.682-14.942 9.415-19.527z"/><path d="m245.495 256.95h-.007c-5.523 0-9.997 4.478-9.997 10s4.481 10 10.004 10 10-4.478 10-10-4.477-10-10-10z"/></g></g></svg>
--- a/src/assets/img/icons/quill.svg
+++ b/src/assets/img/icons/quill.svg
@@ -1 +1,25 @@
-<svg height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m121.937 4.826a1.756 1.756 0 0 0 -2.014.924c-.16.328-4.119 8.112-21.461 17.27a1.748 1.748 0 0 0 -.987 1.143 65.867 65.867 0 0 1 -4.388 11.782 24.213 24.213 0 0 1 -2.013-6.92 1.75 1.75 0 0 0 -2.418-1.361c-4.584 1.953-9.573 3.813-14.829 5.527a107.828 107.828 0 0 0 -20.069 8.747 1.748 1.748 0 0 0 -.785.953q-1.186 3.48-2.562 6.574.057-1.032.152-2.194a1.75 1.75 0 0 0 -2.741-1.583c-17.779 12.312-27.467 29.689-30.476 54.622a87.375 87.375 0 0 0 -11.928 15.695 4.87 4.87 0 0 0 1.482 6.513 4.725 4.725 0 0 0 2.554.753h80a1.75 1.75 0 0 0 0-3.5h-75.189a80.458 80.458 0 0 1 10.605-13.582c17.251-.846 57.253-4.33 72.974-18.544a43.377 43.377 0 0 0 3.251-3.273 1.75 1.75 0 0 0 -.942-2.882c-.375-.078-.746-.16-1.115-.243 1.244-.176 2.642-.343 4.183-.481a1.757 1.757 0 0 0 1.284-.75c12.779-18.544 16.457-32.95 18.737-73.4a1.75 1.75 0 0 0 -1.305-1.79zm-113.496 112.942c10.9-18.7 31.07-32.911 52.423-47.954 4.468-3.147 9.536-6.714 14.393-10.281a1.251 1.251 0 0 1 .743-.246 1.282 1.282 0 0 1 .2.016 1.228 1.228 0 0 1 .812.5 1.255 1.255 0 0 1 -.266 1.745c-4.879 3.573-9.96 7.152-14.446 10.31-21.163 14.91-41.153 28.993-51.774 47.293a1.24 1.24 0 0 1 -1.75.417 1.356 1.356 0 0 1 -.335-1.8zm93.642-40.411a62.972 62.972 0 0 0 -10.967 1.9 1.751 1.751 0 0 0 -.083 3.324c1.684.6 3.479 1.146 5.363 1.628-.3.287-.595.565-.9.837-14.012 12.669-50.513 16.385-66.938 17.429 10.112-9.683 22.709-18.56 35.762-27.755 4.5-3.167 9.59-6.756 14.491-10.351a4.764 4.764 0 0 0 1.029-6.621 4.744 4.744 0 0 0 -6.653-1.036c-4.834 3.546-9.884 7.1-14.339 10.242-13.584 9.57-26.694 18.808-37.368 29.137 3.255-20.02 11.408-34.614 25.368-45.36a49.382 49.382 0 0 0 .079 6.122 1.75 1.75 0 0 0 3.244.722 71.093 71.093 0 0 0 5.9-12.924 105.079 105.079 0 0 1 18.846-8.132c4.59-1.5 8.984-3.106 13.093-4.79 1.27 5.832 3.726 8.775 3.843 8.911a1.75 1.75 0 0 0 2.855-.271 65.8 65.8 0 0 0 5.941-14.547c9.846-5.266 15.556-10.162 18.753-13.61-2.24 34.822-5.968 48.463-17.319 65.145z"/><path d="m112.268 40.04a1.748 1.748 0 0 0 -2.034 1.412c-.477 2.653-1 5.073-1.586 7.4a1.751 1.751 0 0 0 1.267 2.126 1.73 1.73 0 0 0 .431.053 1.75 1.75 0 0 0 1.695-1.32c.609-2.4 1.146-4.9 1.639-7.637a1.751 1.751 0 0 0 -1.412-2.034z"/></g></svg>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.024 512.024" style="enable-background:new 0 0 512.024 512.024;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M487.016,1.624c-5.632-2.752-12.288-1.952-17.088,1.984c-39.744,32.352-76.896,46.016-119.904,61.888
+			c-29.088,10.688-61.984,22.848-99.264,42.528c-37.632,21.504-50.72,67.648-55.072,102.976
+			c-3.392-11.744-5.344-27.872-3.712-49.792c0.48-6.496-3.04-12.64-8.832-15.52c-5.792-2.912-12.8-2.016-17.728,2.336
+			C47.912,251.576,56.456,345.88,77.384,410.776c-39.104,42.688-57.76,74.656-59.264,77.344c-4.384,7.68-1.696,17.408,5.984,21.792
+			c2.496,1.44,5.216,2.112,7.872,2.112c5.568,0,10.976-2.912,13.952-8.064c0.352-0.608,17.856-30.432,54.944-70.944
+			c26.272,5.088,51.584,8,75.584,8c65.6,0,122.624-19.008,170.176-56.864C490.152,269.912,495.816,26.584,496.008,16.28
+			C496.104,10.072,492.616,4.344,487.016,1.624z M326.664,359.128c-52.672,41.888-119.52,57.056-198.592,45.984
+			c39.808-38.496,94.784-82.048,167.2-118.88c7.872-3.968,11.008-13.6,6.976-21.472c-4-7.904-13.6-10.944-21.504-7.008
+			c-77.632,39.456-135.872,85.792-177.696,126.56c-12.928-51.616-10.592-115.264,57.536-187.264
+			c6.944,59.36,42.048,73.312,43.808,73.952c5.12,1.92,10.848,1.12,15.232-2.176c4.352-3.264,6.752-8.512,6.368-13.952
+			c-1.856-25.6,1.888-96.896,40.192-118.816c34.912-18.432,65.408-29.664,94.912-40.544c34.24-12.608,67.04-24.672,100.672-46.432
+			C454.984,118.36,428.552,278.136,326.664,359.128z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M352.008,480.024h-256c-8.832,0-16,7.168-16,16c0,8.832,7.168,16,16,16h256c8.832,0,16-7.168,16-16
+			C368.008,487.192,360.84,480.024,352.008,480.024z"/>
+	</g>
+</g>
+</svg>
--- a/src/assets/img/icons/rocket.svg
+++ b/src/assets/img/icons/rocket.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m511.4 38.222c-1.109-20.338-17.284-36.511-37.622-37.621-41.038-2.242-121.342-.061-198.13 39.656-39.145 20.248-80.545 54.577-113.584 94.185-.407.488-.803.979-1.207 1.468l-74.98 5.792c-12.342.954-23.335 7.423-30.161 17.747l-51.154 77.372c-5.177 7.83-6 17.629-2.203 26.212 3.798 8.584 11.602 14.566 20.877 16.003l63.171 9.784c-.223 1.228-.447 2.455-.652 3.683-2.103 12.58 2.065 25.514 11.151 34.599l87.992 87.993c7.533 7.533 17.712 11.686 28.142 11.686 2.148 0 4.308-.177 6.458-.536 1.228-.205 2.455-.429 3.683-.652l9.784 63.172c1.437 9.275 7.419 17.08 16.001 20.877 3.571 1.58 7.35 2.36 11.112 2.36 5.283-.001 10.529-1.539 15.101-4.562l77.372-51.155c10.325-6.827 16.793-17.82 17.745-30.161l5.792-74.979c.489-.404.981-.8 1.469-1.207 39.609-33.039 73.939-74.439 94.186-113.585 39.719-76.791 41.896-157.096 39.657-198.131zm-175.394 393.037-74.011 48.933-9.536-61.565c31.28-9.197 62.223-23.927 91.702-43.66l-3.773 48.845c-.235 3.047-1.833 5.762-4.382 7.447zm-129.895-37.377-87.993-87.993c-2.245-2.246-3.283-5.401-2.774-8.44 2.616-15.643 6.681-30.534 11.713-44.562l132.028 132.028c-16.848 6.035-31.939 9.635-44.534 11.741-3.044.506-6.195-.529-8.44-2.774zm-117.923-222.269 48.844-3.773c-19.734 29.479-34.464 60.422-43.661 91.702l-61.564-9.535 48.934-74.012c1.686-2.55 4.401-4.147 7.447-4.382zm270.155 155.286c-24.233 20.213-47.756 34.833-69.438 45.412l-149.221-149.221c13.858-28.304 30.771-51.873 45.417-69.431 30.575-36.655 68.602-68.276 104.331-86.756 70.474-36.453 144.725-38.416 182.713-36.348 5.028.274 9.027 4.273 9.301 9.302 2.071 37.988.104 112.238-36.349 182.713-18.479 35.728-50.1 73.754-86.754 104.329z"/><path d="m350.721 236.243c19.202-.002 38.412-7.312 53.031-21.931 14.166-14.165 21.966-32.999 21.966-53.031s-7.801-38.866-21.966-53.031c-29.242-29.243-76.822-29.241-106.062 0-14.166 14.165-21.967 32.999-21.967 53.031s7.802 38.866 21.967 53.031c14.622 14.622 33.822 21.933 53.031 21.931zm-31.82-106.781c8.772-8.773 20.295-13.159 31.818-13.159 11.524 0 23.047 4.386 31.819 13.159 8.499 8.499 13.179 19.799 13.179 31.818s-4.68 23.32-13.179 31.819c-17.544 17.545-46.093 17.544-63.638 0-8.499-8.499-13.18-19.799-13.18-31.818s4.682-23.32 13.181-31.819z"/><path d="m15.301 421.938c3.839 0 7.678-1.464 10.606-4.394l48.973-48.973c5.858-5.858 5.858-15.355 0-21.213-5.857-5.858-15.355-5.858-21.213 0l-48.972 48.973c-5.858 5.858-5.858 15.355 0 21.213 2.928 2.929 6.767 4.394 10.606 4.394z"/><path d="m119.761 392.239c-5.857-5.858-15.355-5.858-21.213 0l-94.154 94.155c-5.858 5.858-5.858 15.355 0 21.213 2.929 2.929 6.767 4.393 10.606 4.393s7.678-1.464 10.606-4.394l94.154-94.154c5.859-5.858 5.859-15.355.001-21.213z"/><path d="m143.429 437.12-48.973 48.973c-5.858 5.858-5.858 15.355 0 21.213 2.929 2.929 6.768 4.394 10.606 4.394s7.678-1.464 10.606-4.394l48.973-48.973c5.858-5.858 5.858-15.355 0-21.213-5.857-5.858-15.355-5.858-21.212 0z"/></svg>
--- a/src/assets/img/icons/server.svg
+++ b/src/assets/img/icons/server.svg
@@ -0,0 +1,261 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+	 viewBox="0 0 480 480">
+<g>
+	<g>
+		<path d="M456,144c13.255,0,24-10.745,24-24V24c0-13.255-10.745-24-24-24H24C10.745,0,0,10.745,0,24v96c0,13.255,10.745,24,24,24
+			h24v24H24c-13.255,0-24,10.745-24,24v96c0,13.255,10.745,24,24,24h24v24H24c-13.255,0-24,10.745-24,24v96
+			c0,13.255,10.745,24,24,24h432c13.255,0,24-10.745,24-24v-96c0-13.255-10.745-24-24-24h-24v-24h24c13.255,0,24-10.745,24-24v-96
+			c0-13.255-10.745-24-24-24h-24v-24H456z M456,352c4.418,0,8,3.582,8,8v96c0,4.418-3.582,8-8,8H24c-4.418,0-8-3.582-8-8v-96
+			c0-4.418,3.582-8,8-8H456z M64,336v-24h16v24H64z M96,336v-24h288v24H96z M400,336v-24h16v24H400z M456,184c4.418,0,8,3.582,8,8
+			v96c0,4.418-3.582,8-8,8H24c-4.418,0-8-3.582-8-8v-96c0-4.418,3.582-8,8-8H456z M64,168v-24h16v24H64z M96,168v-24h288v24H96z
+			 M400,168v-24h16v24H400z M24,128c-4.418,0-8-3.582-8-8V24c0-4.418,3.582-8,8-8h432c4.418,0,8,3.582,8,8v96c0,4.418-3.582,8-8,8
+			H24z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M256,64H94.528C90.11,51.503,76.397,44.954,63.901,49.373S44.855,67.503,49.273,80s18.131,19.046,30.627,14.627
+			C86.735,92.211,92.112,86.835,94.528,80H256c4.418,0,8-3.582,8-8S260.418,64,256,64z M72,80c-4.418,0-8-3.582-8-8s3.582-8,8-8
+			s8,3.582,8,8S76.418,80,72,80z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="352" y="32" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="384" y="32" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="416" y="32" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="320" y="32" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="288" y="32" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="352" y="64" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="384" y="64" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="416" y="64" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="320" y="64" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="288" y="64" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="352" y="96" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="384" y="96" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="416" y="96" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="320" y="96" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="288" y="96" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M256,232H94.528c-4.418-12.497-18.131-19.046-30.627-14.627S44.855,235.503,49.273,248s18.131,19.046,30.627,14.627
+			c6.835-2.416,12.211-7.793,14.627-14.627H256c4.418,0,8-3.582,8-8S260.418,232,256,232z M72,248c-4.418,0-8-3.582-8-8s3.582-8,8-8
+			s8,3.582,8,8S76.418,248,72,248z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="352" y="200" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="384" y="200" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="416" y="200" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="320" y="200" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="288" y="200" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="352" y="232" width="16" height="16"/>
+	</g>
+</g>
+  <g>
+    <g>
+      <rect x="384" y="232" width="16" height="16"/>
+    </g>
+  </g>
+  <g>
+    <g>
+      <rect x="416" y="232" width="16" height="16"/>
+    </g>
+  </g>
+<g>
+	<g>
+		<rect x="320" y="232" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="288" y="232" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="352" y="264" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="384" y="264" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="416" y="264" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="320" y="264" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="288" y="264" width="16" height="16"/>
+	</g>
+</g>
+  <g>
+    <g>
+      <path d="M256,400H94.528c-4.418-12.497-18.131-19.046-30.627-14.627S44.855,403.503,49.273,416s18.131,19.046,30.627,14.627
+			c6.835-2.416,12.211-7.793,14.627-14.627H256c4.418,0,8-3.582,8-8S260.418,400,256,400z M72,416c-4.418,0-8-3.582-8-8s3.582-8,8-8
+			s8,3.582,8,8S76.418,416,72,416z"/>
+    </g>
+  </g>
+<g>
+	<g>
+		<rect x="352" y="368" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="384" y="368" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="416" y="368" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="320" y="368" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="288" y="368" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="352" y="400" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="384" y="400" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="416" y="400" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="320" y="400" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="288" y="400" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="352" y="432" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="384" y="432" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="416" y="432" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="320" y="432" width="16" height="16"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="288" y="432" width="16" height="16"/>
+	</g>
+</g>
+</svg>
--- a/src/assets/img/icons/software.svg
+++ b/src/assets/img/icons/software.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m0 466c0 5.522 4.478 10 10 10h492c5.522 0 10-4.478 10-10v-420c0-5.522-4.478-10-10-10h-492c-5.522 0-10 4.478-10 10zm492-410v40h-190.999c-5.522 0-10 4.478-10 10s4.478 10 10 10h190.999v340h-472v-340h191.001c5.522 0 10-4.478 10-10s-4.478-10-10-10h-191.001v-40z"/><path d="m251.094 331.384 90.136 52.036c1.548.894 3.273 1.34 5 1.34 1.733 0 3.468-.45 5.019-1.351l89.77-52.09c.018-.01.032-.023.05-.034 2.938-1.725 4.893-4.933 4.925-8.517 0-.033.007-.066.007-.099v-104.2c0-3.558-1.89-6.848-4.964-8.639l-90-52.47c-3.057-1.781-6.953-1.818-10.072 0l-90 52.47c-3.074 1.791-4.964 5.081-4.964 8.639v104.2c-.001 3.649 2.052 7.005 5.093 8.715zm95.124 31.822-70.218-40.537 70.219-40.544 69.859 40.544zm79.782-57.901-70-40.626v-81.273l70 40.81zm-90-121.9v81.525l-70 40.418v-81.134z"/><path d="m106 206h60c5.522 0 10-4.478 10-10s-4.478-10-10-10h-60c-5.522 0-10 4.478-10 10s4.478 10 10 10z"/><path d="m196 246h-120c-5.522 0-10 4.478-10 10s4.478 10 10 10h120c5.522 0 10-4.478 10-10s-4.478-10-10-10z"/><path d="m196 306h-120c-5.522 0-10 4.478-10 10s4.478 10 10 10h120c5.522 0 10-4.478 10-10s-4.478-10-10-10z"/><path d="m196 366h-120c-5.522 0-10 4.478-10 10s4.478 10 10 10h120c5.522 0 10-4.478 10-10s-4.478-10-10-10z"/><circle cx="256.001" cy="106" r="10"/></g></svg>
--- a/src/assets/img/icons/sun.svg
+++ b/src/assets/img/icons/sun.svg
@@ -0,0 +1,56 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 302.4 302.4" style="enable-background:new 0 0 302.4 302.4;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M204.8,97.6C191.2,84,172,75.2,151.2,75.2s-40,8.4-53.6,22.4c-13.6,13.6-22.4,32.8-22.4,53.6s8.8,40,22.4,53.6
+			c13.6,13.6,32.8,22.4,53.6,22.4s40-8.4,53.6-22.4c13.6-13.6,22.4-32.8,22.4-53.6S218.8,111.2,204.8,97.6z M190.4,190.4
+			c-10,10-24,16-39.2,16s-29.2-6-39.2-16s-16-24-16-39.2s6-29.2,16-39.2s24-16,39.2-16s29.2,6,39.2,16s16,24,16,39.2
+			S200.4,180.4,190.4,190.4z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M292,140.8h-30.8c-5.6,0-10.4,4.8-10.4,10.4c0,5.6,4.8,10.4,10.4,10.4H292c5.6,0,10.4-4.8,10.4-10.4
+			C302.4,145.6,297.6,140.8,292,140.8z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M151.2,250.8c-5.6,0-10.4,4.8-10.4,10.4V292c0,5.6,4.8,10.4,10.4,10.4c5.6,0,10.4-4.8,10.4-10.4v-30.8
+			C161.6,255.6,156.8,250.8,151.2,250.8z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M258,243.6l-22-22c-3.6-4-10.4-4-14.4,0s-4,10.4,0,14.4l22,22c4,4,10.4,4,14.4,0S262,247.6,258,243.6z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M151.2,0c-5.6,0-10.4,4.8-10.4,10.4v30.8c0,5.6,4.8,10.4,10.4,10.4c5.6,0,10.4-4.8,10.4-10.4V10.4
+			C161.6,4.8,156.8,0,151.2,0z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M258.4,44.4c-4-4-10.4-4-14.4,0l-22,22c-4,4-4,10.4,0,14.4c3.6,4,10.4,4,14.4,0l22-22C262.4,54.8,262.4,48.4,258.4,44.4z"
+			/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M41.2,140.8H10.4c-5.6,0-10.4,4.8-10.4,10.4s4.4,10.4,10.4,10.4h30.8c5.6,0,10.4-4.8,10.4-10.4
+			C51.6,145.6,46.8,140.8,41.2,140.8z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M80.4,221.6c-3.6-4-10.4-4-14.4,0l-22,22c-4,4-4,10.4,0,14.4s10.4,4,14.4,0l22-22C84.4,232,84.4,225.6,80.4,221.6z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M80.4,66.4l-22-22c-4-4-10.4-4-14.4,0s-4,10.4,0,14.4l22,22c4,4,10.4,4,14.4,0S84.4,70.4,80.4,66.4z"/>
+	</g>
+</g>
+</svg>
--- a/src/assets/img/icons/translation.svg
+++ b/src/assets/img/icons/translation.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m226.022 121.964c8.284 0 15-6.716 15-15s-6.716-15-15-15h-45.492v-15.653c0-8.284-6.716-15-15-15s-15 6.716-15 15v15.653h-45.491c-8.284 0-15 6.716-15 15s6.716 15 15 15h45.491v16.334c-4.259 7.375-15.227 25.736-26.925 40.25-12.729 15.793-27.285 26.562-27.413 26.656-6.69 4.886-8.153 14.27-3.267 20.96 4.885 6.689 14.268 8.153 20.96 3.267 10.452-7.638 24.879-21.21 36.645-36.611v24.497c0 8.284 6.716 15 15 15s15-6.716 15-15v-24.497c11.616 15.204 25.984 28.82 36.645 36.612 6.689 4.885 16.074 3.423 20.96-3.267s3.423-16.075-3.267-20.96c-.145-.105-14.561-10.709-27.413-26.656-11.665-14.473-22.658-32.869-26.925-40.253v-16.331h45.492z"/><path d="m363.748 303.08c-2.32-5.459-7.639-9.039-13.57-9.132-5.938-.131-11.359 3.317-13.85 8.701-42.336 91.532-31.005 67.032-53.091 114.789-3.478 7.519-.201 16.434 7.318 19.911 7.521 3.477 16.434.198 19.91-7.318l10.567-22.849h54.355l9.529 22.419c3.243 7.63 12.055 11.176 19.672 7.938 7.624-3.24 11.178-12.048 7.938-19.672-14.092-33.153-1.296-3.04-48.778-114.787zm-28.84 74.102 14.453-31.248 13.277 31.248z"/><path d="m466.643 260.721-8.716-67.094c-1.259-9.688-11.308-15.601-20.38-12.021l-99.055 39.078c-10.238 0-16.997-.186-27.594 1.15 12.798-21.665 20.156-46.908 20.156-73.841v-2.35c0-80.307-65.331-145.643-145.633-145.643h-39.788c-80.302 0-145.633 65.336-145.633 145.643v2.35c0 31.591 10.395 62.554 29.359 87.702l8.769 83.719c.499 4.761 3.24 8.998 7.378 11.404 2.322 1.351 4.927 2.033 7.541 2.033 2.045 0 4.095-.418 6.02-1.261l86.642-37.964h39.713c6.203 0 12.316-.392 18.317-1.149-12.804 21.671-20.166 46.922-20.166 73.864 0 38.899 15.149 75.478 42.661 103.001 27.52 27.509 64.099 42.658 102.997 42.658h37.111c80.317 0 145.658-65.342 145.658-145.658 0-40.171-16.204-77.975-45.357-105.621zm-330.027 4.136-70.79 31.018-7.077-67.571c-.301-2.871-1.423-5.594-3.233-7.842-16.693-20.742-25.516-45.801-25.516-72.469v-2.35c0-63.765 51.873-115.643 115.633-115.643h39.788c63.76 0 115.633 51.877 115.633 115.643v2.35c0 63.76-51.873 115.633-115.633 115.633-46.664 0-44.891-.484-48.805 1.231zm229.726 217.143h-37.111c-30.888 0-59.935-12.03-81.784-33.871-21.844-21.853-33.875-50.899-33.875-81.788 0-63.774 51.884-115.658 115.658-115.658 12.856 0 14.222.293 17.618-1.046l83.807-33.063 6.944 53.453c.898 6.913 4.925 8.956 10.528 14.528 21.844 21.844 33.873 50.89 33.873 81.787 0 63.774-51.883 115.658-115.658 115.658z"/></g></svg>
--- a/src/assets/img/icons/tree.svg
+++ b/src/assets/img/icons/tree.svg
@@ -0,0 +1,17 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 512 512" xml:space="preserve">
+<g>
+	<g>
+		<path d="M394.163,119.466c-4.535-31.37-19.603-60.217-43.037-82.042C325.213,13.291,291.431,0,256.002,0
+			c-35.429,0-69.211,13.291-95.125,37.424c-23.434,21.825-38.501,50.672-43.037,82.042c-50.475,22.04-83.763,72.319-83.763,127.977
+			c0,76.979,62.627,139.605,139.605,139.605c23.725,0,46.846-6.032,67.318-17.307V512h30V369.741
+			c20.472,11.275,43.593,17.307,67.318,17.307c76.979,0,139.605-62.627,139.605-139.605
+			C477.926,191.785,444.638,141.505,394.163,119.466z M338.32,357.048c-24.474,0-48.13-8.171-67.318-23.122v-91.75l67.279-35.375
+			l-13.962-26.553l-53.317,28.034V149.23h-30v125.545l-53.317-28.034l-13.962,26.553l67.279,35.375v25.257
+			c-19.188,14.951-42.844,23.122-67.318,23.122c-60.437,0-109.605-49.169-109.605-109.605c0-46.211,29.226-87.7,72.725-103.241
+			l9.176-3.278l0.734-9.716c2.078-27.469,14.369-52.979,34.61-71.83C201.665,40.433,228.187,30,256.002,30
+			s54.337,10.433,74.679,29.377c20.241,18.851,32.532,44.36,34.61,71.83l0.734,9.716l9.176,3.278
+			c43.499,15.541,72.725,57.03,72.725,103.241C447.926,307.879,398.757,357.048,338.32,357.048z"/>
+	</g>
+</g>
+</svg>
--- a/src/assets/img/icons/wrench.svg
+++ b/src/assets/img/icons/wrench.svg
@@ -0,0 +1,19 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M501.818,90.997c-1.876-4.733-6.008-8.204-10.993-9.234c-4.992-1.032-10.157,0.516-13.756,4.116l-77.994,77.994
+			l-41.932-9.016l-9.015-41.932l77.994-77.995c3.6-3.6,5.146-8.77,4.116-13.755c-1.031-4.986-4.502-9.117-9.234-10.995
+			c-53.547-21.234-114.462-8.644-155.187,32.078c-19.604,19.604-33.066,44.226-38.93,71.206
+			c-5.016,23.082-4.312,46.931,1.991,69.544L20.734,391.153C7.363,404.523,0,422.3,0,441.209c0,18.909,7.363,36.686,20.735,50.057
+			C34.105,504.637,51.882,512,70.791,512c18.908,0,36.686-7.363,50.056-20.734l208.145-208.144
+			c22.613,6.303,46.461,7.007,69.543,1.99c26.98-5.864,51.603-19.327,71.207-38.93C510.463,205.459,523.053,144.546,501.818,90.997z
+			 M448.354,224.796c-30.845,30.845-77.377,41.402-118.55,26.89c-5.49-1.934-11.602-0.546-15.719,3.57L99.46,469.88
+			c-7.658,7.659-17.841,11.877-28.671,11.877c-10.831,0-21.012-4.218-28.671-11.877c-7.658-7.659-11.876-17.841-11.876-28.671
+			c0-10.83,4.218-21.012,11.877-28.671l214.624-214.624c4.116-4.116,5.504-10.229,3.57-15.719
+			c-14.511-41.171-3.956-87.705,26.889-118.55c21.8-21.8,50.919-33.398,80.596-33.398c6.226,0,12.479,0.51,18.69,1.545l-65.57,65.57
+			c-3.63,3.629-5.171,8.852-4.092,13.871l12.799,59.533c1.251,5.814,5.792,10.355,11.605,11.605l59.534,12.8
+			c5.022,1.079,10.241-0.462,13.872-4.092l65.569-65.57C486.17,161.332,474.726,198.423,448.354,224.796z"/>
+	</g>
+</g>
+</svg>
--- a/src/assets/img/logo-transparent.png
+++ b/src/assets/img/logo-transparent.png
--- a/src/assets/img/me-home.jpg
+++ b/src/assets/img/me-home.jpg
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,55 +1,23 @@
 <template>
-  <footer class="footer w-full border-t border-gray-200 border-solid">
-    <div class="footer-top flex flex-col items-center justify-center">
-      <div>
-        <ul class="flex text-lg flex-row">
-          <nuxt-link to="/">
-            <li class="hover:bg-red-400 py-1 px-3 mx-4 cursor-pointer duration-500">
-              Accueil
-            </li>
-          </nuxt-link>
-          <nuxt-link to="/about">
-            <li class="hover:bg-orange-400 py-1 px-3 mx-4 cursor-pointer duration-500">
-              A Propos
-            </li>
-          </nuxt-link>
-          <nuxt-link to="/blog">
-            <li class="hover:bg-green-400 py-1 px-3 mx-4 cursor-pointer duration-500">
-              Blog
-            </li>
-          </nuxt-link>
-          <nuxt-link to="/work">
-            <li class="hover:bg-blue-400 py-1 px-3 mx-4 cursor-pointer duration-500">
-              Travail
-            </li>
-          </nuxt-link>
-          <nuxt-link to="/contact">
-            <li class="hover:bg-purple-400 py-1 px-3 mx-4 cursor-pointer duration-500">
-              Contact
-            </li>
-          </nuxt-link>
-        </ul>
-      </div>
-      <div class="flex flex-col justify-center my-4">
-        <div class="text-center">
-          <p class="text-lg">
-            Contactez moi par mail : <span class="text-red-400 hover:text-red-700 duration-300 cursor-pointer">contact@arthurdanjou.fr</span>
-          </p>
-          <div class="text-gray-600 text-xs text-right">
-            (Clique c'est gratuit ❤)
-          </div>
+  <footer class="footer w-full border-t border-gray-400 border-solid mb-20 md:mb-0">
+    <div>
+      <div class="flex flex-col items-center border-t border-solid border-gray-400 py-4 bg-gray-200 text-center ">
+        <div class="mb-3">
+          <p class="inline">Retrouvez moi sur :
+            <span><a href="https://twitch.com/ArthurDanjou" target="_blank">Twitch</a></span>,
+            <span><a href="https://github.com/ArthurDanjou" target="_blank">Github</a></span> &
+            <span><a href="https://twitter.com/ArthurDanj" target="_blank">Twitter</a></span> et par
+            <span><a href="mailto:contact@arthurdanjou.fr" target="_blank">Mail</a></span></p>
+          <span class="inline text-gray-600 text-xs">
+            (Clique c'est gratuit 🔗)
+          </span>
        </div>
-        <p class="text-mg text-center">
-          Retrouvez moi sur : <span>Twitter</span>, <span>Github</span> et <span>Twitch</span>
+        <p>
+          Développé et conçu avec ❤ en utilisant <span>NuxtJs</span> & <span>AdonisJs</span> par <span>Arthur DANJOU</span>
        </p>
+        <p>© Copyright {{date}} - Tous droits réservés</p>
      </div>
    </div>
-    <div class="flex flex-col items-center border-t border-solid border-gray-400 py-4 bg-gray-200">
-      <p>
-        Développé et conçu avec ❤ en utilisant <span>NuxtJs</span> & <span>AdonisJs</span> par <span>Arthur DANJOU</span>
-      </p>
-      <p>© Copyright {{date}} - Tous droits réservés</p>
-    </div>
  </footer>
 </template>

--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,54 +1,124 @@
 <template>
-  <header class="header border-b border-gray-200 border-solid tracking-wider">
-    <div class="header-container flex justify-between items-center h-full">
-      <div class="left text-2xl font-bold cursor-pointer hover:underline duration-500">
+  <header class="fixed top-0 left-0 bg-white header border-b border-gray-200 border-solid tracking-wider w-full h-16 lg:h-24">
+    <div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
+      <div class="left text-2xl font-bold cursor-pointer hover:underline duration-500 dark:text-white dark:bg-black">
        Arthur Danjou
      </div>
-      <div class="right">
-        <ul class="flex text-xl">
-          <nuxt-link to="/">
-            <li class="hover:bg-red-400 py-1 px-3 mx-2 cursor-pointer duration-500">
+      <nav class="right">
+        <div class="flex flex-col md:flex-row items-center">
+          <ul class="flex text-xl">
+            <li class="mx-2 cursor-pointer">
+              <nuxt-link to="/dev"> FR </nuxt-link>
+            </li>
+            <li class="mx-2 cursor-pointer flex items-center">
+              <div @click="changeColorMode()" v-if="this.$colorMode.value === 'light'"  class="">
+                <img alt="Moon Logo" src="@/assets/img/icons/moon.svg" height="25" width="25"/>
+              </div>
+              <div @click="changeColorMode()" v-else class="">
+                <img src="@/assets/img/icons/sun.svg" alt="Sun Logo" height="25" width="25"/>
+              </div>
+            </li>
+            <nuxt-link class="red hidden md:inline-block" to="/">
+              <li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300">
+                Accueil
+              </li>
+            </nuxt-link>
+            <nuxt-link class="orange hidden md:inline-block" to="/about">
+              <li class="hover:text-orange-400 font-bold mx-2 cursor-pointer duration-300">
+                Moi
+              </li>
+            </nuxt-link>
+            <nuxt-link class="green hidden md:inline-block" to="/blog">
+              <li class="hover:text-green-400 font-bold mx-2 cursor-pointer duration-300">
+                Blog
+              </li>
+            </nuxt-link>
+            <nuxt-link class="blue hidden md:inline-block" to="/work">
+              <li class="hover:text-blue-400 font-bold mx-2 cursor-pointer duration-300">
+                Travail
+              </li>
+            </nuxt-link>
+            <nuxt-link class="purple hidden md:inline-block" to="/contact">
+              <li class="hover:text-purple-400 font-bold mx-2 cursor-pointer duration-300">
+                Contact
+              </li>
+            </nuxt-link>
+          </ul>
+        </div>
+        <ul class="z-index-50 bg-white md:hidden fixed bottom-0 left-0 z-index-20 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
+          <nuxt-link class="red" to="/">
+            <li class="font-bold flex flex-col items-center justify-center">
+              <img class="inline-block" src="@/assets/img/icons/home.svg" alt="Home icon" height="15" width="15" />
              Accueil
            </li>
          </nuxt-link>
-          <nuxt-link to="/about">
-            <li class="hover:bg-orange-400 py-1 px-3 mx-2 cursor-pointer duration-500">
-              A Propos
+          <nuxt-link to="/about" class="orange">
+            <li class="font-bold flex flex-col items-center justify-center">
+              <img class="inline-block" src="@/assets/img/icons/profile.svg" alt="About icon" height="15" width="15" />
+              Moi
            </li>
          </nuxt-link>
-          <nuxt-link to="/blog">
-            <li class="hover:bg-green-400 py-1 px-3 mx-2 cursor-pointer duration-500">
+          <nuxt-link to="/blog" class="green">
+            <li class="font-bold flex flex-col items-center justify-center">
+              <img class="inline-block" src="@/assets/img/icons/quill.svg" alt="Blog icon" height="15" width="15" />
              Blog
            </li>
          </nuxt-link>
-          <nuxt-link to="/work">
-            <li class="hover:bg-blue-400 py-1 px-3 mx-2 cursor-pointer duration-500">
+          <nuxt-link to="/work" class="blue">
+            <li class="font-bold flex flex-col items-center justify-center">
+              <img class="inline-block" src="@/assets/img/icons/case.svg" alt="Work icon" height="15" width="15" />
              Travail
            </li>
          </nuxt-link>
-          <nuxt-link to="/contact">
-            <li class="hover:bg-purple-400 py-1 px-3 mx-2 cursor-pointer duration-500">
+          <nuxt-link to="/contact" class="purple">
+            <li class="font-bold flex flex-col items-center justify-center">
+              <img class="inline-block" src="@/assets/img/icons/pin.svg" alt="Contact icon" height="15" width="15" />
              Contact
            </li>
          </nuxt-link>
        </ul>
-      </div>
+      </nav>
    </div>
  </header>
 </template>

 <script>
 export default {
-  name: "Header"
+  name: "Header",
+  methods: {
+    changeColorMode() {
+      this.$colorMode.preference = this.$colorMode.value === 'light' ? 'dark' : 'light'
+    }
+  }
 }
 </script>

 <style scoped lang="scss">
 .header {
-  height: 80px;

  .header-container {
-    padding: 0 15%;
+
+    .nuxt-link-exact-active {
+      &.red {
+        @apply text-red-400;
+      }
+      &.orange {
+        @apply text-orange-400;
+      }
+      &.green {
+        @apply text-green-400;
+      }
+      &.blue {
+        @apply text-blue-400;
+      }
+      &.purple {
+        @apply text-purple-400;
+      }
+    }
+
+    .navbar-bottom-items li {
+      transition: all .2s ease-in-out;
+    }
  }
 }
 </style>
--- a/src/components/HomePost.vue
+++ b/src/components/HomePost.vue
@@ -0,0 +1,62 @@
+<template>
+  <article class="border border-solid border-gray-300 w-full lg:w-1/3 h-auto h-blog p-2 flex flex-col justify-between my-5 lg:my-0 lg:mx-5">
+    <div>
+      <p class="text-3xl font-bold text-justify leading-7">{{title}}</p>
+      <p class="text-gray-900 text-lg italic text-justify">{{description}}</p>
+    </div>
+    <div class="flex justify-between mt-8">
+      <div>
+        <div>{{date}}</div>
+        <div>{{reading_time}} min read</div>
+      </div>
+      <div class="self-end flex flex-wrap">
+        <div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 rounded bg-black text-white font-semibold">
+          #{{tag}}
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script>
+export default {
+  name: "HomePost",
+  props: {
+    title: {
+      type: String,
+      default: "New Post's title "
+    },
+    description: {
+      type: String,
+      default: "New Post's description"
+    },
+    reading_time: {
+      type: String,
+      default: "0"
+    },
+    date: {
+      type: String,
+      default: "Today"
+    },
+    tags: {
+      type: String,
+      default: "Tag1 Tag2 Tag3",
+    },
+    cover: {
+      type: String,
+      default: "https://api.arthurdanjou.fr/pictures/default.png"
+    }
+  },
+  computed: {
+    tagsSplit() {
+      return this.tags.split(" ")
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.h-blog {
+  min-height: 20rem;
+}
+</style>
--- a/src/components/LangSwitcher.vue
+++ b/src/components/LangSwitcher.vue
@@ -1,17 +0,0 @@
-<template>
-  <div class="lang-switcher fixed">
-    
-  </div>
-</template>
-
-<script>
-export default {
-name: "LangSwitcher"
-}
-</script>
-
-<style scoped lang="scss">
-.lang-switcher {
-
-}
-</style>
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -0,0 +1,62 @@
+<template>
+  <article class="border border-solid border-gray-300 w-full h-auto h-blog p-2 flex flex-col justify-between my-5">
+    <div>
+      <p class="text-3xl font-bold text-justify">{{title}}</p>
+      <p class="text-gray-900 text-lg italic text-justify">{{description}}</p>
+    </div>
+    <div class="flex justify-between mt-8">
+      <div>
+        <div>{{date}}</div>
+        <div>{{reading_time}} min read</div>
+      </div>
+      <div class="self-end flex flex-wrap">
+        <div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 rounded bg-black text-white font-semibold">
+          #{{tag}}
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script>
+export default {
+  name: "Post",
+  props: {
+    title: {
+      type: String,
+      default: "New Post's title "
+    },
+    description: {
+      type: String,
+      default: "New Post's description"
+    },
+    reading_time: {
+      type: String,
+      default: "0"
+    },
+    date: {
+      type: String,
+      default: "Today"
+    },
+    tags: {
+      type: String,
+      default: "Tag1 Tag2 Tag3",
+    },
+    cover: {
+      type: String,
+      default: "https://api.arthurdanjou.fr/pictures/default.png"
+    }
+  },
+  computed: {
+    tagsSplit() {
+      return this.tags.split(" ")
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.h-blog {
+  min-height: 20rem;
+}
+</style>
--- a/src/templates/layouts/default.vue
+++ b/src/templates/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <Header />
-    <Nuxt/>
+    <Nuxt class="pt-16 lg:pt-24"/>
    <Footer />
  </div>
 </template>
@@ -14,6 +14,6 @@ export default {
 }
 </script>

-<style scoped lang="scss">
+<style scoped>

 </style>
--- a/src/templates/layouts/dev.vue
+++ b/src/templates/layouts/dev.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <Header />
+    <Nuxt class="pt-16 lg:pt-24"/>
+  </div>
+</template>
+
+<script>
+export default {
+name: "dev"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/templates/pages/about.vue
+++ b/src/templates/pages/about.vue
@@ -1,10 +1,239 @@
 <template>
-  <main>
-    <div class="flex flex-col items-center mt-32">
-      <h1 class="font-bold text-3xl mr-2 inline">
-        A Propos
-        <img class="inline blog-img" src="@/assets/img/icons/profile.svg" height="40" width="40" alt="Blog Logo" />
-      </h1>
+  <main class="about flex flex-col items-center mt-16 md:mt-32 px-5 xl:px-64">
+    <h1 class="title font-bold text-4xl mr-2 inline mb-4">
+      A Propos
+      <img class="inline about-img" src="@/assets/img/icons/profile.svg" height="40" width="40" alt="Blog Logo" />
+    </h1>
+    <div class="flex flex-col md:flex-row justify-around items-center py-8">
+      <div>
+        <img class="logo-img rounded-full my-5" src="@/assets/img/Logo.jpg" alt="It's me !" />
+      </div>
+      <div class="text-lg leading-6 md:w-2/3 text-justify">
+        <p>
+          Bonjour, je suis <span class="text-orange-400 font-bold">Arthur DANJOU</span> 👋.
+        </p> <br/>
+        <p>
+          Je suis un jeune développeur créatif qui aime bricoler et toucher à tout ! Je m'intéresse beaucoup aux nouvelles technologies, au développement et à l'informatique.
+        </p> <br/>
+        <p>
+          J'adore partager mes connaissances et aider les autres à travers des lives sur Twitchs, des articles techniques sur mon blog, des projets open-sources ou encore en relisant du code de la communauté.
+          Tant que je partage mes passions, je continuerai à faire ça.
+        </p> <br/>
+        <p>
+          Je suis capable d'apprendre rapidement des nouvelles technologies pour répondre aux besoins des différents projets.
+          J'identifie souvent le besoin de nouveaux systèmes ou outils pour améliorer l'efficacité du flux de travail.
+          Je suis toujours motivé par un défi et j'aime être bien organisé pour produire des résultats cohérents.
+        </p>
+      </div>
+    </div>
+    <div class="w-full mb-10 mt-4">
+      <h3 class="font-bold text-2xl md:text-4xl">
+        Compétences Techniques
+        <img class="inline skill-img" src="@/assets/img/icons/wrench.svg" alt="Skills logo" height="32" width="32"/>
+      </h3>
+      <div>
+        <!-- TODO -->
+        TODO Insert Skills
+      </div>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl">
+        Intérêts
+        <img class="inline interest-img" src="@/assets/img/icons/fire.svg" alt="Interests logo" height="32" width="32"/>
+      </h3>
+      <div>
+        <!-- TODO -->
+        <ul class="text-xl">
+          <li class="my-2">
+            Technologies
+            <img class="inline" src="@/assets/img/icons/cpu.svg" alt="Dev icon" height="25" width="25" />
+          </li>
+          <li class="my-2">
+            Développement
+            <img class="inline" src="@/assets/img/icons/code.svg" alt="Dev icon" height="25" width="25" />
+          </li>
+          <li class="my-2">
+            DevOps
+            <img class="inline" src="@/assets/img/icons/infinite.svg" alt="Dev icon" height="25" width="25" />
+          </li>
+          <li class="my-2">
+            Startups & Entreprises innovantes
+            <img class="inline" src="@/assets/img/icons/rocket.svg" alt="Dev icon" height="25" width="25" />
+          </li>
+          <li class="my-2">
+            Voyage
+            <img class="inline" src="@/assets/img/icons/airplane.svg" alt="Dev icon" height="25" width="25" />
+          </li>
+          <li class="my-2">
+            Moto
+            <img class="inline" src="@/assets/img/icons/motorbike.svg" alt="Dev icon" height="25" width="25" />
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl">
+        Langues
+        <img class="inline interest-img" src="@/assets/img/icons/translation.svg" alt="Languages logo" height="32" width="32"/>
+      </h3>
+      <div>
+        <table class="text-base text-xl">
+          <tr>
+            <td class="font-bold py-2 pr-4">Français 🇫🇷</td>
+            <td class="py-2 px-4">Natal</td>
+          </tr>
+          <tr>
+            <td class="font-bold py-2 pr-4">Anglais 🇬🇧</td>
+            <td class="py-2 px-4">Fluent</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl">
+        Formation
+        <img class="inline formation-img" src="@/assets/img/icons/formation.svg" alt="Formations logo" height="32" width="32"/>
+      </h3>
+      <div>
+        <!-- TODO -->
+        TODO Insert Formations
+      </div>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl">
+        Expériences
+        <img class="inline experience-img" src="@/assets/img/icons/experience.svg" alt="Experience logo" height="32" width="32"/>
+      </h3>
+      <div>
+        <!-- TODO -->
+        TODO Insert Experiences
+      </div>
+    </div>
+    <nuxt-link to="/cv">
+      <div class="flex justify-center items-center font-bold py-4 px-6 bg-orange-300 hover:bg-orange-500 cursor-pointer duration-500 rounded-full">
+        Télécharger mon CV
+        <img class="inline experience-img" src="@/assets/img/icons/cv.svg" alt="Experience logo" height="32" width="32"/>
+      </div>
+    </nuxt-link>
+    <div class="my-10 border-t-2 border-black border-solid w-full" />
+    <h1 class="mb-10 title font-bold text-4xl mr-2 inline mb-4">
+      Environnement
+      <img class="inline about-img" src="@/assets/img/icons/tree.svg" height="40" width="40" alt="Environment Logo" />
+    </h1>
+    <p class="text-lg leading-6 text-justify pb-8">
+      Mon environnement de développement permet de gagner en productivité.
+      En effet, je m'organise de la sorte à toujours optimiser mon temps de réflexion et de développement.
+      Voici donc une liste de tous mes logiciels que j'utilise au quotidien et de mon setup.
+    </p>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl mb-2">
+        Editeurs de texte
+        <img class="inline experience-img" src="@/assets/img/icons/code.svg" alt="Editor logo" height="32" width="32"/>
+      </h3>
+      <ul class="list-disc ml-10 text-gray-800">
+        <li>
+          Editeur Java: <span>Intellij Idea Ultimate</span>
+        </li>
+        <li>
+          Editeur Python: <span>Pycharm Ultimate</span>
+        </li>
+        <li>
+          Editeur Web: <span>Webstorm</span>
+        </li>
+        <li>
+          Editeur Go: <span>Goland</span>
+        </li>
+        <li>
+          Editeur de bases de données: <span>DataGrip</span>
+        </li>
+        <li>
+          All-In-One: <span>Jetbrains Toolbox</span>
+        </li>
+        <li>
+          Police d'écriture: <span>Jetbrains Mono</span>
+        </li>
+        <li>
+          Console: <span>GitBash</span>
+        </li>
+        <li>
+          WSL 2: <span>Ubuntu 20.04</span>
+        </li>
+      </ul>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl mb-2">
+        Apps & Logiciels
+        <img class="inline experience-img" src="@/assets/img/icons/software.svg" alt="Software logo" height="32" width="32"/>
+      </h3>
+      <ul class="list-disc ml-10 text-gray-800">
+        <li>
+          Email: <span>Courrier by Microsoft</span>
+        </li>
+        <li>
+          Client VPN: <span>Pritunl</span>
+        </li>
+        <li>
+          Client FTP: <span>WinSCP</span>
+        </li>
+        <li>
+          Navigateur web: <span>Intellij Idea Ultimate</span>
+        </li>
+        <li>
+          Organisation: <span>Trello</span> & <span>Notion</span>
+        </li>
+        <li>
+          Création / graphimde: <span>Affinity Designer</span>
+        </li>
+        <li>
+          Communication: <span>Discord</span>, <span>Slack</span> & <span>Mattermost</span>
+        </li>
+      </ul>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl mb-2">
+        Hébergement
+        <img class="inline-block experience-img" src="@/assets/img/icons/server.svg" alt="Server logo" height="32" width="32"/>
+      </h3>
+      <ul class="list-disc ml-10 text-gray-800">
+        <li>
+          Hébergeur VPS: <span>PulseHeberg</span>
+        </li>
+        <li>
+          Hébergeur nom de domaine: <span>OVH</span>
+        </li>
+      </ul>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl mb-2">
+        Setup bureautique
+        <img class="inline experience-img" src="@/assets/img/icons/lamp.svg" alt="Desktop logo" height="32" width="32"/>
+      </h3>
+      <ul class="list-disc ml-10 text-gray-800">
+        <li>
+          Bureau: <span>Ikea en bois</span>
+        </li>
+        <li>
+          Téléphone: <span>Samsung Galaxy Note 8</span>
+        </li>
+        <li>
+          Ordinateur fixe: <span>Asus i5, 8Go Ram, GTX 950, 1To HDD</span>
+        </li>
+        <li>
+          Ecran: <span>iiyama ProLite E2283HS</span>
+        </li>
+        <li>
+          Clavier : <span>Microsoft</span>
+        </li>
+        <li>
+          Souris: <span>Roccat Kova</span>
+        </li>
+        <li>
+          Ecouteurs: <span>Apple Airpods</span>
+        </li>
+        <li>
+          Casque/Micro: <span>Turtle Beach px22</span>
+        </li>
+      </ul>
    </div>
  </main>
 </template>
@@ -16,5 +245,39 @@ name: "about"
 </script>

 <style scoped lang="scss">
+.about {
+  .about-img {
+    transform: translate(3px, -10px);
+  }

+  .title:after {
+    margin-top: 0.1rem;
+    content: '';
+    height: 2px;
+    width: 100%;
+    display: block;
+    @apply bg-orange-400;
+  }
+
+  .logo-img {
+    height: 20rem;
+  }
+
+  .skill-img {
+    transform: translate(3px, -5px);
+  }
+
+  .interest-img {
+    transform: translate(3px, -5px);
+  }
+
+  .formation-img {
+    transform: translate(3px, 0);
+  }
+
+  .experience-img {
+    transform: translate(3px, -3px);
+  }
+
+}
 </style>
--- a/src/templates/pages/blog.vue
+++ b/src/templates/pages/blog.vue
@@ -0,0 +1,41 @@
+<template>
+  <main class="blog flex flex-col items-center mt-16 md:mt-32 px-5 xl:px-64">
+    <h1 class="title font-bold text-4xl mr-2 inline mb-4">
+      Blog
+      <img class="inline blog-img" src="@/assets/img/icons/quill.svg" height="40" width="40" alt="Blog Logo" />
+    </h1>
+    <div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
+      <!-- TODO Insert blog's posts -->
+      <Post
+        title="Il était une nouvelle fois la vie"
+        reading_time="4"
+        description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
+        tags="Dev Tech"/>
+      <Post />
+      <Post />
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+name: "blog"
+}
+</script>
+
+<style scoped lang="scss">
+.blog {
+  .blog-img {
+    transform: translate(3px, -10px);
+  }
+
+  .title:after {
+    margin-top: 0.1rem;
+    content: '';
+    height: 2px;
+    width: 100%;
+    display: block;
+    @apply bg-green-400;
+  }
+}
+</style>
--- a/src/templates/pages/dev.vue
+++ b/src/templates/pages/dev.vue
@@ -1,10 +1,13 @@
 <template>
-
+  <main>
+    Dev page
+  </main>
 </template>

 <script>
 export default {
-name: "GoToTop"
+  name: "dev",
+  layout: 'dev'
 }
 </script>

--- a/src/templates/pages/index.vue
+++ b/src/templates/pages/index.vue
@@ -1,31 +1,31 @@
 <template>
-  <main class="index">
-    <section class="banner w-full flex justify-between flex-row-reverse items-center mb-16">
-      <div class="flex justify-center items-center w-1/2">
+  <main class="index mt-10 md:mt-32 dark:bg-gray-900 dark:text-white px-5 xl:px-64">
+    <section class="banner w-full flex justify-between flex-col lg:flex-row-reverse items-center mb-16">
+      <div class="hidden lg:block flex justify-center items-center lg:w-1/2">
        <img src="@/assets/img/computer.png" alt="It's me !" class="me-img" />
      </div>
-      <div class="title flex justify-center flex-col w-1/2 pr-3">
-        <div class="mb-10">
-          <h1 class="text-5xl text-left font-bold w-3/4">
-            Bonjour, je suis
+      <div class="title flex justify-center flex-col lg:w-1/2 pr-3">
+        <div class="mb-4 md:mb-10">
+          <h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4">
+            Bonjour, je suis <br />
            <span class="text-red-700 font-black">Arthur Danjou</span> 👋
          </h1>
-          <p class="text-3xl my-5 font-semibold">
+          <p class="dark:text-white dark:bg-black text-2xl md:text-3xl my-5 font-semibold">
            Développeur & étudiant
          </p>
-          <p class="text-2xl text-justify mb-8 leading-7 text-gray-700">
+          <p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700">
            Je suis un jeune développeur autodidacte de 17 ans. J'habite à Paris 🇫🇷. J'adore créer des applications et des logiciels plus ou moins utiles.
            J'utilise des technologies modernes pour obtenir le meilleur résultat possible ✨
          </p>
        </div>
-        <div class="flex flex-row justify-around items-center">
-          <nuxt-link to="about">
-            <p class="about-btn rounded-full bg-red-400 hover:bg-red-700 duration-300 px-10 py-1 cursor-pointer">
+        <div class="flex flex-col md:flex-row justify-around items-center">
+          <nuxt-link class="mb-3 w-full text-center md:mb-0 md:w-auto" to="about">
+            <p class="about-btn rounded-full bg-red-400 hover:bg-red-700 duration-300 px-3 md:px-10 py-1 cursor-pointer">
              En savoir plus
              <img class="inline arrow-img" src="@/assets/img/icons/arrow-down.svg" alt="Go Down" height="32" width="32" />
            </p>
          </nuxt-link>
-          <nuxt-link to="contact">
+          <nuxt-link class="mb-3 w-full text-center md:mb-0 md:w-auto" to="contact">
            <p class="rounded-full hover:bg-gray-400 duration-300 px-12 py-1 bg-gray-300 cursor-pointer">
              Me contacter
            </p>
@@ -41,8 +41,22 @@
      <p class="mt-2 mb-8">
        Parfois, je rédige des articles concernant le développement, ma vie, le design ou bien encore l'apprentissage !
      </p>
-      <div>
-        TODO Insert blogs request
+      <div class="flex flex-col">
+        <!-- TODO Max 3 articles -->
+        <div class="flex flex-col lg:flex-row justify-space-evenly mb-10">
+          <HomePost
+            title="Il était une nouvelle fois la vie"
+            reading_time="4"
+            description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
+            tags="Dev Tech"/>
+          <HomePost />
+          <HomePost />
+        </div>
+        <div class="text-center">
+          <nuxt-link to="/blog" class="px-3 py-3 border-2 border-solid border-black rounded-full font-semibold hover:bg-black hover:text-white duration-300">
+            Retrouvez mes autres articles
+          </nuxt-link>
+        </div>
      </div>
    </section>
    <section class="my-16 border-t border-solid border-black pt-16">
@@ -54,6 +68,7 @@
        Ayez une vision de mon travail, de mes projets personnels et professionnels ou de mes expérimentations !
      </p>
      <div>
+        <!-- TODO -->
        TODO Insert Works request
      </div>
    </section>
@@ -66,6 +81,7 @@
        Vous avez une idée révolutionnaire ?
      </p>
      <div>
+        <!-- TODO -->
        TODO Services
      </div>
    </section>
@@ -75,13 +91,12 @@
 <script lang="ts">
 import Vue from 'vue'

-export default Vue.extend({})
+export default Vue.extend({
+})
 </script>

 <style lang="scss" scoped>
 .index {
-  margin-top: 6rem;
-  padding: 0 15%;

  .title {
    line-height: 3rem;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
 module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
+    purgeLayersByDefault: false,
  },
  purge: [],
  target: 'relaxed',
@@ -9,6 +9,7 @@ module.exports = {
  important: false,
  separator: ':',
  theme: {
+    darkSelector: '.dark-mode',
    screens: {
      sm: '640px',
      md: '768px',
@@ -258,9 +259,10 @@ module.exports = {
    divideColor: theme => theme('borderColor'),
    divideOpacity: theme => theme('borderOpacity'),
    divideWidth: theme => theme('borderWidth'),
-    fill: {
+    fill: theme => ({
      current: 'currentColor',
-    },
+      ...theme('colors')
+    }),
    flex: {
      '1': '1 1 0%',
      auto: '1 1 auto',
@@ -275,7 +277,7 @@ module.exports = {
      '0': '0',
      default: '1',
    },
-    fontFamily: {
+    fontfontFamily: {
      sans: [
        'raleway',
        'system-ui',
@@ -324,10 +326,11 @@ module.exports = {
      full: '100%',
      screen: '100vh',
    }),
-    inset: {
+    inset: theme => ({
      '0': '0',
+      ...theme('spacing'),
      auto: 'auto',
-    },
+    }),
    letterSpacing: {
      tighter: '-0.05em',
      tight: '-0.025em',
@@ -712,7 +715,7 @@ module.exports = {
    appearance: ['responsive'],
    backgroundAttachment: ['responsive'],
    backgroundClip: ['responsive'],
-    backgroundColor: ['responsive', 'hover', 'focus'],
+    backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', 'hover', 'responsive'],
    backgroundImage: ['responsive'],
    gradientColorStops: ['responsive', 'hover', 'focus'],
    backgroundOpacity: ['responsive', 'hover', 'focus'],
@@ -720,7 +723,7 @@ module.exports = {
    backgroundRepeat: ['responsive'],
    backgroundSize: ['responsive'],
    borderCollapse: ['responsive'],
-    borderColor: ['responsive', 'hover', 'focus'],
+    borderColor: ['dark', 'dark-focus', 'dark-focus-within', 'hover', 'responsive'],
    borderOpacity: ['responsive', 'hover', 'focus'],
    borderRadius: ['responsive'],
    borderStyle: ['responsive'],
@@ -783,7 +786,7 @@ module.exports = {
    strokeWidth: ['responsive'],
    tableLayout: ['responsive'],
    textAlign: ['responsive'],
-    textColor: ['responsive', 'hover', 'focus'],
+    textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'responsive'],
    textOpacity: ['responsive', 'hover', 'focus'],
    textDecoration: ['responsive', 'hover', 'focus'],
    textTransform: ['responsive'],
@@ -818,8 +821,7 @@ module.exports = {
    transitionDelay: ['responsive'],
    animation: ['responsive'],
  },
-  corePlugins: {
-    container: false
-  },
-  plugins: [],
+  plugins: [
+    require('tailwindcss-dark-mode')()
+  ],
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -960,15 +960,15 @@
    wrap-ansi "^6.2.0"

 "@nuxt/components@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@nuxt/components/-/components-1.1.0.tgz#7d489d52f9813a69cbdc10372731481140765bbf"
-  integrity sha512-vDoSiA4iuZMSsv2nsXJ4ulMEVbKL4s0gg5fwdwGpRRiOtCoczlB7ggB6dIa9YyQgERdwkfj4Nj9grBsvqJFjlA==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@nuxt/components/-/components-1.1.1.tgz#f59832053f11801cc3d220de951f8167e3d31acc"
+  integrity sha512-Cw3QznmGjdT42xcpdID7jb/jvOeTo7gBX4en+nUJs3/O53O8lr9Xcc8XUzyu/MJVrvTy5sjUeuugfwy8AW84OQ==
  dependencies:
    chalk "^4.1.0"
-    chokidar "^3.4.1"
+    chokidar "^3.4.3"
    glob "^7.1.6"
    globby "^11.0.1"
-    lodash "^4.17.19"
+    lodash "^4.17.20"
    semver "^7.3.2"

 "@nuxt/config@2.14.7":
@@ -1256,6 +1256,14 @@
    consola "^2.15.0"
    defu "^3.1.0"

+"@nuxtjs/color-mode@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/color-mode/-/color-mode-2.0.0.tgz#6efcc443353ad4136d2c5d04d011ad3839349a0f"
+  integrity sha512-h3LFcfeKgNb8lzLu8vP/umbFxL+aFopzEiF9wHxyFAKCokdbnJyK7wY3+xqaX9eRUnlkxHbIcOO0dnyVZQkqPQ==
+  dependencies:
+    defu "^2.0.4"
+    lodash.template "^4.5.0"
+
 "@nuxtjs/proxy@^2.0.1":
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/@nuxtjs/proxy/-/proxy-2.0.1.tgz#2469b6e316311aa8c60d348502a54bfe6d5536aa"
@@ -1265,15 +1273,15 @@
    http-proxy-middleware "^1.0.4"

 "@nuxtjs/tailwindcss@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/tailwindcss/-/tailwindcss-3.1.0.tgz#d70310d49cc714e15d2d76b5d388a812f7126f17"
-  integrity sha512-nxooAntKxQdaTHQRgRa7RE7Hk9fqly4n65+4F+O4uRS4mYeT/wZon8l60mubkUrlZgpO5X3gvUDf569Dd8BKmA==
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/tailwindcss/-/tailwindcss-3.2.0.tgz#43e47188fd16f993b93d6e9057e4da83057a2fbd"
+  integrity sha512-CNlnV4wqhxtTmzsQIvRMW1SKUyBkWPwlk7bEVfNDFTj5Z3kvfL3g+QC8gtRwFiZH4mBeXof36CDfDwRSStFmJQ==
  dependencies:
    clear-module "^4.1.1"
    consola "^2.15.0"
    defu "^3.1.0"
    fs-extra "^9.0.1"
-    tailwindcss "^1.8.10"
+    tailwindcss "^1.9.5"

 "@nuxtjs/youch@^4.2.3":
  version "4.2.3"
@@ -1448,14 +1456,14 @@
    "@types/node" "*"

 "@types/node@*":
-  version "14.14.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.0.tgz#f1091b6ad5de18e8e91bdbd43ec63f13de372538"
-  integrity sha512-BfbIHP9IapdupGhq/hc+jT5dyiBVZ2DdeC5WwJWQWDb0GijQlzUFAeIQn/2GtvZcd2HVUU7An8felIICFTC2qg==
+  version "14.14.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.3.tgz#e1c09064121f894baaad2bd9f12ce4a41bffb274"
+  integrity sha512-33/L34xS7HVUx23e0wOT2V1qPF1IrHgQccdJVm9uXGTB9vFBrrzBtkQymT8VskeKOxjz55MSqMv0xuLq+u98WQ==

 "@types/node@^12.12.67":
-  version "12.12.69"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.69.tgz#7cb6a3aa0d16664bf2dcd1450ccb8477464fbd79"
-  integrity sha512-2F2VQRSFmzqgUEXw75L51MgnnZqc6bKWVSUPfrDPzp6mzGGibeVwyQcpvZvBr5RnsoMRHmC8EcBQiobSeqeJxg==
+  version "12.19.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.19.1.tgz#303f74c8a2b35644594139e948b2be470ae1186f"
+  integrity sha512-/xaVmBBjOGh55WCqumLAHXU9VhjGtmyTGqJzFBXRWZzByOXI5JAJNx9xPVGEsNizrNwcec92fQMj458MWfjN1A==

 "@types/optimize-css-assets-webpack-plugin@^5.0.1":
  version "5.0.1"
@@ -1528,9 +1536,9 @@
    source-map "^0.6.1"

 "@types/webpack-bundle-analyzer@^3.8.0":
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/@types/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.8.0.tgz#d1f196f95159254f76a3c2283c4677585bdf354d"
-  integrity sha512-Ah6FbkXLAVUNI/ExXHsTS90iRS/Efplh333NySjhGx09oeH9qXf57NMUfl4RADTL5a89hQaq/nbT4eb0LwsQJw==
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.9.0.tgz#bf2f3fd7f1fe6a71dff8968afeb12785d1ce737b"
+  integrity sha512-O4Dsmml4T+emssdk3t6/N1vwtYRx1VfWCx0Oph4jRY62DZGNOL9IAS6mSX0XG1LdZuFSX0g42DXj1otQuPXRGQ==
  dependencies:
    "@types/webpack" "*"

@@ -1562,9 +1570,9 @@
    source-map "^0.7.3"

 "@types/webpack@*", "@types/webpack@^4.41.22", "@types/webpack@^4.41.8":
-  version "4.41.22"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.22.tgz#ff9758a17c6bd499e459b91e78539848c32d0731"
-  integrity sha512-JQDJK6pj8OMV9gWOnN1dcLCyU9Hzs6lux0wBO4lr1+gyEhIBR9U3FMrz12t2GPkg110XAxEAw2WHF6g7nZIbRQ==
+  version "4.41.23"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.23.tgz#1925f42a7325be4ae0fce38329f1cc27768fcda7"
+  integrity sha512-ojA4CupZg8RCzVJLugWlvqrHpT59GWhqFxbinlsnvk10MjQCWB+ot7XDACctbWhnhtdhYK7+HOH1JxkVLiZhMg==
  dependencies:
    "@types/anymatch" "*"
    "@types/node" "*"
@@ -2130,7 +2138,7 @@ balanced-match@^1.0.0:
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=

-base64-js@^1.0.2:
+base64-js@^1.0.2, base64-js@^1.3.1:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
@@ -2362,12 +2370,12 @@ buffer@^4.3.0:
    isarray "^1.0.0"

 buffer@^5.1.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
-  integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.1.tgz#b99419405f4290a7a1f20b51037cee9f1fbd7f6a"
+  integrity sha512-2z15UUHpS9/3tk9mY/q+Rl3rydOi7yMp5XWNQnRvoz+mJwiv8brqYwp9a+nOCtma6dwuEIxljD8W3ysVBZ05Vg==
  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"

 builtin-status-codes@^3.0.0:
  version "3.0.0"
@@ -2517,9 +2525,9 @@ caniuse-api@^3.0.0:
    lodash.uniq "^4.5.0"

 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001148:
-  version "1.0.30001148"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001148.tgz#dc97c7ed918ab33bf8706ddd5e387287e015d637"
-  integrity sha512-E66qcd0KMKZHNJQt9hiLZGE3J4zuTqE1OnU53miEVtylFbwOEmeA5OsRu90noZful+XGSQOni1aT2tiqu/9yYw==
+  version "1.0.30001151"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001151.tgz#1ddfde5e6fff02aad7940b4edb7d3ac76b0cb00b"
+  integrity sha512-Zh3sHqskX6mHNrqUerh+fkf0N72cMxrmflzje/JyVImfpknscMnkeJrlFGJcqTmaa0iszdYptGpWMJCRQDkBVw==

 chalk@^1.1.3:
  version "1.1.3"
@@ -3448,9 +3456,9 @@ ejs@^2.6.1:
  integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==

 electron-to-chromium@^1.3.571:
-  version "1.3.582"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.582.tgz#1adfac5affce84d85b3d7b3dfbc4ade293a6ffc4"
-  integrity sha512-0nCJ7cSqnkMC+kUuPs0YgklFHraWGl/xHqtZWWtOeVtyi+YqkoAOMGuZQad43DscXCQI/yizcTa3u6B5r+BLww==
+  version "1.3.583"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.583.tgz#47a9fde74740b1205dba96db2e433132964ba3ee"
+  integrity sha512-L9BwLwJohjZW9mQESI79HRzhicPk1DFgM+8hOCfGgGCFEcA3Otpv7QK6SGtYoZvfQfE3wKLh0Hd5ptqUFv3gvQ==

 elliptic@^6.5.3:
  version "6.5.3"
@@ -4087,9 +4095,9 @@ git-up@^4.0.0:
    parse-url "^5.0.0"

 git-url-parse@^11.1.2:
-  version "11.3.0"
-  resolved "https://registry.yarnpkg.com/git-url-parse/-/git-url-parse-11.3.0.tgz#1515b4574c4eb2efda7d25cc50b29ce8beaefaae"
-  integrity sha512-i3XNa8IKmqnUqWBcdWBjOcnyZYfN3C1WRvnKI6ouFWwsXCZEnlgbwbm55ZpJ3OJMhfEP/ryFhqW8bBhej3C5Ug==
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/git-url-parse/-/git-url-parse-11.4.0.tgz#f2bb1f2b00f05552540e95a62e31399a639a6aa6"
+  integrity sha512-KlIa5jvMYLjXMQXkqpFzobsyD/V2K5DRHl5OAf+6oDFPlPLxrGDVQlIdI63c4/Kt6kai4kALENSALlzTGST3GQ==
  dependencies:
    git-up "^4.0.0"

@@ -4434,7 +4442,7 @@ icss-utils@^4.0.0, icss-utils@^4.1.1:
  dependencies:
    postcss "^7.0.14"

-ieee754@^1.1.4:
+ieee754@^1.1.13, ieee754@^1.1.4:
  version "1.1.13"
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
@@ -5439,9 +5447,9 @@ nan@^2.12.1:
  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==

 nanoid@^3.1.10:
-  version "3.1.12"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654"
-  integrity sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==
+  version "3.1.16"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.16.tgz#b21f0a7d031196faf75314d7c65d36352beeef64"
+  integrity sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w==

 nanomatch@^1.2.9:
  version "1.2.13"
@@ -6622,7 +6630,7 @@ postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
    indexes-of "^1.0.1"
    uniq "^1.0.1"

-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
  version "6.0.4"
  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
  integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
@@ -7190,9 +7198,9 @@ safe-regex@^1.1.0:
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

 sass-loader@^10.0.3:
-  version "10.0.3"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.0.3.tgz#9e2f1bfdd6355f2adde4e4835d838b020bf800b0"
-  integrity sha512-W4+FV5oUdYy0PnC11ZoPrcAexODgDCa3ngxoy5X5qBhZYoPz9FPjb6Oox8Aa0ZYEyx34k8AQfOVuvqefOSAAUQ==
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.0.4.tgz#ec7181096947d078d60a1d76d527f47c19b151d8"
+  integrity sha512-zhdZ8qvZM4iL5XjLVEjJLvKWvC+MB+hHgzL2x/Nf7UHpUNmPYsJvypW79bW39g4LZ603dH/dRSsRYzJJIljtdA==
  dependencies:
    klona "^2.0.4"
    loader-utils "^2.0.0"
@@ -7611,20 +7619,20 @@ string-width@^4.0.0, string-width@^4.1.0:
    strip-ansi "^6.0.0"

 string.prototype.trimend@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
-  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.2.tgz#6ddd9a8796bc714b489a3ae22246a208f37bfa46"
+  integrity sha512-8oAG/hi14Z4nOVP0z6mdiVZ/wqjDtWSLygMigTzAb+7aPEDTleeFf+WrF+alzecxIRkckkJVn+dTlwzJXORATw==
  dependencies:
    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
+    es-abstract "^1.18.0-next.1"

 string.prototype.trimstart@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
-  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.2.tgz#22d45da81015309cd0cdd79787e8919fc5c613e7"
+  integrity sha512-7F6CdBTl5zyu30BJFdzSTlSlLPwODC23Od+iLoVH8X6+3fvDPPuBVVj9iaB1GOsSTSIgVfsfm27R2FGrAPznWg==
  dependencies:
    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
+    es-abstract "^1.18.0-next.1"

 string_decoder@^1.0.0, string_decoder@^1.1.1:
  version "1.3.0"
@@ -7742,10 +7750,18 @@ svgo@^1.0.0:
    unquote "~1.1.1"
    util.promisify "~1.0.0"

-tailwindcss@^1.8.10:
-  version "1.9.5"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.9.5.tgz#3339b790a68bc1f09a8efd8eb94cb05aed5235c2"
-  integrity sha512-Je5t1fAfyW333YTpSxF+8uJwbnrkpyBskDtZYgSMMKQbNp6QUhEKJ4g/JIevZjD2Zidz9VxLraEUq/yWOx6nQg==
+tailwindcss-dark-mode@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-dark-mode/-/tailwindcss-dark-mode-1.1.7.tgz#b9b1a49fed12601826c6b6b7e9f98170e4b14abf"
+  integrity sha512-RGYAlOJq4VynCy7LRAIJPHHvV1E3wivMD+K2njVlqIJsegqAZSGIOYnlQwNnkYrQCdFcNZj/ygzplB4y4mYITg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+    tailwindcss "^1.9.2"
+
+tailwindcss@^1.9.2, tailwindcss@^1.9.5:
+  version "1.9.6"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.9.6.tgz#0c5089911d24e1e98e592a31bfdb3d8f34ecf1a0"
+  integrity sha512-nY8WYM/RLPqGsPEGEV2z63riyQPcHYZUJpAwdyBzVpxQHOHqHE+F/fvbCeXhdF1+TA5l72vSkZrtYCB9hRcwkQ==
  dependencies:
    "@fullhuman/postcss-purgecss" "^2.1.2"
    autoprefixer "^9.4.5"
@@ -7776,9 +7792,9 @@ tapable@^1.0.0, tapable@^1.0.0-beta.5, tapable@^1.1.3:
  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==

 term-size@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.0.tgz#1f16adedfe9bdc18800e1776821734086fcc6753"
-  integrity sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
+  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==

 terser-webpack-plugin@^1.4.3:
  version "1.4.5"
@@ -7923,9 +7939,9 @@ tryer@^1.0.1:
  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==

 ts-loader@^8.0.3:
-  version "8.0.6"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.0.6.tgz#8f47d203ef8fc95826a292a09f97a02bf1f57565"
-  integrity sha512-c8XkRbhKxFLbiIwZR7FBGWDq0MIz/QSpx3CGpj0abJxD5YVX8oDhQkJLeGbXUPRIlaX4Ajmr77fOiFVZ3gSU7g==
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.0.7.tgz#9ce70db5b3906cc9143a09c54ff5247d102ea974"
+  integrity sha512-ooa4wxlZ9TOXaJ/iVyZlWsim79Ul4KyifSwyT2hOrbQA6NZJypsLOE198o8Ko+JV+ZHnMArvWcl4AnRqpCU/Mw==
  dependencies:
    chalk "^2.3.0"
    enhanced-resolve "^4.0.0"
@@ -7988,9 +8004,9 @@ ua-parser-js@^0.7.22:
  integrity sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q==

 uglify-js@^3.5.1:
-  version "3.11.3"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.11.3.tgz#b2f8c87826344f091ba48c417c499d6cba5d5786"
-  integrity sha512-wDRziHG94mNj2n3R864CvYw/+pc9y/RNImiTyrrf8BzgWn75JgFSwYvXrtZQMnMnOp/4UTrf3iCSQxSStPiByA==
+  version "3.11.4"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.11.4.tgz#b47b7ae99d4bd1dca65b53aaa69caa0909e6fadf"
+  integrity sha512-FyYnoxVL1D6+jDGQpbK5jW6y/2JlVfRfEeQ67BPCUg5wfCjaKOpr2XeceE4QL+MkhxliLtf5EbrMDZgzpt2CNw==

 unfetch@^4.2.0:
  version "4.2.0"
@@ -8244,9 +8260,9 @@ vue-no-ssr@^1.1.1:
  integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==

 vue-router@^3.4.6:
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.7.tgz#bf189bafd16f4e4ef783c4a6250a3090f2c1fa1b"
-  integrity sha512-CbHXue5BLrDivOk5O4eZ0WT4Yj8XwdXa4kCnsEIOzYUPF/07ZukayA2jGxDCJxLc9SgVQX9QX0OuGOwGlVB4Qg==
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.8.tgz#2c06261d35d8075893470352d42d70b6287b8194"
+  integrity sha512-3BsR84AqarcmweXjItxw3jwQsiYNssYg090yi4rlzTnCJxmHtkyCvhNz9Z7qRSOkmiV485KkUCReTp5AjNY4wg==

 vue-server-renderer@^2.6.12:
  version "2.6.12"
				`@@ -0,0 +1 @@`
				<svg height="713pt" viewBox="0 -101 713.75189 713" width="713pt" xmlns="http://www.w3.org/2000/svg"><path d="m85.085938 304.40625c-6.144532 2.882812-8.855469 10.140625-6.117188 16.34375l28.066406 60.25c1.378906 3 3.894532 5.335938 6.988282 6.488281 1.355468.492188 2.792968.746094 4.238281.746094 1.808593.015625 3.59375-.371094 5.238281-1.117187l212.054688-99.046876-19.207032 200.824219c-.371094 3.953125 1.152344 7.839844 4.109375 10.480469 9.296875 7.695312 20.882813 12.078125 32.9375 12.472656 3.324219-.003906 6.628907-.421875 9.851563-1.242187 17.214844-4.492188 30.5625-19.832031 39.667968-46.03125l83.449219-247.101563 165.273438-77.09375c48.648437-22.699218 73.71875-68.726562 56.882812-104.652344-9.554687-18.777343-27.855469-31.550781-48.773437-34.054687-23.242188-3.507813-46.996094.148437-68.105469 10.484375l-190.726563 89.433594-205.0625-80.207032c-25.824218-9.726562-46.277343-9.476562-60.621093.878907-12.035157 9.875-18.882813 24.71875-18.589844 40.285156.125 3.949219 2.113281 7.601563 5.363281 9.859375l138.082032 94.921875-79.078126 37.421875-132.601562-33.683594c-5.433594-1.335937-11.089844 1.113282-13.84375 5.988282l-33.050781 59.496093c-1.714844 3.152344-1.984375 6.894531-.738281 10.261719 1.238281 3.371094 3.871093 6.039062 7.226562 7.328125l98.167969 40.542969zm57.121093-248.09375c.734375-5.273438 3.402344-10.074219 7.488281-13.472656 7.113282-5.117188 20.085938-4.367188 37.421876 2.117187l182.617187 71.226563-83.328125 38.917968zm-112.257812 180.117188 21.703125-38.542969 127.605468 31.679687c2.75.695313 5.652344.433594 8.238282-.742187l414.75-193.71875c16.488281-8.132813 35.058594-11.09375 53.261718-8.484375 12.765626 1.175781 24.136719 8.542968 30.4375 19.707031 10.46875 22.457031-10.109374 55.261719-44.914062 71.476563l-143.695312 67.363281 8.734374-25.828125c2.207032-6.644532-1.398437-13.824219-8.042968-16.027344-6.652344-2.203125-13.828125 1.402344-16.03125 8.046875l-102.660156 305.476563c-6.113282 17.34375-13.722657 27.699218-22.203126 29.9375-5.253906 1.011718-10.691406-.019532-15.21875-2.863282l24.949219-261.953125c.652344-6.886719-4.398437-13-11.292969-13.652343-6.886718-.660157-13 4.398437-13.65625 11.285156l-3.863281 40.039062-214.054687 99.789063-17.578125-37.421875 35.167969-16.460938c4.527343-1.996094 7.445312-6.472656 7.445312-11.414062 0-4.945313-2.917969-9.421875-7.445312-11.414063zm0 0"/></svg>
				`@@ -0,0 +1 @@`
				<svg id="Capa_1" enable-background="new 0 0 510 510" height="512" viewBox="0 0 510 510" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m416 0h-322c-16.542 0-30 13.458-30 30v450c0 16.542 13.458 30 30 30h322c16.542 0 30-13.458 30-30v-450c0-16.542-13.458-30-30-30zm0 480h-322v-450h322c.019 459.847.1 450 0 450z"/><path d="m311 200c-41.07 0-74.19 35.101-70.736 76.895-.388 2.088-.264-6.619-.264 138.105 0 10.649 10.818 17.917 20.677 13.884l50.323-20.574 50.323 20.575c9.829 4.017 20.677-3.198 20.677-13.885v-144c0-39.149-31.851-71-71-71zm0 30c22.607 0 41 18.393 41 41s-18.393 41-41 41-41-18.393-41-41 18.393-41 41-41zm5.677 148.22c-3.639-1.487-7.715-1.487-11.354 0l-35.323 14.442v-63.751c24.578 17.452 57.397 17.47 82 0v63.751z"/><path d="m367 72h-224c-8.284 0-15 6.716-15 15s6.716 15 15 15h224c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m367 136h-224c-8.284 0-15 6.716-15 15s6.716 15 15 15h224c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m194.529 202h-55.059c-6.335 0-11.471 6.716-11.471 15s5.136 15 11.471 15h55.059c6.335 0 11.471-6.716 11.471-15s-5.136-15-11.471-15z"/><path d="m191 264h-48c-8.284 0-15 6.716-15 15s6.716 15 15 15h48c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m191 328h-48c-8.284 0-15 6.716-15 15s6.716 15 15 15h48c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/><path d="m191 392h-48c-8.284 0-15 6.716-15 15s6.716 15 15 15h48c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/></g></svg>
				`@@ -0,0 +1 @@`
				<svg height="511pt" viewBox="0 1 511 511.999" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m498.699219 222.695312c-.015625-.011718-.027344-.027343-.039063-.039062l-208.855468-208.847656c-8.902344-8.90625-20.738282-13.808594-33.328126-13.808594-12.589843 0-24.425781 4.902344-33.332031 13.808594l-208.746093 208.742187c-.070313.070313-.144532.144531-.210938.214844-18.28125 18.386719-18.25 48.21875.089844 66.558594 8.378906 8.382812 19.441406 13.234375 31.273437 13.746093.484375.046876.96875.070313 1.457031.070313h8.320313v153.695313c0 30.417968 24.75 55.164062 55.167969 55.164062h81.710937c8.285157 0 15-6.71875 15-15v-120.5c0-13.878906 11.292969-25.167969 25.171875-25.167969h48.195313c13.878906 0 25.167969 11.289063 25.167969 25.167969v120.5c0 8.28125 6.714843 15 15 15h81.710937c30.421875 0 55.167969-24.746094 55.167969-55.164062v-153.695313h7.71875c12.585937 0 24.421875-4.902344 33.332031-13.8125 18.359375-18.367187 18.367187-48.253906.027344-66.632813zm-21.242188 45.421876c-3.238281 3.238281-7.542969 5.023437-12.117187 5.023437h-22.71875c-8.285156 0-15 6.714844-15 15v168.695313c0 13.875-11.289063 25.164062-25.167969 25.164062h-66.710937v-105.5c0-30.417969-24.746094-55.167969-55.167969-55.167969h-48.195313c-30.421875 0-55.171875 24.75-55.171875 55.167969v105.5h-66.710937c-13.875 0-25.167969-11.289062-25.167969-25.164062v-168.695313c0-8.285156-6.714844-15-15-15h-22.328125c-.234375-.015625-.464844-.027344-.703125-.03125-4.46875-.078125-8.660156-1.851563-11.800781-4.996094-6.679688-6.679687-6.679688-17.550781 0-24.234375.003906 0 .003906-.003906.007812-.007812l.011719-.011719 208.847656-208.839844c3.234375-3.238281 7.535157-5.019531 12.113281-5.019531 4.574219 0 8.875 1.78125 12.113282 5.019531l208.800781 208.796875c.03125.03125.066406.0625.097656.09375 6.644531 6.691406 6.632813 17.539063-.03125 24.207032zm0 0"/></svg>
				`@@ -0,0 +1 @@`
				<svg height="490pt" viewBox="0 -138 490.66667 490" width="490pt" xmlns="http://www.w3.org/2000/svg"><path d="m388.179688 213.667969c-21.546876 0-42.238282-7.125-60.03125-20.652344-1.066407-.492187-2.070313-1.171875-2.941407-2.046875l-44.738281-44.417969c-4.179688-4.136719-4.203125-10.898437-.042969-15.082031 4.183594-4.179688 10.921875-4.160156 15.105469-.042969l42.921875 42.625c.320313.214844.640625.425781.9375.660157 14.402344 11.542968 31.277344 17.621093 48.789063 17.621093 44.757812 0 81.152343-38.269531 81.152343-85.332031s-36.414062-85.332031-81.152343-85.332031c-17.492188 0-34.367188 6.078125-48.789063 17.597656-.488281.40625-1.042969.746094-1.597656 1.066406l-172.84375 151.105469c-.789063.683594-1.640625 1.257812-2.558594 1.664062-17.75 13.460938-38.402344 20.566407-59.90625 20.566407-56.511719 0-102.484375-47.851563-102.484375-106.667969s45.972656-106.667969 102.484375-106.667969c21.546875 0 42.242187 7.125 60.03125 20.652344 1.070313.492187 2.070313 1.171875 2.945313 2.046875l44.738281 44.417969c4.179687 4.136719 4.199219 10.898437.039062 15.082031-4.160156 4.203125-10.898437 4.203125-15.101562.042969l-42.921875-42.644531c-.320313-.214844-.640625-.429688-.941406-.664063-14.398438-11.519531-31.273438-17.597656-48.789063-17.597656-44.734375 0-81.152344 38.269531-81.152344 85.332031s36.417969 85.332031 81.152344 85.332031c17.496094 0 34.367187-6.078125 48.789063-17.597656.492187-.40625 1.046874-.746094 1.601562-1.066406l172.84375-151.105469c.789062-.683594 1.640625-1.257812 2.558594-1.664062 17.75-13.460938 38.398437-20.566407 59.902344-20.566407 56.511718 0 102.488281 47.851563 102.488281 106.667969s-45.976563 106.667969-102.488281 106.667969zm0 0"/><path d="m202.667969 85.667969h-64c-5.890625 0-10.667969-4.78125-10.667969-10.667969s4.777344-10.667969 10.667969-10.667969h53.332031v-53.332031c0-5.886719 4.777344-10.667969 10.667969-10.667969 5.886719 0 10.664062 4.78125 10.664062 10.667969v64c0 5.886719-4.777343 10.667969-10.664062 10.667969zm0 0"/><path d="m288 213.667969c-5.886719 0-10.667969-4.78125-10.667969-10.667969v-64c0-5.886719 4.78125-10.667969 10.667969-10.667969h64c5.886719 0 10.667969 4.78125 10.667969 10.667969s-4.78125 10.667969-10.667969 10.667969h-53.332031v53.332031c0 5.886719-4.78125 10.667969-10.667969 10.667969zm0 0"/></svg>
				`@@ -0,0 +1 @@`
				<svg id="Layer_1" enable-background="new 0 0 511.999 511.999" height="512" viewBox="0 0 511.999 511.999" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><path d="m426.999 241.45c-4.138 0-8.203.312-12.185.887l-5.208-19.438c5.66-.948 11.469-1.449 17.394-1.449 8.243 0 16.466.964 24.439 2.864 3.856.919 7.891-.526 10.285-3.684 23.225-30.613 24.557-48.867 5.278-72.339-24.882-30.29-47.775-45.854-69.99-47.58-16.642-1.297-32.668 5.176-49.046 19.773-2.154 1.919-3.374 4.676-3.347 7.562.028 2.886 1.301 5.618 3.492 7.496l16.328 13.996c-.667 2.899-1.241 5.637-1.772 8.173-1.366 6.516-2.447 11.645-4.172 15.898-2.355-1.372-4.675-2.729-6.954-4.064-33.558-19.651-60.059-35.174-87.041-27.707-17.925 4.96-33.654 19.699-49.164 46.167l-75.842-21.703-4.683-14.486c-4.82-14.912-15.113-23.062-32.388-25.64l-85.783-14.529c-3.599-.612-7.244.79-9.51 3.652-2.266 2.861-2.792 6.73-1.374 10.094 21.365 50.643 29.458 64.021 59.955 79.174l73.611 36.572c18.995 9.437 25.798 16.651 31.65 33.563l14.445 41.748h-16.025c-4.968-42.171-40.908-75-84.392-75-46.869 0-85 38.131-85 85s38.131 85 85 85c43.485 0 79.425-32.829 84.392-75h22.945l9.781 28.27c1.394 4.028 5.188 6.73 9.45 6.73h105.86c3.191 0 6.192-1.523 8.075-4.101s2.422-5.899 1.451-8.939c-3.289-10.308-4.957-21.06-4.957-31.96 0-44.989 28.443-83.454 68.289-98.372l5.211 19.449c-31.314 12.544-53.5 43.182-53.5 78.924 0 46.869 38.131 85 85 85s85-38.131 85-85-38.129-85.001-84.998-85.001zm-341.999 150c-35.841 0-65-29.159-65-65s29.159-65 65-65c32.441 0 59.405 23.89 64.23 55h-20.363c-4.561-20.014-22.491-35-43.867-35-24.813 0-45 20.187-45 45s20.187 45 45 45c21.376 0 39.305-14.986 43.867-35h20.363c-4.825 31.11-31.789 55-64.23 55zm0-55h22.907c-3.866 8.82-12.676 15-22.907 15-13.785 0-25-11.215-25-25s11.215-25 25-25c10.231 0 19.041 6.18 22.907 15h-22.907c-5.523 0-10 4.478-10 10s4.477 10 10 10zm184.834-175.336c18.829-5.209 42.118 8.426 71.601 25.689.786.46 1.584.927 2.379 1.393-1.69.825-3.551 1.637-5.631 2.449l-48.057 18.762-54.871-15.702c11.624-18.683 22.992-29.385 34.579-32.591zm53.318 95.836h-32.66c-5.522 0-10 4.478-10 10s4.478 10 10 10h21.736c-2.775 6.409-5.026 13.093-6.704 20.001h-37.529c-5.522 0-10 4.478-10 10s4.478 10 10 10h34.362c-.237 3.136-.359 6.303-.359 9.499 0 8.438.841 16.803 2.508 25h-85.816l-28.818-83.287c-8.514-24.608-21.208-34.778-41.652-44.936l-73.61-36.572c-20.657-10.263-27.953-17.953-43.176-52.218l67.75 11.476c.07.012.139.023.209.033 11.036 1.63 14.273 5.482 16.388 12.022l6.323 19.558c1.025 3.17 3.561 5.621 6.764 6.538l159 45.5c2.104.603 4.35.497 6.388-.299l51.2-19.989c29.225-11.409 32.729-28.115 36.785-47.46.886-4.226 1.803-8.596 3.047-13.316.979-3.707-.25-7.647-3.161-10.143l-11.754-10.075c8.695-5.824 16.842-8.264 25.088-7.631 16.27 1.265 35.14 14.836 56.086 40.335 4.96 6.039 8.921 10.873 8.87 17.821l-13.614-5.603c-5.112-2.104-10.952.335-13.054 5.44-2.103 5.107.334 10.952 5.44 13.054l14.234 5.859c-1.148 1.857-2.445 3.821-3.925 5.922-7.405-1.348-14.946-2.028-22.501-2.028-43.222-.001-81.388 22.054-103.845 55.499zm103.847 134.5c-35.841 0-65-29.159-65-65 0-26.491 15.939-49.317 38.723-59.431l5.266 19.654c-14.254 7.56-23.989 22.549-23.989 39.777 0 24.813 20.187 45 45 45s45-20.187 45-45-20.187-45-45-45c-.568 0-1.131.022-1.693.043l-5.269-19.665c2.289-.245 4.61-.378 6.963-.378 35.841 0 65 29.159 65 65s-29.16 65-65.001 65zm-9.659-62.412c1.197 4.468 5.237 7.415 9.653 7.415.856 0 1.728-.111 2.594-.344 5.335-1.43 8.501-6.913 7.071-12.247l-5.93-22.133c12.023 1.806 21.271 12.203 21.271 24.721 0 13.785-11.215 25-25 25s-25-11.215-25-25c0-7.895 3.682-14.942 9.415-19.527z"/><path d="m245.495 256.95h-.007c-5.523 0-9.997 4.478-9.997 10s4.481 10 10.004 10 10-4.478 10-10-4.477-10-10-10z"/></g></g></svg>