From 7f767154b36b0bdd67e0c6f088d5b6252fcb6417 Mon Sep 17 00:00:00 2001
From: kayjaydee <killian.dalcin@gmail.com>
Date: Wed, 8 Apr 2026 16:25:13 +0200
Subject: [PATCH] feat(02-03): add per-route SEO metadata and JSON-LD to all
 page stubs

- useSeoMeta() with localized title/description/og tags on all 6 pages
- Homepage JSON-LD with Person + ProfessionalService schema
- og:image absolute URL on every page
- Stub templates with max-w-7xl wrapper and h1
---
 app/pages/about.vue     | 21 ++++++++++++++++
 app/pages/contact.vue   | 21 ++++++++++++++++
 app/pages/fiverr.vue    | 21 ++++++++++++++++
 app/pages/formation.vue | 21 ++++++++++++++++
 app/pages/index.vue     | 54 ++++++++++++++++++++++++++++++++++++++---
 app/pages/projects.vue  | 21 ++++++++++++++++
 6 files changed, 156 insertions(+), 3 deletions(-)
 create mode 100644 app/pages/about.vue
 create mode 100644 app/pages/contact.vue
 create mode 100644 app/pages/fiverr.vue
 create mode 100644 app/pages/formation.vue
 create mode 100644 app/pages/projects.vue

diff --git a/app/pages/about.vue b/app/pages/about.vue
new file mode 100644
index 0000000..da9f7dc
--- /dev/null
+++ b/app/pages/about.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useSeoMeta({
+  title: () => t('seo.about.title'),
+  description: () => t('seo.about.description'),
+  ogTitle: () => t('seo.about.title'),
+  ogDescription: () => t('seo.about.description'),
+  ogImage: 'https://killiandalcin.fr/og-image.png',
+  ogImageWidth: 1200,
+  ogImageHeight: 630,
+  ogType: 'website',
+})
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <h1 class="text-2xl font-bold">{{ t('nav.about') }}</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-4">Phase 3 content placeholder</p>
+  </div>
+</template>
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
new file mode 100644
index 0000000..40efc6c
--- /dev/null
+++ b/app/pages/contact.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useSeoMeta({
+  title: () => t('seo.contact.title'),
+  description: () => t('seo.contact.description'),
+  ogTitle: () => t('seo.contact.title'),
+  ogDescription: () => t('seo.contact.description'),
+  ogImage: 'https://killiandalcin.fr/og-image.png',
+  ogImageWidth: 1200,
+  ogImageHeight: 630,
+  ogType: 'website',
+})
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <h1 class="text-2xl font-bold">{{ t('nav.contact') }}</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-4">Phase 3 content placeholder</p>
+  </div>
+</template>
diff --git a/app/pages/fiverr.vue b/app/pages/fiverr.vue
new file mode 100644
index 0000000..5fcae1b
--- /dev/null
+++ b/app/pages/fiverr.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useSeoMeta({
+  title: () => t('seo.fiverr.title'),
+  description: () => t('seo.fiverr.description'),
+  ogTitle: () => t('seo.fiverr.title'),
+  ogDescription: () => t('seo.fiverr.description'),
+  ogImage: 'https://killiandalcin.fr/og-image.png',
+  ogImageWidth: 1200,
+  ogImageHeight: 630,
+  ogType: 'website',
+})
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <h1 class="text-2xl font-bold">{{ t('nav.fiverr') }}</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-4">Phase 3 content placeholder</p>
+  </div>
+</template>
diff --git a/app/pages/formation.vue b/app/pages/formation.vue
new file mode 100644
index 0000000..83a1c5d
--- /dev/null
+++ b/app/pages/formation.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useSeoMeta({
+  title: () => t('seo.formation.title'),
+  description: () => t('seo.formation.description'),
+  ogTitle: () => t('seo.formation.title'),
+  ogDescription: () => t('seo.formation.description'),
+  ogImage: 'https://killiandalcin.fr/og-image.png',
+  ogImageWidth: 1200,
+  ogImageHeight: 630,
+  ogType: 'website',
+})
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <h1 class="text-2xl font-bold">{{ t('nav.formation') }}</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-4">Phase 3 content placeholder</p>
+  </div>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 6fc73a5..0a67924 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,6 +1,54 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useSeoMeta({
+  title: () => t('seo.home.title'),
+  description: () => t('seo.home.description'),
+  ogTitle: () => t('seo.home.title'),
+  ogDescription: () => t('seo.home.description'),
+  ogImage: 'https://killiandalcin.fr/og-image.png',
+  ogImageWidth: 1200,
+  ogImageHeight: 630,
+  ogType: 'website',
+})
+
+useHead({
+  script: [
+    {
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@graph': [
+          {
+            '@type': 'Person',
+            name: 'Killian Dalcin',
+            url: 'https://killiandalcin.fr',
+            jobTitle: 'Developpeur Full Stack Freelance',
+            email: 'contact@killiandalcin.fr',
+            sameAs: [
+              'https://linkedin.com/in/killian-dal-cin',
+              'https://www.fiverr.com/users/mr_kayjaydee',
+              'https://gitea.kamisama.ovh/kayjaydee',
+            ],
+          },
+          {
+            '@type': 'ProfessionalService',
+            name: 'Killian Dalcin - Developpeur Full Stack',
+            url: 'https://killiandalcin.fr',
+            logo: 'https://killiandalcin.fr/images/logo.webp',
+            priceRange: '$$$',
+            areaServed: 'Worldwide',
+          },
+        ],
+      }),
+    },
+  ],
+})
+</script>
+
 <template>
-  <div>
-    <h1>Portfolio Killian Dalcin</h1>
-    <p>Nuxt 4 Foundation</p>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <h1 class="text-2xl font-bold">{{ t('nav.home') }}</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-4">Phase 3 content placeholder</p>
   </div>
 </template>
diff --git a/app/pages/projects.vue b/app/pages/projects.vue
new file mode 100644
index 0000000..6b2413f
--- /dev/null
+++ b/app/pages/projects.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useSeoMeta({
+  title: () => t('seo.projects.title'),
+  description: () => t('seo.projects.description'),
+  ogTitle: () => t('seo.projects.title'),
+  ogDescription: () => t('seo.projects.description'),
+  ogImage: 'https://killiandalcin.fr/og-image.png',
+  ogImageWidth: 1200,
+  ogImageHeight: 630,
+  ogType: 'website',
+})
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <h1 class="text-2xl font-bold">{{ t('nav.projects') }}</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-4">Phase 3 content placeholder</p>
+  </div>
+</template>