Hotfix : Changed readme

Merge branch 'dev'
Version bump
2026-07-09 19:13:58 +02:00 · 2026-07-07 22:31:31 +02:00 · 2026-07-07 22:31:26 +02:00 · 2026-07-07 22:30:40 +02:00 · 2026-07-07 22:26:16 +02:00 · 2026-07-07 21:25:29 +02:00
22 changed files with 3293 additions and 3886 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,6 +1,6 @@
 root = true

-[*.vue]
+[*.{vue,astro}]
 charset = utf-8
 indent_style = space
 indent_size = 2
--- 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/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,33 +1,111 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';

-@font-face {
-  font-family: "Inter";
-  src: url("/fonts/Inter.woff2") format("woff2 supports variations"),
-       url("/fonts/Inter.woff2") format("woff2-variations");
-  font-weight: 400 700;
-  font-style: normal;
-  font-display: swap;
+@utility container {
+  margin-inline: auto;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 640px) {
+    max-width: 640px;
+  }
+  @media (width >= 640px) {
+    max-width: 640px;
+  }
+  @media (width >= 760px) {
+    max-width: 760px;
+  }
+  @media (width >= 960px) {
+    max-width: 960px;
+  }
+  @media (width >= 1180px) {
+    max-width: 1180px;
+  }
 }

-@font-face {
-  font-family: "Inter";
-  src: url("/fonts/Inter-Italic.woff2") format("woff2 supports variations"),
-       url("/fonts/Inter-Italic.woff2") format("woff2-variations");
-  font-weight: 400 700;
-  font-style: italic;
-  font-display: swap;
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
 }

-body {
-  font-family:
-    "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  font-weight: 300;
-}
-
-@layer utilities {
-  .flow > * + * {
+@utility flow {
+  & > * + * {
    margin-top: 1em;
  }
 }
+
+@layer utilities {
+  @font-face {
+    font-family: 'Inter';
+    src:
+      url('/fonts/Inter.woff2') format('woff2 supports variations'),
+      url('/fonts/Inter.woff2') format('woff2-variations');
+    font-weight: 400 700;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    src:
+      url('/fonts/Inter-Italic.woff2') format('woff2 supports variations'),
+      url('/fonts/Inter-Italic.woff2') format('woff2-variations');
+    font-weight: 400 700;
+    font-style: italic;
+    font-display: swap;
+  }
+
+  body {
+    font-family:
+      'Inter',
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
+    font-weight: 300;
+  }
+}
+
+@layer base {
+  .link,
+  .content a {
+    color: var(--color-emerald-500);
+    text-decoration: none;
+    text-underline-offset: .25rem;
+
+    &:hover {
+      color: var(--color-emerald-300);
+      text-decoration: underline;
+    }
+  }
+}
+
+@theme {
+    --color-body: var(--color-slate-50);
+    --color-background: var(--color-slate-950);
+    --color-primary: var(--color-emerald-500)
+}
+
+@utility container {
+    padding-inline: 1rem;
+    margin-inline: auto;
+}
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,5 @@
 import { defineConfig } from 'astro/config';
-import tailwind from "@astrojs/tailwind";
+import tailwind from "@tailwindcss/vite";

 import sitemap from '@astrojs/sitemap';

@@ -12,8 +12,12 @@ export default defineConfig({
  prefetch: true,
  site: "https://alexcreates.fr",
  integrations: [
-    tailwind({ applyBaseStyles: false }),
    sitemap(),
    compressor(),
-  ]
+  ],
+  vite: {
+    plugins: [
+      tailwind()
+    ]
+  }
 });
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "alexis-portfolio",
  "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
@@ -10,18 +10,16 @@
    "astro": "astro"
  },
  "dependencies": {
-    "@astrojs/sitemap": "^3.4.1",
-    "@astrojs/tailwind": "^6.0.2",
-    "@astrojs/vue": "^5.1.0",
-    "@vueuse/core": "^13.3.0",
-    "astro": "^5.9.2",
-    "astro-compressor": "^1.0.0",
-    "scrambling-text": "^1.2.0",
-    "swiper": "^11.2.8",
-    "tailwindcss": "^3.4.17",
-    "vue": "^3.5.16"
+    "@astrojs/sitemap": "^3.7.3",
+    "@astrojs/vue": "^7.0.1",
+    "@tailwindcss/vite": "^4.3.2",
+    "@vueuse/core": "^14.3.0",
+    "astro": "^7.0.6",
+    "astro-compressor": "^1.3.0",
+    "tailwindcss": "^4.3.2",
+    "vue": "^3.5.39"
  },
  "devDependencies": {
-    "sass": "^1.89.2"
+    "sass": "^1.101.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,9 @@
+allowBuilds:
+  '@parcel/watcher': true
+  esbuild: true
+  sharp: true
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - '@tailwindcss/oxide'
+  - esbuild
+  - sharp
--- a/src/components/BgGrid.astro
+++ b/src/components/BgGrid.astro
@@ -0,0 +1,31 @@
+<div
+  id="grid-bg-wrapper"
+  class="contrast-more:hidden absolute inset-0 -z-10 isolate grid place-items-center pointer-events-none"
+>
+  <div id="grid-bg-inner" class="col-start-1 row-start-1 w-full h-full">
+    <svg
+      id="grid-bg"
+      class="  opacity-50" xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <pattern id="grid" width="38" height="38" x="19" y="19" patternUnits="userSpaceOnUse">
+          <path d="M 100 0 L 0 0 0 38" class="stroke-emerald-500 contrast-more:stroke-emerald-700" fill="none" stroke-width="1"/>
+        </pattern>
+      </defs>
+
+      <rect width="100%" height="100%" fill="url(#grid)" />
+    </svg>
+  </div>
+</div>
+
+<style>
+  #grid-bg-inner {
+    overflow: hidden;
+  }
+  #grid-bg {
+    width: 100%;
+    height: 100%;
+    transform: scaleY(0.7) skewX(-24deg) skewY(12deg);
+    mask-image: radial-gradient(circle at center, black 0%, transparent 60%)
+  }
+</style>
--- a/src/components/home/BgParticles.astro
+++ b/src/components/home/BgParticles.astro
@@ -18,4 +18,4 @@
      background: radial-gradient(circle, #020617 2%, transparent 20%);
    }
  }
-</style>
+</style>
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -10,7 +10,7 @@ const { variant = 'secondary', glow = false, href } = Astro.props;

 {href && (
  <a
-    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4"
+    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-4"
    href={href}
    target="_blank"
    class:list={
@@ -28,7 +28,7 @@ const { variant = 'secondary', glow = false, href } = Astro.props;
 )}
 {!href && (
  <button
-    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4"
+    class="relative py-2 px-7 flex items-center gap-[0.5ch] rounded-[100vmax] text-[1em] transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-4"
    class:list={
      [
        {
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,7 +1,50 @@
-<div class="p-3 text-slate-200 bg-slate-900 border-[1px] border-slate-800 rounded">
-  <div class="flex items-center gap-2">
-    <slot name="icon" />
+---
+import { Image } from 'astro:assets'

-    <slot name="heading" />
+interface Props {
+  imageCover?: string
+  imageHeight?: number
+  imageWidth?: number
+  imageLoading?: "lazy" | "eager"
+}
+
+const { imageCover, imageHeight, imageWidth, imageLoading = "lazy" } = Astro.props
+---
+
+<article
+  class="card text-slate-200 bg-slate-900 border border-slate-800 rounded-2xl"
+  class:list={{
+    "p-6": !imageCover,
+    "overflow-hidden": imageCover
+  }}
+>
+  {imageCover && imageHeight && imageWidth &&
+    <figure class="w-full">
+      <Image src={imageCover} height={imageHeight} width={imageWidth} alt={""} loading={imageLoading} class="w-full h-full object-center" />
+    </figure>
+  }
+
+  <div
+    class="grid gap-3"
+    class:list={{
+      "p-6": imageCover
+    }}
+  >
+    <header class="flex items-center gap-2">
+      <slot name="icon" />
+
+      <slot name="heading" />
+    </header>
+
+    <div class="body text-slate-400 flow text-[.9em] max-h-48 overflow-y-auto">
+      <slot name="body" />
+    </div>
  </div>
-</div>
+</article>
+
+<style lang="scss">
+.card {
+  background: hsl(from var(--color-slate-900) h s l / 0.25);
+  backdrop-filter: blur(.5rem);
+}
+</style>
--- a/src/components/Heading.astro
+++ b/src/components/Heading.astro
@@ -1,23 +1,46 @@
 ---
+type HeadingType = 'h0' | 'h1' | 'h2' | 'h3'
+
 interface Props {
-	tag: 'h1' | 'h2' | 'h3';
+	tag: HeadingType
+  style?: HeadingType
 }

-const { tag = "h1" } = Astro.props;
+const { tag = "h1" } = Astro.props
+const { style = tag } = Astro.props
+
+function renderClasses(style: HeadingType) {
+  switch (style) {
+    case 'h0':
+      return "font-heading text-4xl md:text-6xl font-bold"
+    case 'h1':
+    default:
+      return "font-heading text-2xl md:text-4xl font-bold"
+    case 'h2':
+      return "font-heading text-xl md:text-3xl font-bold"
+    case 'h3':
+      return "font-heading text-lg md:text-xl font-bold"
+  }
+}
 ---

+{tag === 'h0' &&
+  <h1 class:list={renderClasses(style)}>
+    <slot name="default" />
+  </h1>
+}
 {tag === 'h1' &&
-  <h1 class="font-heading text-4xl md:text-5xl font-bold">
+  <h1 class:list={renderClasses(style)}>
    <slot name="default" />
  </h1>
 }
 {tag === 'h2' &&
-  <h2 class="font-heading text-xl md:text-3xl font-bold">
+  <h2 class:list={renderClasses(style)}>
    <slot name="default" />
  </h2>
 }
 {tag === 'h3' &&
-  <h3 class="font-heading md:text-xl font-bold">
+  <h3 class:list={renderClasses(style)}>
    <slot name="default" />
  </h3>
 }
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -0,0 +1,58 @@
+---
+interface MenuItem {
+  slug: string
+  label: string
+  to: string
+}
+
+const links: MenuItem[] = [
+  // {
+  //   label: "Projects",
+  //   slug: "projects",
+  //   to: "/projects"
+  // }
+]
+
+const onHome = Astro.url.pathname === "/"
+---
+
+<header
+  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">
+      <li>
+        <a
+          href="/"
+          aria-current={onHome ? "page" : "false"}
+          class="block py-2 underline-offset-4 hover:underline text-body/80 hover:text-body"
+          class:list={
+            {
+              "text-primary/90 hover:text-primary": onHome,
+              "text-body/80 hover:text-body": !onHome
+            }
+          }
+        >
+          Home
+        </a>
+      </li>
+      {links.map((link) => (
+        <li>
+          <a
+            href={link.to}
+            aria-current={ Astro.url.pathname.startsWith(link.to) ? 'page' : 'false' }
+            class="block py-2 underline-offset-4 hover:underline text-body/80 hover:text-body"
+            class:list={
+              {
+                "text-primary/90 hover:text-primary": Astro.url.pathname.startsWith(link.to),
+                "text-body/80 hover:text-body": !Astro.url.pathname.startsWith(link.to)
+              }
+            }
+          >
+            {link.label}
+          </a>
+        </li>
+      ))}
+    </menu>
+  </nav>
+</header>
--- a/src/components/home/Hero.astro
+++ b/src/components/home/Hero.astro
@@ -1,87 +0,0 @@
---
-import Button from "../Button.astro";
-import Heading from "../Heading.astro";
-import BgParticles from "./BgParticles.astro";
-// import HeroVerticalCards from "./HeroVerticalCards.astro";
---
-
-<section id="hero" class="relative h-screen overflow-clip max-w-full">
-  <div class="h-full container grid place-items-center auto-rows-auto">
-    <div class="px-4 max-w-2xl text-center">
-      <Heading tag="h1">
-        Hello, I'm Alexis&nbsp;!&nbsp;👋
-      </Heading>
-
-      <div class="mt-4">
-        <p class="md:text-xl">
-          I'm a front-end engineer from France and all-around web enthusiast.
-        </p>
-      </div>
-
-      <hr class="my-4 w-12 mx-auto border-none h-[.33rem] rounded-[100vmax] bg-gradient-to-b from-emerald-500 to-emerald-600" />
-
-      <div>
-        <p class="md:text-xl">
-          Let's build something cool together&nbsp;:)
-        </p>
-      </div>
-
-      <div class="mt-8 flex items-center justify-center gap-4 md:gap-8">
-        <Button href="https://github.com/AlexisNP" glow variant="primary">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" viewBox="0 0 256 256">
-            <path d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z" />
-          </svg>
-
-          <span>
-            Github
-          </span>
-        </Button>
-
-        <Button href="mailto:contact@alexcreates.fr">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" viewBox="0 0 256 256">
-            <path d="M132,24A100.11,100.11,0,0,0,32,124v84a16,16,0,0,0,16,16h84a100,100,0,0,0,0-200Zm0,184H48V124a84,84,0,1,1,84,84Zm12-80a12,12,0,1,1-12-12A12,12,0,0,1,144,128Zm-44,0a12,12,0,1,1-12-12A12,12,0,0,1,100,128Zm88,0a12,12,0,1,1-12-12A12,12,0,0,1,188,128Z" />
-          </svg>
-
-          <span>
-            Contact
-          </span>
-        </Button>
-      </div>
-    </div>
-  </div>
-
-  <p class="absolute px-4 bottom-8 left-1/2 -translate-x-1/2 opacity-50 text-xs md:text-sm text-center">@2025&nbsp;·&nbsp;Website is currently a WIP&nbsp;;&nbsp;some things may change&nbsp;!</p>
-
-  <div
-    id="grid-bg-wrapper"
-    class="contrast-more:hidden absolute -inset-full -z-10 isolate grid place-items-center pointer-events-none"
-  >
-    <svg
-      id="grid-bg"
-      class="col-start-1 row-start-1 w-full h-full opacity-50" xmlns="http://www.w3.org/2000/svg"
-      style="mask-image: radial-gradient(circle at center, black 0%, black 5%, transparent 28%);"
-    >
-      <defs>
-        <pattern id="grid" width="38" height="38" patternUnits="userSpaceOnUse">
-          <path d="M 100 0 L 0 0 0 38" class="stroke-emerald-500 contrast-more:stroke-emerald-700" fill="none" stroke-width="1"/>
-        </pattern>
-      </defs>
-    
-      <rect width="100%" height="100%" fill="url(#grid)" />
-    </svg>
-  </div>
-
-  <BgParticles />
-</section>
-
-<style lang="scss">
-  #grid-bg {
-    transform: scaleY(0.7) skewX(-24deg) skewY(12deg);
-  }
-  
-  @keyframes shape-spin {
-    50% {
-      scale: 1 1.2;
-    }
-  }
-</style>
--- a/src/components/home/HeroVerticalCards.astro
+++ b/src/components/home/HeroVerticalCards.astro
@@ -1,142 +0,0 @@
---
-import Card from "../Card.astro";
---
-
-<div class="absolute inset-y-0 left-4 h-full -z-10 isolate flex gap-4">
-  {[...Array(3)].map((_key, i) => (
-    <div
-      data-slider
-      data-reversed={i % 2 === 0 ? 'true' : 'false'}
-      class="h-full"
-      class:list={{
-        'opacity-25': i === 0,
-        'opacity-10': i === 1,
-        'opacity-5': i === 2,
-      }}
-    >
-      <div class="swiper-wrapper">
-        {[...Array(2)].map(() => (
-          <div class="swiper-slide">
-            <Card>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85 107" class="h-9 w-9 fill-slate-400">
-                <path d="M27.5893 91.1365C22.7555 86.7178 21.3443 77.4335 23.3583 70.7072C26.8503 74.948 31.6888 76.2914 36.7005 77.0497C44.4374 78.2199 52.0358 77.7822 59.2231 74.2459C60.0453 73.841 60.8052 73.3027 61.7036 72.7574C62.378 74.714 62.5535 76.6892 62.3179 78.6996C61.7452 83.5957 59.3086 87.3778 55.4332 90.2448C53.8835 91.3916 52.2437 92.4167 50.6432 93.4979C45.7262 96.8213 44.3959 100.718 46.2435 106.386C46.2874 106.525 46.3267 106.663 46.426 107C43.9155 105.876 42.0817 104.24 40.6844 102.089C39.2086 99.8193 38.5065 97.3081 38.4696 94.5909C38.4511 93.2686 38.4511 91.9345 38.2733 90.6309C37.8391 87.4527 36.3471 86.0297 33.5364 85.9478C30.6518 85.8636 28.37 87.6469 27.7649 90.4554C27.7187 90.6707 27.6517 90.8837 27.5847 91.1341L27.5893 91.1365Z" />
-                <path d="M0 69.5866C0 69.5866 14.3139 62.6137 28.6678 62.6137L39.4901 29.1204C39.8953 27.5007 41.0783 26.3999 42.4139 26.3999C43.7495 26.3999 44.9325 27.5007 45.3377 29.1204L56.1601 62.6137C73.1601 62.6137 84.8278 69.5866 84.8278 69.5866C84.8278 69.5866 60.5145 3.35233 60.467 3.21944C59.7692 1.2612 58.5911 0 57.0029 0H27.8274C26.2392 0 25.1087 1.2612 24.3634 3.21944C24.3108 3.34983 0 69.5866 0 69.5866Z" />
-              </svg>
-            </Card>
-          </div>
-          <div class="swiper-slide">
-            <Card>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="h-9 w-9 fill-slate-400">
-                <path d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z" />
-              </svg>
-            </Card>
-          </div>
-          <div class="swiper-slide">
-            <Card>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-9 w-9 fill-slate-400">
-                <path d="M281.44 397.667H438.32C443.326 397.667 448.118 395.908 452.453 393.427C456.789 390.946 461.258 387.831 463.76 383.533C466.262 379.236 468.002 374.36 468 369.399C467.998 364.437 466.266 359.563 463.76 355.268L357.76 172.947C355.258 168.65 352.201 165.534 347.867 163.053C343.532 160.573 337.325 158.813 332.32 158.813C327.315 158.813 322.521 160.573 318.187 163.053C313.852 165.534 310.795 168.65 308.293 172.947L281.44 219.587L227.733 129.13C225.229 124.834 222.176 120.307 217.84 117.827C213.504 115.346 208.713 115 203.707 115C198.701 115 193.909 115.346 189.573 117.827C185.238 120.307 180.771 124.834 178.267 129.13L46.8267 355.268C44.3208 359.563 44.0022 364.437 44 369.399C43.9978 374.36 44.3246 379.235 46.8267 383.533C49.3288 387.83 53.7979 390.946 58.1333 393.427C62.4688 395.908 67.2603 397.667 72.2667 397.667H171.2C210.401 397.667 238.934 380.082 258.827 346.787L306.88 263.4L332.32 219.587L410.053 352.44H306.88L281.44 397.667ZM169.787 352.44H100.533L203.707 174.36L256 263.4L221.361 323.784C208.151 345.387 193.089 352.44 169.787 352.44Z" />
-              </svg>
-            </Card>
-          </div>
-          <div class="swiper-slide">
-            <Card>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348" class="h-9 w-9 fill-slate-400">
-                <circle cx="0" cy="0" r="2.05" />
-                <g class="stroke-slate-400" stroke-width="1" fill="none">
-                  <ellipse rx="11" ry="4.2" />
-                  <ellipse rx="11" ry="4.2" transform="rotate(60)" />
-                  <ellipse rx="11" ry="4.2" transform="rotate(120)" />
-                </g>
-              </svg>
-            </Card>
-          </div>
-          <div class="swiper-slide">
-            <Card>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 33" class="h-9 w-9 fill-slate-400">
-                <path d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" />
-              </svg>
-            </Card>
-          </div>
-          <div class="swiper-slide">
-            <Card>
-              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 547.8 410.6" class="h-9 w-9 fill-slate-400">
-                <path d="M471.4,236c-19.1,0.1-35.7,4.7-49.6,11.5c-5.1-10.1-10.2-19.1-11.1-25.7c-1-7.7-2.2-12.4-1-21.6  c1.2-9.2,6.6-22.3,6.5-23.3s-1.2-5.7-12.2-5.8c-11-0.1-20.5,2.1-21.6,5c-1.1,2.9-3.2,9.5-4.6,16.3c-1.9,10-22,45.7-33.5,64.4  c-3.7-7.3-6.9-13.7-7.6-18.8c-1-7.7-2.2-12.4-1-21.6c1.2-9.2,6.6-22.3,6.5-23.3c-0.1-1-1.2-5.7-12.2-5.8c-11-0.1-20.5,2.1-21.6,5  c-1.1,2.9-2.3,9.7-4.6,16.3c-2.3,6.6-29,66.2-36,81.6c-3.6,7.9-6.7,14.2-8.9,18.5c0,0,0,0,0,0s-0.1,0.3-0.4,0.8  c-1.9,3.7-3,5.7-3,5.7s0,0,0,0.1c-1.5,2.7-3.1,5.2-3.9,5.2c-0.6,0-1.7-7.2,0.2-17c4-20.7,13.5-52.9,13.4-54c0-0.6,1.8-6.2-6.2-9.1  c-7.8-2.9-10.6,1.9-11.3,1.9c-0.7,0-1.2,1.7-1.2,1.7s8.7-36.2-16.6-36.2c-15.8,0-37.6,17.3-48.4,32.9c-6.8,3.7-21.3,11.6-36.8,20.1  c-5.9,3.3-12,6.6-17.7,9.7c-0.4-0.4-0.8-0.9-1.2-1.3c-30.6-32.7-87.2-55.8-84.8-99.7c0.9-16,6.4-58,108.7-109  C233.9,19,300.9,30.5,312.5,56c16.6,36.4-35.9,104-122.9,113.8c-33.2,3.7-50.6-9.1-55-13.9c-4.6-5-5.3-5.3-7-4.3c-2.8,1.5-1,6,0,8.6  c2.6,6.8,13.3,18.8,31.4,24.7c16,5.2,54.9,8.1,102-10.1c52.7-20.4,93.9-77.1,81.8-124.6C330.7,2,250.7-13.9,175,13  C130,29,81.2,54.2,46.1,87c-41.7,39-48.3,72.9-45.6,87.1c9.7,50.4,79.2,83.2,107,107.5c-1.4,0.8-2.7,1.5-3.8,2.1  c-13.9,6.9-66.9,34.6-80.1,63.9c-15,33.2,2.4,57,13.9,60.2c35.7,9.9,72.4-7.9,92.1-37.3c19.7-29.4,17.3-67.6,8.2-85.1  c-0.1-0.2-0.2-0.4-0.4-0.6c3.6-2.1,7.3-4.3,10.9-6.4c7.1-4.2,14.1-8.1,20.1-11.3c-3.4,9.3-5.9,20.4-7.1,36.4  c-1.5,18.8,6.2,43.2,16.3,52.8c4.5,4.2,9.8,4.3,13.2,4.3c11.8,0,17.1-9.8,23-21.4c7.2-14.2,13.7-30.7,13.7-30.7s-8.1,44.6,13.9,44.6  c8,0,16.1-10.4,19.7-15.7c0,0.1,0,0.1,0,0.1s0.2-0.3,0.6-1c0.8-1.3,1.3-2.1,1.3-2.1s0-0.1,0-0.2c3.2-5.6,10.4-18.3,21.1-39.4  c13.8-27.2,27.1-61.2,27.1-61.2s1.2,8.3,5.3,22.1c2.4,8.1,7.4,17,11.4,25.6c-3.2,4.5-5.2,7-5.2,7s0,0,0.1,0.1  c-2.6,3.4-5.4,7.1-8.5,10.7c-10.9,13-23.9,27.9-25.7,32.2c-2.1,5.1-1.6,8.8,2.4,11.8c2.9,2.2,8.1,2.5,13.4,2.2  c9.8-0.7,16.7-3.1,20.1-4.6c5.3-1.9,11.5-4.8,17.3-9.1c10.7-7.9,17.2-19.2,16.6-34.1c-0.3-8.2-3-16.4-6.3-24.1  c1-1.4,1.9-2.8,2.9-4.2c16.9-24.7,30-51.8,30-51.8s1.2,8.3,5.3,22.1c2,7,6.1,14.6,9.7,22c-15.9,12.9-25.7,27.9-29.2,37.7  c-6.3,18.2-1.4,26.4,7.9,28.3c4.2,0.9,10.2-1.1,14.6-3c5.6-1.8,12.2-4.9,18.5-9.5c10.7-7.9,21-18.9,20.4-33.8  c-0.3-6.8-2.1-13.5-4.6-20c13.5-5.6,30.9-8.7,53.1-6.1c47.6,5.6,57,35.3,55.2,47.8c-1.8,12.5-11.8,19.3-15.1,21.4  c-3.3,2.1-4.4,2.8-4.1,4.3c0.4,2.2,2,2.1,4.8,1.7c3.9-0.7,25-10.1,25.9-33.1C548.9,267.8,520.9,235.7,471.4,236z M104.2,359.8  C88.4,377,66.4,383.5,56.9,378c-10.2-5.9-6.2-31.3,13.2-49.5c11.8-11.1,27-21.4,37.1-27.7c2.3-1.4,5.7-3.4,9.8-5.9  c0.7-0.4,1.1-0.6,1.1-0.6l0,0c0.8-0.5,1.6-1,2.4-1.5C127.6,318.8,120.8,341.7,104.2,359.8z M219.2,281.6c-5.5,13.4-17,47.7-24,45.8  c-6-1.6-9.7-27.6-1.2-53.3c4.3-12.9,13.4-28.3,18.7-34.3c8.6-9.6,18.1-12.8,20.4-8.9C236,236,222.6,273.2,219.2,281.6z M314.1,327  c-2.3,1.2-4.5,2-5.5,1.4c-0.7-0.4,1-2,1-2s11.9-12.8,16.6-18.6c2.7-3.4,5.9-7.4,9.3-11.9c0,0.4,0,0.9,0,1.3  C335.5,312.5,320.7,322.8,314.1,327z M387.3,310.3c-1.7-1.2-1.4-5.2,4.3-17.7c2.2-4.9,7.4-13.1,16.3-21c1,3.2,1.7,6.3,1.6,9.2  C409.4,300.1,395.6,307.3,387.3,310.3z" />
-              </svg>
-            </Card>
-          </div>
-          <div class="swiper-slide">
-            <Card>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-9 w-9 fill-slate-400">
-                <rect height="512" rx="50" width="512" />
-                <rect height="512" rx="50" width="512" />
-                <path class="fill-slate-900" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z" />
-              </svg>
-            </Card>
-          </div>
-          <div class="swiper-slide">
-            <Card>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.52 122.523" class="h-9 w-9 fill-slate-400">
-                <path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z" />
-                <path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z" />
-                <path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z" />
-                <path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z" />
-                <path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z" />
-              </svg>
-            </Card>
-          </div>
-        ))}
-      </div>
-    </div>
-  ))}
-</div>
-
-<script>
-  import Swiper from 'swiper'
-  import { Autoplay } from 'swiper/modules'
-  import type { SwiperOptions } from 'swiper/types'
-
-  const baseOptions: SwiperOptions = {
-    modules: [Autoplay],
-    loop: true,
-    direction: 'vertical',
-    slidesPerView: 'auto',
-    speed: 5000,
-    spaceBetween: 10,
-    allowTouchMove: false,
-    autoplay: {
-      delay: 0,
-    },
-  }
-
-  const reversedOptions: SwiperOptions = {
-    modules: [Autoplay],
-    loop: true,
-    direction: 'vertical',
-    slidesPerView: 'auto',
-    speed: 5000,
-    spaceBetween: 10,
-    allowTouchMove: false,
-    autoplay: {
-      delay: 0,
-      reverseDirection: true,
-    },
-  }
-
-  const swipers = document.querySelectorAll<HTMLElement>('[data-slider]')
-
-  swipers.forEach((swiper) => {
-    const { reversed } = swiper.dataset
-
-    if ( reversed === "true" ) {
-      new Swiper(swiper, reversedOptions)
-    } else {
-      new Swiper(swiper, baseOptions)
-    }
-  });
-</script>
-
-<style lang="scss">
-.swiper-wrapper {
-  transition-timing-function: linear;
-}
-</style>
--- a/src/components/home/Tooling.astro
+++ b/src/components/home/Tooling.astro
@@ -1,165 +0,0 @@
---
-import Card from "../Card.astro";
-import Heading from "../Heading.astro";
---
-
-<section id="tooling" class="grid place-items-center max-w-full py-12">
-  <Heading tag="h2">
-    What I use
-  </Heading>
-
-  <div class="my-6 flex gap-2">
-    <div class="swiper">
-      <div class="swiper-wrapper">
-        <div class="swiper-slide">
-          <Card>
-            <Fragment slot="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85 107" class="h-7 w-7 fill-slate-400">
-                <path d="M27.5893 91.1365C22.7555 86.7178 21.3443 77.4335 23.3583 70.7072C26.8503 74.948 31.6888 76.2914 36.7005 77.0497C44.4374 78.2199 52.0358 77.7822 59.2231 74.2459C60.0453 73.841 60.8052 73.3027 61.7036 72.7574C62.378 74.714 62.5535 76.6892 62.3179 78.6996C61.7452 83.5957 59.3086 87.3778 55.4332 90.2448C53.8835 91.3916 52.2437 92.4167 50.6432 93.4979C45.7262 96.8213 44.3959 100.718 46.2435 106.386C46.2874 106.525 46.3267 106.663 46.426 107C43.9155 105.876 42.0817 104.24 40.6844 102.089C39.2086 99.8193 38.5065 97.3081 38.4696 94.5909C38.4511 93.2686 38.4511 91.9345 38.2733 90.6309C37.8391 87.4527 36.3471 86.0297 33.5364 85.9478C30.6518 85.8636 28.37 87.6469 27.7649 90.4554C27.7187 90.6707 27.6517 90.8837 27.5847 91.1341L27.5893 91.1365Z" />
-                <path d="M0 69.5866C0 69.5866 14.3139 62.6137 28.6678 62.6137L39.4901 29.1204C39.8953 27.5007 41.0783 26.3999 42.4139 26.3999C43.7495 26.3999 44.9325 27.5007 45.3377 29.1204L56.1601 62.6137C73.1601 62.6137 84.8278 69.5866 84.8278 69.5866C84.8278 69.5866 60.5145 3.35233 60.467 3.21944C59.7692 1.2612 58.5911 0 57.0029 0H27.8274C26.2392 0 25.1087 1.2612 24.3634 3.21944C24.3108 3.34983 0 69.5866 0 69.5866Z" />
-              </svg>
-            </Fragment>
-            <Heading tag="h3" slot="heading">
-              Astro
-            </Heading>
-          </Card>
-        </div>
-        <div class="swiper-slide">
-          <Card>
-            <Fragment slot="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="h-7 w-7 fill-slate-400">
-                <path d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z" />
-              </svg>
-            </Fragment>
-            <Heading tag="h3" slot="heading">
-              Vue
-            </Heading>
-          </Card>
-        </div>
-        <div class="swiper-slide">
-          <Card>
-            <Fragment slot="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-7 w-7 fill-slate-400">
-                <path d="M281.44 397.667H438.32C443.326 397.667 448.118 395.908 452.453 393.427C456.789 390.946 461.258 387.831 463.76 383.533C466.262 379.236 468.002 374.36 468 369.399C467.998 364.437 466.266 359.563 463.76 355.268L357.76 172.947C355.258 168.65 352.201 165.534 347.867 163.053C343.532 160.573 337.325 158.813 332.32 158.813C327.315 158.813 322.521 160.573 318.187 163.053C313.852 165.534 310.795 168.65 308.293 172.947L281.44 219.587L227.733 129.13C225.229 124.834 222.176 120.307 217.84 117.827C213.504 115.346 208.713 115 203.707 115C198.701 115 193.909 115.346 189.573 117.827C185.238 120.307 180.771 124.834 178.267 129.13L46.8267 355.268C44.3208 359.563 44.0022 364.437 44 369.399C43.9978 374.36 44.3246 379.235 46.8267 383.533C49.3288 387.83 53.7979 390.946 58.1333 393.427C62.4688 395.908 67.2603 397.667 72.2667 397.667H171.2C210.401 397.667 238.934 380.082 258.827 346.787L306.88 263.4L332.32 219.587L410.053 352.44H306.88L281.44 397.667ZM169.787 352.44H100.533L203.707 174.36L256 263.4L221.361 323.784C208.151 345.387 193.089 352.44 169.787 352.44Z" />
-              </svg>
-            </Fragment>
-            <Heading tag="h3" slot="heading">
-              Nuxt
-            </Heading>
-          </Card>
-        </div>
-        <div class="swiper-slide">
-          <Card>
-            <Fragment slot="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348" class="h-7 w-7 fill-slate-400">
-                <circle cx="0" cy="0" r="2.05" />
-                <g class="stroke-slate-400" stroke-width="1" fill="none">
-                  <ellipse rx="11" ry="4.2" />
-                  <ellipse rx="11" ry="4.2" transform="rotate(60)" />
-                  <ellipse rx="11" ry="4.2" transform="rotate(120)" />
-                </g>
-              </svg>
-            </Fragment>
-            <Heading tag="h3" slot="heading">
-              React
-            </Heading>
-          </Card>
-        </div>
-        <div class="swiper-slide">
-          <Card>
-            <Fragment slot="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 33" class="h-7 w-7 fill-slate-400">
-                <path d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" />
-              </svg>
-            </Fragment>
-            <Heading tag="h3" slot="heading">
-              Tailwind
-            </Heading>
-          </Card>
-        </div>
-        <div class="swiper-slide">
-          <Card>
-            <Fragment slot="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 547.8 410.6" class="h-7 w-7 fill-slate-400">
-                <path d="M471.4,236c-19.1,0.1-35.7,4.7-49.6,11.5c-5.1-10.1-10.2-19.1-11.1-25.7c-1-7.7-2.2-12.4-1-21.6  c1.2-9.2,6.6-22.3,6.5-23.3s-1.2-5.7-12.2-5.8c-11-0.1-20.5,2.1-21.6,5c-1.1,2.9-3.2,9.5-4.6,16.3c-1.9,10-22,45.7-33.5,64.4  c-3.7-7.3-6.9-13.7-7.6-18.8c-1-7.7-2.2-12.4-1-21.6c1.2-9.2,6.6-22.3,6.5-23.3c-0.1-1-1.2-5.7-12.2-5.8c-11-0.1-20.5,2.1-21.6,5  c-1.1,2.9-2.3,9.7-4.6,16.3c-2.3,6.6-29,66.2-36,81.6c-3.6,7.9-6.7,14.2-8.9,18.5c0,0,0,0,0,0s-0.1,0.3-0.4,0.8  c-1.9,3.7-3,5.7-3,5.7s0,0,0,0.1c-1.5,2.7-3.1,5.2-3.9,5.2c-0.6,0-1.7-7.2,0.2-17c4-20.7,13.5-52.9,13.4-54c0-0.6,1.8-6.2-6.2-9.1  c-7.8-2.9-10.6,1.9-11.3,1.9c-0.7,0-1.2,1.7-1.2,1.7s8.7-36.2-16.6-36.2c-15.8,0-37.6,17.3-48.4,32.9c-6.8,3.7-21.3,11.6-36.8,20.1  c-5.9,3.3-12,6.6-17.7,9.7c-0.4-0.4-0.8-0.9-1.2-1.3c-30.6-32.7-87.2-55.8-84.8-99.7c0.9-16,6.4-58,108.7-109  C233.9,19,300.9,30.5,312.5,56c16.6,36.4-35.9,104-122.9,113.8c-33.2,3.7-50.6-9.1-55-13.9c-4.6-5-5.3-5.3-7-4.3c-2.8,1.5-1,6,0,8.6  c2.6,6.8,13.3,18.8,31.4,24.7c16,5.2,54.9,8.1,102-10.1c52.7-20.4,93.9-77.1,81.8-124.6C330.7,2,250.7-13.9,175,13  C130,29,81.2,54.2,46.1,87c-41.7,39-48.3,72.9-45.6,87.1c9.7,50.4,79.2,83.2,107,107.5c-1.4,0.8-2.7,1.5-3.8,2.1  c-13.9,6.9-66.9,34.6-80.1,63.9c-15,33.2,2.4,57,13.9,60.2c35.7,9.9,72.4-7.9,92.1-37.3c19.7-29.4,17.3-67.6,8.2-85.1  c-0.1-0.2-0.2-0.4-0.4-0.6c3.6-2.1,7.3-4.3,10.9-6.4c7.1-4.2,14.1-8.1,20.1-11.3c-3.4,9.3-5.9,20.4-7.1,36.4  c-1.5,18.8,6.2,43.2,16.3,52.8c4.5,4.2,9.8,4.3,13.2,4.3c11.8,0,17.1-9.8,23-21.4c7.2-14.2,13.7-30.7,13.7-30.7s-8.1,44.6,13.9,44.6  c8,0,16.1-10.4,19.7-15.7c0,0.1,0,0.1,0,0.1s0.2-0.3,0.6-1c0.8-1.3,1.3-2.1,1.3-2.1s0-0.1,0-0.2c3.2-5.6,10.4-18.3,21.1-39.4  c13.8-27.2,27.1-61.2,27.1-61.2s1.2,8.3,5.3,22.1c2.4,8.1,7.4,17,11.4,25.6c-3.2,4.5-5.2,7-5.2,7s0,0,0.1,0.1  c-2.6,3.4-5.4,7.1-8.5,10.7c-10.9,13-23.9,27.9-25.7,32.2c-2.1,5.1-1.6,8.8,2.4,11.8c2.9,2.2,8.1,2.5,13.4,2.2  c9.8-0.7,16.7-3.1,20.1-4.6c5.3-1.9,11.5-4.8,17.3-9.1c10.7-7.9,17.2-19.2,16.6-34.1c-0.3-8.2-3-16.4-6.3-24.1  c1-1.4,1.9-2.8,2.9-4.2c16.9-24.7,30-51.8,30-51.8s1.2,8.3,5.3,22.1c2,7,6.1,14.6,9.7,22c-15.9,12.9-25.7,27.9-29.2,37.7  c-6.3,18.2-1.4,26.4,7.9,28.3c4.2,0.9,10.2-1.1,14.6-3c5.6-1.8,12.2-4.9,18.5-9.5c10.7-7.9,21-18.9,20.4-33.8  c-0.3-6.8-2.1-13.5-4.6-20c13.5-5.6,30.9-8.7,53.1-6.1c47.6,5.6,57,35.3,55.2,47.8c-1.8,12.5-11.8,19.3-15.1,21.4  c-3.3,2.1-4.4,2.8-4.1,4.3c0.4,2.2,2,2.1,4.8,1.7c3.9-0.7,25-10.1,25.9-33.1C548.9,267.8,520.9,235.7,471.4,236z M104.2,359.8  C88.4,377,66.4,383.5,56.9,378c-10.2-5.9-6.2-31.3,13.2-49.5c11.8-11.1,27-21.4,37.1-27.7c2.3-1.4,5.7-3.4,9.8-5.9  c0.7-0.4,1.1-0.6,1.1-0.6l0,0c0.8-0.5,1.6-1,2.4-1.5C127.6,318.8,120.8,341.7,104.2,359.8z M219.2,281.6c-5.5,13.4-17,47.7-24,45.8  c-6-1.6-9.7-27.6-1.2-53.3c4.3-12.9,13.4-28.3,18.7-34.3c8.6-9.6,18.1-12.8,20.4-8.9C236,236,222.6,273.2,219.2,281.6z M314.1,327  c-2.3,1.2-4.5,2-5.5,1.4c-0.7-0.4,1-2,1-2s11.9-12.8,16.6-18.6c2.7-3.4,5.9-7.4,9.3-11.9c0,0.4,0,0.9,0,1.3  C335.5,312.5,320.7,322.8,314.1,327z M387.3,310.3c-1.7-1.2-1.4-5.2,4.3-17.7c2.2-4.9,7.4-13.1,16.3-21c1,3.2,1.7,6.3,1.6,9.2  C409.4,300.1,395.6,307.3,387.3,310.3z" />
-              </svg>
-            </Fragment>
-            <Heading tag="h3" slot="heading">
-              Scss
-            </Heading>
-          </Card>
-        </div>
-        <div class="swiper-slide">
-          <Card>
-            <Fragment slot="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-7 w-7 fill-slate-400">
-                <rect height="512" rx="50" width="512" />
-                <rect height="512" rx="50" width="512" />
-                <path class="fill-slate-900" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z" />
-              </svg>
-            </Fragment>
-            <Heading tag="h3" slot="heading">
-              Typescript
-            </Heading>
-          </Card>
-        </div>
-        <div class="swiper-slide">
-          <Card>
-            <Fragment slot="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.52 122.523" class="h-7 w-7 fill-slate-400">
-                <path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z" />
-                <path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z" />
-                <path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z" />
-                <path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z" />
-                <path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z" />
-              </svg>
-            </Fragment>
-            <Heading tag="h3" slot="heading">
-              Wordpress
-            </Heading>
-          </Card>
-        </div>
-        <div class="swiper-slide">
-          <Card>
-            <Fragment slot="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 25" class="h-7 w-7 fill-slate-400">
-                <path d="M6.95 14.66c.64-.19 1.68-.48 2.87-.56a10.1 10.1 0 0 1-.75-4.79c.16-1.62.74-2.98 1.3-4.13l.34-.7.44-.9c.23-.49.4-.92.48-1.33.08-.4.08-.75-.02-1.09-.1-.34-.3-.7-.7-1.1a1.67 1.67 0 0 0-1.55.37L4.18 5.09c-.29.26-.48.61-.54 1L3.2 9.05a14.64 14.64 0 0 1 3.75 5.61ZM2.99 10.4l-.1.3-2.74 6.1a1.7 1.7 0 0 0 .32 1.86l4.31 4.43a8.7 8.7 0 0 0 .88-8.68 13.68 13.68 0 0 0-2.67-4.01Z"/>
-                <path d="m5.78 23.62.23.02c.81.02 2.19.1 3.3.3.91.17 2.72.67 4.2 1.1 1.13.34 2.3-.57 2.46-1.74.12-.85.35-1.81.76-2.7a9.3 9.3 0 0 0-2.54-4.02 5.54 5.54 0 0 0-2.9-1.31 9.47 9.47 0 0 0-4.02.47 9.7 9.7 0 0 1-1.5 7.88Z"/>
-                <path d="M17.45 19.4c.93-1.4 1.6-2.5 1.94-3.1a.85.85 0 0 0-.06-.93 18.2 18.2 0 0 1-2.14-3.52c-.58-1.39-.66-3.54-.67-4.58 0-.4-.12-.79-.37-1.1L12.8 1.92c0 .19-.04.38-.08.57a7.5 7.5 0 0 1-.56 1.56l-.46.96-.33.66a10.98 10.98 0 0 0-1.18 3.75 9.21 9.21 0 0 0 .85 4.7 6.66 6.66 0 0 1 3.88 1.62 9.75 9.75 0 0 1 2.53 3.66Z"/>
-              </svg>
-            </Fragment>
-            <Heading tag="h3" slot="heading">
-              Obsidian
-            </Heading>
-          </Card>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<style lang="scss">
-  .swiper {
-    width: 100%;
-  }
-  .swiper-slide {
-    width: 33%;
-  }
-</style>
-
-<script>
-  import Swiper from 'swiper';
-  import { EffectCards } from 'swiper/modules';
-
-  new Swiper(".swiper", {
-    modules: [EffectCards],
-    effect: "cards",
-    grabCursor: true,
-    centeredSlides: true,
-    slidesPerView: "auto",
-    loop: true,
-    pagination: {
-      el: ".swiper-pagination",
-    },
-  });
-</script>
--- a/src/layouts/HeadFavicon.astro
+++ b/src/layouts/HeadFavicon.astro
@@ -0,0 +1,31 @@
+<link rel="apple-touch-icon" sizes="57x57" href="/favicon/light/apple-icon-57x57.png" media="(prefers-color-scheme: light)">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon/light/apple-icon-60x60.png" media="(prefers-color-scheme: light)">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon/light/apple-icon-72x72.png" media="(prefers-color-scheme: light)">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon/light/apple-icon-76x76.png" media="(prefers-color-scheme: light)">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon/light/apple-icon-114x114.png" media="(prefers-color-scheme: light)">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon/light/apple-icon-120x120.png" media="(prefers-color-scheme: light)">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon/light/apple-icon-144x144.png" media="(prefers-color-scheme: light)">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon/light/apple-icon-152x152.png" media="(prefers-color-scheme: light)">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon/light/apple-icon-180x180.png" media="(prefers-color-scheme: light)">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon/light/android-icon-192x192.png" media="(prefers-color-scheme: light)">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon/light/favicon-32x32.png" media="(prefers-color-scheme: light)">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon/light/favicon-96x96.png" media="(prefers-color-scheme: light)">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon/light/favicon-16x16.png" media="(prefers-color-scheme: light)">
+<link rel="manifest" href="/favicon/light/manifest.json" media="(prefers-color-scheme: light)">
+<meta name="msapplication-TileImage" content="/favicon/light/ms-icon-144x144.png" media="(prefers-color-scheme: light)">
+
+<link rel="apple-touch-icon" sizes="57x57" href="/favicon/dark/apple-icon-57x57.png" media="(prefers-color-scheme: dark)">
+<link rel="apple-touch-icon" sizes="60x60" href="/favicon/dark/apple-icon-60x60.png" media="(prefers-color-scheme: dark)">
+<link rel="apple-touch-icon" sizes="72x72" href="/favicon/dark/apple-icon-72x72.png" media="(prefers-color-scheme: dark)">
+<link rel="apple-touch-icon" sizes="76x76" href="/favicon/dark/apple-icon-76x76.png" media="(prefers-color-scheme: dark)">
+<link rel="apple-touch-icon" sizes="114x114" href="/favicon/dark/apple-icon-114x114.png" media="(prefers-color-scheme: dark)">
+<link rel="apple-touch-icon" sizes="120x120" href="/favicon/dark/apple-icon-120x120.png" media="(prefers-color-scheme: dark)">
+<link rel="apple-touch-icon" sizes="144x144" href="/favicon/dark/apple-icon-144x144.png" media="(prefers-color-scheme: dark)">
+<link rel="apple-touch-icon" sizes="152x152" href="/favicon/dark/apple-icon-152x152.png" media="(prefers-color-scheme: dark)">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon/dark/apple-icon-180x180.png" media="(prefers-color-scheme: dark)">
+<link rel="icon" type="image/png" sizes="192x192"  href="/favicon/dark/android-icon-192x192.png" media="(prefers-color-scheme: dark)">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon/dark/favicon-96x96.png" media="(prefers-color-scheme: dark)">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)">
+<link rel="manifest" href="/favicon/dark/manifest.json" media="(prefers-color-scheme: dark)">
+<meta name="msapplication-TileImage" content="/favicon/dark/ms-icon-144x144.png" media="(prefers-color-scheme: dark)">
--- a/src/layouts/HomeLayout.astro
+++ b/src/layouts/HomeLayout.astro
@@ -0,0 +1,180 @@
+---
+import '../../assets/css/main.css'
+// import BgParticles from '../components/BgParticles.astro'
+import BgGrid from '../components/BgGrid.astro'
+import HeadFavicon from './HeadFavicon.astro'
+import Navbar from "../components/Navbar.astro";
+interface Props {
+	title?: string
+  description?: string
+  hasParticles?: boolean
+  hasGrid?: boolean
+}
+
+const {
+  title = "Home",
+  // hasParticles = false,
+  hasGrid = false
+} = Astro.props
+
+const baseTitle = 'Alexis Pelé'
+const renderedTitle = `${title} · ${baseTitle}`
+
+const { description = baseTitle } = Astro.props
+
+const authorName = "Alexis Pelé"
+const authorUsername = "AlexisNP"
+const websiteDomain = "alexcreates.fr"
+---
+
+<!DOCTYPE html>
+<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">
+    <link rel="canonical" href={Astro.url} />
+
+    <meta property="og:title" content={renderedTitle} />
+
+    <meta name="description" content={description} />
+    <meta property="og:description" content={description} />
+    <meta name="twitter:description" content={description} />
+
+    <meta property="author" content={authorName} />
+    <meta property="og:author" content={authorName} />
+    <meta property="og:author:username" content={authorUsername} />
+
+    <HeadFavicon />
+
+    <meta name="msapplication-TileColor" content="#065f46">
+    <meta name="theme-color" content="#065f46">
+    <meta name="color-scheme" content="dark light" />
+
+    <meta property="og:site_name" content={websiteDomain} />
+    <meta name="twitter:domain" content={websiteDomain} />
+
+    <meta property="og:type" content="website" />
+	</head>
+
+	<body class="h-screen relative bg-background text-body px-3 md:px-12 overflow-hidden">
+    <Navbar />
+
+    <slot />
+
+    <!-- {hasParticles &&
+      <BgParticles />
+    } -->
+
+    {hasGrid &&
+      <BgGrid />
+    }
+	</body>
+</html>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,17 +1,26 @@
--- 
-import '../../assets/css/main.css';
-
+---
+import '../../assets/css/main.css'
+import BgParticles from '../components/BgParticles.astro'
+import BgGrid from '../components/BgGrid.astro'
+import HeadFavicon from './HeadFavicon.astro'
+import Navbar from "../components/Navbar.astro";
 interface Props {
-	title?: string;
+	title?: string
  description?: string
+  hasParticles?: boolean
+  hasGrid?: boolean
 }

-const { title = "Home" } = Astro.props;
+const { title = "Home", hasParticles = false, hasGrid = false } = Astro.props

 const baseTitle = 'Alexis Pelé'
 const renderedTitle = `${title} · ${baseTitle}`

-const { description = baseTitle } = Astro.props;
+const { description = baseTitle } = Astro.props
+
+const authorName = "Alexis Pelé"
+const authorUsername = "AlexisNP"
+const websiteDomain = "alexcreates.fr"
 ---

 <!DOCTYPE html>
@@ -29,84 +38,143 @@ const { description = baseTitle } = Astro.props;
    <meta property="og:description" content={description} />
    <meta name="twitter:description" content={description} />

-    <meta property="author" content="Alexis Pelé" />
-    <meta property="og:author" content="Alexis Pelé" />
-    <meta property="og:author:username" content="AlexisNP" />
+    <meta property="author" content={authorName} />
+    <meta property="og:author" content={authorName} />
+    <meta property="og:author:username" content={authorUsername} />

-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
-
-    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/light/apple-icon-57x57.png" media="(prefers-color-scheme: light)">
-    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/light/apple-icon-60x60.png" media="(prefers-color-scheme: light)">
-    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/light/apple-icon-72x72.png" media="(prefers-color-scheme: light)">
-    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/light/apple-icon-76x76.png" media="(prefers-color-scheme: light)">
-    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/light/apple-icon-114x114.png" media="(prefers-color-scheme: light)">
-    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/light/apple-icon-120x120.png" media="(prefers-color-scheme: light)">
-    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/light/apple-icon-144x144.png" media="(prefers-color-scheme: light)">
-    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/light/apple-icon-152x152.png" media="(prefers-color-scheme: light)">
-    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/light/apple-icon-180x180.png" media="(prefers-color-scheme: light)">
-    <link rel="icon" type="image/png" sizes="192x192"  href="/favicon/light/android-icon-192x192.png" media="(prefers-color-scheme: light)">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/light/favicon-32x32.png" media="(prefers-color-scheme: light)">
-    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/light/favicon-96x96.png" media="(prefers-color-scheme: light)">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/light/favicon-16x16.png" media="(prefers-color-scheme: light)">
-    <link rel="manifest" href="/favicon/light/manifest.json" media="(prefers-color-scheme: light)">
-    <meta name="msapplication-TileImage" content="/favicon/light/ms-icon-144x144.png" media="(prefers-color-scheme: light)">
-
-    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/dark/apple-icon-57x57.png" media="(prefers-color-scheme: dark)">
-    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/dark/apple-icon-60x60.png" media="(prefers-color-scheme: dark)">
-    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/dark/apple-icon-72x72.png" media="(prefers-color-scheme: dark)">
-    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/dark/apple-icon-76x76.png" media="(prefers-color-scheme: dark)">
-    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/dark/apple-icon-114x114.png" media="(prefers-color-scheme: dark)">
-    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/dark/apple-icon-120x120.png" media="(prefers-color-scheme: dark)">
-    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/dark/apple-icon-144x144.png" media="(prefers-color-scheme: dark)">
-    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/dark/apple-icon-152x152.png" media="(prefers-color-scheme: dark)">
-    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/dark/apple-icon-180x180.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="192x192"  href="/favicon/dark/android-icon-192x192.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/dark/favicon-96x96.png" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)">
-    <link rel="manifest" href="/favicon/dark/manifest.json" media="(prefers-color-scheme: dark)">
-    <meta name="msapplication-TileImage" content="/favicon/dark/ms-icon-144x144.png" media="(prefers-color-scheme: dark)">
+    <HeadFavicon />

    <meta name="msapplication-TileColor" content="#065f46">
    <meta name="theme-color" content="#065f46">
    <meta name="color-scheme" content="dark light" />

-    <meta property="og:site_name" content="alexcreates.fr" />
-    <meta name="twitter:domain" content="alexcreates.fr" />
+    <meta property="og:site_name" content={websiteDomain} />
+    <meta name="twitter:domain" content={websiteDomain} />

    <meta property="og:type" content="website" />

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
-        "@type": "Person",
-        "email": "mailto:contact@alexcreates.fr",
-        "jobTitle": "Web developer",
-        "name": "Alexis",
-        "familyName": "Pelé",
-        "url": "https://alexcreates.fr/",
-        "nationality": {
-          "@type": "Country",
-          "name": "France"
-        },
-        "pronouns": "he/him",
-        "knowsLanguage": [
+        "@graph": [
          {
-            "@type": "Language",
-            "name": "French",
-            "alternateName": "fr"
+            "@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": "Language",
-            "name": "English",
-            "alternateName": "en"
+            "@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>
 	</head>

-	<body class="bg-slate-950 text-white">
-    <slot />
+	<body class="h-screen relative bg-slate-950 text-white">
+    <Navbar />
+
+    <div class="container pt-28">
+      <slot />
+    </div>
+
+    {hasParticles &&
+      <BgParticles />
+    }
+
+    {hasGrid &&
+      <BgGrid />
+    }
 	</body>
 </html>
--- a/src/pages/_projects.astro
+++ b/src/pages/_projects.astro
@@ -0,0 +1,74 @@
+---
+import Card from '../components/Card.astro';
+import Heading from '../components/Heading.astro';
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout description="my projects" hasGrid>
+  <main class="relative max-w-full">
+    <div class="flow content">
+      <Heading tag="h1">
+        My projects
+      </Heading>
+    </div>
+
+    <section class="mt-8">
+      <ul id="projects-list" class="pb-4 max-sm:overflow-x-auto max-sm:overflow-y-hidden max-sm:snap-x max-sm:snap-mandatory max-sm:scroll-smooth flex gap-2 md:gap-6 lg:gap-8 max-sm:*:snap-start max-sm:*:grow-0 max-sm:*:shrink-0 *:basis-4/5 lg:*:basis-1/3">
+        <li>
+          <Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} imageWidth={400} imageLoading="eager">
+            <Fragment slot="icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-7 fill-emerald-600">
+                <path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM96,176a8,8,0,0,0-1.94.24L40,189.75V62.25L95.07,48.48l.93.46Zm120,17.75-55.07,13.77-.93-.46V80a8,8,0,0,0,1.94-.23L216,66.25Z"></path>
+              </svg>
+            </Fragment>
+
+            <Heading tag="h2" style="h3" slot="heading">
+              Interactive maps
+            </Heading>
+
+            <Fragment slot="body">
+              <p>World-building does not come easy for me, as I tend to struggle with aphantasia.</p>
+              <p>I started this side-project to help me visualize my tabletop world better. It features translations, multiple maps and distance measurements.</p>
+            </Fragment>
+          </Card>
+        </li>
+        <li>
+          <Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} imageWidth={400} imageLoading="eager">
+            <Fragment slot="icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-7 fill-emerald-600">
+                <path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z" />
+              </svg>
+            </Fragment>
+
+            <Heading tag="h2" style="h3" slot="heading">
+              Tabletop Calendars
+            </Heading>
+
+            <Fragment slot="body">
+              <p>I wasn't satisfied with the custom calendar apps currently available ; especially with their interfaces and lack of responsivity. So I decided to make my own !</p>
+              <p>It also was the perfect excuse to experiment and push Nuxt / Shadcn code to production</p>
+            </Fragment>
+          </Card>
+        </li>
+        <li>
+          <Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} imageWidth={400} imageLoading="eager">
+            <Fragment slot="icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-7 fill-emerald-600">
+                    <path d="M83.19,174.4a8,8,0,0,0,11.21-1.6,52,52,0,0,1,83.2,0,8,8,0,1,0,12.8-9.6A67.88,67.88,0,0,0,163,141.51a40,40,0,1,0-53.94,0A67.88,67.88,0,0,0,81.6,163.2,8,8,0,0,0,83.19,174.4ZM112,112a24,24,0,1,1,24,24A24,24,0,0,1,112,112Zm96-88H64A16,16,0,0,0,48,40V64H32a8,8,0,0,0,0,16H48v40H32a8,8,0,0,0,0,16H48v40H32a8,8,0,0,0,0,16H48v24a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V40A16,16,0,0,0,208,24Zm0,192H64V40H208Z" />
+                </svg>
+            </Fragment>
+
+            <Heading tag="h2" style="h3" slot="heading">
+              French Representative Lookup
+            </Heading>
+
+            <Fragment slot="body">
+              <p>I always found it too bothersome to know who represents you in the french national assembly ; you need to input your physical adress to only get your county.</p>
+              <p>With official datasets, I was built a script to associate county and representative. It was useful for a while, but it's archived.</p>
+            </Fragment>
+          </Card>
+        </li>
+      </ul>
+    </section>
+  </main>
+</Layout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,13 +1,67 @@
 ---
-import Hero from '../components/home/Hero.astro';
-// import Tooling from '../components/home/Tooling.astro';
-import Layout from '../layouts/Layout.astro';
+import Button from '../components/Button.astro';
+import Heading from '../components/Heading.astro';
+import HomeLayout from '../layouts/HomeLayout.astro';
 ---

-<Layout description="French web engineer and all around responsible web enthusiast">
-  <main>
-    <Hero />
+<HomeLayout description="French web engineer and all around responsible web enthusiast" hasGrid hasParticles>
+  <main class="h-full">
+    <div class="h-full relative max-w-full">
+      <div class="h-full container grid items-center justify-center auto-rows-auto">
+        <div class="px-4 max-w-2xl text-center grid">
+          <Heading tag="h0">
+            Hello, I'm Alexis&nbsp;!&nbsp;👋
+          </Heading>

-    <!-- <Tooling /> -->
+          <div class="mt-4">
+            <p class="md:text-xl">
+              I'm a front-end engineer from France and all-around web enthusiast.
+            </p>
+          </div>
+
+          <hr class="my-4 w-12 mx-auto border-none h-[.33rem] rounded-[100vmax] bg-linear-to-b from-emerald-500 to-emerald-600" />
+
+          <div>
+            <p class="md:text-xl">
+              Let's build something cool together&nbsp;:)
+            </p>
+          </div>
+
+          <div class="mt-8 flex items-center justify-center gap-2 md:gap-4">
+            <Button href="https://gitea.peacock-wyrm.ts.net/Joururi" glow variant="primary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" viewBox="0 0 256 256" style="--darkreader-inline-fill: var(--darkreader-background-000000, #000000);" data-darkreader-inline-fill=""><path d="M232,64a32,32,0,1,0-40,31v17a8,8,0,0,1-8,8H96a23.84,23.84,0,0,0-8,1.38V95a32,32,0,1,0-16,0v66a32,32,0,1,0,16,0V144a8,8,0,0,1,8-8h88a24,24,0,0,0,24-24V95A32.06,32.06,0,0,0,232,64ZM64,64A16,16,0,1,1,80,80,16,16,0,0,1,64,64ZM96,192a16,16,0,1,1-16-16A16,16,0,0,1,96,192ZM200,80a16,16,0,1,1,16-16A16,16,0,0,1,200,80Z"></path></svg>
+
+              <span>
+                Gitea
+              </span>
+            </Button>
+
+            <Button href="https://github.com/AlexisNP" variant="secondary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" viewBox="0 0 256 256">
+                <path d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z" />
+              </svg>
+
+              <span>
+                Github
+              </span>
+            </Button>
+          </div>
+
+          <div class="mt-2 flex items-center justify-center gap-2 md:gap-4">
+            <Button href="mailto:contact@alexcreates.fr">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" viewBox="0 0 256 256">
+                <path d="M132,24A100.11,100.11,0,0,0,32,124v84a16,16,0,0,0,16,16h84a100,100,0,0,0,0-200Zm0,184H48V124a84,84,0,1,1,84,84Zm12-80a12,12,0,1,1-12-12A12,12,0,0,1,144,128Zm-44,0a12,12,0,1,1-12-12A12,12,0,0,1,100,128Zm88,0a12,12,0,1,1-12-12A12,12,0,0,1,188,128Z" />
+              </svg>
+
+              <span>
+                Contact
+              </span>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <p class="absolute w-full px-4 bottom-8 left-1/2 -translate-x-1/2 opacity-50 text-xs md:text-sm text-center">@2026&nbsp;·&nbsp;Website is currently a WIP&nbsp;;&nbsp;some things may change&nbsp;!</p>
+    </div>
  </main>
-</Layout>
+</HomeLayout>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'
-  ],
-  theme: {
-    container: {
-      center: true,
-      screens: {
-        sm: '640px',
-        md: '640px',
-        lg: '760px',
-        xl: '960px',
-        '2xl': '1180px',
-      }
-    },
-  }
-}
Author	SHA1	Message	Date
Alexis	b174f22626	Hotfix : Changed readme	2026-07-09 19:13:58 +02:00
Alexis	91e7bf337d	Merge branch 'dev'	2026-07-07 22:31:31 +02:00
Alexis	81e2729b34	Version bump	2026-07-07 22:31:26 +02:00
Alexis	f06ee6387d	Fixed gitea link	2026-07-07 22:30:40 +02:00
Alexis	59bcd63ab7	Added more seo data	2026-07-07 22:26:16 +02:00
Alexis	a2281d5363	Added gitea button	2026-07-07 21:25:29 +02:00
Alexis	12725101af	Removed particle scripts	2026-07-07 21:09:06 +02:00
Alexis	4926ad1b2f	Updated navbar	2026-07-07 21:08:10 +02:00
Alexis	e7e3e59cdd	Updated package	2026-01-18 18:00:58 +01:00
Alexis	04c12865ac	Changed navbar style	2026-01-18 17:58:01 +01:00
Alexis	0b03f8bbe6	Removed unused css	2026-01-18 16:51:54 +01:00
Alexis	1fd173ecbe	Changed paye layout	2026-01-18 16:43:02 +01:00
Alexis	54711f38f5	Added another project	2025-12-21 19:42:01 +01:00
Alexis	9ad25431b5	Removed swiper	2025-12-21 18:12:18 +01:00
Alexis	a207235062	Updated packages	2025-12-21 18:09:19 +01:00
Alexis	3e80440afc	Draft project page	2025-07-14 15:03:33 +02:00
Alexis	cc980732a1	Moved favicon to own file	2025-06-10 13:42:50 +02:00
Alexis	db3547adc3	Cleaned up components	2025-06-10 13:37:17 +02:00
Alexis	1a6b4c9942	Upgraded to tailwind 4	2025-06-10 13:29:42 +02:00
Alexis	eefbf74a90	Version bump	2025-06-10 13:15:18 +02:00