Fix all little bugs

components/Header.vue

@@ -121,7 +121,9 @@ export default {
     },
     async changeLanguage(lang) {
       this.$i18n.setLocale(lang)
-      await this.$router.push('/')
+      if (this.$router.currentRoute.fullPath.includes('blog')) {
+        await this.$nuxt.refresh()
+      }
     },
   },
   mounted() {

components/Post.vue

@@ -1,7 +1,7 @@
 <template>
   <article
-    class="border-2 border-black border-solid rounded-xl w-full h-blog p-2 flex flex-col justify-between my-5 duration-200 transform hover:scale-95"
-    :style="{ backgroundImage: require(`@/assets/img/posts/${cover}.png`) }"
+    class="post border-2 border-black border-solid rounded-xl w-full h-blog p-2 flex flex-col justify-between my-5 duration-200 transform hover:scale-95"
+    :style="{ backgroundImage: `url(${this.getBackgroundUrl})` }"
   >
     <div>
       <p
@@ -71,6 +71,9 @@ export default {
       const dateFormat = this.date.split('-')
       return dateFormat[0] + " " + this.$t('month.' + dateFormat[1]) + " " + dateFormat[2]
     },
+    getBackgroundUrl() {
+      return require(`~/assets/img/posts/${this.cover}.png`)
+    }
   }
 }
 </script>

components/Skill.vue

@@ -58,9 +58,9 @@ export default {
         case 'rose':
           return 'hover:bg-rose-400'
         case 'black':
-          return 'hover:bg-black-400'
+          return 'hover:bg-black'
         case 'white':
-          return 'hover:bg-white-400'
+          return 'hover:bg-white'
         case 'pink':
           return 'hover:bg-pink-400'
         case 'fuchsia':

components/Work.vue

@@ -67,9 +67,9 @@ export default {
         case 'rose':
           return 'hover:bg-rose-600'
         case 'black':
-          return 'hover:bg-black-600'
+          return 'hover:bg-black'
         case 'white':
-          return 'hover:bg-white-600'
+          return 'hover:bg-white'
         case 'pink':
           return 'hover:bg-pink-600'
         case 'fuchsia':