Moved json data to own component

Updated astro
Added matomo script
2026-07-13 21:30:00 +02:00 · 2026-07-13 21:00:47 +02:00 · 2026-07-10 23:22:52 +02:00 · 2026-07-09 19:13:58 +02:00
7 changed files with 413 additions and 541 deletions
--- a/README.md
+++ b/README.md
@@ -1,54 +1,2 @@
-# Astro Starter Kit: Basics
-
-```
-npm create astro@latest -- --template basics
-```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:3000`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+# Personal portfolio
+Showcasing my various works. Built with astro.
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
    "@astrojs/vue": "^7.0.1",
    "@tailwindcss/vite": "^4.3.2",
    "@vueuse/core": "^14.3.0",
-    "astro": "^7.0.6",
+    "astro": "^7.0.7",
    "astro-compressor": "^1.3.0",
    "tailwindcss": "^4.3.2",
    "vue": "^3.5.39"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/HeadSchema.astro
+++ 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>
--- 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="/"
--- 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">
@@ -162,6 +57,24 @@ const websiteDomain = "alexcreates.fr"
    <meta name="twitter:domain" content={websiteDomain} />

    <meta property="og:type" content="website" />
+
+    <HeadSchema />
+
+    <!-- Matomo -->
+    <script is:inline>
+      var _paq = window._paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="//stats.alexcreates.fr/";
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
+        _paq.push(['setSiteId', '1']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
 	</head>

 	<body class="h-screen relative bg-background text-body px-3 md:px-12 overflow-hidden">
--- 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,23 @@ 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/"
-              }
-            ]
-          }
-        ]
-      }
+    <HeadSchema />
+
+    <!-- Matomo -->
+    <script is:inline>
+      var _paq = window._paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="//stats.alexcreates.fr/";
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
+        _paq.push(['setSiteId', '1']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+      })();
    </script>
+    <!-- End Matomo Code -->
 	</head>

 	<body class="h-screen relative bg-slate-950 text-white">
Author	SHA1	Message	Date
Alexis	81ef376eca	Moved json data to own component	2026-07-13 21:30:00 +02:00
Alexis	103b9ea1d8	Updated astro	2026-07-13 21:00:47 +02:00
Alexis	8d35577182	Added matomo script	2026-07-10 23:22:52 +02:00
Alexis	b174f22626	Hotfix : Changed readme	2026-07-09 19:13:58 +02:00