From 81ef376ecad1c786852f1d2fe2d5f51c2dee5651 Mon Sep 17 00:00:00 2001
From: Alexis <alexis.pele@pm.me>
Date: Mon, 13 Jul 2026 21:30:00 +0200
Subject: [PATCH] Moved json data to own component

---
 src/components/HeadSchema.astro | 107 +++++++++++++++++++++++++++++++
 src/components/Navbar.astro     |   2 +-
 src/layouts/HomeLayout.astro    | 109 +-------------------------------
 src/layouts/Layout.astro        | 109 +-------------------------------
 4 files changed, 113 insertions(+), 214 deletions(-)
 create mode 100644 src/components/HeadSchema.astro

diff --git a/src/components/HeadSchema.astro b/src/components/HeadSchema.astro
new file mode 100644
index 0000000..4284778
--- /dev/null
+++ b/src/components/HeadSchema.astro
@@ -0,0 +1,107 @@
+<script type="application/ld+json" is:inline>
+  {
+    "@context": "https://schema.org",
+    "@graph": [
+      {
+        "@type": "Person",
+        "email": "contact@alexcreates.fr",
+        "jobTitle": "Front-end engineer",
+        "name": "Alexis Pelé",
+        "url": "https://agence-polux.fr/",
+        "description": "Front-end engineer specializing in TypeScript and Vue.js, building performant, accessible web applications.",
+        "sameAs": [
+          "https://gitea.peacock-wyrm.ts.net/Joururi",
+          "https://fr.linkedin.com/in/alexis-pel%C3%A9-b27958159",
+          "https://github.com/AlexisNP"
+        ],
+        "knowsAbout": [
+          "TypeScript",
+          "Vue.js",
+          "Nuxt.js",
+          "JavaScript",
+          "Front-End Development",
+          "Web Performance Optimization",
+          "REST APIs",
+          "Pinia",
+          "Vite",
+          "Docker",
+          "Docker Composer",
+          "Angular",
+          "PHP",
+          "Wordpress",
+          "Aria",
+          "Accessibility",
+          "Tailscale"
+        ],
+        "knowsLanguage": [
+          {
+            "@type": "Language",
+            "name": "French",
+            "alternateName": "fr"
+          },
+          {
+            "@type": "Language",
+            "name": "English",
+            "alternateName": "en"
+          }
+        ],
+        "worksFor": {
+          "@type": "Organization",
+          "name": "Agence Polux",
+          "url": "https://agence-polux.fr/"
+        },
+        "nationality": {
+          "@type": "Country",
+          "name": "France"
+        },
+        "pronouns": "he/him"
+      },
+      {
+        "@type": "ItemList",
+        "@id": "https://alexcreates.fr/#projects",
+        "name": "Featured Projects",
+        "itemListElement": [
+          {
+            "@type": "ListItem",
+            "position": 1,
+            "item": {
+              "@type": "CreativeWork",
+              "name": "Leim Maps",
+              "description": "A Vue 3 + TypeScript application for X.",
+              "url": "https://maps.alexcreates.fr",
+              "sameAs": "https://gitea.peacock-wyrm.ts.net/Joururi/leim-maps",
+              "image": "https://alexcreates.fr/images/project-one.jpg",
+              "creator": {
+                "@id": "https://alexcreates.fr/#person"
+              },
+              "keywords": "Vue 3, TypeScript, Astro, Vite, Leaflet"
+            }
+          }
+        ]
+      },
+      {
+        "@type": "WebSite",
+        "@id": "https://alexcreates.fr/#website",
+        "url": "https://alexcreates.fr",
+        "name": "Alexis Pelé | Front-End Engineer",
+        "description": "Portfolio of Alexis Pelé, a front-end engineer.",
+        "publisher": {
+          "@id": "https://alexcreates.fr/#person"
+        },
+        "inLanguage": "en-US"
+      },
+      {
+        "@type": "BreadcrumbList",
+        "@id": "https://alexcreates.fr/#breadcrumb",
+        "itemListElement": [
+          {
+            "@type": "ListItem",
+            "position": 1,
+            "name": "Home",
+            "item": "https://alexcreates.fr/"
+          }
+        ]
+      }
+    ]
+  }
+</script>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index f4015dc..f4c070e 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -20,7 +20,7 @@ const onHome = Astro.url.pathname === "/"
   class="absolute top-0 left-0 pt-6 w-full z-10"
 >
   <nav class="container text-[.8em]" aria-label="Primary">
-    <menu class="px-6 py-2 bg-slate-900/50 rounded-xl backdrop-blur flex gap-6">
+    <menu class="px-6 py-2 bg-slate-800/40 rounded-xl backdrop-blur flex gap-6">
       <li>
         <a
           href="/"
diff --git a/src/layouts/HomeLayout.astro b/src/layouts/HomeLayout.astro
index b5966f6..0379465 100644
--- a/src/layouts/HomeLayout.astro
+++ b/src/layouts/HomeLayout.astro
@@ -4,6 +4,7 @@ import '../../assets/css/main.css'
 import BgGrid from '../components/BgGrid.astro'
 import HeadFavicon from './HeadFavicon.astro'
 import Navbar from "../components/Navbar.astro";
+import HeadSchema from '../components/HeadSchema.astro';
 interface Props {
 	title?: string
   description?: string
@@ -31,112 +32,6 @@ const websiteDomain = "alexcreates.fr"
 <html lang="en">
 	<head>
     <title>{ renderedTitle }</title>
-    <script type="application/ld+json">
-      {
-        "@context": "https://schema.org",
-        "@graph": [
-          {
-            "@type": "Person",
-            "email": "contact@alexcreates.fr",
-            "jobTitle": "Front-end engineer",
-            "name": "Alexis Pelé",
-            "url": "https://alexcreates.fr/",
-            "description": "Front-end engineer specializing in TypeScript and Vue.js, building performant, accessible web applications.",
-            "sameAs": [
-              "https://gitea.peacock-wyrm.ts.net/Joururi",
-              "https://fr.linkedin.com/in/alexis-pel%C3%A9-b27958159",
-              "https://github.com/AlexisNP"
-            ],
-            "knowsAbout": [
-              "TypeScript",
-              "Vue.js",
-              "Nuxt.js",
-              "JavaScript",
-              "Front-End Development",
-              "Web Performance Optimization",
-              "REST APIs",
-              "Pinia",
-              "Vite",
-              "Docker",
-              "Docker Composer",
-              "Angular",
-              "PHP",
-              "Wordpress",
-              "Aria",
-              "Accessibility"
-            ],
-            "knowsLanguage": [
-              {
-                "@type": "Language",
-                "name": "French",
-                "alternateName": "fr"
-              },
-              {
-                "@type": "Language",
-                "name": "English",
-                "alternateName": "en"
-              }
-            ],
-            "worksFor": {
-              "@type": "Organization",
-              "name": "Agence Polux",
-              "url": "https://agence-polux.fr/"
-            },
-            "nationality": {
-              "@type": "Country",
-              "name": "France"
-            },
-            "pronouns": "he/him"
-          },
-          {
-            "@type": "ItemList",
-            "@id": "https://alexcreates.fr/#projects",
-            "name": "Featured Projects",
-            "itemListElement": [
-              {
-                "@type": "ListItem",
-                "position": 1,
-                "item": {
-                  "@type": "CreativeWork",
-                  "name": "Leim Maps",
-                  "description": "A Vue 3 + TypeScript application for X.",
-                  "url": "https://maps.alexcreates.fr",
-                  "sameAs": "https://gitea.peacock-wyrm.ts.net/Joururi/leim-maps",
-                  "image": "https://alexcreates.fr/images/project-one.jpg",
-                  "creator": {
-                    "@id": "https://alexcreates.fr/#person"
-                  },
-                  "keywords": "Vue 3, TypeScript, Astro, Vite, Leaflet"
-                }
-              }
-            ]
-          },
-          {
-            "@type": "WebSite",
-            "@id": "https://alexcreates.fr/#website",
-            "url": "https://alexcreates.fr",
-            "name": "Alexis Pelé | Front-End Engineer",
-            "description": "Portfolio of Alexis Pelé, a front-end engineer.",
-            "publisher": {
-              "@id": "https://alexcreates.fr/#person"
-            },
-            "inLanguage": "en-US"
-          },
-          {
-            "@type": "BreadcrumbList",
-            "@id": "https://alexcreates.fr/#breadcrumb",
-            "itemListElement": [
-              {
-                "@type": "ListItem",
-                "position": 1,
-                "name": "Home",
-                "item": "https://alexcreates.fr/"
-              }
-            ]
-          }
-        ]
-      }
-    </script>
 
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -163,6 +58,8 @@ const websiteDomain = "alexcreates.fr"
 
     <meta property="og:type" content="website" />
 
+    <HeadSchema />
+
     <!-- Matomo -->
     <script is:inline>
       var _paq = window._paq = window._paq || [];
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b9f85c1..ef36d59 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,6 +4,7 @@ import BgParticles from '../components/BgParticles.astro'
 import BgGrid from '../components/BgGrid.astro'
 import HeadFavicon from './HeadFavicon.astro'
 import Navbar from "../components/Navbar.astro";
+import HeadSchema from '../components/HeadSchema.astro';
 interface Props {
 	title?: string
   description?: string
@@ -53,113 +54,7 @@ const websiteDomain = "alexcreates.fr"
 
     <meta property="og:type" content="website" />
 
-    <script type="application/ld+json">
-      {
-        "@context": "https://schema.org",
-        "@graph": [
-          {
-            "@type": "Person",
-            "email": "contact@alexcreates.fr",
-            "jobTitle": "Front-end engineer",
-            "name": "Alexis Pelé",
-            "url": "https://alexcreates.fr/",
-            "description": "Front-end engineer specializing in TypeScript and Vue.js, building performant, accessible web applications.",
-            "sameAs": [
-              "https://gitea.peacock-wyrm.ts.net/Joururi",
-              "https://fr.linkedin.com/in/alexis-pel%C3%A9-b27958159",
-              "https://github.com/AlexisNP"
-            ],
-            "knowsAbout": [
-              "TypeScript",
-              "Vue.js",
-              "Nuxt.js",
-              "JavaScript",
-              "Front-End Development",
-              "Web Performance Optimization",
-              "REST APIs",
-              "Pinia",
-              "Vite",
-              "Docker",
-              "Docker Composer",
-              "Angular",
-              "PHP",
-              "Wordpress",
-              "Aria",
-              "Accessibility",
-              "Tailscale"
-            ],
-            "knowsLanguage": [
-              {
-                "@type": "Language",
-                "name": "French",
-                "alternateName": "fr"
-              },
-              {
-                "@type": "Language",
-                "name": "English",
-                "alternateName": "en"
-              }
-            ],
-            "worksFor": {
-              "@type": "Organization",
-              "name": "Agence Polux",
-              "url": "https://agence-polux.fr/"
-            },
-            "nationality": {
-              "@type": "Country",
-              "name": "France"
-            },
-            "pronouns": "he/him"
-          },
-          {
-            "@type": "ItemList",
-            "@id": "https://alexcreates.fr/#projects",
-            "name": "Featured Projects",
-            "itemListElement": [
-              {
-                "@type": "ListItem",
-                "position": 1,
-                "item": {
-                  "@type": "CreativeWork",
-                  "name": "Leim Maps",
-                  "description": "A Vue 3 + TypeScript application for X.",
-                  "url": "https://maps.alexcreates.fr",
-                  "sameAs": "https://gitea.peacock-wyrm.ts.net/Joururi/leim-maps",
-                  "image": "https://alexcreates.fr/images/project-one.jpg",
-                  "creator": {
-                    "@id": "https://alexcreates.fr/#person"
-                  },
-                  "keywords": "Vue 3, TypeScript, Astro, Vite, Leaflet"
-                }
-              }
-            ]
-          },
-          {
-            "@type": "WebSite",
-            "@id": "https://alexcreates.fr/#website",
-            "url": "https://alexcreates.fr",
-            "name": "Alexis Pelé | Front-End Engineer",
-            "description": "Portfolio of Alexis Pelé, a front-end engineer.",
-            "publisher": {
-              "@id": "https://alexcreates.fr/#person"
-            },
-            "inLanguage": "en-US"
-          },
-          {
-            "@type": "BreadcrumbList",
-            "@id": "https://alexcreates.fr/#breadcrumb",
-            "itemListElement": [
-              {
-                "@type": "ListItem",
-                "position": 1,
-                "name": "Home",
-                "item": "https://alexcreates.fr/"
-              }
-            ]
-          }
-        ]
-      }
-    </script>
+    <HeadSchema />
 
     <!-- Matomo -->
     <script is:inline>