From 834d7ed00fa3ebabe8d2938857db0cc4155bf689 Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Thu, 9 Jul 2026 16:24:51 +0200
Subject: [PATCH] feat: add projects page and rework home page

---
 app/assets/css/colors.css               |  46 +++++-----
 app/assets/css/main.css                 |   1 +
 app/assets/css/tailwind.css             |   2 +-
 app/assets/css/typography.css           |  19 +++++
 app/assets/css/ui/images.css            |   9 ++
 app/assets/css/ui/index.css             |   1 +
 app/components/AppNavbar.vue            |   4 +-
 app/components/Ui/ProjectLink.vue       |  32 +++++++
 app/components/Ui/SingleProject.vue     |  23 +++++
 app/components/VocalSynth/Projects.vue  |   2 +-
 app/components/navbar/ThemeSwitcher.vue |   2 +-
 app/composables/useApi.ts               |  37 ++++----
 app/composables/useCrates.ts            |   8 ++
 app/composables/useGithub.ts            |  10 +++
 app/pages/projects.vue                  |  18 ++++
 app/pages/resume.vue                    |   8 +-
 app/types/crate.ts                      |  25 ++++++
 app/types/github-repository.ts          | 108 ++++++++++++++++++++++++
 app/types/project.ts                    |  23 +++++
 app/types/resume.ts                     |  50 ++++++++++-
 app/types/time.ts                       |   9 ++
 app/utils/i18n.ts                       |  21 +++++
 content/en/projects.json                |  85 +++++++++++++++++++
 content/en/resume.json                  |  59 ++++++++++---
 content/fr/index.md                     |   2 +
 content/fr/languages.md                 |   2 +-
 content/fr/projects.json                |  85 +++++++++++++++++++
 content/fr/resume.json                  |  60 ++++++++++---
 i18n/locales/en.json                    |   3 +
 i18n/locales/fr.json                    |   7 ++
 package.json                            |   2 +
 pnpm-lock.yaml                          |  34 ++++++++
 32 files changed, 720 insertions(+), 77 deletions(-)
 create mode 100644 app/assets/css/typography.css
 create mode 100644 app/assets/css/ui/images.css
 create mode 100644 app/components/Ui/ProjectLink.vue
 create mode 100644 app/components/Ui/SingleProject.vue
 create mode 100644 app/composables/useCrates.ts
 create mode 100644 app/composables/useGithub.ts
 create mode 100644 app/pages/projects.vue
 create mode 100644 app/types/crate.ts
 create mode 100644 app/types/github-repository.ts
 create mode 100644 app/types/project.ts
 create mode 100644 app/types/time.ts
 create mode 100644 app/utils/i18n.ts
 create mode 100644 content/en/projects.json
 create mode 100644 content/fr/projects.json

diff --git a/app/assets/css/colors.css b/app/assets/css/colors.css
index bfd3670..9c2f284 100644
--- a/app/assets/css/colors.css
+++ b/app/assets/css/colors.css
@@ -1,5 +1,5 @@
 :root {
-  --text: oklch(38.30% 0.029 266.48);
+  --text: oklch(38.3% 0.029 266.48);
   --text-50: oklch(95.82% 0.004 271.37);
   --text-100: oklch(91.83% 0.009 264.52);
   --text-200: oklch(83.53% 0.016 266.26);
@@ -8,30 +8,30 @@
   --text-500: oklch(57.02% 0.047 267.31);
   --text-600: oklch(48.66% 0.039 268.21);
   --text-700: oklch(40.13% 0.031 265.23);
-  --text-800: oklch(30.90% 0.021 265.90);
+  --text-800: oklch(30.9% 0.021 265.9);
   --text-900: oklch(20.86% 0.013 264.25);
   --text-950: oklch(15.46% 0.007 270.96);
 
   --background: oklch(95.13% 0.007 260.73);
-  --background-50: oklch(95.80% 0.007 268.55);
+  --background-50: oklch(95.8% 0.007 268.55);
   --background-100: oklch(91.74% 0.012 259.82);
   --background-200: oklch(83.07% 0.027 262.33);
   --background-300: oklch(74.46% 0.041 261.48);
   --background-400: oklch(65.63% 0.058 260.56);
   --background-500: oklch(56.42% 0.075 261.41);
-  --background-600: oklch(48.32% 0.062 260.40);
+  --background-600: oklch(48.32% 0.062 260.4);
   --background-700: oklch(39.64% 0.048 261.18);
   --background-800: oklch(30.43% 0.036 261.92);
   --background-900: oklch(20.77% 0.018 259.72);
-  --background-950: oklch(15.29% 0.010 255.44);
+  --background-950: oklch(15.29% 0.01 255.44);
 
   --primary: oklch(77.15% 0.062 217.48);
-  --primary-50: oklch(96.50% 0.009 222.06);
+  --primary-50: oklch(96.5% 0.009 222.06);
   --primary-100: oklch(93.16% 0.019 213.42);
   --primary-200: oklch(86.07% 0.039 217.46);
   --primary-300: oklch(79.25% 0.057 216.55);
   --primary-400: oklch(72.48% 0.075 217.32);
-  --primary-500: oklch(65.88% 0.089 218.00);
+  --primary-500: oklch(65.88% 0.089 218);
   --primary-600: oklch(55.99% 0.075 218.52);
   --primary-700: oklch(45.64% 0.059 218.22);
   --primary-800: oklch(34.67% 0.043 219.39);
@@ -41,7 +41,7 @@
   --secondary: oklch(69.65% 0.059 248.69);
   --secondary-50: oklch(95.95% 0.008 253.85);
   --secondary-100: oklch(92.05% 0.015 244.73);
-  --secondary-200: oklch(83.76% 0.030 248.19);
+  --secondary-200: oklch(83.76% 0.03 248.19);
   --secondary-300: oklch(75.31% 0.048 249.46);
   --secondary-400: oklch(66.99% 0.065 248.83);
   --secondary-500: oklch(58.35% 0.083 249.96);
@@ -51,16 +51,16 @@
   --secondary-900: oklch(20.99% 0.022 251.79);
   --secondary-950: oklch(15.56% 0.012 241.97);
 
-  --accent: oklch(59.38% 0.078 253.40);
-  --accent-50: oklch(95.93% 0.007 247.90);
+  --accent: oklch(59.38% 0.078 253.4);
+  --accent-50: oklch(95.93% 0.007 247.9);
   --accent-100: oklch(91.85% 0.015 251.16);
-  --accent-200: oklch(83.39% 0.030 254.70);
+  --accent-200: oklch(83.39% 0.03 254.7);
   --accent-300: oklch(74.95% 0.046 253.67);
   --accent-400: oklch(66.37% 0.064 253.29);
   --accent-500: oklch(57.47% 0.081 254.47);
   --accent-600: oklch(49.19% 0.068 253.56);
   --accent-700: oklch(40.31% 0.053 254.02);
-  --accent-800: oklch(30.91% 0.038 255.00);
+  --accent-800: oklch(30.91% 0.038 255);
   --accent-900: oklch(20.99% 0.022 251.79);
   --accent-950: oklch(15.35% 0.012 260.39);
 }
@@ -68,7 +68,7 @@
   --text: oklch(76.63% 0.024 266.86);
   --text-50: oklch(15.46% 0.007 270.96);
   --text-100: oklch(20.86% 0.013 264.25);
-  --text-200: oklch(30.90% 0.021 265.90);
+  --text-200: oklch(30.9% 0.021 265.9);
   --text-300: oklch(40.13% 0.031 265.23);
   --text-400: oklch(48.66% 0.039 268.21);
   --text-500: oklch(57.02% 0.047 267.31);
@@ -79,17 +79,17 @@
   --text-950: oklch(95.82% 0.004 271.37);
 
   --background: oklch(16.29% 0.012 260.61);
-  --background-50: oklch(15.29% 0.010 255.44);
+  --background-50: oklch(15.29% 0.01 255.44);
   --background-100: oklch(20.77% 0.018 259.72);
   --background-200: oklch(30.43% 0.036 261.92);
   --background-300: oklch(39.64% 0.048 261.18);
-  --background-400: oklch(48.32% 0.062 260.40);
+  --background-400: oklch(48.32% 0.062 260.4);
   --background-500: oklch(56.42% 0.075 261.41);
   --background-600: oklch(65.63% 0.058 260.56);
   --background-700: oklch(74.46% 0.041 261.48);
   --background-800: oklch(83.07% 0.027 262.33);
   --background-900: oklch(91.74% 0.012 259.82);
-  --background-950: oklch(95.80% 0.007 268.55);
+  --background-950: oklch(95.8% 0.007 268.55);
 
   --primary: oklch(48.89% 0.064 217.48);
   --primary-50: oklch(16.48% 0.015 212.62);
@@ -97,12 +97,12 @@
   --primary-200: oklch(34.67% 0.043 219.39);
   --primary-300: oklch(45.64% 0.059 218.22);
   --primary-400: oklch(55.99% 0.075 218.52);
-  --primary-500: oklch(65.88% 0.089 218.00);
+  --primary-500: oklch(65.88% 0.089 218);
   --primary-600: oklch(72.48% 0.075 217.32);
   --primary-700: oklch(79.25% 0.057 216.55);
   --primary-800: oklch(86.07% 0.039 217.46);
   --primary-900: oklch(93.16% 0.019 213.42);
-  --primary-950: oklch(96.50% 0.009 222.06);
+  --primary-950: oklch(96.5% 0.009 222.06);
 
   --secondary: oklch(47.12% 0.064 249.33);
   --secondary-50: oklch(15.56% 0.012 241.97);
@@ -113,20 +113,20 @@
   --secondary-500: oklch(58.35% 0.083 249.96);
   --secondary-600: oklch(66.99% 0.065 248.83);
   --secondary-700: oklch(75.31% 0.048 249.46);
-  --secondary-800: oklch(83.76% 0.030 248.19);
+  --secondary-800: oklch(83.76% 0.03 248.19);
   --secondary-900: oklch(92.05% 0.015 244.73);
   --secondary-950: oklch(95.95% 0.008 253.85);
 
-  --accent: oklch(55.80% 0.080 254.61);
+  --accent: oklch(55.8% 0.08 254.61);
   --accent-50: oklch(15.35% 0.012 260.39);
   --accent-100: oklch(20.99% 0.022 251.79);
-  --accent-200: oklch(30.91% 0.038 255.00);
+  --accent-200: oklch(30.91% 0.038 255);
   --accent-300: oklch(40.31% 0.053 254.02);
   --accent-400: oklch(49.19% 0.068 253.56);
   --accent-500: oklch(57.47% 0.081 254.47);
   --accent-600: oklch(66.37% 0.064 253.29);
   --accent-700: oklch(74.95% 0.046 253.67);
-  --accent-800: oklch(83.39% 0.030 254.70);
+  --accent-800: oklch(83.39% 0.03 254.7);
   --accent-900: oklch(91.85% 0.015 251.16);
-  --accent-950: oklch(95.93% 0.007 247.90);
+  --accent-950: oklch(95.93% 0.007 247.9);
 }
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 2001e29..531aafa 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -2,6 +2,7 @@
 @import './colors.css';
 @import './ui/index.css';
 @import './tailwind.css';
+@import './typography.css';
 
 @source "../../../content/**/*";
 
diff --git a/app/assets/css/tailwind.css b/app/assets/css/tailwind.css
index c3d3117..7dc0b99 100644
--- a/app/assets/css/tailwind.css
+++ b/app/assets/css/tailwind.css
@@ -80,6 +80,6 @@
     Noto Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji';
   --font-title:
-    Wittgenstein, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    Montserrat, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji';
 }
diff --git a/app/assets/css/typography.css b/app/assets/css/typography.css
new file mode 100644
index 0000000..793f4eb
--- /dev/null
+++ b/app/assets/css/typography.css
@@ -0,0 +1,19 @@
+@layer base {
+  body {
+    font-family:
+      'Noto Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
+    font-weight: 400;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    font-family:
+      'Montserrat', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
+    font-weight: 700;
+  }
+}
diff --git a/app/assets/css/ui/images.css b/app/assets/css/ui/images.css
new file mode 100644
index 0000000..deb4e4e
--- /dev/null
+++ b/app/assets/css/ui/images.css
@@ -0,0 +1,9 @@
+.hero-image {
+  max-width: 7rem;
+  height: auto;
+  display: block;
+}
+
+.centered-image {
+  margin: 0 auto;
+}
diff --git a/app/assets/css/ui/index.css b/app/assets/css/ui/index.css
index 0f421a3..ce51591 100644
--- a/app/assets/css/ui/index.css
+++ b/app/assets/css/ui/index.css
@@ -2,3 +2,4 @@
 @import './text.css';
 @import './background.css';
 @import './border.css';
+@import './images.css';
diff --git a/app/components/AppNavbar.vue b/app/components/AppNavbar.vue
index 95c2c80..7f0373e 100644
--- a/app/components/AppNavbar.vue
+++ b/app/components/AppNavbar.vue
@@ -13,6 +13,8 @@
 </template>
 
 <script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui';
+
 const route = useRoute();
 const items = computed<NavigationMenuItem[]>(() => [
   {
@@ -20,7 +22,7 @@ const items = computed<NavigationMenuItem[]>(() => [
     to: '/',
     active: route.path == '/',
   },
-  ...['resume', 'vocal-synthesis', 'languages', 'contact'].map((page) => ({
+  ...['resume', 'projects', 'vocal-synthesis', 'languages', 'contact'].map((page) => ({
     label: $t(`pages.${page}.name`),
     to: `/${page}`,
     active: route.path.startsWith(`/${page}`),
diff --git a/app/components/Ui/ProjectLink.vue b/app/components/Ui/ProjectLink.vue
new file mode 100644
index 0000000..752b836
--- /dev/null
+++ b/app/components/Ui/ProjectLink.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="flex">
+    <UButton :icon="icon" target="_blank" :to="link.url">
+      <span>{{ link.display }}</span>
+      <span v-if="link.type === 'cargo'"><UIcon name="i-mdi-download" /> {{ crateDownloads }}</span>
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProjectLink, ProjectLinkType } from '~/types/project';
+
+const crates = useCrates();
+
+const iconDict: Record<ProjectLinkType, string> = {
+  github: 'mdi:github',
+  gitea: 'simple-icons:gitea',
+  cargo: 'simple-icons:rust',
+  melpa: 'file-icons:melpa',
+};
+
+const icon = computed(() => iconDict[link.type]);
+
+const { link } = defineProps<{
+  link: ProjectLink;
+}>();
+
+const cratesData = computed(() => (link.type === 'cargo' ? crates.getCrateInfo(link.display) : null));
+const crateDownloads = computed(
+  () => cratesData.value?.data?.value?.crate.downloads ?? (cratesData.value?.loading ? 'loading' : 'error'),
+);
+</script>
diff --git a/app/components/Ui/SingleProject.vue b/app/components/Ui/SingleProject.vue
new file mode 100644
index 0000000..beb0453
--- /dev/null
+++ b/app/components/Ui/SingleProject.vue
@@ -0,0 +1,23 @@
+<template>
+  <UPageCard class="w-md bg-background-100">
+    <div class="text-2xl font-title">{{ project.name }}</div>
+    <p>
+      {{ project.description }}
+    </p>
+    <div class="flex flex-row flex-wrap gap-2 items-baseline">
+      <UiProjectLink v-for="link in project.links" :key="link.url" :link="link" />
+    </div>
+    <div class="flex flex-row gap-4 items-baseline">
+      <div>Tools</div>
+      <UiBadgeList :tools="project.tools" />
+    </div>
+  </UPageCard>
+</template>
+
+<script lang="ts" setup>
+import type { Project } from '~/types/project';
+
+const { project } = defineProps<{
+  project: Project;
+}>();
+</script>
diff --git a/app/components/VocalSynth/Projects.vue b/app/components/VocalSynth/Projects.vue
index 6d87e64..a24efa0 100644
--- a/app/components/VocalSynth/Projects.vue
+++ b/app/components/VocalSynth/Projects.vue
@@ -4,7 +4,7 @@
       {{ $t('pages.vocal-synthesis.projects') }}
     </p>
     <div class="flex flex-col max-w gap-10">
-      <div v-for="project in data?.projects" :key="project.title" class="flex flex-row max-w gap-5">
+      <div v-for="project in data?.projects" :key="project.title" class="flex flex-row max-w gap-5 font-title">
         <div>
           <div
             class="bg-primary text-text-50 dark:bg-primary p-1 rounded-md min-w-13 w-13 h-13 min-h-13 flex justify-center my-2"
diff --git a/app/components/navbar/ThemeSwitcher.vue b/app/components/navbar/ThemeSwitcher.vue
index 4d5ab75..e48fe14 100644
--- a/app/components/navbar/ThemeSwitcher.vue
+++ b/app/components/navbar/ThemeSwitcher.vue
@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 type Theme = 'light' | 'dark' | 'system';
-const icons: Dictionary<Theme, string> = {
+const icons: Record<Theme, string> = {
   light: 'material-symbols:light-mode',
   dark: 'material-symbols:dark-mode',
   system: 'material-symbols:computer-outline',
diff --git a/app/composables/useApi.ts b/app/composables/useApi.ts
index 09228c1..c4a1185 100644
--- a/app/composables/useApi.ts
+++ b/app/composables/useApi.ts
@@ -13,12 +13,17 @@ export interface UseApi {
   patch: <T, B = unknown>(path: string, opts?: FetchOptions, immediate?: boolean, body?: B) => UseApiResponse<T, B>;
 }
 
+export interface CreateRequestOptions<PayloadT> {
+  host?: string;
+  path: string;
+  immediate?: boolean;
+  method: HttpMethod;
+  body?: PayloadT;
+  opts?: FetchOptions;
+}
+
 const createRequest = <ResponseT = unknown, PayloadT = unknown>(
-  method: HttpMethod,
-  url: string,
-  opts?: FetchOptions,
-  immediate: boolean = true,
-  body?: PayloadT,
+  options: CreateRequestOptions<PayloadT>,
 ): QueryResult<ResponseT, PayloadT> => {
   const response = new QueryResult<ResponseT, PayloadT>();
   const { apiBase } = useRuntimeConfig().public;
@@ -28,10 +33,10 @@ const createRequest = <ResponseT = unknown, PayloadT = unknown>(
     response.error.value = null;
 
     try {
-      const res = await $fetch<ResponseT>(url, {
-        baseURL: apiBase,
-        ...opts,
-        method,
+      const res = await $fetch<ResponseT>(options.path, {
+        ...options.opts,
+        baseURL: options.host ?? apiBase,
+        method: options.method,
         body: requestBody ?? undefined,
       });
       response.data.value = res;
@@ -48,22 +53,22 @@ const createRequest = <ResponseT = unknown, PayloadT = unknown>(
   };
   response.run = run;
 
-  if (immediate) run(body);
+  if (options.immediate) run(options.body);
 
   return response;
 };
 
-export const useApi = (): UseApi => {
+export const useApi = (host?: string): UseApi => {
   const get = <T>(path: string, opts?: FetchOptions, immediate: boolean = true) =>
-    createRequest<T>('GET', path, opts, immediate);
+    createRequest<T>({ method: 'GET', path, opts, immediate, host });
   const del = <T>(path: string, opts?: FetchOptions, immediate: boolean = true) =>
-    createRequest<T>('DELETE', path, opts, immediate);
+    createRequest<T>({ method: 'DELETE', path, opts, immediate, host });
   const post = <T, B = unknown>(path: string, opts?: FetchOptions, immediate: boolean = true, body?: B) =>
-    createRequest<T, B>('POST', path, opts, immediate, body);
+    createRequest<T, B>({ method: 'POST', path, opts, immediate, body, host });
   const put = <T, B = unknown>(path: string, opts?: FetchOptions, immediate: boolean = true, body?: B) =>
-    createRequest<T, B>('PUT', path, opts, immediate, body);
+    createRequest<T, B>({ method: 'PUT', path, opts, immediate, body, host });
   const patch = <T, B = unknown>(path: string, opts?: FetchOptions, immediate: boolean = true, body?: B) =>
-    createRequest<T, B>('PATCH', path, opts, immediate, body);
+    createRequest<T, B>({ method: 'PATCH', path, opts, immediate, body, host });
 
   return { get, post, put, patch, del };
 };
diff --git a/app/composables/useCrates.ts b/app/composables/useCrates.ts
new file mode 100644
index 0000000..4012cc9
--- /dev/null
+++ b/app/composables/useCrates.ts
@@ -0,0 +1,8 @@
+import type { CrateMeta } from '~/types/crate';
+
+export const useCrates = () => {
+  const api = useApi('https://crates.io/api/v1/');
+  const getCrateInfo = (name: string): UseApiResponse<CrateMeta> => api.get<CrateMeta>(`crates/${name}`);
+
+  return { getCrateInfo };
+};
diff --git a/app/composables/useGithub.ts b/app/composables/useGithub.ts
new file mode 100644
index 0000000..1ada521
--- /dev/null
+++ b/app/composables/useGithub.ts
@@ -0,0 +1,10 @@
+import type { GithubRepository } from '~/types/github-repository';
+
+export const useGithub = () => {
+  const api = useApi('https://api.github.com');
+
+  const getRepoMeta = (owner: string, name: string): UseApiResponse<GithubRepository> =>
+    api.get<GithubRepository>(`repos/${owner}/${name}`);
+
+  return { getRepoMeta };
+};
diff --git a/app/pages/projects.vue b/app/pages/projects.vue
new file mode 100644
index 0000000..5a285d4
--- /dev/null
+++ b/app/pages/projects.vue
@@ -0,0 +1,18 @@
+<template>
+  <NuxtLayout name="default">
+    <h1 class="text-4xl text-highlighted font-bold mb-8">
+      {{ $t('pages.projects.name') }}
+    </h1>
+    <div class="flex flex-wrap gap-4 justify-center">
+      <UiSingleProject v-for="project in projects" :key="project.name" :project="project" />
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import type { Project, ProjectsWrapper } from '~/types/project';
+
+const { getJsonData } = useDataJson('projects');
+const projects$ = await getJsonData<ProjectsWrapper>();
+const projects: ComputedRef<Project[]> = computed(() => (projects$?.value ? projects$.value.projects : []));
+</script>
diff --git a/app/pages/resume.vue b/app/pages/resume.vue
index 3f4eba5..012048f 100644
--- a/app/pages/resume.vue
+++ b/app/pages/resume.vue
@@ -7,7 +7,7 @@
       <p>
         {{ $t('pages.resume.experience') }}
       </p>
-      <UTimeline v-model="valueExp" reverse :items="resumeContent?.experience" class="w-full">
+      <UTimeline v-model="valueExp" reverse :items="experiences" class="w-full">
         <template #description="{ item }">
           <div class="flex flex-col gap-2">
             <p>
@@ -22,7 +22,7 @@
       <p>
         {{ $t('pages.resume.education') }}
       </p>
-      <UTimeline v-model="valueEd" reverse :items="resumeContent?.education" class="w-full" />
+      <UTimeline v-model="valueEd" reverse :items="education" class="w-full" />
     </UPageCard>
     <UiBadgeListCard :tools="resumeContent?.otherTools">{{ $t('pages.resume.tools') }}</UiBadgeListCard>
     <UiBadgeListCard :tools="resumeContent?.devops">{{ $t('pages.resume.devops') }}</UiBadgeListCard>
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { ResumeContent } from '~/types/resume';
+import { EducationTimelineItem, ResumeContent, ResumeExperienceTimelineItem } from '~/types/resume';
 
 useMeta({
   title: $t('pages.resume.name'),
@@ -44,6 +44,8 @@ useMeta({
 const { getJsonData } = useDataJson('resume');
 const resumeContent$ = await getJsonData<ResumeContent>();
 const resumeContent = computed(() => (resumeContent$.value ? resumeContent$.value : new ResumeContent()));
+const experiences = computed(() => resumeContent.value.experience.map((e) => new ResumeExperienceTimelineItem(e)));
+const education = computed(() => resumeContent.value.education.map((e) => new EducationTimelineItem(e)));
 const arrLength = <T,>(array?: T[]) => (array ? array.length - 1 : 0);
 const valueExp = computed(() => arrLength(resumeContent.value?.experience));
 const valueEd = computed(() => arrLength(resumeContent.value?.education));
diff --git a/app/types/crate.ts b/app/types/crate.ts
new file mode 100644
index 0000000..e8666ed
--- /dev/null
+++ b/app/types/crate.ts
@@ -0,0 +1,25 @@
+export interface CrateMeta {
+  crate: Crate;
+}
+
+export interface Crate {
+  id: string;
+  name: string;
+  updated_at: string;
+  versions: number[];
+  keywords: string[];
+  created_at: string;
+  downloads: number;
+  recent_downloads: number;
+  default_version: string;
+  num_versions: number;
+  yanked: boolean;
+  max_version: string;
+  newest_version: string;
+  max_stable_version: string;
+  description: string;
+  homepage: string;
+  repository: string;
+  exact_match: boolean;
+  trustpub_only: boolean;
+}
diff --git a/app/types/github-repository.ts b/app/types/github-repository.ts
new file mode 100644
index 0000000..783f292
--- /dev/null
+++ b/app/types/github-repository.ts
@@ -0,0 +1,108 @@
+export interface GithubRepository {
+  id: number;
+  node_id: string;
+  name: string;
+  full_name: string;
+  private: boolean;
+  owner: Owner;
+  html_url: string;
+  description: string;
+  fork: boolean;
+  url: string;
+  forks_url: string;
+  keys_url: string;
+  collaborators_url: string;
+  teams_url: string;
+  hooks_url: string;
+  issue_events_url: string;
+  events_url: string;
+  assignees_url: string;
+  branches_url: string;
+  tags_url: string;
+  blobs_url: string;
+  git_tags_url: string;
+  git_refs_url: string;
+  trees_url: string;
+  statuses_url: string;
+  languages_url: string;
+  stargazers_url: string;
+  contributors_url: string;
+  subscribers_url: string;
+  subscription_url: string;
+  commits_url: string;
+  git_commits_url: string;
+  comments_url: string;
+  issue_comment_url: string;
+  contents_url: string;
+  compare_url: string;
+  merges_url: string;
+  archive_url: string;
+  downloads_url: string;
+  issues_url: string;
+  pulls_url: string;
+  milestones_url: string;
+  notifications_url: string;
+  labels_url: string;
+  releases_url: string;
+  deployments_url: string;
+  created_at: string;
+  updated_at: string;
+  pushed_at: string;
+  git_url: string;
+  ssh_url: string;
+  clone_url: string;
+  svn_url: string;
+  homepage: string;
+  size: number;
+  stargazers_count: number;
+  watchers_count: number;
+  language: string;
+  has_issues: boolean;
+  has_projects: boolean;
+  has_downloads: boolean;
+  has_wiki: boolean;
+  has_pages: boolean;
+  has_discussions: boolean;
+  forks_count: number;
+  mirror_url: any;
+  archived: boolean;
+  disabled: boolean;
+  open_issues_count: number;
+  license: any;
+  allow_forking: boolean;
+  is_template: boolean;
+  web_commit_signoff_required: boolean;
+  has_pull_requests: boolean;
+  pull_request_creation_policy: string;
+  topics: any[];
+  visibility: string;
+  forks: number;
+  open_issues: number;
+  watchers: number;
+  default_branch: string;
+  temp_clone_token: any;
+  network_count: number;
+  subscribers_count: number;
+}
+
+export interface Owner {
+  login: string;
+  id: number;
+  node_id: string;
+  avatar_url: string;
+  gravatar_id: string;
+  url: string;
+  html_url: string;
+  followers_url: string;
+  following_url: string;
+  gists_url: string;
+  starred_url: string;
+  subscriptions_url: string;
+  organizations_url: string;
+  repos_url: string;
+  events_url: string;
+  received_events_url: string;
+  type: string;
+  user_view_type: string;
+  site_admin: boolean;
+}
diff --git a/app/types/project.ts b/app/types/project.ts
new file mode 100644
index 0000000..d33a55a
--- /dev/null
+++ b/app/types/project.ts
@@ -0,0 +1,23 @@
+import type { TimePeriod } from './time';
+import type { Tool } from './tool';
+
+export type ProjectLinkType = 'github' | 'gitea' | 'cargo' | 'melpa';
+
+export interface ProjectLink {
+  url: string;
+  display: string;
+  type: ProjectLinkType;
+}
+
+export interface Project {
+  name: string;
+  description: string;
+  role: string;
+  dates: TimePeriod;
+  links: ProjectLink[];
+  tools: Tool[];
+}
+
+export interface ProjectsWrapper {
+  projects: Project[];
+}
diff --git a/app/types/resume.ts b/app/types/resume.ts
index 8e64c89..21ffb08 100644
--- a/app/types/resume.ts
+++ b/app/types/resume.ts
@@ -1,14 +1,58 @@
 import type { TimelineItem } from '@nuxt/ui';
 import type { Tool } from './tool';
+import { timeToString, type TimePeriod } from './time';
 
-export class ResumeExperience implements TimelineItem {
-  tools: Tool[] = [];
+export interface ResumeExperience {
+  dates: TimePeriod;
+  title: string;
+  company: string;
+  description: string;
+  tools: Tool[];
+  icon: string;
+}
+
+export class ResumeExperienceTimelineItem implements TimelineItem {
+  tools: Tool[];
   description?: string;
+  date: string;
+  title: string;
+  icon: string;
+
+  constructor(from: ResumeExperience) {
+    this.date = timeToString(from.dates);
+    this.title = `${from.title} — ${from.company}`;
+    this.description = from.description;
+    this.icon = from.icon;
+    this.tools = from.tools;
+  }
+}
+
+export interface Education {
+  dates: TimePeriod;
+  degree: string;
+  institution: string;
+  location: string;
+  description?: string;
+  icon: string;
+}
+
+export class EducationTimelineItem implements TimelineItem {
+  date: string;
+  description?: string;
+  title: string;
+  icon: string;
+
+  constructor(from: Education) {
+    this.date = timeToString(from.dates);
+    this.description = from.description;
+    this.title = `${from.degree} — ${from.institution}, ${from.location}`;
+    this.icon = from.icon;
+  }
 }
 
 export class ResumeContent {
   experience: ResumeExperience[] = [];
-  education: TimelineItem[] = [];
+  education: Education[] = [];
   otherTools: Tool[] = [];
   devops: Tool[] = [];
   os: Tool[] = [];
diff --git a/app/types/time.ts b/app/types/time.ts
new file mode 100644
index 0000000..37b67d8
--- /dev/null
+++ b/app/types/time.ts
@@ -0,0 +1,9 @@
+import { t } from '../utils/i18n';
+
+export interface TimePeriod {
+  start: string;
+  end?: string;
+}
+
+export const timeToString = (time: TimePeriod): string =>
+  time.end ? `${time.start} — ${time.end}` : `${t('misc.since')} ${time.start}`;
diff --git a/app/utils/i18n.ts b/app/utils/i18n.ts
new file mode 100644
index 0000000..84e59a0
--- /dev/null
+++ b/app/utils/i18n.ts
@@ -0,0 +1,21 @@
+import { tryUseNuxtApp } from '#app';
+
+/**
+ * Synchronous translation helper usable outside of Vue components.
+ *
+ * It resuses the request-scoped `@nuxtjs/i18n` instance exposed on the Nuxt app
+ * as `$i18n`, so translations stay in sync with the active locale (including
+ * server-side rendering and language switches). Falls back to the raw key when
+ * no Nuxt context is available (e.g. in unit tests).
+ *
+ * @param key Translation key
+ * @param named Named/list arguments forwarded to vue-i18n
+ * @returns The translated string, or `key` when no i18n instance is found
+ */
+export const t = <T extends string = string>(key: T, named?: Record<string, unknown> | unknown[]): string => {
+  const i18n = tryUseNuxtApp()?.$i18n;
+  if (!i18n) {
+    return key;
+  }
+  return i18n.t(key, named as never);
+};
diff --git a/content/en/projects.json b/content/en/projects.json
new file mode 100644
index 0000000..62b9908
--- /dev/null
+++ b/content/en/projects.json
@@ -0,0 +1,85 @@
+{
+  "projects": [
+    {
+      "name": "jj-cz",
+      "description": "A Commitizen alternative for Jujutsu",
+      "role": "Author",
+      "dates": {
+        "start": "February 2026"
+      },
+      "links": [
+        {
+          "url": "https://labs.phundrak.com/phundrak/jj-cz",
+          "display": "labs.phundrak.com/phundrak/jj-cz",
+          "type": "gitea"
+        },
+        {
+          "url": "https://crates.io/crates/jj-cz",
+          "display": "jj-cz",
+          "type": "cargo"
+        }
+      ],
+      "tools": [
+        { "name": "Emacs", "link": "https://www.gnu.org/software/emacs/" },
+        { "name": "Rust", "link": "https://rust-lang.org/" },
+        { "name": "Nix", "link": "https://nixos.org/" },
+        { "name": "jj", "link": "https://docs.jj-vcs.dev/latest/" }
+      ]
+    },
+    {
+      "name": "Georm",
+      "description": "Georm, a simple, opinionated SQLx ORM for PostgreSQL",
+      "dates": {
+        "start": "January 2025"
+      },
+      "role": "Author",
+      "links": [
+        {
+          "url": "https://labs.phundrak.com/phundrak/georm",
+          "display": "labs.phundrak.com/phundrak/georm",
+          "type": "gitea"
+        },
+        {
+          "url": "https://github.com/phundrak/georm",
+          "display": "phundrak/georm",
+          "type": "github"
+        },
+        {
+          "url": "https://crates.io/crates/georm",
+          "display": "georm",
+          "type": "cargo"
+        }
+      ],
+      "tools": [
+        { "name": "Emacs", "link": "https://www.gnu.org/software/emacs/" },
+        { "name": "Rust", "link": "https://rust-lang.org/" },
+        { "name": "Nix", "link": "https://nixos.org/" },
+        { "name": "jj", "link": "https://docs.jj-vcs.dev/latest/" }
+      ]
+    },
+    {
+      "name": "f.el",
+      "description": "Modern API for working with files and directories in Emacs",
+      "dates": {
+        "start": "March 2022"
+      },
+      "role": "Maintener",
+      "links": [
+        {
+          "url": "https://github.com/rejeep/f.el",
+          "display": "rejeep/f.el",
+          "type": "github"
+        },
+        {
+          "url": "https://melpa.org/#/f",
+          "display": "f",
+          "type": "melpa"
+        }
+      ],
+      "tools": [
+        { "name": "Emacs", "link": "https://www.gnu.org/software/emacs/" },
+        { "name": "jj", "link": "https://docs.jj-vcs.dev/latest/" }
+      ]
+    }
+  ]
+}
diff --git a/content/en/resume.json b/content/en/resume.json
index 226562b..682f4e9 100644
--- a/content/en/resume.json
+++ b/content/en/resume.json
@@ -1,8 +1,12 @@
 {
   "experience": [
     {
-      "date": "Since Septembre 2023",
-      "title": "Consultant – Aubay",
+      "dates": {
+        "start": "September 2023",
+        "end": null
+      },
+      "title": "Consultant",
+      "company": "Aubay",
       "description": "Web development consultant working on enterprise applications. Continued focus on Angular front-end development and Java Spring Boot back-end services with PostgreSQL databases.",
       "tools": [
         { "name": "Angular", "link": "https://angular.dev/" },
@@ -19,8 +23,12 @@
       "icon": "mdi:laptop"
     },
     {
-      "date": "February 2023 – August 2023",
-      "title": "Intern – Aubay",
+      "dates": {
+        "start": "February 2023",
+        "end": "August 2023"
+      },
+      "title": "Intern",
+      "company": "Aubay",
       "description": "Web application development internship focused on full-stack development. Worked on projects using Angular for front-end and Java Spring Boot for back-end, with PostgreSQL databases.",
       "tools": [
         { "name": "Angular", "link": "https://angular.dev/" },
@@ -36,7 +44,12 @@
     },
     {
       "date": "October 2014 – July 2018",
-      "title": "CTO – Voxwave",
+      "dates": {
+        "start": "October 2014",
+        "end": "July 2018"
+      },
+      "title": "CTO",
+      "company": "VoxWave",
       "description": "Co-founded a startup specialized in creating French virtual singers using vocal synthesis. Developed singing synthesis vocal libraries, conducted linguistic research, provided user support, and trained recruits in vocal library development. Led technical development of ALYS, the first professional French singing voice library.",
       "tools": [
         { "name": "Alter/Ego", "link": "https://www.plogue.com/products/alter-ego.html" },
@@ -50,26 +63,46 @@
   ],
   "education": [
     {
-      "date": "September 2022 – September 2023",
-      "title": "Master's Degree in Hypermedia Technologies – University of Paris 8",
+      "dates": {
+        "start": "September 2022",
+        "end": "September 2023"
+      },
+      "degree": "Master's Degree in Hypermedia Technologies",
+      "institution": "University of Paris 8",
+      "location": "Saint Denis, France",
       "description": "Obtained Master's degree in THYP (Hypermedia Technologies) on 11 September 2023. Repeated the year for health reasons without any lasting effects.",
       "icon": "mdi:network"
     },
     {
-      "date": "September 2020 – September 2021",
-      "title": "Master's Degree in Computer Science – University of Paris 8",
+      "dates": {
+        "start": "September 2020",
+        "end": "September 2021"
+      },
+      "degree": "Master's Degree in Computer Science",
+      "institution": "University of Paris 8",
+      "location": "Saint Denis, France",
       "description": "First year of my Master’s degree.",
       "icon": "mdi:code-tags"
     },
     {
-      "date": "September 2016 – July 2019",
-      "title": "Bachelor's Degree in Computer Science – University of Paris 8",
+      "dates": {
+        "start": "September 2016",
+        "end": "July 2019"
+      },
+      "degree": "Bachelor's Degree in Computer Science",
+      "institution": "University of Paris 8",
+      "location": "Saint Denis, France",
       "description": "Bachelor's degree in Computer Science obtained in July 2019",
       "icon": "mdi:school-outline"
     },
     {
-      "date": "Septembre 2013 – Décembre 2014",
-      "title": "English Literature – Université Lyon 2",
+      "dates": {
+        "start": "September 2013",
+        "end": "December 2014"
+      },
+      "degree": "English Literature",
+      "institution": "Université Lyon 2",
+      "location": "Lyon, France",
       "description": "One and a half years of literary English studies in an LLCE English degree. Studies interrupted following the creation of VoxWave.",
       "icon": "mdi:book-open-page-variant"
     }
diff --git a/content/fr/index.md b/content/fr/index.md
index 2405c75..8e3e06a 100644
--- a/content/fr/index.md
+++ b/content/fr/index.md
@@ -6,6 +6,8 @@ description: Site web personnel
 
 # Bienvenue
 
+![My usual profile picture](/leon.png){.rounded-full .hero-image .centered-image}
+
 Développeur web • Créateur d’univers • Idéolinguiste
 
 Bonjour, je m'appelle Lucien Cartier-Tilet. Je travaille comme développeur web et consultant. En dehors du travail, je
diff --git a/content/fr/languages.md b/content/fr/languages.md
index b7f5ce0..449bc2b 100644
--- a/content/fr/languages.md
+++ b/content/fr/languages.md
@@ -1,5 +1,5 @@
 ---
-titre: Langues et création d'univers
+title: Langues et création d'univers
 description: Langues construites (conlangs) et projets de création d'univers.
 ---
 
diff --git a/content/fr/projects.json b/content/fr/projects.json
new file mode 100644
index 0000000..d629c20
--- /dev/null
+++ b/content/fr/projects.json
@@ -0,0 +1,85 @@
+{
+  "projects": [
+    {
+      "name": "jj-cz",
+      "description": "Une alternative à Commitizen pour Jujutsu",
+      "role": "Auteur",
+      "dates": {
+        "start": "février 2026"
+      },
+      "links": [
+        {
+          "url": "https://labs.phundrak.com/phundrak/jj-cz",
+          "display": "labs.phundrak.com/phundrak/jj-cz",
+          "type": "gitea"
+        },
+        {
+          "url": "https://crates.io/crates/jj-cz",
+          "display": "jj-cz",
+          "type": "cargo"
+        }
+      ],
+      "tools": [
+        { "name": "Emacs", "link": "https://www.gnu.org/software/emacs/" },
+        { "name": "Rust", "link": "https://rust-lang.org/" },
+        { "name": "Nix", "link": "https://nixos.org/" },
+        { "name": "jj", "link": "https://docs.jj-vcs.dev/latest/" }
+      ]
+    },
+    {
+      "name": "Georm",
+      "description": "Georm, un ORM simple pour SQLx avec PostgreSQL",
+      "dates": {
+        "start": "janvier 2025"
+      },
+      "role": "Auteur",
+      "links": [
+        {
+          "url": "https://labs.phundrak.com/phundrak/georm",
+          "display": "labs.phundrak.com/phundrak/georm",
+          "type": "gitea"
+        },
+        {
+          "url": "https://github.com/phundrak/georm",
+          "display": "phundrak/georm",
+          "type": "github"
+        },
+        {
+          "url": "https://crates.io/crates/georm",
+          "display": "georm",
+          "type": "cargo"
+        }
+      ],
+      "tools": [
+        { "name": "Emacs", "link": "https://www.gnu.org/software/emacs/" },
+        { "name": "Rust", "link": "https://rust-lang.org/" },
+        { "name": "Nix", "link": "https://nixos.org/" },
+        { "name": "jj", "link": "https://docs.jj-vcs.dev/latest/" }
+      ]
+    },
+    {
+      "name": "f.el",
+      "description": "Une API moderne pour travailler avec des fichiers et répertoires dans Emacs",
+      "dates": {
+        "start": "mars 2022"
+      },
+      "role": "Mainteneur",
+      "links": [
+        {
+          "url": "https://github.com/rejeep/f.el",
+          "display": "rejeep/f.el",
+          "type": "github"
+        },
+        {
+          "url": "https://melpa.org/#/f",
+          "display": "f",
+          "type": "melpa"
+        }
+      ],
+      "tools": [
+        { "name": "Emacs", "link": "https://www.gnu.org/software/emacs/" },
+        { "name": "jj", "link": "https://docs.jj-vcs.dev/latest/" }
+      ]
+    }
+  ]
+}
diff --git a/content/fr/resume.json b/content/fr/resume.json
index f7054fd..caf6575 100644
--- a/content/fr/resume.json
+++ b/content/fr/resume.json
@@ -1,8 +1,12 @@
 {
   "experience": [
     {
-      "date": "Depuis septembre 2023",
-      "title": "Consultant – Aubay",
+      "dates": {
+        "start": "septembre 2023",
+        "end": null
+      },
+      "title": "Consultant",
+      "company": "Aubay",
       "description": "Consultant en développement web travaillant sur des applications d'entreprise. Je continue à me concentrer sur le développement front-end Angular et les services back-end Java Spring Boot avec des bases de données PostgreSQL.",
       "tools": [
         { "name": "Angular", "link": "https://angular.dev/" },
@@ -19,8 +23,12 @@
       "icon": "mdi:laptop"
     },
     {
-      "date": "Février 2023 – Août 2023",
-      "title": "Stagiaire – Aubay",
+      "dates": {
+        "start": "février 2023",
+        "end": "août 2023"
+      },
+      "title": "Stagiaire",
+      "company": "Aubay",
       "description": "Stage en développement d'applications web axé sur le développement full-stack. J'ai travaillé sur des projets utilisant Angular pour le front-end et Java Spring Boot pour le back-end, avec des bases de données PostgreSQL.",
       "tools": [
         { "name": "Angular", "link": "https://angular.dev/" },
@@ -35,8 +43,12 @@
       "icon": "mdi:book"
     },
     {
-      "date": "Octobre 2014 – Juillet 2018",
-      "title": "Directeur technique – Voxwave",
+      "dates": {
+        "start": "octobre 2014",
+        "end": "juillet 2018"
+      },
+      "title": "Directeur technique",
+      "company": "VoxWave",
       "description": "Co-fondateur d'une start-up spécialisée dans la création de chanteurs virtuels français à l'aide de la synthèse vocale. Développement de banques vocales de synthèse chantée, recherche linguistique, assistance aux utilisateurs et formation des recrues au développement de banques vocales. Direction du développement technique d'ALYS, la première banques vocale professionnelle de chant en français.",
       "tools": [
         { "name": "Alter/Ego", "link": "https://www.plogue.com/products/alter-ego.html" },
@@ -50,26 +62,46 @@
   ],
   "education": [
     {
-      "date": "Septembre 2022 – Septembre 2023",
-      "title": "Master 2 Technologies de l’Hypermédia – Université Paris 8",
+      "dates": {
+        "start": "septembre 2022",
+        "end": "septembre 2023"
+      },
+      "degree": "Master 2 Technologies de l’Hypermédia",
+      "institution": "Université Paris 8",
+      "location": "Saint Denis, France",
       "description": "Obtention du diplôme Master 2 THYP le 11 septembre 2023. Redoublement pour causes de santé sans séquelles.",
       "icon": "mdi:network"
     },
     {
-      "date": "Septembre 2020 – Septembre 2021",
-      "title": "Master 1 Informatique – Université Paris 8",
+      "dates": {
+        "start": "septembre 2020",
+        "end": "septembre 2021"
+      },
+      "degree": "Master 1 Informatique",
+      "institution": "Université Paris 8",
+      "location": "Saint Denis, France",
       "description": "",
       "icon": "mdi:code-tags"
     },
     {
-      "date": "Septembre 2016 – Juillet 2019",
-      "title": "Licence Informatique – Université Paris 8",
+      "dates": {
+        "start": "septembre 2016",
+        "end": "Juillet 2019"
+      },
+      "degree": "Licence Informatique",
+      "institution": "Université Paris 8",
+      "location": "Saint Denis, France",
       "description": "Licence d’Informatique obtenue en Juillet 2019",
       "icon": "mdi:school-outline"
     },
     {
-      "date": "Septembre 2013 – Décembre 2014",
-      "title": "Anglais LLCE – Université Lyon 2",
+      "dates": {
+        "start": "septembre 2013",
+        "end": "décembre 2014"
+      },
+      "degree": "Anglais LLCE",
+      "institution": "Université Lyon 2",
+      "location": "Lyon, France",
       "description": "Un an et demi d’études d’anglais littéraire en licence d’anglais LLCE. Études interrompues suite à la création de VoxWave.",
       "icon": "mdi:book-open-page-variant"
     }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 3d576c0..857cd58 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -101,5 +101,8 @@
         }
       }
     }
+  },
+  "misc": {
+    "since": "Since"
   }
 }
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
index abbfca2..d5e0e9f 100644
--- a/i18n/locales/fr.json
+++ b/i18n/locales/fr.json
@@ -18,6 +18,10 @@
     "home": {
       "name": "Accueil"
     },
+    "projects": {
+      "name": "Projets",
+      "description": ""
+    },
     "resume": {
       "name": "CV",
       "description": "",
@@ -101,5 +105,8 @@
         }
       }
     }
+  },
+  "misc": {
+    "since": "Depuis"
   }
 }
diff --git a/package.json b/package.json
index 378aecd..27cb1d0 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,8 @@
     "@iconify-json/material-symbols-light": "^1.2.79",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/simple-icons": "^1.2.86",
+    "@iconify-vue/file-icons": "^1.0.3",
+    "@iconify-vue/simple-icons": "^1.0.38",
     "@nuxt/test-utils": "3.20.1",
     "@nuxtjs/i18n": "^10.4.0",
     "@tailwindcss/postcss": "^4.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index abc9a53..cb869cb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,6 +78,12 @@ importers:
       '@iconify-json/simple-icons':
         specifier: ^1.2.86
         version: 1.2.86
+      '@iconify-vue/file-icons':
+        specifier: ^1.0.3
+        version: 1.0.3(vue@3.5.38(typescript@5.9.3))
+      '@iconify-vue/simple-icons':
+        specifier: ^1.0.38
+        version: 1.0.38(vue@3.5.38(typescript@5.9.3))
       '@nuxt/test-utils':
         specifier: 3.20.1
         version: 3.20.1(@vitest/ui@4.1.9)(@vue/test-utils@2.4.11(@vue/compiler-dom@3.5.38)(@vue/server-renderer@3.5.38(vue@3.5.38(typescript@5.9.3)))(vue@3.5.38(typescript@5.9.3)))(happy-dom@20.10.6)(magicast@0.5.3)(playwright-core@1.61.0)(typescript@5.9.3)(vitest@4.1.9)
@@ -1022,9 +1028,20 @@ packages:
   '@iconify-json/simple-icons@1.2.86':
     resolution: {integrity: sha512-t3jck5qPQuK1qy+bRn9eCoDQhIB7XSazKz1Fjp8hcan3XOAsTI5Mq/s3F0ekOKSvMQqkVORYK6ns6o6T9f5EMA==}
 
+  '@iconify-vue/file-icons@1.0.3':
+    resolution: {integrity: sha512-5JhwJOKSdr3fMrUkosay3dZB07SyAMaw/v6iq0GJydUl6h1LGpRml2pbdD5muRcL2cmWrgckN1PSqc0wUKbrPQ==}
+
+  '@iconify-vue/simple-icons@1.0.38':
+    resolution: {integrity: sha512-pLmb5DIThu45sPaDlInUHWjBQg20AuGy6rRuuBISVNcDCIbu6DRpXf4heCzP+Peuoa1s4ezOTb8i7E26znrSgA==}
+
   '@iconify/collections@1.0.698':
     resolution: {integrity: sha512-k7lDu5QpRk7arMiSaB8fG2zlQpu3B38q2S1GKnqrJQJPh6ZcTdIB9PWcvaQlYVGEzE2zhRJ1qcZmqHQjrh+/ag==}
 
+  '@iconify/css-vue@1.0.2':
+    resolution: {integrity: sha512-KXG9zXTMmJLi1AF2ket+YWUGdSqFvIMSnCO789uOVpba6SZhqeUttu0JIaEcq2dNlt4oonwdtMyerkpRkAFYhw==}
+    peerDependencies:
+      vue: '>=3.0.0'
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -7785,10 +7802,27 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-vue/file-icons@1.0.3(vue@3.5.38(typescript@5.9.3))':
+    dependencies:
+      '@iconify/css-vue': 1.0.2(vue@3.5.38(typescript@5.9.3))
+    transitivePeerDependencies:
+      - vue
+
+  '@iconify-vue/simple-icons@1.0.38(vue@3.5.38(typescript@5.9.3))':
+    dependencies:
+      '@iconify/css-vue': 1.0.2(vue@3.5.38(typescript@5.9.3))
+    transitivePeerDependencies:
+      - vue
+
   '@iconify/collections@1.0.698':
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify/css-vue@1.0.2(vue@3.5.38(typescript@5.9.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.38(typescript@5.9.3)
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@3.1.3':