From a2058d50d6e095d215fd8a318219bf25d841d7ad Mon Sep 17 00:00:00 2001
From: Arthur Danjou <arthurdanjou@outlook.fr>
Date: Tue, 1 Jun 2021 22:24:32 +0200
Subject: [PATCH] Working hard

---
 package.json                                  |  31 ++++++++++------
 settings/Arch.ts                              |   6 ++-
 settings/BuildModules.ts                      |  35 ++++++++++++++++++
 settings/Modules.ts                           |   8 +++-
 settings/Plugins.ts                           |   7 +++-
 src/assets/css/style.scss                     |   1 -
 src/assets/images/socials/twitter.svg         |   1 -
 src/components/AboutHome.vue                  |   4 +-
 src/components/Ad.vue                         |   2 +-
 src/components/AdHome.vue                     |  10 ++---
 src/components/ContactForm.vue                |   2 +-
 src/components/ExperiencesAbout.vue           |   2 +-
 src/components/Footer.vue                     |  14 +++----
 src/components/FormationsAbout.vue            |   2 +-
 src/components/Header.vue                     |   4 +-
 src/components/PostsHome.vue                  |   2 +-
 src/components/PresentationAbout.vue          |   2 +-
 src/components/ProjectsHome.vue               |   2 +-
 src/components/Skill.vue                      |   2 +-
 src/components/SkillsAbout.vue                |   2 +-
 src/middleware/ipx.ts                         |   8 ++++
 src/pages/blog/_slug.vue                      |   6 +--
 src/pages/blog/index.vue                      |   2 +-
 src/pages/contact.vue                         |   2 +-
 src/pages/projects.vue                        |   2 +-
 src/plugins/main.ts                           |   1 +
 src/{assets/images => static}/Logo.jpg        | Bin
 src/{assets/images => static}/logo-header.png | Bin
 .../images => static}/memojies/Dev.png        | Bin
 .../images => static}/memojies/Fiesta.png     | Bin
 .../images => static}/memojies/Hat.png        | Bin
 .../images => static}/memojies/Hey.png        | Bin
 .../socials/github-black.svg                  |   0
 .../socials/github-white.svg                  |   0
 .../images => static}/socials/nuxtjs.svg      |   0
 .../images => static}/socials/twitch.svg      |   7 ++--
 src/static/socials/twitter.svg                |   2 +
 {@types => types}/index.d.ts                  |   0
 {@types => types}/types.ts                    |   0
 {@types => types}/vue-shim.d.ts               |   0
 tailwind.config.js => windi.config.ts         |  34 ++++-------------
 41 files changed, 125 insertions(+), 78 deletions(-)
 delete mode 100644 src/assets/images/socials/twitter.svg
 create mode 100644 src/middleware/ipx.ts
 create mode 100644 src/plugins/main.ts
 rename src/{assets/images => static}/Logo.jpg (100%)
 rename src/{assets/images => static}/logo-header.png (100%)
 rename src/{assets/images => static}/memojies/Dev.png (100%)
 rename src/{assets/images => static}/memojies/Fiesta.png (100%)
 rename src/{assets/images => static}/memojies/Hat.png (100%)
 rename src/{assets/images => static}/memojies/Hey.png (100%)
 rename src/{assets/images => static}/socials/github-black.svg (100%)
 rename src/{assets/images => static}/socials/github-white.svg (100%)
 rename src/{assets/images => static}/socials/nuxtjs.svg (100%)
 rename src/{assets/images => static}/socials/twitch.svg (62%)
 create mode 100644 src/static/socials/twitter.svg
 rename {@types => types}/index.d.ts (100%)
 rename {@types => types}/types.ts (100%)
 rename {@types => types}/vue-shim.d.ts (100%)
 rename tailwind.config.js => windi.config.ts (97%)

diff --git a/package.json b/package.json
index d9a6f2d..ad8d976 100644
--- a/package.json
+++ b/package.json
@@ -6,30 +6,39 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
-    "generate": "nuxt generate"
+    "generate": "nuxt generate",
+    "lint": "eslint '**/*.{js,ts,vue,json}'",
+    "lint:fix": "nr lint --fix"
   },
   "dependencies": {
     "@nuxt/content": "^1.14.0",
-    "@nuxtjs/axios": "^5.13.1",
+    "@nuxtjs/axios": "^5.13.5",
     "@nuxtjs/composition-api": "0.23.4",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/redirect-module": "^0.3.1",
     "@nuxtjs/robots": "^2.5.0",
-    "@nuxtjs/sentry": "^5.0.3",
+    "@nuxtjs/sentry": "^5.1.0",
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/universal-storage": "^0.5.9",
-    "core-js": "^3.12.1",
-    "nuxt": "^2.15.5",
+    "core-js": "^3.13.1",
+    "ipx": "^0.6.1",
+    "nuxt": "^2.15.6",
     "nuxt-i18n": "^6.27.0",
     "prism-themes": "^1.7.0",
-    "sass": "^1.32.12",
-    "windicss": "^2.5.14"
+    "sass": "^1.34.0",
+    "windicss": "^3.0.12"
   },
   "devDependencies": {
-    "@nuxt/types": "^2.15.5",
+    "@nuxt/image": "^0.4.13",
+    "@nuxt/types": "^2.15.6",
     "@nuxt/typescript-build": "^2.1.0",
-    "@nuxtjs/color-mode": "^2.0.5",
-    "nuxt-windicss": "^0.6.0",
-    "sass-loader": "10.1.1"
+    "@nuxtjs/color-mode": "^2.0.9",
+    "markdown-it-prism": "^2.1.6",
+    "nuxt-vite": "^0.1.1",
+    "nuxt-windicss": "^0.8.2",
+    "sass-loader": "10.1.1",
+    "vite-plugin-components": "^0.10.4",
+    "vite-plugin-md": "^0.6.7",
+    "vite-plugin-windicss": "^0.16.7"
   }
 }
diff --git a/settings/Arch.ts b/settings/Arch.ts
index 3076019..37caf3d 100644
--- a/settings/Arch.ts
+++ b/settings/Arch.ts
@@ -31,4 +31,8 @@ const buildDir = 'build'
 
 const ssr = true
 
-export default { srcDir, dir, build, pageTransition, target, server, buildDir, components, ssr }
+const serverMiddleware = {
+  '/_ipx': '~/middleware/ipx.ts'
+}
+
+export default { srcDir, dir, build, pageTransition, target, server, buildDir, components, ssr, serverMiddleware }
diff --git a/settings/BuildModules.ts b/settings/BuildModules.ts
index 1c17d58..e363d1c 100644
--- a/settings/BuildModules.ts
+++ b/settings/BuildModules.ts
@@ -1,5 +1,10 @@
 // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
 import {NuxtOptionsModule} from "@nuxt/types/config/module";
+import {resolve} from 'path'
+import ViteComponents from 'vite-plugin-components'
+import WindiCSS from 'vite-plugin-windicss'
+import Markdown from 'vite-plugin-md'
+import Prism from 'markdown-it-prism'
 
 const color_mode = {
   preference: 'system',
@@ -32,9 +37,39 @@ const windicss = {
   }
 }
 
+const vite = {
+  vue: {
+    include: [/\.vue$/, /\.md$/],
+  },
+  plugins: [
+    ViteComponents({
+      dirs: [
+        resolve('./components'),
+      ],
+      extensions: ['vue', 'md'],
+      customLoaderMatcher: path => path.endsWith('.md'),
+    }),
+    WindiCSS({
+      scan: {
+        dirs: [
+          resolve('./pages'),
+          resolve('./components'),
+        ],
+      },
+    }),
+    Markdown({
+      markdownItSetup(md) {
+        md.use(Prism)
+      },
+    }),
+  ],
+  ssr: true
+}
+
 export default [
   '@nuxt/typescript-build',
   '@nuxtjs/composition-api/module',
   ['nuxt-windicss', windicss],
   ['@nuxtjs/color-mode', color_mode],
+  //['nuxt-vite', vite]
 ] as NuxtOptionsModule[]
diff --git a/settings/Modules.ts b/settings/Modules.ts
index 820fe46..4ed187e 100644
--- a/settings/Modules.ts
+++ b/settings/Modules.ts
@@ -90,6 +90,11 @@ const sentry = {
   }
 }
 
+const image = {
+  domains: ['https://arthurdanjou.fr'],
+  dir: 'static'
+}
+
 export default [
   ['@nuxtjs/axios', axios],
   ['nuxt-i18n', i18n],
@@ -99,5 +104,6 @@ export default [
   ['@nuxtjs/sitemap', sitemap],
   ['@nuxtjs/redirect-module', redirect],
   ['@nuxtjs/dotenv', env],
-  ['@nuxtjs/sentry', sentry]
+  ['@nuxtjs/sentry', sentry],
+  ['@nuxt/image', image]
 ] as NuxtOptionsModule[]
diff --git a/settings/Plugins.ts b/settings/Plugins.ts
index 5bd91da..c8e40b7 100644
--- a/settings/Plugins.ts
+++ b/settings/Plugins.ts
@@ -1,4 +1,9 @@
 // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
 export default [
-  { src: '~/plugins/i18n.ts' }
+  {
+    src: '~/plugins/i18n.ts'
+  },
+  {
+    src: '~/plugins/main.ts',
+  }
 ]
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index b3c1df6..0f7711e 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -21,7 +21,6 @@ body {
   @apply dark:(bg-dark-800 text-white) border dark:border-white border-black border-solid;
 }
 
-//TODO remove with windicss/typography
 .nuxt-content-container, .nuxt-content {
   p {
     @apply text-gray-700 dark:text-gray-400
diff --git a/src/assets/images/socials/twitter.svg b/src/assets/images/socials/twitter.svg
deleted file mode 100644
index 8d984bc..0000000
--- a/src/assets/images/socials/twitter.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.24 102.59"><defs><style>.cls-1{fill:#1da1f2;}</style></defs><title>twitter-original</title><path id="original" class="cls-1" d="M40.58,115.3c47.64,0,73.69-39.47,73.69-73.69,0-1.12,0-2.24-.07-3.35a52.7,52.7,0,0,0,12.92-13.41,51.7,51.7,0,0,1-14.87,4.08A26,26,0,0,0,123.63,14.6a51.9,51.9,0,0,1-16.45,6.29A25.92,25.92,0,0,0,63.05,44.51,73.53,73.53,0,0,1,9.67,17.45a25.92,25.92,0,0,0,8,34.58A25.71,25.71,0,0,1,6,48.78c0,.11,0,.22,0,.33A25.91,25.91,0,0,0,26.73,74.5a25.86,25.86,0,0,1-11.7.44,25.93,25.93,0,0,0,24.2,18A52,52,0,0,1,7.06,104a52.72,52.72,0,0,1-6.18-.36,73.32,73.32,0,0,0,39.7,11.63" transform="translate(-0.88 -12.7)"/></svg>
\ No newline at end of file
diff --git a/src/components/AboutHome.vue b/src/components/AboutHome.vue
index 493fce6..ac3780a 100644
--- a/src/components/AboutHome.vue
+++ b/src/components/AboutHome.vue
@@ -2,7 +2,7 @@
   <section v-if="info && info.age" class="w-full flex items-center justify-center my-12">
     <div class="flex flex-col md:flex-row justify-between items-center">
       <div class="mb-12 md:mb-0 w-full md:w-1/2 flex justify-center">
-        <img src="@/assets/images/memojies/Hat.png" alt="It's me !" class="xl:w-1/2">
+        <nuxt-img src="/memojies/Hat.png" alt="It's me !" class="xl:w-1/2" />
       </div>
       <div class="md:w-1/2 text-justify">
         <h2 class="text-4xl font-bold text-center md:text-justify">
@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
-import {InfoData} from "../../@types/types";
+import {InfoData} from "../../types/types";
 
 export default defineComponent({
   name: "AboutPreview",
diff --git a/src/components/Ad.vue b/src/components/Ad.vue
index db44836..e6c2e13 100644
--- a/src/components/Ad.vue
+++ b/src/components/Ad.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-3xl p-2 lg:p-8 text-center" :class="getColor">
+  <div class="rounded-3xl p-2 lg:p-8 text-center h-full block" :class="getColor">
     <slot />
   </div>
 </template>
diff --git a/src/components/AdHome.vue b/src/components/AdHome.vue
index 293ff4c..a4583a0 100644
--- a/src/components/AdHome.vue
+++ b/src/components/AdHome.vue
@@ -1,10 +1,10 @@
 <template>
-  <section class="w-full my-12">
+  <section class="w-full my-12 h-full">
     <div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-around h-full">
-      <nuxt-link to="/env" class="h-full md:w-2/5">
+      <nuxt-link to="/env" class="block h-auto md:w-2/5">
         <Ad color="rose" class="w-full flex flex-col justify-between items-center">
           <div>
-            <img class="h-48" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
+            <nuxt-img  class="h-48" src="/memojies/Dev.png" alt="Dev Memoji" />
           </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
@@ -16,10 +16,10 @@
           </div>
         </Ad>
       </nuxt-link>
-      <nuxt-link to="/contact" class="h-full md:w-2/5">
+      <nuxt-link to="/contact" class="min-h-full md:w-2/5">
         <Ad color="blue" class="w-full flex flex-col justify-between items-center">
           <div>
-            <img class="h-48" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
+            <nuxt-img  class="h-48" src="/memojies/Fiesta.png" alt="Fiesta Memoji" />
           </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
diff --git a/src/components/ContactForm.vue b/src/components/ContactForm.vue
index 092e901..ae5f35b 100644
--- a/src/components/ContactForm.vue
+++ b/src/components/ContactForm.vue
@@ -68,7 +68,7 @@
 
 <script lang="ts">
 import {computed, defineComponent, ref, useContext} from "@nuxtjs/composition-api";
-import {Form} from "../../@types/types";
+import {Form} from "../../types/types";
 
 export default defineComponent({
   name: "ContactForm",
diff --git a/src/components/ExperiencesAbout.vue b/src/components/ExperiencesAbout.vue
index c203f26..d4414ad 100644
--- a/src/components/ExperiencesAbout.vue
+++ b/src/components/ExperiencesAbout.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
-import {Experience} from "../../@types/types";
+import {Experience} from "../../types/types";
 
 export default defineComponent({
   name: "ExperiencesAbout",
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 1b73149..29d09ba 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -6,16 +6,16 @@
           <p class="inline">{{ $t('footer.find_me') }}
             <br class="md:hidden"/>
             <a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
-              <img class="inline" src="@/assets/images/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
+              <nuxt-img format="svg" class="inline" src="/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
               <span class="link">Twitch</span>
             </a>,
             <a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
-              <img v-if="!isDarkMode" class="inline" src="@/assets/images/socials/github-black.svg" alt="Github logo" height="20" width="20" />
-              <img v-else class="inline" src="@/assets/images/socials/github-white.svg" alt="Github logo" height="20" width="20" />
+              <nuxt-img format="svg" v-if="!isDarkMode" class="inline" src="/socials/github-black.svg" alt="Github logo" height="20" width="20" />
+              <nuxt-img format="svg" v-else class="inline" src="/socials/github-white.svg" alt="Github logo" height="20" width="20" />
               <span class="link">Github</span>
             </a> &
             <a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank" rel="noopener noreferrer">
-              <img class="inline" src="@/assets/images/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
+              <nuxt-img format="svg" class="inline" src="/socials/twitter.svg" alt="Twitter logo" height="" width="20" />
               <span class="link">Twitter</span>
             </a>
             <br class="md:hidden"/>
@@ -35,7 +35,7 @@
         <p>
           {{ $t('footer.credits') }}
           <a class="font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
-            <img class="inline" src="@/assets/images/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
+            <nuxt-img format="svg" class="inline" src="/socials/nuxtjs.svg" alt="NuxtJs logo" width="20" />
             <span class="link">NuxtJs</span>
           </a>
           {{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
@@ -46,7 +46,7 @@
   </footer>
 </template>
 
-<script>
+<script lang="ts">
 import {computed, defineComponent, ref, useContext} from "@nuxtjs/composition-api";
 
 export default defineComponent({
@@ -54,7 +54,7 @@ export default defineComponent({
   setup() {
     const {$colorMode} = useContext()
     const isDarkMode = computed(() => {
-      return $colorMode.preference === 'dark' | undefined
+      return $colorMode.preference === 'dark'
     })
 
     const getDate = ref(new Date().getFullYear())
diff --git a/src/components/FormationsAbout.vue b/src/components/FormationsAbout.vue
index 07f42e7..4dcab27 100644
--- a/src/components/FormationsAbout.vue
+++ b/src/components/FormationsAbout.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
-import {Formation} from "../../@types/types";
+import {Formation} from "../../types/types";
 
 export default defineComponent({
   name: "FormationsHome",
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 6343778..24d67d3 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -2,7 +2,7 @@
   <header class="dark:bg-black dark:text-white fixed z-50 top-0 left-0 bg-white w-full duration-400" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white h-16 lg:h-20' : 'h-20 lg:h-24'">
     <div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-32">
       <nuxt-link to="/">
-        <img src="@/assets/images/logo-header.png" alt="Logo Circle" class="h-10 left cursor-pointer duration-500" />
+        <nuxt-img src="/logo-header.png" alt="Logo Circle" class="h-10 left cursor-pointer duration-500" />
       </nuxt-link>
       <nav class="right">
         <div class="flex flex-col md:flex-row items-center">
@@ -161,7 +161,7 @@ export default defineComponent({
 }
 
 .nuxt-link-exact-active {
-  @apply text-black dark:text-white !important;
+  @apply text-black dark:text-white;
 }
 
 .navbar-bottom-items li {
diff --git a/src/components/PostsHome.vue b/src/components/PostsHome.vue
index 2c1f9e1..1ee3e40 100644
--- a/src/components/PostsHome.vue
+++ b/src/components/PostsHome.vue
@@ -31,7 +31,7 @@
 
 <script lang="ts">
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
-import {Post} from "../../@types/types";
+import {Post} from "../../types/types";
 
 export default defineComponent({
   name: "PostsHome",
diff --git a/src/components/PresentationAbout.vue b/src/components/PresentationAbout.vue
index 3624ccc..9856f34 100644
--- a/src/components/PresentationAbout.vue
+++ b/src/components/PresentationAbout.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="flex flex-col 2xl:flex-row justify-center items-center py-8">
     <div class="lg:mr-12">
-      <img class="logo-img rounded-full my-5" src="@/assets/images/memojies/Hey.png" alt="It's me !" />
+      <nuxt-img class="logo-img rounded-full my-5" src="/memojies/Hey.png" alt="It's me !" />
     </div>
     <div class="ml-2 text-lg leading-6 xl:w-2/3 text-justify dark:text-gray-400 text-gray-700">
       <p>{{ $t('about.banner.hello') }} <span class="text-indigo-600 font-bold">Arthur DANJOU</span> 👋.</p> <br/>
diff --git a/src/components/ProjectsHome.vue b/src/components/ProjectsHome.vue
index 2de42d1..f0c7d98 100644
--- a/src/components/ProjectsHome.vue
+++ b/src/components/ProjectsHome.vue
@@ -29,7 +29,7 @@
 
 <script lang="ts">
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
-import {Project} from "../../@types/types";
+import {Project} from "../../types/types";
 
 export default defineComponent({
   name: "ProjectsHome",
diff --git a/src/components/Skill.vue b/src/components/Skill.vue
index 2b0505e..88aa53b 100644
--- a/src/components/Skill.vue
+++ b/src/components/Skill.vue
@@ -2,7 +2,7 @@
   <div class="mb-3 mr-2 p-1 md:p-2 h-32 w-32 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="getColor">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
-        <img class="rounded-sm" alt="Skill Img" :src="getCoverLink">
+        <img class="rounded-sm" alt="Skill Img" :src="getCoverLink" />
       </div>
       <h1 class="md:text-lg text-md font-bold text-center text-gray-700 dark:text-gray-400">{{ skill }}</h1>
     </div>
diff --git a/src/components/SkillsAbout.vue b/src/components/SkillsAbout.vue
index 8b27992..358d7b2 100644
--- a/src/components/SkillsAbout.vue
+++ b/src/components/SkillsAbout.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
-import {Skill} from "../../@types/types";
+import {Skill} from "../../types/types";
 
 export default defineComponent({
   name: "SkillsAbout",
diff --git a/src/middleware/ipx.ts b/src/middleware/ipx.ts
new file mode 100644
index 0000000..f20551d
--- /dev/null
+++ b/src/middleware/ipx.ts
@@ -0,0 +1,8 @@
+import { createIPX, createIPXMiddleware } from 'ipx'
+
+// https://github.com/unjs/ipx
+const ipx = createIPX({
+  dir: 'src/static'
+})
+
+export default createIPXMiddleware(ipx)
diff --git a/src/pages/blog/_slug.vue b/src/pages/blog/_slug.vue
index aed8ed1..f45b5aa 100644
--- a/src/pages/blog/_slug.vue
+++ b/src/pages/blog/_slug.vue
@@ -43,7 +43,7 @@
       <nuxt-content
         :document="post"
         class="my-6 md:my-10 w-full text-justify max-w-none
-        prose prose-sm sm:prose lg:prose-lg lg:max-w-none sm:max-w-none
+        prose prose-sm lg:prose-lg lg:max-w-none sm:max-w-none
         dark:prose-dark dark:max-w-none"
       />
       <p class="mb-3">
@@ -66,7 +66,7 @@
             :href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Farthurdanjou.fr%2Fblog%2F' + this.post.slug + '&text=' + $t('blog.tweet') + ' ' + post.title"
             class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 justify-center items-center"
           >
-            <img class="inline img icon-hover" src="@/assets/images/socials/twitter.svg" alt="Twitter logo" height="40" width="40" />
+            <nuxt-img class="inline img icon-hover" src="/socials/twitter.svg" alt="Twitter logo" height="40" width="40" />
           </a>
           <div @click="scrollToTop"
                class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white">
@@ -113,7 +113,7 @@ import {
   useMeta,
   useRoute, useStatic, watch
 } from "@nuxtjs/composition-api";
-import {Post} from "../../../@types/types";
+import {Post} from "../../../types/types";
 
 export default defineComponent({
   name: "blog",
diff --git a/src/pages/blog/index.vue b/src/pages/blog/index.vue
index fed49e1..34caad0 100644
--- a/src/pages/blog/index.vue
+++ b/src/pages/blog/index.vue
@@ -31,7 +31,7 @@
 
 <script lang="ts">
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
-import {Post} from "../../../@types/types";
+import {Post} from "../../../types/types";
 
 export default defineComponent({
   name: "blog",
diff --git a/src/pages/contact.vue b/src/pages/contact.vue
index 1660a0b..fc080f9 100644
--- a/src/pages/contact.vue
+++ b/src/pages/contact.vue
@@ -28,7 +28,7 @@
 
 <script lang="ts">
 import {computed, useAsync, useContext} from "@nuxtjs/composition-api";
-import {InfoData} from "../../@types/types";
+import {InfoData} from "../../types/types";
 
 export default {
   name: "contact",
diff --git a/src/pages/projects.vue b/src/pages/projects.vue
index 62dbeba..2963d7d 100644
--- a/src/pages/projects.vue
+++ b/src/pages/projects.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import {useAsync, useContext, useMeta} from "@nuxtjs/composition-api";
-import {Project} from "../../@types/types";
+import {Project} from "../../types/types";
 
 export default {
   name: "index",
diff --git a/src/plugins/main.ts b/src/plugins/main.ts
new file mode 100644
index 0000000..63cea49
--- /dev/null
+++ b/src/plugins/main.ts
@@ -0,0 +1 @@
+import 'windi.css'
diff --git a/src/assets/images/Logo.jpg b/src/static/Logo.jpg
similarity index 100%
rename from src/assets/images/Logo.jpg
rename to src/static/Logo.jpg
diff --git a/src/assets/images/logo-header.png b/src/static/logo-header.png
similarity index 100%
rename from src/assets/images/logo-header.png
rename to src/static/logo-header.png
diff --git a/src/assets/images/memojies/Dev.png b/src/static/memojies/Dev.png
similarity index 100%
rename from src/assets/images/memojies/Dev.png
rename to src/static/memojies/Dev.png
diff --git a/src/assets/images/memojies/Fiesta.png b/src/static/memojies/Fiesta.png
similarity index 100%
rename from src/assets/images/memojies/Fiesta.png
rename to src/static/memojies/Fiesta.png
diff --git a/src/assets/images/memojies/Hat.png b/src/static/memojies/Hat.png
similarity index 100%
rename from src/assets/images/memojies/Hat.png
rename to src/static/memojies/Hat.png
diff --git a/src/assets/images/memojies/Hey.png b/src/static/memojies/Hey.png
similarity index 100%
rename from src/assets/images/memojies/Hey.png
rename to src/static/memojies/Hey.png
diff --git a/src/assets/images/socials/github-black.svg b/src/static/socials/github-black.svg
similarity index 100%
rename from src/assets/images/socials/github-black.svg
rename to src/static/socials/github-black.svg
diff --git a/src/assets/images/socials/github-white.svg b/src/static/socials/github-white.svg
similarity index 100%
rename from src/assets/images/socials/github-white.svg
rename to src/static/socials/github-white.svg
diff --git a/src/assets/images/socials/nuxtjs.svg b/src/static/socials/nuxtjs.svg
similarity index 100%
rename from src/assets/images/socials/nuxtjs.svg
rename to src/static/socials/nuxtjs.svg
diff --git a/src/assets/images/socials/twitch.svg b/src/static/socials/twitch.svg
similarity index 62%
rename from src/assets/images/socials/twitch.svg
rename to src/static/socials/twitch.svg
index 1d90555..93a085c 100644
--- a/src/assets/images/socials/twitch.svg
+++ b/src/static/socials/twitch.svg
@@ -1,9 +1,8 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="-92.4 101 489.5 512" enable-background="new -92.4 101 489.5 512" xml:space="preserve">
-<g>
-	<path fill="#65459B" d="M263.6,546.1H163.4L96.7,613H30v-66.9H-92.4v-356l33.3-89.1h456.2v311.6L263.6,546.1z M352.7,390.5V145.5
-		H-14.6v322.7H85.6V535l66.7-66.7h122.4L352.7,390.5z"/>
-	<g id="Solo_Glitch_136_">
+  <g>
+    <path fill="#65459B" d="M263.6,546.1H163.4L96.7,613H30v-66.9H-92.4v-356l33.3-89.1h456.2v311.6L263.6,546.1z M352.7,390.5V145.5H-14.6v322.7H85.6V535l66.7-66.7h122.4L352.7,390.5z"/>
+    <g id="Solo_Glitch_136_">
 		<g>
 			<path fill="#65459B" d="M230.2,234.6v133.6h44.5V234.6H230.2z M107.8,368.1h44.5V234.6h-44.5V368.1z"/>
 		</g>
diff --git a/src/static/socials/twitter.svg b/src/static/socials/twitter.svg
new file mode 100644
index 0000000..b3acfff
--- /dev/null
+++ b/src/static/socials/twitter.svg
@@ -0,0 +1,2 @@
+<svg id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.24 102.59">
+  <defs><style>.cls-1{fill:#1da1f2;}</style></defs><path id="original" class="cls-1" d="M40.58,115.3c47.64,0,73.69-39.47,73.69-73.69,0-1.12,0-2.24-.07-3.35a52.7,52.7,0,0,0,12.92-13.41,51.7,51.7,0,0,1-14.87,4.08A26,26,0,0,0,123.63,14.6a51.9,51.9,0,0,1-16.45,6.29A25.92,25.92,0,0,0,63.05,44.51,73.53,73.53,0,0,1,9.67,17.45a25.92,25.92,0,0,0,8,34.58A25.71,25.71,0,0,1,6,48.78c0,.11,0,.22,0,.33A25.91,25.91,0,0,0,26.73,74.5a25.86,25.86,0,0,1-11.7.44,25.93,25.93,0,0,0,24.2,18A52,52,0,0,1,7.06,104a52.72,52.72,0,0,1-6.18-.36,73.32,73.32,0,0,0,39.7,11.63" transform="translate(-0.88 -12.7)"/></svg>
diff --git a/@types/index.d.ts b/types/index.d.ts
similarity index 100%
rename from @types/index.d.ts
rename to types/index.d.ts
diff --git a/@types/types.ts b/types/types.ts
similarity index 100%
rename from @types/types.ts
rename to types/types.ts
diff --git a/@types/vue-shim.d.ts b/types/vue-shim.d.ts
similarity index 100%
rename from @types/vue-shim.d.ts
rename to types/vue-shim.d.ts
diff --git a/tailwind.config.js b/windi.config.ts
similarity index 97%
rename from tailwind.config.js
rename to windi.config.ts
index 19fa7f6..8d65050 100644
--- a/tailwind.config.js
+++ b/windi.config.ts
@@ -1,6 +1,8 @@
+import {defineConfig} from "windicss/helpers";
+
 const colors = require('windicss/colors')
 
-module.exports = {
+module.exports = defineConfig({
   presets: [],
   darkMode: 'class',
   theme: {
@@ -127,14 +129,8 @@ module.exports = {
       gray: colors.gray,
       coolGray: colors.coolGray,
       blueGray: colors.blueGray,
-      dark: {
-        100: 'rgb(150,150,150)',
-        200: 'rgb(112,112,112)',
-        850: '#404040',
-        700: '#272727',
-        800: '#212121',
-        900: '#121212',
-      }
+      dark: colors.dark,
+      light: colors.light
     },
     spacing: {
       px: '1px',
@@ -812,23 +808,7 @@ module.exports = {
       50: '50',
     },
   },
-  variantOrder: [
-    'first',
-    'last',
-    'odd',
-    'even',
-    'visited',
-    'checked',
-    'group-hover',
-    'group-focus',
-    'focus-within',
-    'hover',
-    'focus',
-    'focus-visible',
-    'active',
-    'disabled',
-  ],
   plugins: [
-    require('windicss/plugin/typography')
+    require('windicss/plugin/typography'),
   ],
-}
+})