From fceeb5307c4c43aa797cf41b7a49f9a54d5eb47a Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Tue, 11 Nov 2025 19:12:21 +0100
Subject: [PATCH] feat: fill pages

---
 .envrc.local                                  |  5 --
 frontend/app/app.vue                          |  4 +-
 frontend/app/assets/css/main.css              |  1 -
 frontend/app/assets/css/tailwind.css          |  3 +-
 frontend/app/assets/css/ui/colors.css         | 12 ++--
 frontend/app/assets/css/ui/text.css           | 10 ++--
 frontend/app/components/AppFooter.vue         | 31 ++++++++--
 .../app/components/VocalSynth/Projects.vue    | 44 ++++++++++++++
 frontend/app/components/VocalSynth/Tools.vue  | 21 +++++++
 frontend/app/composables/useApi.ts            | 37 ++++++++++++
 frontend/app/composables/useBackend.ts        |  8 +++
 frontend/app/composables/useDataJson.ts       | 33 ++++++++++
 frontend/app/composables/useMeta.ts           | 27 +++++++++
 frontend/app/layouts/centered.vue             |  5 ++
 frontend/app/layouts/default.vue              |  2 +-
 frontend/app/pages/[...slug].vue              | 35 +++++++++++
 frontend/app/pages/contact.vue                |  5 --
 frontend/app/pages/index.vue                  |  3 -
 frontend/app/pages/languages.vue              |  5 --
 frontend/app/pages/resume.vue                 | 60 ++++++++++++++++++-
 frontend/app/pages/vocal-synthesis.vue        |  5 --
 frontend/app/types/contact.ts                 | 11 ++++
 frontend/app/types/meta.ts                    |  4 ++
 frontend/app/types/resume.ts                  | 13 ++++
 frontend/content.config.ts                    | 25 +++++---
 frontend/content/en/index.md                  | 11 ++++
 frontend/content/en/resume.json               | 56 +++++++++++++++++
 frontend/content/en/vocal-synthesis.json      | 35 +++++++++++
 frontend/content/en/vocal-synthesis.md        | 15 +++++
 frontend/content/fr/index.md                  | 11 ++++
 frontend/content/fr/resume.json               | 56 +++++++++++++++++
 frontend/content/fr/vocal-synthesis.json      | 35 +++++++++++
 frontend/content/fr/vocal-synthesis.md        | 15 +++++
 frontend/i18n/locales/en.json                 | 17 +++++-
 frontend/i18n/locales/fr.json                 | 17 +++++-
 frontend/nuxt.config.ts                       |  7 ++-
 frontend/package.json                         |  5 +-
 frontend/pnpm-lock.yaml                       | 10 ++++
 38 files changed, 634 insertions(+), 65 deletions(-)
 delete mode 100644 .envrc.local
 create mode 100644 frontend/app/components/VocalSynth/Projects.vue
 create mode 100644 frontend/app/components/VocalSynth/Tools.vue
 create mode 100644 frontend/app/composables/useApi.ts
 create mode 100644 frontend/app/composables/useDataJson.ts
 create mode 100644 frontend/app/composables/useMeta.ts
 create mode 100644 frontend/app/layouts/centered.vue
 create mode 100644 frontend/app/pages/[...slug].vue
 delete mode 100644 frontend/app/pages/contact.vue
 delete mode 100644 frontend/app/pages/index.vue
 delete mode 100644 frontend/app/pages/languages.vue
 delete mode 100644 frontend/app/pages/vocal-synthesis.vue
 create mode 100644 frontend/app/types/contact.ts
 create mode 100644 frontend/app/types/meta.ts
 create mode 100644 frontend/app/types/resume.ts
 create mode 100644 frontend/content/en/index.md
 create mode 100644 frontend/content/en/resume.json
 create mode 100644 frontend/content/en/vocal-synthesis.json
 create mode 100644 frontend/content/en/vocal-synthesis.md
 create mode 100644 frontend/content/fr/index.md
 create mode 100644 frontend/content/fr/resume.json
 create mode 100644 frontend/content/fr/vocal-synthesis.json
 create mode 100644 frontend/content/fr/vocal-synthesis.md

diff --git a/.envrc.local b/.envrc.local
deleted file mode 100644
index b1a99ff..0000000
--- a/.envrc.local
+++ /dev/null
@@ -1,5 +0,0 @@
-export NIX_SHELL_NAME=frontend
-
-# Local Variables:
-# mode: dotenv
-# End:
diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index 89e1c3b..d08249c 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -2,9 +2,7 @@
   <UApp :locale="locales[locale]">
     <AppNavbar />
     <UMain>
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
+      <NuxtPage />
     </UMain>
     <AppFooter />
   </UApp>
diff --git a/frontend/app/assets/css/main.css b/frontend/app/assets/css/main.css
index 26b3bb8..6bd75a9 100644
--- a/frontend/app/assets/css/main.css
+++ b/frontend/app/assets/css/main.css
@@ -1,4 +1,3 @@
-@import 'tailwindcss';
 @import '@nuxt/ui';
 @import './colors.css';
 @import './ui/index.css';
diff --git a/frontend/app/assets/css/tailwind.css b/frontend/app/assets/css/tailwind.css
index f1e20e7..bf64d86 100644
--- a/frontend/app/assets/css/tailwind.css
+++ b/frontend/app/assets/css/tailwind.css
@@ -1,4 +1,5 @@
-@layer base {
+@import 'tailwindcss';
+@theme {
   --color-text-50: var(--text-50);
   --color-text: var(--text);
   --color-text-100: var(--text-100);
diff --git a/frontend/app/assets/css/ui/colors.css b/frontend/app/assets/css/ui/colors.css
index 81f239f..4e8f6f6 100644
--- a/frontend/app/assets/css/ui/colors.css
+++ b/frontend/app/assets/css/ui/colors.css
@@ -1,15 +1,15 @@
 :root {
-  --ui-primary: var(--color-primary);
-  --ui-secondary: var(--color-secondary);
-  --ui-success: var(--color-accent);
+  --ui-primary: var(--primary);
+  --ui-secondary: var(--secondary);
+  --ui-success: var(--accent);
   --ui-info: var(--ui-color-info-500);
   --ui-warning: var(--ui-color-warning-500);
   --ui-error: var(--ui-color-error-500);
 }
 .dark {
-  --ui-primary: var(--color-primary-dark);
-  --ui-secondary: var(--color-secondary-dark);
-  --ui-success: var(--color-accent);
+  --ui-primary: var(--primary);
+  --ui-secondary: var(--secondary);
+  --ui-success: var(--accent);
   --ui-info: var(--ui-color-info-400);
   --ui-warning: var(--ui-color-warning-400);
   --ui-error: var(--ui-color-error-400);
diff --git a/frontend/app/assets/css/ui/text.css b/frontend/app/assets/css/ui/text.css
index c213533..8f9cc6e 100644
--- a/frontend/app/assets/css/ui/text.css
+++ b/frontend/app/assets/css/ui/text.css
@@ -1,15 +1,15 @@
 :root {
-  --ui-text-dimmed: var(--text-400);
-  --ui-text-muted: var(--text-500);
+  --ui-text-dimmed: var(--text-800);
+  --ui-text-muted: var(--text-700);
   --ui-text-toned: var(--text-600);
   --ui-text: var(--text);
   --ui-text-highlighted: var(--text-900);
   --ui-text-inverted: var(--text-50);
 }
 .dark {
-  --ui-text-dimmed: var(--text-500);
-  --ui-text-muted: var(--text-400);
-  --ui-text-toned: var(--text-300);
+  --ui-text-dimmed: var(--text-800);
+  --ui-text-muted: var(--text-700);
+  --ui-text-toned: var(--text-600);
   --ui-text: var(--text);
   --ui-text-highlighted: var(--text);
   --ui-text-inverted: var(--text-50);
diff --git a/frontend/app/components/AppFooter.vue b/frontend/app/components/AppFooter.vue
index 06b76b5..6d762d7 100644
--- a/frontend/app/components/AppFooter.vue
+++ b/frontend/app/components/AppFooter.vue
@@ -1,12 +1,20 @@
 <template>
-  <UFooter>
+  <UFooter class="bg-background-200">
     <template #left>
-      <p class="text-300 txt-sm">
-        Copyright &copy; {{ new Date().getFullYear() }}
-      </p>
+      <div class="flex flex-col gap-2">
+        <p class="text-text-800 text-sm">
+          Copyright &copy; {{ new Date().getFullYear() }}
+        </p>
+        <p class="text-text-800 text-sm">
+          {{ $t('footer.versions.frontend') }}: {{ version }}
+        </p>
+        <p class="text-text-800 text-sm">
+          {{ $t('footer.versions.backend') }}: {{ meta?.version }}
+        </p>
+      </div>
     </template>
 
-    <UNavigationMenu :items="items" variant="link" />
+    <UNavigationMenu :items="items" variant="link" :orientation="orientation" />
 
     <template #right>
       <UButton
@@ -23,11 +31,24 @@
 
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui';
+import { version } from '../../package.json';
 
+const { isMobile } = useDevice();
+const orientation = computed(() => (isMobile ? 'vertical' : 'horizontal'));
+const { getMeta } = useBackend();
+const { data: meta } = getMeta();
 const items = computed<NavigationMenuItem[]>(() => [
   {
     label: $t('footer.links.source'),
     to: 'https://labs.phundrak.com/phundrak/phundrak.com',
   },
+  {
+    label: $t('footer.links.nuxt'),
+    to: 'https://nuxt.com/',
+  },
+  {
+    label: $t('footer.links.rust'),
+    to: 'https://rust-lang.org/',
+  },
 ]);
 </script>
diff --git a/frontend/app/components/VocalSynth/Projects.vue b/frontend/app/components/VocalSynth/Projects.vue
new file mode 100644
index 0000000..3c118dd
--- /dev/null
+++ b/frontend/app/components/VocalSynth/Projects.vue
@@ -0,0 +1,44 @@
+<template>
+  <UPageCard class="bg-background-100 my-10">
+    <p class="text-xl">
+      {{ $t('pages.vocal-synthesis.projects') }}
+    </p>
+    <div class="flex flex-col max-w gap-10">
+      <div
+        v-for="project in projects?.projects"
+        :key="project.title"
+        class="flex flex-row max-w gap-5"
+      >
+        <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"
+          >
+            <UIcon :name="project.icon" class="size-11" />
+          </div>
+        </div>
+        <div class="flex flex-col">
+          <div class="flex flex-row gap-2 items-baseline">
+            <ULink :to="project.link" class="text-2xl">{{
+              project.title
+            }}</ULink>
+            <UIcon
+              v-if="external(project.link)"
+              name="mdi:link"
+              class="size-5"
+            />
+          </div>
+          <div>
+            {{ project.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </UPageCard>
+</template>
+
+<script setup lang="ts">
+const { getJsonData, getCachedData } = useDataJson('vocalSynth');
+await getJsonData('content_data_');
+const projects = getCachedData();
+const external = (url: string) => url.startsWith('http');
+</script>
diff --git a/frontend/app/components/VocalSynth/Tools.vue b/frontend/app/components/VocalSynth/Tools.vue
new file mode 100644
index 0000000..4e3b9e7
--- /dev/null
+++ b/frontend/app/components/VocalSynth/Tools.vue
@@ -0,0 +1,21 @@
+<template>
+  <UPageCard class="bg-background-100 my-10">
+    <p class="text-xl">
+      {{ $t('pages.vocal-synthesis.tools') }}
+    </p>
+    <div class="flex flex-row gap-5 flex-wrap">
+      <UBadge
+        v-for="tool in data?.tools"
+        :key="tool"
+        size="md"
+        variant="solid"
+        >{{ tool }}</UBadge
+      >
+    </div>
+  </UPageCard>
+</template>
+
+<script setup lang="ts">
+const { getCachedData } = useDataJson('vocalSynth');
+const data = getCachedData();
+</script>
diff --git a/frontend/app/composables/useApi.ts b/frontend/app/composables/useApi.ts
new file mode 100644
index 0000000..0e4bfc7
--- /dev/null
+++ b/frontend/app/composables/useApi.ts
@@ -0,0 +1,37 @@
+export function useApi() {
+  const config = useRuntimeConfig();
+  const backend = config.public.apiBase;
+  const commonBaseOptions = { baseURL: backend };
+
+  const get = (endpoint, options = {}) =>
+    useFetch(endpoint, {
+      method: 'GET',
+      ...commonBaseOptions,
+      ...options,
+    });
+
+  const post = (endpoint, body, options = {}) =>
+    $fetch(endpoint, {
+      method: 'POST',
+      body,
+      ...commonBaseOptions,
+      ...options,
+    });
+
+  const put = (endpoint, body, options = {}) =>
+    $fetch(endpoint, {
+      body,
+      method: 'PUT',
+      ...commonBaseOptions,
+      ...options,
+    });
+
+  const del = (endpoint, options = {}) =>
+    $fetch(endpoint, {
+      method: 'DELETE',
+      ...commonBaseOptions,
+      ...options,
+    });
+
+  return { get, post, put, del };
+}
diff --git a/frontend/app/composables/useBackend.ts b/frontend/app/composables/useBackend.ts
index e69de29..f613cf0 100644
--- a/frontend/app/composables/useBackend.ts
+++ b/frontend/app/composables/useBackend.ts
@@ -0,0 +1,8 @@
+export const useBackend = () => {
+  const api = useApi();
+
+  const getMeta = (options = {}) => api.get('/meta', options);
+  const postContact = (contact: ContactRequest, options = {}) =>
+    api.post('/contact', contact, options);
+  return { getMeta, postContact };
+};
diff --git a/frontend/app/composables/useDataJson.ts b/frontend/app/composables/useDataJson.ts
new file mode 100644
index 0000000..d78d491
--- /dev/null
+++ b/frontend/app/composables/useDataJson.ts
@@ -0,0 +1,33 @@
+import { withLeadingSlash } from 'ufo';
+import type { Collections } from '@nuxt/content';
+
+export const useDataJson = (prefix: string) => {
+  const route = useRoute();
+  const { locale } = useI18n();
+
+  const slug = computed(() => {
+    // Use route.params.slug for dynamic routes, or route.path for static routes
+    const slugValue = route.params.slug || route.path;
+    return withLeadingSlash(String(slugValue));
+  });
+  const key = computed(() => prefix + '-' + slug.value);
+
+  const getJsonData = async (collectionPrefix: string = 'content_data_') => {
+    const { data } = await useAsyncData(key.value, async () => {
+      const collection = (collectionPrefix + locale.value) as keyof Collections;
+      const allData = await queryCollection(collection).all();
+      const filtered = allData.filter((source) => source.meta.path == slug.value)[0];
+      return filtered?.meta;
+    }, {
+      watch: [locale], // Automatically refresh when locale changes
+    });
+    return data;
+  };
+
+  const getCachedData = () => {
+    const { data } = useNuxtData(key.value);
+    return data;
+  };
+
+  return { getJsonData, getCachedData };
+};
diff --git a/frontend/app/composables/useMeta.ts b/frontend/app/composables/useMeta.ts
new file mode 100644
index 0000000..bb4be13
--- /dev/null
+++ b/frontend/app/composables/useMeta.ts
@@ -0,0 +1,27 @@
+export interface MetaImageOptions {
+  url: string;
+  alt: string;
+}
+
+export interface MetaOptions {
+  title: string;
+  description: string;
+  image?: MetaImageOptions;
+}
+
+export const useMeta = (options: MetaOptions) => {
+  const titleSuffix = " – Lucien Cartier-Tilet";
+  useSeoMeta({
+    title: () => options.title + titleSuffix,
+    ogTitle: () => options.title + titleSuffix,
+    twitterTitle: () => options.title + titleSuffix,
+    description: () => options.description,
+    ogDescription: () => options.description,
+    twitterDescription: () => options.description,
+    twitterCard: options.image ? 'summary_large_image' : 'summary',
+    ogImage: () => options.image?.url,
+    ogImageAlt: () => options.image?.alt,
+    twitterImage: () => options.image?.url,
+    twitterImageAlt: () => options.image?.alt,
+  })
+}
diff --git a/frontend/app/layouts/centered.vue b/frontend/app/layouts/centered.vue
new file mode 100644
index 0000000..3161244
--- /dev/null
+++ b/frontend/app/layouts/centered.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="text-center prose prose-lg mx-auto max-w-prose">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 56a8b72..f852fae 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="min-h-screen mx-auto px-4 py-8 max-w-6xl">
     <slot />
   </div>
 </template>
diff --git a/frontend/app/pages/[...slug].vue b/frontend/app/pages/[...slug].vue
new file mode 100644
index 0000000..5662055
--- /dev/null
+++ b/frontend/app/pages/[...slug].vue
@@ -0,0 +1,35 @@
+<template>
+  <NuxtLayout v-if="page" :name="page.meta?.layout ?? 'default'">
+    <ContentRenderer :value="page" />
+  </NuxtLayout>
+  <div v-else>
+    <h1>Page not found</h1>
+    <p>This page doesn&apos;t exist in {{ locale }} language.</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { withLeadingSlash } from 'ufo';
+import type { Collections } from '@nuxt/content';
+
+const route = useRoute();
+const { locale } = useI18n();
+const slug = computed(() => withLeadingSlash(String(route.params.slug)));
+
+const { data: page } = await useAsyncData(
+  'page-' + slug.value,
+  async () => {
+    const collection = ('content_' + locale.value) as keyof Collections;
+    const content = await queryCollection(collection).path(slug.value).first();
+    if (!content && locale.value !== 'en') {
+      return await queryCollection('content_en').path(slug.value).first();
+    }
+    return content;
+  },
+  {
+    watch: [locale], // Refresh when locale changes
+  },
+);
+
+useMeta({ title: page.value?.title, description: page.value?.description });
+</script>
diff --git a/frontend/app/pages/contact.vue b/frontend/app/pages/contact.vue
deleted file mode 100644
index ecbdae7..0000000
--- a/frontend/app/pages/contact.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    {{ $t('pages.contact.name') }}
-  </div>
-</template>
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
deleted file mode 100644
index 5408d05..0000000
--- a/frontend/app/pages/index.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <h1>{{ $t('website.name') }}</h1>
-</template>
diff --git a/frontend/app/pages/languages.vue b/frontend/app/pages/languages.vue
deleted file mode 100644
index 6a6d42c..0000000
--- a/frontend/app/pages/languages.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    {{ $t('pages.languages.name') }}
-  </div>
-</template>
diff --git a/frontend/app/pages/resume.vue b/frontend/app/pages/resume.vue
index 7c60895..7ed5ce7 100644
--- a/frontend/app/pages/resume.vue
+++ b/frontend/app/pages/resume.vue
@@ -1,5 +1,59 @@
 <template>
-  <div>
-    {{ $t('pages.resume.name') }}
-  </div>
+  <NuxtLayout name="default">
+    <h1 class="text-4xl text-highlighted font-bold mb-8">
+      {{ $t('pages.resume.name') }}
+    </h1>
+    <UPageCard v-if="resumeContent" class="bg-background-100 my-10">
+      <p>
+        {{ $t('pages.resume.experience') }}
+      </p>
+      <UTimeline
+        v-model="valueExp"
+        reverse
+        :items="resumeContent?.experience"
+        class="w-full"
+      >
+        <template #description="{ item }">
+          <div class="flex flex-col gap-2">
+            <p>
+              {{ item.description }}
+            </p>
+            <div class="flex flex-row gap-2 flex-wrap">
+              <UBadge
+                v-for="tool in item.tools"
+                :key="tool"
+                size="md"
+                variant="solid"
+              >
+                {{ tool }}
+              </UBadge>
+            </div>
+          </div>
+        </template>
+      </UTimeline>
+    </UPageCard>
+    <UPageCard v-if="resumeContent" class="bg-background-100 my-10">
+      <p>
+        {{ $t('pages.resume.education') }}
+      </p>
+      <UTimeline
+        v-model="valueEd"
+        reverse
+        :items="resumeContent?.education"
+        class="w-full"
+      />
+    </UPageCard>
+  </NuxtLayout>
 </template>
+
+<script setup lang="ts">
+useMeta({
+  title: $t('pages.resume.name'),
+  description: $t('pages.resume.description'),
+});
+const { getJsonData } = useDataJson('resume');
+const resumeContent = await getJsonData();
+const arrLength = (array?: T[]) => (array ? array.length - 1 : 0);
+const valueExp = computed(() => arrLength(resumeContent.value?.experience));
+const valueEd = computed(() => arrLength(resumeContent.value?.education));
+</script>
diff --git a/frontend/app/pages/vocal-synthesis.vue b/frontend/app/pages/vocal-synthesis.vue
deleted file mode 100644
index 5e5aa53..0000000
--- a/frontend/app/pages/vocal-synthesis.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    {{ $t('pages.vocal-synthesis.name') }}
-  </div>
-</template>
diff --git a/frontend/app/types/contact.ts b/frontend/app/types/contact.ts
new file mode 100644
index 0000000..f6d56e6
--- /dev/null
+++ b/frontend/app/types/contact.ts
@@ -0,0 +1,11 @@
+export interface ContactRequest {
+  name: string,
+  email: string,
+  message: string,
+  website?: string | null
+}
+
+export interface ContactResponse {
+  success: boolean,
+  message: string
+}
diff --git a/frontend/app/types/meta.ts b/frontend/app/types/meta.ts
new file mode 100644
index 0000000..a9ffae3
--- /dev/null
+++ b/frontend/app/types/meta.ts
@@ -0,0 +1,4 @@
+export interface MetaResponse {
+  version: string,
+  name: string
+}
diff --git a/frontend/app/types/resume.ts b/frontend/app/types/resume.ts
new file mode 100644
index 0000000..eb09f74
--- /dev/null
+++ b/frontend/app/types/resume.ts
@@ -0,0 +1,13 @@
+export interface ResumeExperience extends TimelineItem {
+  tools: string[];
+}
+
+export interface ResumeContent {
+  experience: ResumeExperience[];
+  education: TimelineItem[],
+  otherTools: string[],
+  devops: string[],
+  os: string[],
+  programmingLanguages: string[],
+  frameworks: string[]
+}
diff --git a/frontend/content.config.ts b/frontend/content.config.ts
index 3a19a08..f186f8e 100644
--- a/frontend/content.config.ts
+++ b/frontend/content.config.ts
@@ -1,14 +1,17 @@
 import { defineCollection, defineContentConfig } from '@nuxt/content';
 import { z } from 'zod';
 
-const commonSchema = z.object({});
+const commonSchema = z.object({
+  title: z.string(),
+  description: z.string()
+});
 
 export default defineContentConfig({
   collections: {
     content_en: defineCollection({
       type: 'page',
       source: {
-        include: 'en/**',
+        include: 'en/**/*.md',
         prefix: '',
       },
       schema: commonSchema,
@@ -16,18 +19,24 @@ export default defineContentConfig({
     content_fr: defineCollection({
       type: 'page',
       source: {
-        include: 'fr/**',
+        include: 'fr/**/*.md',
         prefix: '',
       },
       schema: commonSchema,
     }),
-    content_lfn: defineCollection({
-      type: 'page',
+    content_data_en: defineCollection({
+      type: 'data',
       source: {
-        include: 'lfn/**',
-        prefix: '',
+        include: 'en/**/*.json',
+        prefix: ''
+      },
+    }),
+    content_data_fr: defineCollection({
+      type: 'data',
+      source: {
+        include: 'fr/**/*.json',
+        prefix: ''
       },
-      schema: commonSchema,
     }),
   },
 });
diff --git a/frontend/content/en/index.md b/frontend/content/en/index.md
new file mode 100644
index 0000000..705ee25
--- /dev/null
+++ b/frontend/content/en/index.md
@@ -0,0 +1,11 @@
+---
+layout: centered
+title: Home
+description: Personal Website
+---
+
+# Welcome
+
+Web Developer • Worldbuilder • Conlanger
+
+Hi, I'm Lucien Cartier-Tilet. I work as a web developer and consultant. Outside of work, I spend time on worldbuilding and constructed languages.
diff --git a/frontend/content/en/resume.json b/frontend/content/en/resume.json
new file mode 100644
index 0000000..bde3241
--- /dev/null
+++ b/frontend/content/en/resume.json
@@ -0,0 +1,56 @@
+{
+  "experience": [
+    {
+      "date": "Since Septembre 2023",
+      "title": "Consultant – 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": ["Angular", "TypeScript", "Java Spring Boot", "Java Spring Batch", "PostgreSQL", "VS Code", "Eclipse", "IntelliJ Idea", "Git"],
+      "icon": "mdi:laptop"
+    },
+    {
+      "date": "February 2023 – August 2023",
+      "title": "Intern – 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": ["Angular", "TypeScript", "Java Spring Boot", "PostgreSQL", "VS Code", "Eclipse", "Git"],
+      "icon": "mdi:book"
+    },
+    {
+      "date": "October 2014 – July 2018",
+      "title": "CTO – 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": ["Alter/Ego", "UTAU", "FL Studio", "iZotope RX", "T-RackS CS"],
+      "icon": "mdi:waveform"
+    }
+  ],
+  "education": [
+    {
+      "date": "September 2022 – September 2023",
+      "title": "Master's Degree in Hypermedia Technologies – University of Paris 8",
+      "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",
+      "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",
+      "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",
+      "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"
+    }
+  ],
+  "otherTools": ["Emacs", "Vim", "jj", "PostgreSQL", "SQLite"],
+  "devops": ["GitHub", "Gitlab", "Gitea", "GitHub Actions", "Drone.io", "Docker", "Podman"],
+  "os": ["NixOS", "Debian", "Arch Linux", "Void Linux", "Alpine Linux", "Windows"],
+  "programmingLanguages": ["TypeScript", "Rust", "C", "EmacsLisp", "Bash/Zsh", "C++", "Python", "CommonLisp"],
+  "frameworks": ["Angular", "Vue", "Nuxt", "Spring Boot", "Poem (Rust)"]
+}
diff --git a/frontend/content/en/vocal-synthesis.json b/frontend/content/en/vocal-synthesis.json
new file mode 100644
index 0000000..e97fd6c
--- /dev/null
+++ b/frontend/content/en/vocal-synthesis.json
@@ -0,0 +1,35 @@
+{
+  "projects": [
+    {
+      "title": "BSUP01 KEINE Tashi series",
+      "icon": "mdi:microphone",
+      "description": "Released starting October 2012. My second vocal library, recorded with better equipment than my first attempt. The series included several Japanese vocal libraries, with the Extend Power version being my best work in this series.",
+      "link": "/keine-tashi"
+    },
+    {
+      "title": "First Tibetan vocal libraries",
+      "icon": "mdi:earth",
+      "description": "BSUP01 KEINE Tashi and BSUP02 Drölma were the first Tibetan vocal libraries for singing synthesis worldwide.",
+      "link": "/keine-tashi"
+    },
+    {
+      "title": "ALYS prototypes for UTAU",
+      "icon": "mdi:flask",
+      "description": "Created ALYS 001 JPN, ALYS 001 FRA, and ALYS 002 FRA as test versions while working at VoxWave. Known as ALYS4UTAU.",
+      "link": "https://alys.phundrak.com/en/"
+    },
+    {
+      "title": "ALYS for Alter/Ego",
+      "icon": "mdi:package",
+      "description": "The first commercial vocal library for Alter/Ego, and the first professional French singing vocal library. Development took well over a year, with eight to nine additional months for the first major update. Now available free of charge.",
+      "link": "https://alys.phundrak.com/en/"
+    },
+    {
+      "title": "LEORA",
+      "description": "A French singing vocal library developed at VoxWave alongside ALYS.",
+      "icon": "mdi:music",
+      "link": "https://alys.phundrak.com/en/faq#are-there-any-plans-for-leora"
+    }
+  ],
+  "tools": ["Alter/Ego", "UTAU", "VOCALOID", "ChipSpeech", "FL Studio", "Audacity", "iZotope RX", "T-RackS CS", "C++"]
+}
diff --git a/frontend/content/en/vocal-synthesis.md b/frontend/content/en/vocal-synthesis.md
new file mode 100644
index 0000000..e3ea207
--- /dev/null
+++ b/frontend/content/en/vocal-synthesis.md
@@ -0,0 +1,15 @@
+---
+title: Vocal Synthesis
+description: Vocal synthesis projects from 2011-2018, including ALYS, the first professional French singing voice library for Alter/Ego.
+---
+
+# Vocal Synthesis
+
+I worked in singing vocal synthesis from 2011 to 2018. I created vocal libraries for UTAU and Alter/Ego, including the first professional French singing voice library.
+
+:::VocalSynthProjects
+:::
+
+
+:::VocalSynthTools
+:::
diff --git a/frontend/content/fr/index.md b/frontend/content/fr/index.md
new file mode 100644
index 0000000..fbc132e
--- /dev/null
+++ b/frontend/content/fr/index.md
@@ -0,0 +1,11 @@
+---
+layout: centered
+title: Accueil
+description: Site web personnel
+---
+
+# Bienvenue
+
+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 consacre mon temps à la création d'univers et de langues construites.
diff --git a/frontend/content/fr/resume.json b/frontend/content/fr/resume.json
new file mode 100644
index 0000000..4e1930b
--- /dev/null
+++ b/frontend/content/fr/resume.json
@@ -0,0 +1,56 @@
+{
+  "experience": [
+    {
+      "date": "Depuis septembre 2023",
+      "title": "Consultant – 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": ["Angular", "TypeScript", "Java Spring Boot", "Java Spring Batch", "PostgreSQL", "VS Code", "Eclipse", "IntelliJ Idea", "Git"],
+      "icon": "mdi:laptop"
+    },
+    {
+      "date": "Février 2023 – Août 2023",
+      "title": "Stagiaire – 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": ["Angular", "TypeScript", "Java Spring Boot", "PostgreSQL", "VS Code", "Eclipse", "Git"],
+      "icon": "mdi:book"
+    },
+    {
+      "date": "Octobre 2014 – Juillet 2018",
+      "title": "Directeur technique – 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": ["Alter/Ego", "UTAU", "FL Studio", "iZotope RX", "T-RackS CS"],
+      "icon": "mdi:waveform"
+    }
+  ],
+  "education": [
+    {
+      "date": "Septembre 2022 – Septembre 2023",
+      "title": "Master 2 Technologies de l’Hypermédia – Université Paris 8",
+      "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",
+      "description": "",
+      "icon": "mdi:code-tags"
+    },
+    {
+      "date": "Septembre 2016 – Juillet 2019",
+      "title": "Licence Informatique – Université Paris 8",
+      "description": "Licence d’Informatique obtenue en Juillet 2019",
+      "icon": "mdi:school-outline"
+    },
+    {
+      "date": "Septembre 2013 – Décembre 2014",
+      "title": "Anglais LLCE – Université Lyon 2",
+      "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"
+    }
+  ],
+  "otherTools": ["Emacs", "Vim", "jj", "PostgreSQL", "SQLite"],
+  "devops": ["GitHub", "Gitlab", "Gitea", "GitHub Actions", "Drone.io", "Docker", "Podman"],
+  "os": ["NixOS", "Debian", "Arch Linux", "Void Linux", "Alpine Linux", "Windows"],
+  "programmingLanguages": ["TypeScript", "Rust", "C", "EmacsLisp", "Bash/Zsh", "C++", "Python", "CommonLisp"],
+  "frameworks": ["Angular", "Vue", "Nuxt", "Spring Boot", "Poem (Rust)"]
+}
diff --git a/frontend/content/fr/vocal-synthesis.json b/frontend/content/fr/vocal-synthesis.json
new file mode 100644
index 0000000..ace01d5
--- /dev/null
+++ b/frontend/content/fr/vocal-synthesis.json
@@ -0,0 +1,35 @@
+{
+  "projects": [
+    {
+      "title": "BSUP01 KEINE Tashi",
+      "icon": "mdi:microphone",
+      "description": "Sortie en octobre 2012. Ma deuxième bibliothèque vocale, enregistrée avec un équipement de meilleure qualité que ma première tentative. La série comprenait plusieurs bibliothèques vocales japonaises, la version Extend Power étant ma meilleure réalisation dans cette série.",
+      "link": "/keine-tashi"
+    },
+    {
+      "title": "Premières bibliothèques vocales tibétaines",
+      "icon": "mdi:earth",
+      "description": "BSUP01 KEINE Tashi et BSUP02 Drölma ont été les premières bibliothèques vocales tibétaines au monde dédiées à la synthèse vocale chantée.",
+      "link": "/keine-tashi"
+    },
+    {
+      "title": "Prototypes ALYS pour UTAU",
+      "icon": "mdi:flask",
+      "description": "Création des versions test ALYS 001 JPN, ALYS 001 FRA et ALYS 002 FRA chez VoxWave. Connue sous le nom d'ALYS4UTAU.",
+      "link": "https://alys.phundrak.com"
+    },
+    {
+      "title": "ALYS pour Alter/Ego",
+      "icon": "mdi:package",
+      "description": "La première bibliothèque vocale commerciale pour Alter/Ego, et la première bibliothèque vocale professionnelle en français. Son développement a pris plus d'un an, avec huit à neuf mois supplémentaires pour la première mise à jour majeure. Elle est désormais disponible gratuitement.",
+      "link": "https://alys.phundrak.com"
+    },
+    {
+      "title": "LEORA",
+      "description": "Une bibliothèque vocale française développée chez VoxWave en collaboration avec ALYS.",
+      "icon": "mdi:music",
+      "link": "https://alys.phundrak.com/faq#y-a-t-il-quelque-chose-de-prevu-pour-leora"
+    }
+  ],
+  "tools": ["Alter/Ego", "UTAU", "VOCALOID", "ChipSpeech", "FL Studio", "Audacity", "iZotope RX", "T-RackS CS", "C++"]
+}
diff --git a/frontend/content/fr/vocal-synthesis.md b/frontend/content/fr/vocal-synthesis.md
new file mode 100644
index 0000000..61339e6
--- /dev/null
+++ b/frontend/content/fr/vocal-synthesis.md
@@ -0,0 +1,15 @@
+---
+title: Synthèse vocale
+description:Projets de synthèse vocale de 2011 à 2018, dont ALYS, la première bibliothèque professionnelle de voix chantées en français pour Alter/Ego.
+---
+
+# Synthèse vocale
+
+J'ai travaillé dans le domaine de la synthèse vocale chantée de 2011 à 2018. J'ai créé des bibliothèques vocales pour UTAU et Alter/Ego, notamment la première bibliothèque professionnelle de voix chantées en français.
+
+:::VocalSynthProjects
+:::
+
+
+:::VocalSynthTools
+:::
diff --git a/frontend/i18n/locales/en.json b/frontend/i18n/locales/en.json
index efc1f7c..4941bca 100644
--- a/frontend/i18n/locales/en.json
+++ b/frontend/i18n/locales/en.json
@@ -17,10 +17,15 @@
       "name": "Home"
     },
     "resume": {
-      "name": "Resume"
+      "name": "Resume",
+      "description": "",
+      "experience": "Expérience",
+      "education": "Education"
     },
     "vocal-synthesis": {
-      "name": "Vocal Synthesis"
+      "name": "Vocal Synthesis",
+      "projects": "Key Projects",
+      "tools": "Tools"
     },
     "languages": {
       "name": "Languages & Worldbuilding"
@@ -31,7 +36,13 @@
   },
   "footer": {
     "links": {
-      "source": "Website’s source code"
+      "source": "Website’s source code",
+      "nuxt": "Frontend made with Nuxt",
+      "rust": "Backend made with Rust"
+    },
+    "versions": {
+      "frontend": "Frontend Version",
+      "backend": "Backend Version"
     }
   }
 }
diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index f3a1c57..03d865a 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -17,10 +17,15 @@
       "name": "Accueil"
     },
     "resume": {
-      "name": "CV"
+      "name": "CV",
+      "description": "",
+      "experience": "Expérience",
+      "education": "Éducation"
     },
     "vocal-synthesis": {
-      "name": "Synthèse Vocale"
+      "name": "Synthèse Vocale",
+      "projects": "Projets principaux",
+      "tools": "Outils"
     },
     "languages": {
       "name": "Langues et Univers Fictifs"
@@ -31,7 +36,13 @@
   },
   "footer": {
     "links": {
-      "source": "Code source du site web "
+      "source": "Code source du site web",
+      "nuxt": "Frontend fait avec Nuxt",
+      "rust": "Backend fait avec Rust"
+    },
+    "versions": {
+      "frontend": "Frontend Version",
+      "backend": "Backend Version"
     }
   }
 }
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 5c8f0a7..d2e7994 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -34,7 +34,7 @@ export default defineNuxtConfig({
     locales: [
       { code: 'en', name: 'English', language: 'en-UK', file: 'en.json' },
       { code: 'fr', name: 'Français', language: 'fr-FR', file: 'fr.json' },
-      // { code: 'lfn', name: 'Lingua Franca Nova', language: 'lfn', file: 'lfn.json' },
+      // { code: 'lfn', name: 'Elefen', language: 'lfn', file: 'lfn.json' },
       // { code: 'ei', name: 'Eittlandic', language: 'ei-ST', file: 'ei.json' },
     ],
     strategy: 'no_prefix',
@@ -71,5 +71,8 @@ export default defineNuxtConfig({
     turnstile: {
       secretKey: '', // Overriden by NUXT_TURNSTILE_SECRET_KEY
     },
+    public: {
+      apiBase: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:3100/api',
+    }
   },
-});
\ No newline at end of file
+});
diff --git a/frontend/package.json b/frontend/package.json
index 86dd5db..8a67864 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,13 +2,15 @@
   "name": "frontend",
   "type": "module",
   "private": true,
+  "version": "0.1.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "cleanup": "nuxt cleanup"
+    "cleanup": "nuxt cleanup",
+    "lint": "eslint ."
   },
   "dependencies": {
     "@nuxt/content": "3.8.0",
@@ -38,6 +40,7 @@
   "devDependencies": {
     "@iconify-json/material-symbols": "^1.2.44",
     "@iconify-json/material-symbols-light": "^1.2.44",
+    "@iconify-json/mdi": "^1.2.3",
     "@nuxtjs/i18n": "^10.2.0",
     "@tailwindcss/postcss": "^4.1.17",
     "autoprefixer": "^10.4.22",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index af63c92..d3c0431 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -84,6 +84,9 @@ importers:
       '@iconify-json/material-symbols-light':
         specifier: ^1.2.44
         version: 1.2.44
+      '@iconify-json/mdi':
+        specifier: ^1.2.3
+        version: 1.2.3
       '@nuxtjs/i18n':
         specifier: ^10.2.0
         version: 10.2.0(@vue/compiler-dom@3.5.23)(db0@0.3.4(better-sqlite3@12.4.1))(eslint@9.39.1(jiti@2.6.1))(ioredis@5.8.2)(magicast@0.5.1)(rollup@4.52.5)(vue@3.5.23(typescript@5.9.3))
@@ -566,6 +569,9 @@ packages:
   '@iconify-json/material-symbols@1.2.44':
     resolution: {integrity: sha512-NAJjhswaK9FxBeIzFFsNygws7wHtmAkBWhF4YEwn1NZIMbA+LNITqhUiq6sP5mOdKQqnoritFTlQaZ47a5BgBg==}
 
+  '@iconify-json/mdi@1.2.3':
+    resolution: {integrity: sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==}
+
   '@iconify/collections@1.0.615':
     resolution: {integrity: sha512-OBBvPu0CAdl042CfDBxt4zWVUxTwnK2kRBatab/y8d/t2XML9QGrA8A2hpaIFpYPPILSs6a4+gBkAGVXSKkBsQ==}
 
@@ -6282,6 +6288,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/mdi@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/collections@1.0.615':
     dependencies:
       '@iconify/types': 2.0.0