Working on website

app/components/AppHeader.vue

@@ -72,11 +72,13 @@ async function changeLocale(newLocale: string) {
   document.body.style.animation = ''
 }
 
-const open = ref(false)
+const openSelectMenu = ref(false)
+const openContactDrawer = ref(false)
 const router = useRouter()
 defineShortcuts({
   t: () => toggleTheme(),
-  l: () => open.value = !open.value,
+  l: () => openSelectMenu.value = !openSelectMenu.value,
+  c: () => openContactDrawer.value = !openContactDrawer.value,
   backspace: () => router.back(),
 })
 </script>
@@ -94,6 +96,7 @@ defineShortcuts({
         v-for="nav in navs"
         :key="nav.label.en"
         :text="nav.label[locale]"
+        :delay-duration="4"
       >
         <UButton
           :icon="`i-ph:${nav.icon}`"
@@ -102,26 +105,56 @@ defineShortcuts({
           :aria-label="nav.label"
           color="neutral"
           size="sm"
-          variant="outline"
+          variant="ghost"
         />
       </UTooltip>
+      <USeparator orientation="vertical" class="h-6" />
+
+      <UDrawer
+        v-model:open="openContactDrawer"
+        should-scale-background
+        :title="t('contact.title')"
+      >
+        <UTooltip
+          :kbds="['C']"
+          :text="t('contact.button')"
+          :delay-duration="4"
+          class="cursor-pointer"
+        >
+          <UButton
+            icon="i-ph-mailbox-duotone"
+            color="neutral"
+            size="sm"
+            variant="ghost"
+            @click="openContactDrawer = true"
+          />
+        </UTooltip>
+
+        <template #body>
+          <div>Hey</div>
+        </template>
+      </UDrawer>
+      <USeparator orientation="vertical" class="h-6" />
       <ClientOnly>
         <UTooltip
           :kbds="['T']"
           :text="t('theme')"
+          class="cursor-pointer"
+          :delay-duration="4"
         >
           <UButton
             :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
             color="neutral"
             aria-label="switch theme"
             size="sm"
-            variant="outline"
+            variant="ghost"
             @click="toggleTheme()"
           />
         </UTooltip>
         <UTooltip
           :kbds="['L']"
           :text="t('language')"
+          class="cursor-pointer"
           :content="{
             align: 'center',
             side: 'right',
@@ -130,13 +163,13 @@ defineShortcuts({
         >
           <USelect
             v-model="lang"
-            v-model:open="open"
+            v-model:open="openSelectMenu"
             :items="locales"
             size="sm"
             :leading-icon="currentLocale.icon"
             label-key="label"
             value-key="code"
-            variant="outline"
+            variant="soft"
             @update:model-value="changeLocale"
           />
         </UTooltip>
@@ -177,15 +210,27 @@ defineShortcuts({
 {
   "en": {
     "theme": "switch theme",
-    "language": "change language"
+    "language": "change language",
+    "contact": {
+      "button": "contact me",
+      "title": "Contact me"
+    }
   },
   "fr": {
     "theme": "changer de thème",
-    "language": "changer de langue"
+    "language": "changer de langue",
+    "contact": {
+      "button": "me contacter",
+      "title": "Me contacter"
+    }
   },
   "es": {
     "theme": "cambiar tema",
-    "language": "cambiar idioma"
+    "language": "cambiar idioma",
+    "contact": {
+       "button": "contactame",
+       "title": "Contactame"
+     }
   }
 }
 </i18n>

app/pages/portfolio/index.vue

@@ -54,14 +54,14 @@ function updateTag(payload: number | string) {
         <span class="truncate">{{ t(item.translation) }}</span>
       </template>
     </UTabs>
-    <ul class="grid grid-cols-1 md:grid-cols-2 gap-8">
+    <ul class="grid grid-cols-1 gap-4">
       <NuxtLink
         v-for="(writing, id) in writings"
         :key="id"
         :to="writing.path"
       >
         <li
-          class=" h-full border p-4 shadow-sm border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-800 dark:hover:border-neutral-600  duration-300"
+          class=" h-full border p-4 border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-800 dark:hover:border-neutral-600  duration-300"
         >
           <article class="space-y-2">
             <h1
@@ -165,3 +165,9 @@ function updateTag(payload: number | string) {
   }
 }
 </i18n>
+
+<style scoped>
+.tablist > button {
+  cursor: pointer !important;
+}
+</style>

content/portfolio/arthome.md

@@ -1,7 +1,7 @@
 ---
 slug: arthome
 title: ArtHome
-description: 🏡 ArtHome - Your personalised home page in your browser
+description: 🏡 Your personalised home page in your browser
 publishedAt: 2024/09/04
 readingTime: 1
 cover: arthome/cover.png

content/portfolio/monte-carlo-project.md

@@ -1,7 +1,7 @@
 ---
 slug: monte-carlo-project
 title: Monte Carlo Methods Project
-description: ⚠️ Still in progress - A project to demonstrate the use of Monte Carlo methods in R.
+description: A project to demonstrate the use of Monte Carlo methods in R.
 publishedAt: 2024/11/24
 readingTime: 3
 tags:

content/portfolio/python-data-ml.md

@@ -9,7 +9,6 @@ tags:
   - data
   - ai
   - python
-  - r
 ---
 
 [Python Data & ML](https://github.com/ArthurDanjou/Python-Data-Machine-Learning) is a repository dedicated to learning and practicing Python libraries for machine learning. It includes a variety of projects and exercises that cover the following topics.

nuxt.config.ts

@@ -9,6 +9,10 @@ export default defineNuxtConfig({
         separator: '•',
       },
     },
+    rootAttrs: {
+      'vaul-drawer-wrapper': '',
+      'class': 'bg-[var(--ui-bg)]',
+    },
   },
 
   css: ['~/assets/css/main.css'],
@@ -35,7 +39,7 @@ export default defineNuxtConfig({
   // Nuxt Content
   content: {
     preview: {
-      api: 'https://api.nuxt.studio',
+      // todo: api: 'https://api.nuxt.studio',
     },
     build: {
       markdown: {
@@ -117,16 +121,6 @@ export default defineNuxtConfig({
     defaultLocale: 'en',
   },
 
-  // Nuxt Icon
-  icon: {
-    serverBundle: {
-      collections: ['twemoji', 'ph', 'logos', 'vscode-icons'],
-    },
-    clientBundle: {
-      scan: true,
-    },
-  },
-
   // Nuxt Google Fonts
   googleFonts: {
     display: 'swap',

package.json

@@ -14,6 +14,9 @@
     "db:generate": "drizzle-kit generate"
   },
   "dependencies": {
+    "@iconify-json/logos": "^1.2.4",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/vscode-icons": "^1.2.11",
     "@nuxt/content": "3.1.0",
     "@nuxt/image": "^1.9.0",
     "@nuxt/ui": "3.0.0-alpha.12",

pnpm-lock.yaml

@@ -8,6 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@iconify-json/logos':
+        specifier: ^1.2.4
+        version: 1.2.4
+      '@iconify-json/ph':
+        specifier: ^1.2.2
+        version: 1.2.2
+      '@iconify-json/vscode-icons':
+        specifier: ^1.2.11
+        version: 1.2.11
       '@nuxt/content':
         specifier: 3.1.0
         version: 3.1.0(@libsql/client@0.5.6(encoding@0.1.13))(drizzle-orm@0.33.0(@cloudflare/workers-types@4.20250124.3)(@libsql/client@0.5.6(encoding@0.1.13))(@opentelemetry/api@1.9.0)(better-sqlite3@11.8.1)(pg@8.13.1))(magicast@0.3.5)(rollup@4.32.1)(typescript@5.7.3)
@@ -1106,6 +1115,15 @@ packages:
     resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/logos@1.2.4':
+    resolution: {integrity: sha512-XC4If5D/hbaZvUkTV8iaZuGlQCyG6CNOlaAaJaGa13V5QMYwYjgtKk3vPP8wz3wtTVNVEVk3LRx1fOJz+YnSMw==}
+
+  '@iconify-json/ph@1.2.2':
+    resolution: {integrity: sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==}
+
+  '@iconify-json/vscode-icons@1.2.11':
+    resolution: {integrity: sha512-V0ldtWPUKe7ZB3CV/TjgDW1Gbz74AxjGPS2NBWDTSn/y25gTwFycI1YcrluDhuVSoQpDEIYmm3JQJkhtSefh7A==}
+
   '@iconify/collections@1.0.511':
     resolution: {integrity: sha512-Ilp9gg6HYu9oGZUCNGCEsblATFagC7AmvsUMi4mxfPbh48ygKQ4vIfzJetE9AAu2qwqaYt/dRQjTXvt5Ex8HwQ==}
 
@@ -7521,6 +7539,18 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.1': {}
 
+  '@iconify-json/logos@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ph@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/vscode-icons@1.2.11':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/collections@1.0.511':
     dependencies:
       '@iconify/types': 2.0.0
@@ -11839,13 +11869,13 @@ snapshots:
 
   mdast-util-gfm@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.1
+      mdast-util-from-markdown: 2.0.2
       mdast-util-gfm-autolink-literal: 2.0.1
       mdast-util-gfm-footnote: 2.0.0
       mdast-util-gfm-strikethrough: 2.0.0
       mdast-util-gfm-table: 2.0.0
       mdast-util-gfm-task-list-item: 2.0.0
-      mdast-util-to-markdown: 2.1.0
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -12006,7 +12036,7 @@ snapshots:
       micromark-extension-gfm-tagfilter: 2.0.0
       micromark-extension-gfm-task-list-item: 2.1.0
       micromark-util-combine-extensions: 2.0.0
-      micromark-util-types: 2.0.0
+      micromark-util-types: 2.0.1
 
   micromark-extension-math@3.1.0:
     dependencies: