feat: fill pages

.envrc.local

@@ -1,5 +0,0 @@
-export NIX_SHELL_NAME=frontend
-
-# Local Variables:
-# mode: dotenv
-# End:

frontend/.prettierrc

@@ -0,0 +1,17 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "experimentalOperatorPosition": "start",
+  "experimentalTernaries": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

frontend/app/app.vue

@@ -2,9 +2,7 @@
   <UApp :locale="locales[locale]">
     <AppNavbar />
     <UMain>
-      <NuxtLayout>
       <NuxtPage />
-      </NuxtLayout>
     </UMain>
     <AppFooter />
   </UApp>

frontend/app/assets/css/main.css

@@ -1,4 +1,3 @@
-@import 'tailwindcss';
 @import '@nuxt/ui';
 @import './colors.css';
 @import './ui/index.css';

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);
@@ -76,9 +77,9 @@
   --text-weight-bold: 700;
 
   --font-sans:
-    Noto Sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    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", "Noto Color Emoji";
+    Wittgenstein, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
 }

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);

frontend/app/assets/css/ui/index.css

@@ -1,4 +1,4 @@
-@import "./colors.css";
-@import "./text.css";
-@import "./background.css";
-@import "./border.css";
+@import './colors.css';
+@import './text.css';
+@import './background.css';
+@import './border.css';

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);

frontend/app/components/AppFooter.vue

@@ -1,12 +1,14 @@
 <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 +25,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 meta = await 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>

frontend/app/components/Ui/BadgeList.vue

@@ -0,0 +1,13 @@
+<template>
+  <div v-if="tools" class="flex flex-row gap-1 flex-wrap">
+    <UBadge v-for="tool in tools" :key="tool" size="md" variant="solid">
+      {{ tool }}
+    </UBadge>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { tools } = defineProps<{
+  tools: string[];
+}>();
+</script>

frontend/app/components/Ui/BadgeListCard.vue

@@ -0,0 +1,14 @@
+<template>
+  <UPageCard class="bg-background-100 my-10">
+    <p class="text-xl">
+      <slot />
+    </p>
+    <UiBadgeList :tools="tools" />
+  </UPageCard>
+</template>
+
+<script setup lang="ts">
+const { tools } = defineProps<{
+  tools: string[];
+}>();
+</script>

frontend/app/components/VocalSynth/Projects.vue

@@ -0,0 +1,35 @@
+<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 data?.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">
+// Inject data provided by the page to avoid hydration issues with MDC components
+const data = inject('pageData');
+const external = (url: string) => url.startsWith('http');
+</script>

frontend/app/components/VocalSynth/Tools.vue

@@ -0,0 +1,8 @@
+<template>
+  <UiBadgeListCard v-if="data" :tools="data.tools">{{ $t('pages.vocal-synthesis.tools') }}</UiBadgeListCard>
+</template>
+
+<script setup lang="ts">
+// Inject data provided by the page to avoid hydration issues with MDC components
+const data = inject('pageData');
+</script>

frontend/app/components/navbar/LanguageSwitcher.vue

@@ -1,10 +1,6 @@
 <template>
-  <UDropdownMenu
-    :key="locale"
-    :items="availableLocales"
-    :content="{ align: 'start' }"
-  >
-    <UButton color="neutral" variant="outline" icon="material-symbols:globe" />
+  <UDropdownMenu :key="locale" :items="availableLocales" :content="{ align: 'start' }">
+    <UButton color="neutral" variant="outline" icon="material-symbols:globe" :aria-label="$t('menu.language')" />
   </UDropdownMenu>
 </template>
 

frontend/app/components/navbar/ThemeSwitcher.vue

@@ -1,10 +1,6 @@
 <template>
-  <UDropdownMenu
-    :key="colorMode.preference"
-    :items="themes"
-    :content="{ align: 'start' }"
-  >
-    <UButton color="neutral" variant="outline" :icon="icons[currentColor]" />
+  <UDropdownMenu :key="colorMode.preference" :items="themes" :content="{ align: 'start' }">
+    <UButton color="neutral" variant="outline" :icon="icons[currentColor]" :aria-label="$t('menu.theme')" />
   </UDropdownMenu>
 </template>
 

frontend/app/composables/useApi.ts

@@ -0,0 +1,32 @@
+import type { FetchOptions } from 'ofetch';
+
+export const useApi = () => {
+  const config = useRuntimeConfig();
+  const apiFetch = $fetch.create({
+    baseURL: config.public.apiBase,
+  });
+
+  const get = <T>(url: string, options?: FetchOptions) => apiFetch<T>(url, { method: 'GET', ...options });
+
+  const post = <ResultT, PayloadT = Record<string, string | number | boolean>>(
+    url: string,
+    body?: PayloadT,
+    options?: FetchOptions,
+  ) => apiFetch<ResultT>(url, { method: 'POST', body, ...options });
+
+  const put = <ResultT, PayloadT = Record<string, string | number | boolean>>(
+    url: string,
+    body?: PayloadT,
+    options?: FetchOptions,
+  ) => apiFetch<ResultT>(url, { method: 'PUT', body, ...options });
+
+  const patch = <ResultT, PayloadT = Record<string, string | number | boolean>>(
+    url: string,
+    body?: PayloadT,
+    options?: FetchOptions,
+  ) => apiFetch<ResultT>(url, { method: 'PATCH', body, ...options });
+
+  const del = <T>(url: string, options?: FetchOptions) => apiFetch<T>(url, { method: 'DELETE', ...options });
+
+  return { get, post, put, patch, del };
+};

frontend/app/composables/useBackend.ts

@@ -0,0 +1,8 @@
+export const useBackend = () => {
+  const api = useApi();
+
+  const getMeta = () => api.get<MetaResponse>('/meta');
+  const postContact = (contact: ContactRequest) => api.post<ContactRequest, ContactResponse>('/contact', contact);
+
+  return { getMeta, postContact };
+};

frontend/app/composables/useDataJson.ts

@@ -0,0 +1,65 @@
+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 getData = async <T>(
+    collectionPrefix: string,
+    options: {
+      useFilter?: boolean;
+      fallbackToEnglish?: boolean;
+      extractMeta?: boolean;
+    } = {},
+  ) => {
+    const { useFilter = false, fallbackToEnglish = false, extractMeta = false } = options;
+
+    const { data } = await useAsyncData(
+      key.value,
+      async () => {
+        const collection = (collectionPrefix + locale.value) as keyof Collections;
+
+        let content;
+        if (useFilter) {
+          // For data collections, use .all() and filter
+          const allData = await queryCollection(collection).all();
+          content = allData.filter((source) => source.meta.path == slug.value)[0];
+        } else {
+          // For page collections, use .path().first()
+          content = await queryCollection(collection).path(slug.value).first();
+          if (!content && fallbackToEnglish && locale.value !== 'en') {
+            content = await queryCollection('content_en').path(slug.value).first();
+          }
+        }
+
+        return extractMeta ? content?.meta : content;
+      },
+      {
+        watch: [locale], // Automatically refresh when locale changes
+      },
+    );
+    return data as Ref<T | null>;
+  };
+
+  const getJsonData = async (collectionPrefix: string = 'content_data_') => {
+    return getData(collectionPrefix, { useFilter: true, extractMeta: true });
+  };
+
+  const getPageContent = async (collectionPrefix: string = 'content_', fallbackToEnglish: boolean = true) => {
+    return getData(collectionPrefix, { fallbackToEnglish });
+  };
+
+  const getCachedData = () => {
+    const { data } = useNuxtData(key.value);
+    return data;
+  };
+
+  return { getJsonData, getPageContent, getCachedData };
+};

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,
+  });
+};

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>

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>

frontend/app/pages/[...slug].vue

@@ -0,0 +1,22 @@
+<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">
+const { getPageContent } = useDataJson('page');
+const page = await getPageContent();
+
+// Pre-fetch JSON data for MDC components to avoid hydration issues
+const { getJsonData } = useDataJson('page-data');
+const pageData = await getJsonData();
+// Provide data to child MDC components
+provide('pageData', pageData);
+
+useMeta({ title: page.value?.title, description: page.value?.description });
+</script>

frontend/app/pages/contact.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    {{ $t('pages.contact.name') }}
-  </div>
-</template>

frontend/app/pages/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <h1>{{ $t('website.name') }}</h1>
-</template>

frontend/app/pages/languages.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    {{ $t('pages.languages.name') }}
-  </div>
-</template>

frontend/app/pages/resume.vue

@@ -1,5 +1,47 @@
 <template>
-  <div>
+  <NuxtLayout name="default">
+    <h1 class="text-4xl text-highlighted font-bold mb-8">
       {{ $t('pages.resume.name') }}
+    </h1>
+    <UPageCard 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>
+            <UiBadgeList :tools="item.tools" />
           </div>
+        </template>
+      </UTimeline>
+    </UPageCard>
+    <UPageCard class="bg-background-100 my-10">
+      <p>
+        {{ $t('pages.resume.education') }}
+      </p>
+      <UTimeline v-model="valueEd" reverse :items="resumeContent?.education" class="w-full" />
+    </UPageCard>
+    <UiBadgeListCard :tools="resumeContent?.otherTools">{{ $t('pages.resume.tools') }}</UiBadgeListCard>
+    <UiBadgeListCard :tools="resumeContent?.devops">{{ $t('pages.resume.devops') }}</UiBadgeListCard>
+    <UiBadgeListCard :tools="resumeContent?.os">{{ $t('pages.resume.os') }}</UiBadgeListCard>
+    <UiBadgeListCard :tools="resumeContent?.programmingLanguages">{{
+      $t('pages.resume.programmingLanguages')
+    }}</UiBadgeListCard>
+    <UiBadgeListCard :tools="resumeContent?.frameworks">{{ $t('pages.resume.frameworks') }}</UiBadgeListCard>
+  </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>

frontend/app/pages/vocal-synthesis.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    {{ $t('pages.vocal-synthesis.name') }}
-  </div>
-</template>

frontend/app/types/api/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;
+}

frontend/app/types/api/error.ts

@@ -0,0 +1,4 @@
+export interface ApiError {
+  message: string;
+  success: boolean;
+}

frontend/app/types/api/meta.ts

@@ -0,0 +1,4 @@
+export interface MetaResponse {
+  version: string;
+  name: string;
+}

frontend/app/types/dictionary.ts

@@ -1,3 +1,3 @@
 export interface Dictionary<K, T> {
-  [key: K]: T
+  [key: K]: T;
 }

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[];
+}

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,
     }),
   },
 });

frontend/content/en/index.md

@@ -0,0 +1,12 @@
+---
+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.

frontend/content/en/resume.json

@@ -0,0 +1,66 @@
+{
+  "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)"]
+}

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++"]
+}

frontend/content/en/vocal-synthesis.md

@@ -0,0 +1,17 @@
+---
+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
+:::

frontend/content/fr/index.md

@@ -0,0 +1,12 @@
+---
+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.

frontend/content/fr/resume.json

@@ -0,0 +1,66 @@
+{
+  "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)"]
+}

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++"]
+}

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
+:::

frontend/i18n/locales/en.json

@@ -4,23 +4,35 @@
     "langSwitch": "Language"
   },
   "menu": {
-    "name": "Menu"
+    "name": "Menu",
+    "language": "Language Selector",
+    "theme": "Theme Selector"
   },
   "theme": {
     "name": "theme",
     "dark": "Dark",
     "light": "Light",
-    "system": "System"
+    "system": "Auto"
   },
   "pages": {
     "home": {
       "name": "Home"
     },
     "resume": {
-      "name": "Resume"
+      "name": "Resume",
+      "description": "",
+      "experience": "Experience",
+      "education": "Education",
+      "tools": "Tools",
+      "devops": "Devops Tools",
+      "os": "Operating Systems",
+      "programmingLanguages": "Programming Languages",
+      "frameworks": "Frameworks"
     },
     "vocal-synthesis": {
-      "name": "Vocal Synthesis"
+      "name": "Vocal Synthesis",
+      "projects": "Key Projects",
+      "tools": "Tools"
     },
     "languages": {
       "name": "Languages & Worldbuilding"
@@ -31,7 +43,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"
     }
   }
 }

frontend/i18n/locales/fr.json

@@ -4,23 +4,35 @@
     "langSwitch": "Language"
   },
   "menu": {
-    "name": "Menu"
+    "name": "Menu",
+    "language": "Choix de la langue",
+    "theme": "Thème du site web"
   },
   "theme": {
     "name": "Thème",
     "dark": "Sombre",
     "light": "Clair",
-    "system": "Système"
+    "system": "Auto"
   },
   "pages": {
     "home": {
       "name": "Accueil"
     },
     "resume": {
-      "name": "CV"
+      "name": "CV",
+      "description": "",
+      "experience": "Expérience",
+      "education": "Éducation",
+      "tools": "Outils",
+      "devops": "Outils Devops",
+      "os": "Systèmes d’exploitation",
+      "programmingLanguages": "Langages de programmation",
+      "frameworks": "Frameworks"
     },
     "vocal-synthesis": {
-      "name": "Synthèse Vocale"
+      "name": "Synthèse Vocale",
+      "projects": "Projets principaux",
+      "tools": "Outils"
     },
     "languages": {
       "name": "Langues et Univers Fictifs"
@@ -31,7 +43,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"
     }
   }
 }

frontend/nuxt.config.ts

@@ -13,7 +13,6 @@ export default defineNuxtConfig({
     '@nuxt/test-utils',
     '@nuxt/ui',
     '@nuxt/content',
-    '@vueuse/nuxt',
     '@nuxtjs/i18n',
     '@nuxtjs/turnstile',
     '@nuxtjs/device',
@@ -34,7 +33,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',
@@ -54,7 +53,10 @@ export default defineNuxtConfig({
   },
   icon: {
     serverBundle: {
-      collections: ['material-symbols']
+      collections: ['material-symbols', 'mdi']
+    },
+    clientBundle: {
+      scan: true,
     }
   },
   postcss: {
@@ -71,5 +73,8 @@ export default defineNuxtConfig({
     turnstile: {
       secretKey: '', // Overriden by NUXT_TURNSTILE_SECRET_KEY
     },
+    public: {
+      apiBase: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:3100/api',
+    }
   },
 });

frontend/package.json

@@ -2,13 +2,17 @@
   "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 .",
+    "format": "prettier --write app/ i18n/ content/",
+    "format-check": "prettier --check app/ i18n/ content/"
   },
   "dependencies": {
     "@nuxt/content": "3.8.0",
@@ -23,8 +27,6 @@
     "@nuxtjs/device": "3.2.4",
     "@nuxtjs/tailwindcss": "7.0.0-beta.0",
     "@nuxtjs/turnstile": "1.1.1",
-    "@vueuse/core": "^14.0.0",
-    "@vueuse/nuxt": "14.0.0",
     "better-sqlite3": "^12.4.1",
     "eslint": "^9.39.1",
     "nitropack": "^2.12.9",
@@ -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",
@@ -45,5 +48,10 @@
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.17",
     "zod": "^4.1.12"
+  },
+  "pnpm": {
+    "overrides": {
+      "sharp": "0.33.4"
+    }
   }
 }