From 8f322e5469b0084715b1c703014e8cc35da7e4aa Mon Sep 17 00:00:00 2001
From: kinou-p <alexpomms@gmail.com>
Date: Thu, 2 Oct 2025 15:19:51 +0200
Subject: [PATCH] background work

---
 index.html                              |   5 +
 package-lock.json                       | 467 ++++++++++++++++++++++++
 package.json                            |   3 +
 src/App.tsx                             |  25 +-
 src/components/ParticlesBackground.tsx  | 133 +++++++
 src/components/sections/HeroSection.tsx |   2 +-
 src/index.css                           |  37 ++
 src/pages/Index.tsx                     |  35 +-
 src/pages/ProjectPage.tsx               |   9 +-
 src/utils/translations.ts               |   2 +-
 10 files changed, 681 insertions(+), 37 deletions(-)
 create mode 100644 src/components/ParticlesBackground.tsx

diff --git a/index.html b/index.html
index 781c4c0..1f81217 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,11 @@
     <meta name="twitter:site" content="@lovable_dev" />
     <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
 
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+
     <!-- Google Tag Manager -->
     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
diff --git a/package-lock.json b/package-lock.json
index e427e8b..b54bdc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,9 @@
         "@radix-ui/react-toggle-group": "^1.1.10",
         "@radix-ui/react-tooltip": "^1.2.7",
         "@tanstack/react-query": "^5.83.0",
+        "@tsparticles/engine": "^3.9.1",
+        "@tsparticles/react": "^3.0.0",
+        "@tsparticles/slim": "^3.9.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
@@ -2827,6 +2830,470 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tsparticles/basic": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/basic/-/basic-3.9.1.tgz",
+      "integrity": "sha512-ijr2dHMx0IQHqhKW3qA8tfwrR2XYbbWYdaJMQuBo2CkwBVIhZ76U+H20Y492j/NXpd1FUnt2aC0l4CEVGVGdeQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1",
+        "@tsparticles/move-base": "3.9.1",
+        "@tsparticles/plugin-hex-color": "3.9.1",
+        "@tsparticles/plugin-hsl-color": "3.9.1",
+        "@tsparticles/plugin-rgb-color": "3.9.1",
+        "@tsparticles/shape-circle": "3.9.1",
+        "@tsparticles/updater-color": "3.9.1",
+        "@tsparticles/updater-opacity": "3.9.1",
+        "@tsparticles/updater-out-modes": "3.9.1",
+        "@tsparticles/updater-size": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/engine": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.9.1.tgz",
+      "integrity": "sha512-DpdgAhWMZ3Eh2gyxik8FXS6BKZ8vyea+Eu5BC4epsahqTGY9V3JGGJcXC6lRJx6cPMAx1A0FaQAojPF3v6rkmQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsparticles/interaction-external-attract": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-attract/-/interaction-external-attract-3.9.1.tgz",
+      "integrity": "sha512-5AJGmhzM9o4AVFV24WH5vSqMBzOXEOzIdGLIr+QJf4fRh9ZK62snsusv/ozKgs2KteRYQx+L7c5V3TqcDy2upg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-bounce": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bounce/-/interaction-external-bounce-3.9.1.tgz",
+      "integrity": "sha512-bv05+h70UIHOTWeTsTI1AeAmX6R3s8nnY74Ea6p6AbQjERzPYIa0XY19nq/hA7+Nrg+EissP5zgoYYeSphr85A==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-bubble": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bubble/-/interaction-external-bubble-3.9.1.tgz",
+      "integrity": "sha512-tbd8ox/1GPl+zr+KyHQVV1bW88GE7OM6i4zql801YIlCDrl9wgTDdDFGIy9X7/cwTvTrCePhrfvdkUamXIribQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-connect": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-connect/-/interaction-external-connect-3.9.1.tgz",
+      "integrity": "sha512-sq8YfUNsIORjXHzzW7/AJQtfi/qDqLnYG2qOSE1WOsog39MD30RzmiOloejOkfNeUdcGUcfsDgpUuL3UhzFUOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-grab": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-grab/-/interaction-external-grab-3.9.1.tgz",
+      "integrity": "sha512-QwXza+sMMWDaMiFxd8y2tJwUK6c+nNw554+/9+tEZeTTk2fCbB0IJ7p/TH6ZGWDL0vo2muK54Njv2fEey191ow==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-pause": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-pause/-/interaction-external-pause-3.9.1.tgz",
+      "integrity": "sha512-Gzv4/FeNir0U/tVM9zQCqV1k+IAgaFjDU3T30M1AeAsNGh/rCITV2wnT7TOGFkbcla27m4Yxa+Fuab8+8pzm+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-push": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-push/-/interaction-external-push-3.9.1.tgz",
+      "integrity": "sha512-GvnWF9Qy4YkZdx+WJL2iy9IcgLvzOIu3K7aLYJFsQPaxT8d9TF8WlpoMlWKnJID6H5q4JqQuMRKRyWH8aAKyQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-remove": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-remove/-/interaction-external-remove-3.9.1.tgz",
+      "integrity": "sha512-yPThm4UDWejDOWW5Qc8KnnS2EfSo5VFcJUQDWc1+Wcj17xe7vdSoiwwOORM0PmNBzdDpSKQrte/gUnoqaUMwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-repulse": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-repulse/-/interaction-external-repulse-3.9.1.tgz",
+      "integrity": "sha512-/LBppXkrMdvLHlEKWC7IykFhzrz+9nebT2fwSSFXK4plEBxDlIwnkDxd3FbVOAbnBvx4+L8+fbrEx+RvC8diAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-slow": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-slow/-/interaction-external-slow-3.9.1.tgz",
+      "integrity": "sha512-1ZYIR/udBwA9MdSCfgADsbDXKSFS0FMWuPWz7bm79g3sUxcYkihn+/hDhc6GXvNNR46V1ocJjrj0u6pAynS1KQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-attract": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-attract/-/interaction-particles-attract-3.9.1.tgz",
+      "integrity": "sha512-CYYYowJuGwRLUixQcSU/48PTKM8fCUYThe0hXwQ+yRMLAn053VHzL7NNZzKqEIeEyt5oJoy9KcvubjKWbzMBLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-collisions": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-collisions/-/interaction-particles-collisions-3.9.1.tgz",
+      "integrity": "sha512-ggGyjW/3v1yxvYW1IF1EMT15M6w31y5zfNNUPkqd/IXRNPYvm0Z0ayhp+FKmz70M5p0UxxPIQHTvAv9Jqnuj8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-links": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-links/-/interaction-particles-links-3.9.1.tgz",
+      "integrity": "sha512-MsLbMjy1vY5M5/hu/oa5OSRZAUz49H3+9EBMTIOThiX+a+vpl3sxc9AqNd9gMsPbM4WJlub8T6VBZdyvzez1Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/move-base": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/move-base/-/move-base-3.9.1.tgz",
+      "integrity": "sha512-X4huBS27d8srpxwOxliWPUt+NtCwY+8q/cx1DvQxyqmTA8VFCGpcHNwtqiN+9JicgzOvSuaORVqUgwlsc7h4pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/move-parallax": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/move-parallax/-/move-parallax-3.9.1.tgz",
+      "integrity": "sha512-whlOR0bVeyh6J/hvxf/QM3DqvNnITMiAQ0kro6saqSDItAVqg4pYxBfEsSOKq7EhjxNvfhhqR+pFMhp06zoCVA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-easing-quad": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-easing-quad/-/plugin-easing-quad-3.9.1.tgz",
+      "integrity": "sha512-C2UJOca5MTDXKUTBXj30Kiqr5UyID+xrY/LxicVWWZPczQW2bBxbIbfq9ULvzGDwBTxE2rdvIB8YFKmDYO45qw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-hex-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hex-color/-/plugin-hex-color-3.9.1.tgz",
+      "integrity": "sha512-vZgZ12AjUicJvk7AX4K2eAmKEQX/D1VEjEPFhyjbgI7A65eX72M465vVKIgNA6QArLZ1DLs7Z787LOE6GOBWsg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-hsl-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hsl-color/-/plugin-hsl-color-3.9.1.tgz",
+      "integrity": "sha512-jJd1iGgRwX6eeNjc1zUXiJivaqC5UE+SC2A3/NtHwwoQrkfxGWmRHOsVyLnOBRcCPgBp/FpdDe6DIDjCMO715w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-rgb-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-rgb-color/-/plugin-rgb-color-3.9.1.tgz",
+      "integrity": "sha512-SBxk7f1KBfXeTnnklbE2Hx4jBgh6I6HOtxb+Os1gTp0oaghZOkWcCD2dP4QbUu7fVNCMOcApPoMNC8RTFcy9wQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/react": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-3.0.0.tgz",
+      "integrity": "sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==",
+      "peerDependencies": {
+        "@tsparticles/engine": "^3.0.2",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@tsparticles/shape-circle": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-circle/-/shape-circle-3.9.1.tgz",
+      "integrity": "sha512-DqZFLjbuhVn99WJ+A9ajz9YON72RtCcvubzq6qfjFmtwAK7frvQeb6iDTp6Ze9FUipluxVZWVRG4vWTxi2B+/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-emoji": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-emoji/-/shape-emoji-3.9.1.tgz",
+      "integrity": "sha512-ifvY63usuT+hipgVHb8gelBHSeF6ryPnMxAAEC1RGHhhXfpSRWMtE6ybr+pSsYU52M3G9+TF84v91pSwNrb9ZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-image": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-image/-/shape-image-3.9.1.tgz",
+      "integrity": "sha512-fCA5eme8VF3oX8yNVUA0l2SLDKuiZObkijb0z3Ky0qj1HUEVlAuEMhhNDNB9E2iELTrWEix9z7BFMePp2CC7AA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-line": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-line/-/shape-line-3.9.1.tgz",
+      "integrity": "sha512-wT8NSp0N9HURyV05f371cHKcNTNqr0/cwUu6WhBzbshkYGy1KZUP9CpRIh5FCrBpTev34mEQfOXDycgfG0KiLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-polygon": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-polygon/-/shape-polygon-3.9.1.tgz",
+      "integrity": "sha512-dA77PgZdoLwxnliH6XQM/zF0r4jhT01pw5y7XTeTqws++hg4rTLV9255k6R6eUqKq0FPSW1/WBsBIl7q/MmrqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-square": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-square/-/shape-square-3.9.1.tgz",
+      "integrity": "sha512-DKGkDnRyZrAm7T2ipqNezJahSWs6xd9O5LQLe5vjrYm1qGwrFxJiQaAdlb00UNrexz1/SA7bEoIg4XKaFa7qhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-star": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-star/-/shape-star-3.9.1.tgz",
+      "integrity": "sha512-kdMJpi8cdeb6vGrZVSxTG0JIjCwIenggqk0EYeKAwtOGZFBgL7eHhF2F6uu1oq8cJAbXPujEoabnLsz6mW8XaA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/slim": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/slim/-/slim-3.9.1.tgz",
+      "integrity": "sha512-CL5cDmADU7sDjRli0So+hY61VMbdroqbArmR9Av+c1Fisa5ytr6QD7Jv62iwU2S6rvgicEe9OyRmSy5GIefwZw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/basic": "3.9.1",
+        "@tsparticles/engine": "3.9.1",
+        "@tsparticles/interaction-external-attract": "3.9.1",
+        "@tsparticles/interaction-external-bounce": "3.9.1",
+        "@tsparticles/interaction-external-bubble": "3.9.1",
+        "@tsparticles/interaction-external-connect": "3.9.1",
+        "@tsparticles/interaction-external-grab": "3.9.1",
+        "@tsparticles/interaction-external-pause": "3.9.1",
+        "@tsparticles/interaction-external-push": "3.9.1",
+        "@tsparticles/interaction-external-remove": "3.9.1",
+        "@tsparticles/interaction-external-repulse": "3.9.1",
+        "@tsparticles/interaction-external-slow": "3.9.1",
+        "@tsparticles/interaction-particles-attract": "3.9.1",
+        "@tsparticles/interaction-particles-collisions": "3.9.1",
+        "@tsparticles/interaction-particles-links": "3.9.1",
+        "@tsparticles/move-parallax": "3.9.1",
+        "@tsparticles/plugin-easing-quad": "3.9.1",
+        "@tsparticles/shape-emoji": "3.9.1",
+        "@tsparticles/shape-image": "3.9.1",
+        "@tsparticles/shape-line": "3.9.1",
+        "@tsparticles/shape-polygon": "3.9.1",
+        "@tsparticles/shape-square": "3.9.1",
+        "@tsparticles/shape-star": "3.9.1",
+        "@tsparticles/updater-life": "3.9.1",
+        "@tsparticles/updater-rotate": "3.9.1",
+        "@tsparticles/updater-stroke-color": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-color/-/updater-color-3.9.1.tgz",
+      "integrity": "sha512-XGWdscrgEMA8L5E7exsE0f8/2zHKIqnTrZymcyuFBw2DCB6BIV+5z6qaNStpxrhq3DbIxxhqqcybqeOo7+Alpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-life": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-life/-/updater-life-3.9.1.tgz",
+      "integrity": "sha512-Oi8aF2RIwMMsjssUkCB6t3PRpENHjdZf6cX92WNfAuqXtQphr3OMAkYFJFWkvyPFK22AVy3p/cFt6KE5zXxwAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-opacity": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-opacity/-/updater-opacity-3.9.1.tgz",
+      "integrity": "sha512-w778LQuRZJ+IoWzeRdrGykPYSSaTeWfBvLZ2XwYEkh/Ss961InOxZKIpcS6i5Kp/Zfw0fS1ZAuqeHwuj///Osw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-out-modes": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-out-modes/-/updater-out-modes-3.9.1.tgz",
+      "integrity": "sha512-cKQEkAwbru+hhKF+GTsfbOvuBbx2DSB25CxOdhtW2wRvDBoCnngNdLw91rs+0Cex4tgEeibkebrIKFDDE6kELg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-rotate": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-rotate/-/updater-rotate-3.9.1.tgz",
+      "integrity": "sha512-9BfKaGfp28JN82MF2qs6Ae/lJr9EColMfMTHqSKljblwbpVDHte4umuwKl3VjbRt87WD9MGtla66NTUYl+WxuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-size": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.9.1.tgz",
+      "integrity": "sha512-3NSVs0O2ApNKZXfd+y/zNhTXSFeG1Pw4peI8e6z/q5+XLbmue9oiEwoPy/tQLaark3oNj3JU7Q903ZijPyXSzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-stroke-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-stroke-color/-/updater-stroke-color-3.9.1.tgz",
+      "integrity": "sha512-3x14+C2is9pZYTg9T2TiA/aM1YMq4wLdYaZDcHm3qO30DZu5oeQq0rm/6w+QOGKYY1Z3Htg9rlSUZkhTHn7eDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
diff --git a/package.json b/package.json
index db8ca42..4229319 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,9 @@
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-query": "^5.83.0",
+    "@tsparticles/engine": "^3.9.1",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.9.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
diff --git a/src/App.tsx b/src/App.tsx
index 8d06835..3187552 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,8 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
 import ProjectPage from "./pages/ProjectPage";
+import { ParticlesBackground } from "./components/ParticlesBackground";
+import { ThemeProvider } from "./contexts/ThemeContext";
 
 const queryClient = new QueryClient();
 
@@ -14,16 +16,19 @@ const IndexWrapper = () => <Index />;
 const App = () => (
   <QueryClientProvider client={queryClient}>
     <TooltipProvider>
-      <Toaster />
-      <Sonner />
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<IndexWrapper />} />
-          <Route path="/project/:projectId" element={<ProjectPage />} />
-          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      </BrowserRouter>
+      <ThemeProvider>
+        <ParticlesBackground />
+        <Toaster />
+        <Sonner />
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<IndexWrapper />} />
+            <Route path="/project/:projectId" element={<ProjectPage />} />
+            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      </ThemeProvider>
     </TooltipProvider>
   </QueryClientProvider>
 );
diff --git a/src/components/ParticlesBackground.tsx b/src/components/ParticlesBackground.tsx
new file mode 100644
index 0000000..cdabc99
--- /dev/null
+++ b/src/components/ParticlesBackground.tsx
@@ -0,0 +1,133 @@
+import { useEffect, useMemo, useState } from "react";
+import Particles, { initParticlesEngine } from "@tsparticles/react";
+import { loadSlim } from "@tsparticles/slim";
+import { useTheme } from "@/contexts/ThemeContext";
+
+export const ParticlesBackground = () => {
+  const [init, setInit] = useState(false);
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
+
+  const particlesLoaded = async (container) => {
+    console.log(container);
+  };
+
+  const options = useMemo(
+    () => ({
+      background: {
+        color: {
+          value: "transparent",
+        },
+      },
+      fpsLimit: 120,
+        interactivity: {
+          events: {
+            onClick: {
+              enable: true,
+              mode: "push",
+            },
+            onHover: {
+              enable: true,
+              mode: "repulse",
+            },
+          },
+          modes: {
+            push: {
+              quantity: 4,
+            },
+            repulse: {
+              distance: 200,
+              duration: 0.4,
+            },
+          },
+        },
+        particles: {
+          color: {
+            value: theme === "dark" ? "#ffffff" : "#000000",
+          },
+          links: {
+            color: theme === "dark" ? "#ffffff" : "#000000",
+            distance: 150,
+            enable: true,
+            opacity: theme === "dark" ? 0.4 : 0.3,
+            width: 1,
+          },
+          move: {
+            direction: "none" as const,
+            enable: true,
+            outModes: {
+              default: "out" as const,
+            },
+            random: false,
+            speed: 2,
+            straight: false,
+          },
+          number: {
+            density: {
+              enable: true,
+            },
+            value: 80,
+          },
+          opacity: {
+            value: { min: 0.1, max: theme === "dark" ? 0.5 : 0.6 },
+            animation: {
+              enable: true,
+              speed: 3,
+              sync: false,
+            },
+          },
+          shape: {
+            type: "circle",
+          },
+          size: {
+            value: { min: 0.1, max: 5 },
+            animation: {
+              enable: true,
+              speed: 20,
+              sync: false,
+            },
+          },
+          twinkle: {
+            lines: {
+              enable: true,
+              frequency: 0.005,
+              opacity: 1,
+              color: {
+                value: theme === "dark" ? "#ffffff" : "#000000"
+              }
+            },
+            particles: {
+              enable: true,
+              frequency: 0.05,
+              opacity: 1,
+              color: {
+                value: theme === "dark" ? "#ffffff" : "#000000"
+              }
+            }
+          },
+        },
+        detectRetina: true,
+      }),
+    [theme],
+  );
+
+  if (init) {
+    return (
+      <Particles
+        id={`tsparticles-${theme}`}
+        particlesLoaded={particlesLoaded}
+        options={options}
+        className="absolute inset-0 -z-10"
+      />
+    );
+  }
+
+  return <></>;
+};
\ No newline at end of file
diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
index 76f00c0..11d7ed5 100644
--- a/src/components/sections/HeroSection.tsx
+++ b/src/components/sections/HeroSection.tsx
@@ -18,7 +18,7 @@ export const HeroSection = () => {
       id="home"
       className="min-h-screen flex items-center justify-center relative overflow-hidden"
     >
-      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-background to-background" />
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_200%_200%_at_top,_var(--tw-gradient-stops))] from-primary/5 via-background to-background" />
       
       <div className="container mx-auto px-4 py-20 relative z-10">
         <div className="max-w-4xl mx-auto text-center space-y-8">
diff --git a/src/index.css b/src/index.css
index 4db83b8..9cfc892 100644
--- a/src/index.css
+++ b/src/index.css
@@ -90,6 +90,31 @@ All colors MUST be HSL.
   body {
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  }
+
+  /* Typography system */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-weight: 600;
+    letter-spacing: -0.025em;
+    line-height: 1.2;
+  }
+
+  h1 {
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
+
+  h2 {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 600;
+  }
+
+  h3 {
+    font-size: clamp(1.5rem, 3vw, 2rem);
+    font-weight: 600;
   }
 
   html {
@@ -104,4 +129,16 @@ All colors MUST be HSL.
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
+
+  .font-heading {
+    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+
+  .font-body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  }
+
+  .text-balance {
+    text-wrap: balance;
+  }
 }
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 78599f6..c792e7c 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -8,7 +8,6 @@ import { HeroSection } from "@/components/sections/HeroSection";
 import { ProjectsSection } from "@/components/sections/ProjectsSection";
 import { SkillsSection } from "@/components/sections/SkillsSection";
 import { ContactSection } from "@/components/sections/ContactSection";
-import { ThemeProvider } from "@/contexts/ThemeContext";
 import { LanguageProvider } from "@/contexts/LanguageContext";
 import { CookieBannerProvider } from "@/contexts/CookieBannerContext";
 
@@ -28,24 +27,22 @@ const Index = () => {
   }, [location.hash]);
 
   return (
-    <ThemeProvider>
-      <LanguageProvider>
-        <CookieBannerProvider>
-          <div className="min-h-screen">
-            <ScrollProgress />
-            <Header />
-            <main>
-              <HeroSection />
-              <ProjectsSection />
-              <SkillsSection />
-              <ContactSection />
-            </main>
-            <Footer />
-            <CookieBanner />
-          </div>
-        </CookieBannerProvider>
-      </LanguageProvider>
-    </ThemeProvider>
+    <LanguageProvider>
+      <CookieBannerProvider>
+        <div className="min-h-screen">
+          <ScrollProgress />
+          <Header />
+          <main>
+            <HeroSection />
+            <ProjectsSection />
+            <SkillsSection />
+            <ContactSection />
+          </main>
+          <Footer />
+          <CookieBanner />
+        </div>
+      </CookieBannerProvider>
+    </LanguageProvider>
   );
 };
 
diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx
index 10cb2b1..2b681b9 100644
--- a/src/pages/ProjectPage.tsx
+++ b/src/pages/ProjectPage.tsx
@@ -12,7 +12,6 @@ import { SkillBadge } from "@/components/SkillBadge";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { useTheme } from "@/contexts/ThemeContext";
 import { projectsData } from "@/data/projects";
-import { ThemeProvider } from "@/contexts/ThemeContext";
 import { LanguageProvider } from "@/contexts/LanguageContext";
 
 const ProjectPageContent = () => {
@@ -289,11 +288,9 @@ const ProjectPageContent = () => {
 
 const ProjectPage = () => {
   return (
-    <ThemeProvider>
-      <LanguageProvider>
-        <ProjectPageContent />
-      </LanguageProvider>
-    </ThemeProvider>
+    <LanguageProvider>
+      <ProjectPageContent />
+    </LanguageProvider>
   );
 };
 
diff --git a/src/utils/translations.ts b/src/utils/translations.ts
index 00cfe4e..db01004 100644
--- a/src/utils/translations.ts
+++ b/src/utils/translations.ts
@@ -8,7 +8,7 @@ export const translations = {
     },
     hero: {
       title: "Alexandre Pommier",
-      subtitle: "Étudiant a 42 en informatique, je cherche un emploi afin de compléter ma formation académique par une expérience professionnelle qui a du sens. Je suis ouvert à de nombreuses propositions en rapport avec mes études et suis prêt à discuter de mon parcours plus amplement lors d'un entretien.",
+      subtitle: "Étudiant en informatique à l'école 42, je développe mes compétences techniques à travers des projets innovants et challengeants. Passionné par les technologies modernes, je m'intéresse particulièrement au développement web, aux systèmes et à l'infrastructure.",
       cta1: "Voir mes projets",
       cta2: "Me contacter",
     },