From b90829a5437b517484c2c46fb734d4f84aa82427 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sat, 12 Aug 2023 15:54:23 +0200
Subject: [PATCH] Working

---
 package.json                           |   2 +-
 src/components/Footer.vue              |  27 +++++
 src/components/header/ColorPicker.vue  |   1 +
 src/components/header/Header.vue       |   4 +-
 src/components/header/MobileNavBar.vue |  80 ++++++++++++++-
 src/components/header/NavBar.vue       |  22 ++--
 src/composables/useContent.ts          |  63 ++++++++++++
 src/content/skills.json                | 135 +++++++++++++++++++++++++
 src/content/uses.md                    |  63 ++++++++++++
 src/content/writing/test-2.md          |  64 ++++++++++++
 src/content/writing/test.md            |  27 +++++
 src/layouts/default.vue                |   9 +-
 src/pages/index.vue                    |   1 -
 src/pages/uses.vue                     |  21 ++++
 src/pages/writing/[slug].vue           |  16 +++
 src/pages/writing/index.vue            |  64 ++++++++++++
 types.ts                               |  54 ++++++++++
 yarn.lock                              |   2 +-
 18 files changed, 631 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Footer.vue
 create mode 100644 src/composables/useContent.ts
 create mode 100644 src/content/skills.json
 create mode 100644 src/content/uses.md
 create mode 100644 src/content/writing/test-2.md
 create mode 100644 src/content/writing/test.md
 create mode 100644 src/pages/uses.vue
 create mode 100644 src/pages/writing/[slug].vue
 create mode 100644 src/pages/writing/index.vue

diff --git a/package.json b/package.json
index fc7834a..9feb38c 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@nuxt/content": "^2.7.2",
+    "@nuxt/content": "2.7.2",
     "@nuxt/image": "^0.7.1",
     "@pinia/nuxt": "0.4.11",
     "@prisma/client": "^5.0.0",
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..ecb9368
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const year = computed(() => new Date().getFullYear())
+</script>
+
+<template>
+  <footer class="w-container flex justify-between py-6 bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
+    <div class="w-full duration-300 text-center flex flex-col md:flex-row md:justify-between items-center gap-y-2">
+      <p class="text-subtitle text-sm">
+        © {{ year }} ArtDanjProduction
+      </p>
+      <div class="flex items-center">
+        <p class="text-subtitle">
+          Designed & Built by
+        </p>
+        <UButton variant="link" color="primary" label="Arthur Danjou" to="https://twitter.com/arthurdanj" target="_blank" />
+      </div>
+      <p class="text-subtitle flex items-center">
+        Made with
+        <UButton variant="link" color="green" label="Nuxt 3" to="https://nuxt.com/" target="_blank" icon="i-vscode-icons-file-type-nuxt" trailing/>
+      </p>
+    </div>
+  </footer>
+</template>
+
+<style>
+
+</style>
diff --git a/src/components/header/ColorPicker.vue b/src/components/header/ColorPicker.vue
index d3d0a8e..2fab478 100644
--- a/src/components/header/ColorPicker.vue
+++ b/src/components/header/ColorPicker.vue
@@ -14,6 +14,7 @@ const { setColor, getColor } = useColorStore()
     :ui="{
       background: 'bg-white dark:bg-stone-900',
       ring: 'ring-1 ring-gray-200 dark:ring-stone-800',
+      container: 'z-30',
     }"
   >
     <UButton trailing-icon="i-heroicons-swatch-20-solid" variant="ghost" color="primary" size="sm" />
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 28c57bd..117571b 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-container flex justify-between py-6 sticky top-0 left-0 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
+  <header class="w-container z-30 flex justify-between py-6 sticky top-0 left-0 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
     <Logo />
     <NavBar />
     <div class="flex gap-2">
@@ -11,5 +11,5 @@
         <MobileNavBar />
       </ClientOnly>
     </div>
-  </div>
+  </header>
 </template>
diff --git a/src/components/header/MobileNavBar.vue b/src/components/header/MobileNavBar.vue
index fdba64d..4311495 100644
--- a/src/components/header/MobileNavBar.vue
+++ b/src/components/header/MobileNavBar.vue
@@ -1,5 +1,61 @@
 <script lang="ts" setup>
 const isOpen = ref(false)
+
+const router = useRouter()
+router.afterEach(() => isOpen.value = false)
+
+const navs = [
+  {
+    label: 'Home',
+    to: '/',
+    icon: 'i-ph-house-bold',
+  },
+  {
+    label: 'About',
+    to: '/about',
+    icon: 'i-ph-person-arms-spread-bold',
+  },
+  {
+    label: 'Articles',
+    to: '/writing',
+    icon: 'i-ph-pencil-bold',
+  },
+  {
+    label: 'Projects',
+    to: '/work',
+    icon: 'i-ph-flask-bold',
+  },
+  {
+    label: 'Uses',
+    to: '/uses',
+    icon: 'i-ph-tree-evergreen-bold',
+  },
+  {
+    label: 'Talents',
+    to: '/talents',
+    icon: 'i-ph-shooting-star-bold',
+  },
+  {
+    label: 'Bookmarks',
+    to: '/bookmarks',
+    icon: 'i-ph-bookmarks-bold',
+  },
+  {
+    label: 'Ask Me',
+    to: '/ama',
+    icon: 'i-octicon-comment-discussion-16',
+  },
+  {
+    label: 'Contact',
+    to: '/contact',
+    icon: 'i-ph-push-pin-bold',
+  },
+]
+
+const route = useRoute()
+function isRoute(path: string) {
+  return route.path === path
+}
 </script>
 
 <template>
@@ -17,12 +73,30 @@ const isOpen = ref(false)
     <USlideover v-model="isOpen">
       <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
         <template #header>
-          <div>
-            Header
+          <div class="flex justify-between items-center">
+            <div>Logo</div>
+            <UButton
+              size="md"
+              icon="i-ic-round-close"
+              :ui="{ rounded: 'rounded-full' }"
+              @click.prevent="isOpen = false"
+            />
           </div>
         </template>
 
-        Content
+        <div class="flex flex-col space-y-2">
+          <UButton
+            v-for="nav in navs"
+            :key="nav.label"
+            size="sm"
+            :variant="isRoute(nav.to) ? 'solid' : 'ghost'"
+            color="primary"
+            :to="nav.to"
+            :icon="nav.icon"
+          >
+            {{ nav.label }}
+          </UButton>
+        </div>
 
         <template #footer>
           Footer
diff --git a/src/components/header/NavBar.vue b/src/components/header/NavBar.vue
index 8e82ffa..03153ba 100644
--- a/src/components/header/NavBar.vue
+++ b/src/components/header/NavBar.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-const appConfig = useAppConfig()
-
-function getTextColor() {
-  return `!text-${appConfig.ui.primary}-500`
-}
-
 const items = [
   [{
     label: 'Talents',
@@ -12,15 +6,20 @@ const items = [
     icon: 'i-ph-users-bold',
   },
   {
-    label: 'bookmarks',
+    label: 'Bookmarks',
     to: '/bookmarks',
     icon: 'i-ph-bookmark-simple-bold',
+  },
+  {
+    label: 'Ask Me',
+    to: '/ama',
+    icon: 'i-octicon-comment-discussion-16',
   }],
 ]
 </script>
 
 <template>
-  <header class="hidden md:block pointer-events-auto">
+  <nav class="hidden md:block pointer-events-auto z-50">
     <div class="flex items-center h-10 rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
       <UButton to="/" size="sm" variant="ghost" color="white">
         Home
@@ -28,8 +27,7 @@ const items = [
       <UButton to="/about" size="sm" variant="ghost" color="white">
         About
       </UButton>
-
-      <UButton to="/blog" size="sm" variant="ghost" color="white">
+      <UButton to="/writing" size="sm" variant="ghost" color="white">
         Articles
       </UButton>
       <UButton to="/work" size="sm" variant="ghost" color="white">
@@ -47,10 +45,10 @@ const items = [
         Contact
       </UButton>
     </div>
-  </header>
+  </nav>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .router-link-exact-active {
   @apply bg-white/60 dark:bg-black
 }
diff --git a/src/composables/useContent.ts b/src/composables/useContent.ts
new file mode 100644
index 0000000..3ae68cb
--- /dev/null
+++ b/src/composables/useContent.ts
@@ -0,0 +1,63 @@
+import type { Education, JsonParsedContent, Post, Project, Skill, WorkExperience } from '../../types'
+
+export function useProjects() {
+  return useAsyncData('content:projects', () => {
+    return queryContent<Project>('projects').find()
+  })
+}
+
+export function useLatestProject() {
+  return useAsyncData('content:latestProject', () => {
+    return queryContent<Project>('projects')
+      .where({
+        latest: true,
+      })
+      .limit(1)
+      .findOne()
+  })
+}
+
+export function useEducations() {
+  return useAsyncData('content:educations', () => {
+    return queryContent<Education>('educations')
+      .sort({
+        endDate: -1,
+      })
+      .find()
+  })
+}
+
+export function useWorkExperiences() {
+  return useAsyncData('content:experiences', () => {
+    return queryContent<WorkExperience>('experiences')
+      .sort({
+        endDate: -1,
+      })
+      .find()
+  })
+}
+
+export function useSkills() {
+  return useAsyncData('content:skills', () => queryContent<JsonParsedContent<Skill[]>>('skills').findOne())
+}
+
+export function usePosts() {
+  return useAsyncData('content:posts', () => {
+    return queryContent<Post>('writing')
+      .sort({
+        publishedAt: -1,
+      })
+      .find()
+  })
+}
+
+export function useLatestPost() {
+  return useAsyncData('content:latestPost', () => {
+    return queryContent<Post>('writing')
+      .sort({
+        publishedAt: -1,
+      })
+      .limit(1)
+      .find()
+  })
+}
diff --git a/src/content/skills.json b/src/content/skills.json
new file mode 100644
index 0000000..1d94e28
--- /dev/null
+++ b/src/content/skills.json
@@ -0,0 +1,135 @@
+{
+  "body": [
+    {
+      "name": "TypeScript",
+      "icon": "skill-icons:typescript",
+      "color": "sky-500"
+    },
+    {
+      "name": "Python",
+      "icon": {
+        "dark": "skill-icons:python-dark",
+        "light": "skill-icons:python-light"
+      },
+      "color": "amber-500"
+    },
+    {
+      "name": "Java",
+      "icon": {
+        "dark": "skill-icons:java-dark",
+        "light": "skill-icons:java-light"
+      },
+      "color": "blue-400"
+    },
+    {
+      "name": "Rust",
+      "icon": "skill-icons:rust",
+      "color": "orange-600"
+    },
+    {
+      "name": "HTML5",
+      "icon": "skill-icons:html",
+      "color": "orange-500"
+    },
+    {
+      "name": "CSS3",
+      "icon": "skill-icons:css",
+      "color": "blue-500"
+    },
+    {
+      "name": "Sass",
+      "icon": "skill-icons:sass",
+      "color": "rose-500"
+    },
+    {
+      "name": "VueJS 3",
+      "icon": {
+        "dark": "skill-icons:vuejs-dark",
+        "light": "skill-icons:vuejs-light"
+      },
+      "color": "emerald-500"
+    },
+    {
+      "name": "NuxtJS 3",
+      "icon": {
+        "dark": "skill-icons:nuxtjs-dark",
+        "light": "skill-icons:nuxtjs-light"
+      },
+      "color": "emerald-500"
+    },
+    {
+      "name": "TailwindCSS",
+      "icon": {
+        "dark": "skill-icons:tailwindcss-dark",
+        "light": "skill-icons:tailwindcss-light"
+      },
+      "color": "cyan-300"
+    },
+    {
+      "name": "ViteJS",
+      "icon": {
+        "dark": "skill-icons:vite-dark",
+        "light": "skill-icons:vite-light"
+      },
+      "color": "amber-500"
+    },
+    {
+      "name": "AdonisJS",
+      "icon": "skill-icons:adonis",
+      "color": "purple-500"
+    },
+    {
+      "name": "MySQL",
+      "icon": {
+        "dark": "skill-icons:mysql-dark",
+        "light": "skill-icons:mysql-light"
+      },
+      "color": "sky-300"
+    },
+    {
+      "name": "Redis",
+      "icon": {
+        "dark": "skill-icons:redis-dark",
+        "light": "skill-icons:redis-light"
+      },
+      "color": "red-500"
+    },
+    {
+      "name": "RabbitMQ",
+      "icon": {
+        "dark": "skill-icons:rabbitmq-dark",
+        "light": "skill-icons:rabbitmq-light"
+      },
+      "color": "orange-500"
+    },
+    {
+      "name": "Docker",
+      "icon": "skill-icons:docker",
+      "color": "blue-600"
+    },
+    {
+      "name": "Kubernetes",
+      "icon": "skill-icons:kubernetes",
+      "color": "blue-600"
+    },
+    {
+      "name": "Git",
+      "icon": "skill-icons:git",
+      "color": "orange-500"
+    },
+    {
+      "name": "Prisma.io",
+      "icon": "skill-icons:prisma",
+      "color": "sky-600"
+    },
+    {
+      "name": "Supabase",
+      "icon": {
+        "dark": "skill-icons:supabase-dark",
+        "light": "skill-icons:supabase-light"
+      },
+      "color": "green-500"
+    }
+  ]
+
+}
diff --git a/src/content/uses.md b/src/content/uses.md
new file mode 100644
index 0000000..5baae21
--- /dev/null
+++ b/src/content/uses.md
@@ -0,0 +1,63 @@
+---
+title: 'My Uses — Arthur Danjou'
+description: 'This is my uses page'
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique erat semper mi dictum, in ornare tellus dapibus. Vestibulum accumsan arcu diam, et tincidunt nisl dignissim id. Sed nec ullamcorper sem, sed consequat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae velit nec mauris venenatis dapibus. Cras eget nulla sit amet enim condimentum pellentesque vitae et lacus. Nullam hendrerit feugiat porttitor. Praesent cursus nunc porttitor auctor ultrices.
+
+## Computers
+
+I mainly use a [MacBook Pro 13"](https://www.apple.com/macbook-pro-13/) for conding and I also use a custom computer for gaming and Windows with the following configuration:
+
+| Name | Detail |
+| :----- | -----: |
+| OS | Windows 11 Pro 64-bit |
+| Processor | Intel Core i5-10400F |
+| RAM | 16Go DDR4 |
+| GPU | RTX 2060 |
+
+## Peripherals
+
+| Name | Detail |
+| :----- | -----: |
+| Phone | [Iphone XR](https://www.apple.com/iphone-xr/) |
+| Tablet | [Ipad Air](https://www.apple.com/ipad-air/) |
+| Wireless Headphone | [Airpods 3rd Gen](https://www.apple.com/airpods/) |
+| Desktop Headphone | [Beats Studio 3](https://www.beatsbydre.com/headphones/studio3-wireless) |
+| Microphone | xxx |
+
+## Editors
+
+| Name | Detail |
+| :----- | -----: |
+| Coding | [Visual Studio Code](https://code.visualstudio.com/) |
+| Font | [JetBrains Mono](https://www.jetbrains.com/lp/mono/) |
+| Settings | [Warp](https://www.warp.dev/) |
+| Extensions | [Beats Studio 3](https://www.beatsbydre.com/headphones/studio3-wireless) |
+
+## Software and Applications
+
+| Name | Detail |
+| :----- | -----: |
+| Terminal | [Warp](https://www.warp.dev/) |
+| Mail Client | [Apple Mail](https://www.apple.com/macos/mail/) |
+| Calendar | [Apple Calendar](https://www.apple.com/macos/calendar/) |
+| Reminders | [Apple Reminders](https://www.apple.com/macos/reminders/) |
+| Notes | [Notion](https://notion.so/) |
+| Main Browser | [Google Chrome](https://www.google.com/chrome/) |
+| Second Brower | [Arc](https://arc.net/) |
+| Chat Client | [Discord](https://discordapp.com/) |
+| Music Player | [Spotify](https://www.spotify.com/) |
+| Launcher | [RayCast](https://raycast.com/) | 
+
+## Favorite Stack
+
+| Name | Detail |
+| :----- | -----: |
+| Main language for Front & Back | [Typescript](https://www.typescriptlang.org/) |
+| Frontend Framework | [Vue 3](https://vuejs.org/) with [Nuxt 3](https://v3.nuxtjs.org/)|
+| CSS Framework | [TailwindCss](https://tailwindcss.com/) |
+| Main ORM | [Prisma](https://www.prisma.io/) |
+| Backend Framework | [AdonisJS](https://adonisjs.com/) |
+| Auth Manager | [Supabase](https://supabase.io/) |
+| End-to-end typesafe APIs | [TRPC.io](https://trpc.io/) |
diff --git a/src/content/writing/test-2.md b/src/content/writing/test-2.md
new file mode 100644
index 0000000..2b9de39
--- /dev/null
+++ b/src/content/writing/test-2.md
@@ -0,0 +1,64 @@
+---
+slug: 'test'
+title: 'Test'
+description: 'Description de test'
+publishedAt: '06 February 2021'
+modifiedAt: '06 February 2021'
+readingMins: 5
+cover: 'test'
+author: 'arthurdanjou@outlook.fr'
+---
+This is my new post !
+
+```ts
+const test = 'Hello World !'
+console.log(test)
+```
+
+> Block quote
+
+`code inline`
+
+`const codeInline: string = 'highlighted code inline'`{lang="ts"}
+
+## H2 Heading
+
+### H3 Heading
+
+- Just
+- An
+
+Is it laggy ?
+
+- Unordered
+- List
+
+**Just a strong paragraph.**
+
+_Just an italic paragraph._
+
+Divider under.
+
+---
+
+Divider above.
+
+[Hello World](https://google.com)
+
+Voici un [Lien](https://google.com) vers Google
+
+```js [.eslintrc.js]
+module.exports = {
+  extends: [
+    // ...
+    'plugin:vue/vue3-recommended',
+    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
+  ],
+}
+```
+
+| Key | Type      | Description | Test   |
+|-----|-----------|-------------|--------|
+| 1   | Wonderful | Table       | This   |
+| 2   | Type 2    | Data        | is     |
+| 3   | Wonderful | Website     | a test |
diff --git a/src/content/writing/test.md b/src/content/writing/test.md
new file mode 100644
index 0000000..74dd23e
--- /dev/null
+++ b/src/content/writing/test.md
@@ -0,0 +1,27 @@
+---
+slug: 'test-123-123'
+title: 'Test de titre plus long'
+description: "Description de test, car c'est mieux que l'ancien"
+publishedAt: '7 May 2021'
+readingMins: 5
+cover: 'test'
+author: 'arthurdanjou@outlook.fr'
+---
+
+# Titre 1
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel felis enim. Sed tincidunt eros quis justo dignissim accumsan. Aenean dignissim vehicula mauris, vitae feugiat lectus sagittis eu. Aliquam erat volutpat. Donec ligula enim, feugiat in orci non, consequat hendrerit felis. Mauris et erat at quam porttitor dapibus quis sed tortor. Mauris at tristique mi. Nullam risus purus, facilisis eu hendrerit id, tincidunt tempus leo. Sed elementum lacus eget lectus bibendum, luctus venenatis nibh condimentum. Phasellus congue vel tortor tempus ornare.
+
+## Titre 2
+Sed placerat tincidunt vestibulum. Nulla in justo rhoncus, auctor nunc dignissim, convallis ligula. Pellentesque at tellus quis sem mollis placerat. Vestibulum ac neque vulputate, sagittis turpis quis, bibendum dui. In venenatis non ligula ac scelerisque. Proin suscipit dictum lacus eu pharetra. Aenean eleifend condimentum risus nec ultrices. In consectetur id metus sit amet euismod.
+
+### Titre 3
+Proin lobortis vestibulum augue, feugiat tristique felis eleifend quis. Mauris rhoncus arcu in quam mollis ultricies. Nunc tortor turpis, egestas sed pellentesque nec, sagittis tristique elit. Etiam quis tellus pellentesque, bibendum neque a, tempus libero. Donec eros felis, maximus vitae feugiat at, dictum non diam. Ut sit amet mi auctor, egestas elit eget, ultricies nunc. Aliquam nec convallis dolor. Nullam nisi dolor, rutrum non lacus a, suscipit rutrum erat. Sed semper leo ut nisl tristique facilisis. Nulla dolor lectus, tempor ut mauris quis, mollis pretium turpis. Nunc vel orci risus. Nullam pretium, ante eget facilisis congue, eros ligula tempus velit, quis molestie neque magna vel turpis. Donec et erat maximus, fermentum metus non, scelerisque ligula.
+
+#### Titre 4
+Nullam sit amet elementum felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis semper orci. Proin mi magna, maximus sed vehicula aliquet, eleifend a enim. Vivamus id dolor id dolor hendrerit congue molestie placerat magna. Nunc scelerisque augue at arcu tristique mattis. Aenean a enim eget nisl aliquet varius at quis nunc. Nullam vulputate lobortis tortor, sed placerat leo pharetra a.
+
+##### Titre 5
+Nam semper nisl eget nulla pellentesque, nec tempor augue suscipit. Morbi finibus felis non condimentum finibus. Sed ut facilisis odio. Pellentesque sit amet tellus sed felis semper laoreet. Curabitur dignissim dignissim ipsum, a rhoncus erat consequat id. Vestibulum suscipit pharetra maximus. Quisque posuere porta libero non convallis. Suspendisse potenti. Cras eget urna maximus metus tempor sodales. Vivamus commodo nulla eros, vel volutpat massa rhoncus ac. Vestibulum vulputate libero et est interdum, vel facilisis lorem posuere. Integer ultricies pulvinar vehicula. Suspendisse faucibus bibendum ligula, at tempus diam dignissim non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed lacus enim, pellentesque eget leo ut, faucibus convallis metus. 
+
+###### Titre 6
+Nam semper nisl eget nulla pellentesque, nec tempor augue suscipit. Morbi finibus felis non condimentum finibus. Sed ut facilisis odio. Pellentesque sit amet tellus sed felis semper laoreet. Curabitur dignissim dignissim ipsum, a rhoncus erat consequat id. Vestibulum suscipit pharetra maximus. Quisque posuere porta libero non convallis. Suspendisse potenti. Cras eget urna maximus metus tempor sodales. Vivamus commodo nulla eros, vel volutpat massa rhoncus ac. Vestibulum vulputate libero et est interdum, vel facilisis lorem posuere. Integer ultricies pulvinar vehicula. Suspendisse faucibus bibendum ligula, at tempus diam dignissim non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed lacus enim, pellentesque eget leo ut, faucibus convallis metus. 
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 5906bed..ffbeb79 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,15 +1,16 @@
 <template>
   <CommandPalette />
-  <div class="fixed inset-0 flex justify-center sm:px-8">
+  <section class="fixed inset-0 flex justify-center sm:px-8">
     <div class="flex w-full max-w-7xl lg:px-8">
       <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
     </div>
-  </div>
+  </section>
   <UContainer class="relative z-50">
     <Header />
-    <div class="min-h-screen">
+    <main class="min-h-screen">
       <NuxtPage />
-    </div>
+    </main>
+    <Footer />
   </UContainer>
 
   <UNotifications />
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 9378325..40a3ea0 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -8,6 +8,5 @@ useHead({
 <template>
   <section>
     <MainBanner />
-    <NewsletterCard />
   </section>
 </template>
diff --git a/src/pages/uses.vue b/src/pages/uses.vue
new file mode 100644
index 0000000..48b4ee2
--- /dev/null
+++ b/src/pages/uses.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+useHead({
+  title: 'My uses — Arthur Danjou',
+})
+</script>
+
+<template>
+  <div class="w-container lg:my-32 my-16">
+    <div class="max-w-3xl space-y-8">
+      <ContentDoc
+        class="my-16 prose leading-6 prose-table:w-full md:prose-table:w-4/5 lg:prose-table:w-3/5 max-w-none
+             dark:prose dark:prose-invert dark:leading-6 dark:max-w-none dark:prose-table:w-full dark:md:prose-table:w-3/4 dark:lg:prose-table:w-2/5"
+        path="/uses"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+
+</style>
diff --git a/src/pages/writing/[slug].vue b/src/pages/writing/[slug].vue
new file mode 100644
index 0000000..8238f21
--- /dev/null
+++ b/src/pages/writing/[slug].vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { Post } from '../../../types'
+
+const route = useRoute()
+const { data: postContent } = await useAsyncData<Post>(`blog:post-content:${route.params.id}`, async () => await queryContent<Post>(`/posts/${route.params.id}`).findOne())
+</script>
+
+<template>
+  <div>
+    {{ postContent }}
+  </div>
+</template>
+
+<style>
+
+</style>
diff --git a/src/pages/writing/index.vue b/src/pages/writing/index.vue
new file mode 100644
index 0000000..98d2a84
--- /dev/null
+++ b/src/pages/writing/index.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+
+function getColor() {
+  return `text-${appConfig.ui.primary}-500`
+}
+
+useHead({
+  title: 'My Shelf — Arthur Danjou',
+})
+
+const { data: posts } = await usePosts()
+</script>
+
+<template>
+  <div class="w-container lg:my-32 my-16">
+    <div class="max-w-3xl space-y-8">
+      <div>
+        <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
+          Writing on my life, development and my passions.
+        </h1>
+        <p class="leading-relaxed text-subtitle">
+          All my thoughts on programming, mathematics, artificial intelligence design, etc., are put together in chronological order. I also write about my projects, my discoveries, and my thoughts. <s>It is sometimes updated.</s>
+        </p>
+      </div>
+      <div class="mt-16 md:mt-20">
+        <div class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
+          <div class="flex max-w-3xl flex-col space-y-16">
+            <article v-for="post in posts" :key="post.slug" class="md:grid md:grid-cols-4 md:items-baseline">
+              <div class="md:col-span-3 group relative flex flex-col items-start">
+                <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+                  <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
+                  <NuxtLink :to="post._path">
+                    <span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+                    <span class="relative z-10">
+                      {{ post.title }}
+                    </span>
+                  </NuxtLink>
+                </h2>
+                <time class="md:hidden relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5">
+                  <span class="absolute inset-y-0 left-0 flex items-center">
+                    <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+                  </span>
+                  {{ post.publishedAt }}
+                </time>
+                <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+                  {{ post.description }}
+                </p>
+                <div class="relative z-10 mt-4 flex items-center gap-2 justify-center text-sm font-medium" :class="getColor()">
+                  <p>Read article</p>
+                  <UIcon name="i-ph-arrow-circle-right-bold" />
+                </div>
+              </div>
+              <time class="mt-1 md:block relative z-10 order-first mb-3 hidden text-sm text-zinc-400 dark:text-zinc-500">
+                <p>{{ post.publishedAt }}</p>
+                <p>{{ post.readingMins }} min.</p>
+              </time>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/types.ts b/types.ts
index 288e228..81ff879 100644
--- a/types.ts
+++ b/types.ts
@@ -1,3 +1,5 @@
+import type { MarkdownParsedContent, ParsedContent } from '@nuxt/content/dist/runtime/types'
+
 export enum ColorsTheme {
   RED = 'red',
   ORANGE = 'orange',
@@ -17,3 +19,55 @@ export enum ColorsTheme {
   PINK = 'pink',
   ROSE = 'rose',
 }
+
+export interface JsonParsedContent<T> extends ParsedContent {
+  body: T
+}
+
+export interface Post extends MarkdownParsedContent {
+  slug: string
+  title: string
+  description: string
+  readingMins: number
+  publishedAt: string
+  modifiedAt: string
+  cover: string
+  author: string
+}
+
+export interface Project extends MarkdownParsedContent {
+  name: string
+  description: string
+  latest: boolean
+  link: string
+  icon: string
+  skills: Skill[]
+  tags: string[]
+}
+
+export interface WorkExperience extends MarkdownParsedContent {
+  title: string
+  description: string
+  company: string
+  location: string
+  companyLink: string
+  startDate: string
+  endDate: string | 'Today'
+}
+
+export interface Education extends MarkdownParsedContent {
+  title: string
+  description: string
+  location: string
+  startDate: string
+  endDate: string | 'Today'
+}
+
+export interface Skill extends ParsedContent {
+  name: string
+  icon: string & {
+    dark: string
+    light: string
+  }
+  color: string
+}
diff --git a/yarn.lock b/yarn.lock
index b424a3b..83219a3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1088,7 +1088,7 @@
     read-package-json-fast "^3.0.0"
     which "^3.0.0"
 
-"@nuxt/content@^2.7.2":
+"@nuxt/content@2.7.2":
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/@nuxt/content/-/content-2.7.2.tgz#ecb997bbcf4cd559faf01f5688be3d9a4bd3a1c3"
   integrity sha512-fP0nrnyjtFbluKltKUtC7jSMFc1xAH+bwweZyLwXb3gkIap2EHlVL+e9ptGt39+4HIkRkLgME7TNr/fUO+CHug==