Merge branch 'dev'

2025-06-10 13:14:32 +02:00
parent 7e61f617c2 6292e92311
commit dbfb760110
92 changed files with 6343 additions and 17155 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,6 +1,6 @@
 root = true

-[*]
+[*.vue]
 charset = utf-8
 indent_style = space
 indent_size = 2
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,21 @@
-node_modules
-*.log*
-.nuxt
-.nitro
-.cache
-.output
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
 .env
-dist
+.env.production
+
+# macOS-specific files
+.DS_Store
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/README.md
+++ b/README.md
@@ -1,42 +1,54 @@
-# Nuxt 3 Minimal Starter
+# Astro Starter Kit: Basics

-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# yarn
-yarn install
-
-# npm
-npm install
-
-# pnpm
-pnpm install --shamefully-hoist
+```
+npm create astro@latest -- --template basics
 ```

-## Development Server
+[![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)

-Start the development server on http://localhost:3000
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!

-```bash
-npm run dev
+![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
 ```

-## Production
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

-Build the application for production:
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

-```bash
-npm run build
-```
+Any static assets, like images, can be placed in the `public/` directory.

-Locally preview production build:
+## 🧞 Commands

-```bash
-npm run preview
-```
+All commands are run from the root of the project, from a terminal:

-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+| 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).
--- a/1
+++ b/1
--- a/app.vue
+++ b/app.vue
@@ -1,7 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout>
-      <NuxtPage/>
-    </NuxtLayout>
-  </div>
-</template>
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,3 +1,33 @@
@tailwind base;
@tailwind components;
@tailwind 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 utilities {
+  .flow > * + * {
+    margin-top: 1em;
+  }
+}
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -0,0 +1,19 @@
+import { defineConfig } from 'astro/config';
+import tailwind from "@astrojs/tailwind";
+
+import sitemap from '@astrojs/sitemap';
+
+import compressor from 'astro-compressor';
+
+import vue from "@astrojs/vue";
+
+// https://astro.build/config
+export default defineConfig({
+  prefetch: true,
+  site: "https://alexcreates.fr",
+  integrations: [
+    tailwind({ applyBaseStyles: false }),
+    sitemap(),
+    compressor(),
+  ]
+});
--- a/content/blog/la-prochaine-releve.md
+++ b/content/blog/la-prochaine-releve.md
@@ -1 +0,0 @@
-# La prochaine relève Front-End
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,15 +0,0 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
-  modules: [
-    '@nuxt/content'
-  ],
-
-  css: ['~/assets/css/main.css'],
-
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  },
-})
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,17 +1,27 @@
 {
-  "private": true,
+  "name": "alexis-portfolio",
+  "type": "module",
+  "version": "1.0.0",
  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "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"
  },
  "devDependencies": {
-    "@nuxt/content": "^2.2.2",
-    "autoprefixer": "^10.4.13",
-    "nuxt": "3.0.0",
-    "postcss": "^8.4.19",
-    "tailwindcss": "^3.2.4"
+    "sass": "^1.89.2"
  }
 }
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types';
-
-const route = useRoute()
-
-const { data } = await useAsyncData('article', () => queryContent<MarkdownParsedContent>(`/blog/${route.params.slug}`).findOne())
-
-if (!data.value?.title) {
-  throw showError({ statusCode: 404, statusMessage: 'Aucun article ici !'})
-}
-</script>
-
-<template>
-  <main>
-    <ContentRenderer v-if="data" :value="data" />
-  </main>
-</template>
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    Blog
-  </div>
-</template>
--- a/pages/error.vue
+++ b/pages/error.vue
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    Erreur
-  </div>
-</template>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    Accueil
-  </div>
-</template>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon/dark/android-icon-144x144.png
+++ b/public/favicon/dark/android-icon-144x144.png
--- a/public/favicon/dark/android-icon-192x192.png
+++ b/public/favicon/dark/android-icon-192x192.png
--- a/public/favicon/dark/android-icon-36x36.png
+++ b/public/favicon/dark/android-icon-36x36.png
--- a/public/favicon/dark/android-icon-48x48.png
+++ b/public/favicon/dark/android-icon-48x48.png
--- a/public/favicon/dark/android-icon-72x72.png
+++ b/public/favicon/dark/android-icon-72x72.png
--- a/public/favicon/dark/android-icon-96x96.png
+++ b/public/favicon/dark/android-icon-96x96.png
--- a/public/favicon/dark/apple-icon-114x114.png
+++ b/public/favicon/dark/apple-icon-114x114.png
--- a/public/favicon/dark/apple-icon-120x120.png
+++ b/public/favicon/dark/apple-icon-120x120.png
--- a/public/favicon/dark/apple-icon-144x144.png
+++ b/public/favicon/dark/apple-icon-144x144.png
--- a/public/favicon/dark/apple-icon-152x152.png
+++ b/public/favicon/dark/apple-icon-152x152.png
--- a/public/favicon/dark/apple-icon-180x180.png
+++ b/public/favicon/dark/apple-icon-180x180.png
--- a/public/favicon/dark/apple-icon-57x57.png
+++ b/public/favicon/dark/apple-icon-57x57.png
--- a/public/favicon/dark/apple-icon-60x60.png
+++ b/public/favicon/dark/apple-icon-60x60.png
--- a/public/favicon/dark/apple-icon-72x72.png
+++ b/public/favicon/dark/apple-icon-72x72.png
--- a/public/favicon/dark/apple-icon-76x76.png
+++ b/public/favicon/dark/apple-icon-76x76.png
--- a/public/favicon/dark/apple-icon-precomposed.png
+++ b/public/favicon/dark/apple-icon-precomposed.png
--- a/public/favicon/dark/apple-icon.png
+++ b/public/favicon/dark/apple-icon.png
--- a/public/favicon/dark/browserconfig.xml
+++ b/public/favicon/dark/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#065f46</TileColor></tile></msapplication></browserconfig>
--- a/public/favicon/dark/favicon-16x16.png
+++ b/public/favicon/dark/favicon-16x16.png
--- a/public/favicon/dark/favicon-32x32.png
+++ b/public/favicon/dark/favicon-32x32.png
--- a/public/favicon/dark/favicon-96x96.png
+++ b/public/favicon/dark/favicon-96x96.png
--- a/public/favicon/dark/favicon.ico
+++ b/public/favicon/dark/favicon.ico
--- a/public/favicon/dark/manifest.json
+++ b/public/favicon/dark/manifest.json
@@ -0,0 +1,46 @@
+{
+  "name": "alexcreates.fr",
+  "theme_color": "#065f46",
+  "background_color": "#065f46",
+  "display": "browser",
+  "scope": "/",
+  "start_url": "https://alexcreates.fr",
+  "icons": [
+    {
+      "src": "\/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image\/png",
+      "density": "0.75"
+    },
+    {
+      "src": "\/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image\/png",
+      "density": "1.0"
+    },
+    {
+      "src": "\/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image\/png",
+      "density": "1.5"
+    },
+    {
+      "src": "\/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image\/png",
+      "density": "2.0"
+    },
+    {
+      "src": "\/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image\/png",
+      "density": "3.0"
+    },
+    {
+      "src": "\/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image\/png",
+      "density": "4.0"
+    }
+  ]
+}
--- a/public/favicon/dark/ms-icon-144x144.png
+++ b/public/favicon/dark/ms-icon-144x144.png
--- a/public/favicon/dark/ms-icon-150x150.png
+++ b/public/favicon/dark/ms-icon-150x150.png
--- a/public/favicon/dark/ms-icon-310x310.png
+++ b/public/favicon/dark/ms-icon-310x310.png
--- a/public/favicon/dark/ms-icon-70x70.png
+++ b/public/favicon/dark/ms-icon-70x70.png
--- a/public/favicon/light/android-icon-144x144.png
+++ b/public/favicon/light/android-icon-144x144.png
--- a/public/favicon/light/android-icon-192x192.png
+++ b/public/favicon/light/android-icon-192x192.png
--- a/public/favicon/light/android-icon-36x36.png
+++ b/public/favicon/light/android-icon-36x36.png
--- a/public/favicon/light/android-icon-48x48.png
+++ b/public/favicon/light/android-icon-48x48.png
--- a/public/favicon/light/android-icon-72x72.png
+++ b/public/favicon/light/android-icon-72x72.png
--- a/public/favicon/light/android-icon-96x96.png
+++ b/public/favicon/light/android-icon-96x96.png
--- a/public/favicon/light/apple-icon-114x114.png
+++ b/public/favicon/light/apple-icon-114x114.png
--- a/public/favicon/light/apple-icon-120x120.png
+++ b/public/favicon/light/apple-icon-120x120.png
--- a/public/favicon/light/apple-icon-144x144.png
+++ b/public/favicon/light/apple-icon-144x144.png
--- a/public/favicon/light/apple-icon-152x152.png
+++ b/public/favicon/light/apple-icon-152x152.png
--- a/public/favicon/light/apple-icon-180x180.png
+++ b/public/favicon/light/apple-icon-180x180.png
--- a/public/favicon/light/apple-icon-57x57.png
+++ b/public/favicon/light/apple-icon-57x57.png
--- a/public/favicon/light/apple-icon-60x60.png
+++ b/public/favicon/light/apple-icon-60x60.png
--- a/public/favicon/light/apple-icon-72x72.png
+++ b/public/favicon/light/apple-icon-72x72.png
--- a/public/favicon/light/apple-icon-76x76.png
+++ b/public/favicon/light/apple-icon-76x76.png
--- a/public/favicon/light/apple-icon-precomposed.png
+++ b/public/favicon/light/apple-icon-precomposed.png
--- a/public/favicon/light/apple-icon.png
+++ b/public/favicon/light/apple-icon.png
--- a/public/favicon/light/browserconfig.xml
+++ b/public/favicon/light/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#065f46</TileColor></tile></msapplication></browserconfig>
--- a/public/favicon/light/favicon-16x16.png
+++ b/public/favicon/light/favicon-16x16.png
--- a/public/favicon/light/favicon-32x32.png
+++ b/public/favicon/light/favicon-32x32.png
--- a/public/favicon/light/favicon-96x96.png
+++ b/public/favicon/light/favicon-96x96.png
--- a/public/favicon/light/favicon.ico
+++ b/public/favicon/light/favicon.ico
--- a/public/favicon/light/manifest.json
+++ b/public/favicon/light/manifest.json
@@ -0,0 +1,46 @@
+{
+  "name": "alexcreates.fr",
+  "theme_color": "#065f46",
+  "background_color": "#065f46",
+  "display": "browser",
+  "scope": "/",
+  "start_url": "https://alexcreates.fr",
+  "icons": [
+    {
+      "src": "\/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image\/png",
+      "density": "0.75"
+    },
+    {
+      "src": "\/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image\/png",
+      "density": "1.0"
+    },
+    {
+      "src": "\/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image\/png",
+      "density": "1.5"
+    },
+    {
+      "src": "\/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image\/png",
+      "density": "2.0"
+    },
+    {
+      "src": "\/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image\/png",
+      "density": "3.0"
+    },
+    {
+      "src": "\/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image\/png",
+      "density": "4.0"
+    }
+  ]
+}
--- a/public/favicon/light/ms-icon-144x144.png
+++ b/public/favicon/light/ms-icon-144x144.png
--- a/public/favicon/light/ms-icon-150x150.png
+++ b/public/favicon/light/ms-icon-150x150.png
--- a/public/favicon/light/ms-icon-310x310.png
+++ b/public/favicon/light/ms-icon-310x310.png
--- a/public/favicon/light/ms-icon-70x70.png
+++ b/public/favicon/light/ms-icon-70x70.png
--- a/public/fonts/Inter-Italic.woff2
+++ b/public/fonts/Inter-Italic.woff2
--- a/public/fonts/Inter.woff2
+++ b/public/fonts/Inter.woff2
--- a/public/js/particles.min.js
+++ b/public/js/particles.min.js
--- a/public/js/particlesjs-config.json
+++ b/public/js/particlesjs-config.json
@@ -0,0 +1,109 @@
+{
+  "particles": {
+    "number": {
+      "value": 60,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "polygon",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 6
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.15,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 1,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 50,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 250,
+      "color": "#ffffff",
+      "opacity": 0.033,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 1.5,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "window",
+    "events": {
+      "onhover": {
+        "enable": true,
+        "mode": "bubble"
+      },
+      "onclick": {
+        "enable": false
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 200,
+        "size": 2.8,
+        "duration": 2,
+        "opacity": 0.3,
+        "speed": 2
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,49 @@
+User-agent: GPTBot
+Disallow: /
+User-agent: ChatGPT-User
+Disallow: /
+User-agent: Google-Extended
+Disallow: /
+User-agent: PerplexityBot
+Disallow: /
+User-agent: Amazonbot
+Disallow: /
+User-agent: ClaudeBot
+Disallow: /
+User-agent: Omgilibot
+Disallow: /
+User-Agent: FacebookBot
+Disallow: /
+User-Agent: Applebot
+Disallow: /
+User-agent: anthropic-ai
+Disallow: /
+User-agent: Bytespider
+Disallow: /
+User-agent: Claude-Web
+Disallow: /
+User-agent: Diffbot
+Disallow: /
+User-agent: ImagesiftBot
+Disallow: /
+User-agent: Omgilibot
+Disallow: /
+User-agent: Omgili
+Disallow: /
+User-agent: YouBot
+Disallow: /
+
+User-agent: AhrefsBot
+Disallow: /
+User-agent: AhrefsSiteAudit
+Disallow: /
+User-agent: SemrushBot
+Disallow: /
+User-agent: YandexMarket
+Disallow: /
+User-agent: YandexBot
+Disallow: /
+User-agent: DataForSeoBot
+Disallow: /
+
+Sitemap: https://alexcreates.fr/sitemap-index.xml
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -0,0 +1,103 @@
+---
+interface Props {
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  href?: string;
+  glow?: boolean;
+}
+
+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"
+    href={href}
+    target="_blank"
+    class:list={
+      [
+        {
+          'glow': glow,
+          'bg-emerald-900 hover:bg-emerald-800 focus-visible:outline-emerald-400': variant === 'primary',
+          'bg-slate-900 hover:bg-slate-800 focus-visible:outline-slate-100': variant === 'secondary'
+        }
+      ]
+    }
+  >
+    <slot />
+  </a>
+)}
+{!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:list={
+      [
+        {
+          'glow': glow,
+          'bg-emerald-900 hover:bg-emerald-800 focus-visible:outline-emerald-400': variant === 'primary',
+          'bg-slate-900 hover:bg-slate-800 focus-visible:outline-slate-100': variant === 'secondary'
+        }
+      ]
+    }
+  >
+    <slot />
+  </button>
+)}
+
+<style lang="scss">
+:root {
+  --glow-shade-1: #022c22;
+  --glow-shade-2: #34d399;
+  --glow-shade-3: #ecfdf5;
+}
+
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.glow {
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    z-index: -1;
+    background: conic-gradient(
+      from var(--gradient-angle),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-2),
+      var(--glow-shade-3),
+      var(--glow-shade-2),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1)
+    );
+    border-radius: inherit;
+    animation: glow-rotation 4.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+  }
+
+  &::after {
+    filter: blur(3.5rem);
+  }
+
+  @keyframes glow-rotation {
+    0% {
+      --gradient-angle: -180deg;
+    }
+    100% {
+      --gradient-angle: 180deg;
+    }
+  }
+}
+</style>
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -0,0 +1,7 @@
+<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" />
+
+    <slot name="heading" />
+  </div>
+</div>
--- a/src/components/Heading.astro
+++ b/src/components/Heading.astro
@@ -0,0 +1,23 @@
+---
+interface Props {
+	tag: 'h1' | 'h2' | 'h3';
+}
+
+const { tag = "h1" } = Astro.props;
+---
+
+{tag === 'h1' &&
+  <h1 class="font-heading text-4xl md:text-5xl font-bold">
+    <slot name="default" />
+  </h1>
+}
+{tag === 'h2' &&
+  <h2 class="font-heading text-xl md:text-3xl font-bold">
+    <slot name="default" />
+  </h2>
+}
+{tag === 'h3' &&
+  <h3 class="font-heading md:text-xl font-bold">
+    <slot name="default" />
+  </h3>
+}
--- a/src/components/home/BgParticles.astro
+++ b/src/components/home/BgParticles.astro
@@ -0,0 +1,21 @@
+<div class="wrapper h-full w-full absolute inset-0 isolate -z-10 opacity-90">
+  <div id="particles" class="h-full w-full absolute inset-0 -z-20"></div>
+</div>
+
+<script is:inline src="/js/particles.min.js"></script>
+
+<script is:inline>
+  particlesJS.load('particles', '/js/particlesjs-config.json');
+</script>
+
+<style lang="scss">
+  .wrapper {
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: -10;
+      background: radial-gradient(circle, #020617 2%, transparent 20%);
+    }
+  }
+</style>
--- a/src/components/home/Hero.astro
+++ b/src/components/home/Hero.astro
@@ -0,0 +1,87 @@
+---
+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
@@ -0,0 +1,142 @@
+---
+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
@@ -0,0 +1,165 @@
+---
+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/env.d.ts
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,112 @@
+--- 
+import '../../assets/css/main.css';
+
+interface Props {
+	title?: string;
+  description?: string
+}
+
+const { title = "Home" } = Astro.props;
+
+const baseTitle = 'Alexis Pelé'
+const renderedTitle = `${title} · ${baseTitle}`
+
+const { description = baseTitle } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="canonical" href={Astro.url} />
+		<meta name="generator" content={ Astro.generator } />
+
+		<title>{ renderedTitle }</title>
+    <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="Alexis Pelé" />
+    <meta property="og:author" content="Alexis Pelé" />
+    <meta property="og:author:username" content="AlexisNP" />
+
+    <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)">
+
+    <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: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": [
+          {
+            "@type": "Language",
+            "name": "French",
+            "alternateName": "fr"
+          },
+          {
+            "@type": "Language",
+            "name": "English",
+            "alternateName": "en"
+          }
+        ]
+      }
+    </script>
+	</head>
+
+	<body class="bg-slate-950 text-white">
+    <slot />
+	</body>
+</html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,13 @@
+---
+import Hero from '../components/home/Hero.astro';
+// import Tooling from '../components/home/Tooling.astro';
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout description="French web engineer and all around responsible web enthusiast">
+  <main>
+    <Hero />
+
+    <!-- <Tooling /> -->
+  </main>
+</Layout>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,15 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: [
-        "./components/**/*.{js,vue,ts}",
-        "./layouts/**/*.vue",
-        "./pages/**/*.vue",
-        "./plugins/**/*.{js,ts}",
-        "./nuxt.config.{js,ts}",
-        "./app.vue",
-    ],
-    theme: {
-        extend: {},
+  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',
+      }
    },
-    plugins: [],
+  }
 }
--- a/tsconfig.astro.base.json
+++ b/tsconfig.astro.base.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    // Enable top-level await, and other modern ESM features.
+    "target": "ESNext",
+    "module": "ESNext",
+    // Enable module resolution without file extensions on relative paths, for things like npm package imports.
+    "moduleResolution": "Bundler",
+    // Allow importing TypeScript files using their native extension (.ts(x)).
+    "allowImportingTsExtensions": true,
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    // Enforce the usage of type-only imports when needed, which helps avoiding bundling issues.
+    "verbatimModuleSyntax": true,
+    // Ensure that each file can be transpiled without relying on other imports.
+    // This is redundant with the previous option, however it ensures that it's on even if someone disable `verbatimModuleSyntax`
+    "isolatedModules": true,
+    // Astro directly run TypeScript code, no transpilation needed.
+    "noEmit": true,
+    // Report an error when importing a file using a casing different from another import of the same file.
+    "forceConsistentCasingInFileNames": true,
+    // Properly support importing CJS modules in ESM
+    "esModuleInterop": true,
+    // Skip typechecking libraries and .d.ts files
+    "skipLibCheck": true,
+    // Allow JavaScript files to be imported
+    "allowJs": true,
+    // Allow JSX files (or files that are internally considered JSX, like Astro files) to be imported inside `.js` and `.ts` files.
+    "jsx": "preserve"
+  }
+}
--- a/tsconfig.astro.strict.json
+++ b/tsconfig.astro.strict.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.astro.base",
+  "compilerOptions": {
+    // Report errors for fallthrough cases in switch statements
+    "noFallthroughCasesInSwitch": true,
+    // Force functions designed to override their parent class to be specified as `override`.
+    "noImplicitOverride": true,
+    // Force functions to specify that they can return `undefined` if a possible code path does not return a value.
+    "noImplicitReturns": true,
+    // Report an error when a variable is declared but never used.
+    "noUnusedLocals": true,
+    // Report an error when a parameter is declared but never used.
+    "noUnusedParameters": true,
+    // Force the usage of the indexed syntax to access fields declared using an index signature.
+    "noUncheckedIndexedAccess": true,
+    // Report an error when the value `undefined` is given to an optional property that doesn't specify `undefined` as a valid value.
+    "exactOptionalPropertyTypes": true,
+    // Report an error for unreachable code instead of just a warning.
+    "allowUnreachableCode": false,
+    // Report an error for unused labels instead of just a warning.
+    "allowUnusedLabels": false
+  }
+}
--- a/tsconfig.astro.strictest.json
+++ b/tsconfig.astro.strictest.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.astro.strict",
+  "compilerOptions": {
+    // Report errors for fallthrough cases in switch statements
+    "noFallthroughCasesInSwitch": true,
+    // Force functions designed to override their parent class to be specified as `override`.
+    "noImplicitOverride": true,
+    // Force functions to specify that they can return `undefined` if a possible code path does not return a value.
+    "noImplicitReturns": true,
+    // Report an error when a variable is declared but never used.
+    "noUnusedLocals": true,
+    // Report an error when a parameter is declared but never used.
+    "noUnusedParameters": true,
+    // Force the usage of the indexed syntax to access fields declared using an index signature.
+    "noUncheckedIndexedAccess": true,
+    // Report an error when the value `undefined` is given to an optional property that doesn't specify `undefined` as a valid value.
+    "exactOptionalPropertyTypes": true,
+    // Report an error for unreachable code instead of just a warning.
+    "allowUnreachableCode": false,
+    // Report an error for unused labels instead of just a warning.
+    "allowUnusedLabels": false
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,6 @@
 {
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./tsconfig.astro.strictest",
+  "compilerOptions": {
+    "strictNullChecks": true
+  }
 }