feat: add Plausible support

Add multi-languages support with i18next
the CI file changed its name unintentionally ^^
2025-05-15 20:29:03 +02:00 · 2025-03-04 21:39:02 +01:00 · 2024-11-23 19:04:06 +01:00 · 2024-11-23 16:47:59 +00:00 · 2024-11-23 16:33:16 +00:00 · 2024-11-23 16:31:14 +00:00
26 changed files with 5018 additions and 4754 deletions
--- a/.gitea/workflows/build.yml
+++ b/.gitea/workflows/build.yml
@@ -0,0 +1,48 @@
+name: Linux arm64
+run-name: Build and Deploy Portfolio
+
+on: [push]
+
+jobs:
+  Build-and-Deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies and build
+        run: |
+          npm ci
+          npm run build          
+
+      - name: Set up SSH agent
+        uses: webfactory/ssh-agent@v0.9.0
+        with:
+          ssh-private-key: ${{ secrets.SSH_KEY_PORTFOLIO }}
+
+      - name: Add remote host to known_hosts
+        run: |
+          mkdir -p ~/.ssh
+          ssh-keyscan -H git.ale-pri.com >> ~/.ssh/known_hosts
+
+      - name: Upload build folder to temporary directory on remote server
+        run: |
+          scp -r build ubuntu@git.ale-pri.com:Poubelle/portfolio
+
+      - name: Deploy to final directory on remote server
+        run: |
+          ssh ubuntu@git.ale-pri.com << 'EOF'
+          BUILD_TMP=Poubelle/portfolio
+          DEPLOY_DIR=/var/www/portfolio
+
+          sudo mkdir -p $DEPLOY_DIR
+
+          sudo rsync -a --delete $BUILD_TMP/ $DEPLOY_DIR/
+
+          sudo chown -R www-data:www-data $DEPLOY_DIR
+          sudo chmod -R 755 $DEPLOY_DIR
+
+          sudo rm -rf $BUILD_TMP
+
+          sudo nginx -t && sudo systemctl reload nginx
+          EOF
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Getting Started with Create React App
+# Getting Started with Create React App on my Portfolio 😎

 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,18 +1,25 @@
 {
  "name": "portfolio",
-  "version": "0.1.0",
+  "version": "0.1.1",
  "private": true,
  "engines": {
    "node": ">=12.x"
  },
  "dependencies": {
    "@types/react-router-dom": "^5.3.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0",
-    "react-scripts": "^3.0.1",
-    "react-scroll": "^1.8.9",
-    "web-vitals": "^2.1.4"
+    "i18next": "^22.5.1",
+    "i18next-browser-languagedetector": "^8.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-i18next": "^10.0.0",
+    "react-router-dom": "^7.6.0",
+    "react-scripts": "^5.0.1",
+    "react-scroll": "^1.9.3",
+    "typescript": "^4.9.5",
+    "web-vitals": "^5.0.1"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.27.1"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
--- a/public/img/cinetour.png
+++ b/public/img/cinetour.png
--- a/public/img/docker.png
+++ b/public/img/docker.png
--- a/public/img/favicon_logo.png
+++ b/public/img/favicon_logo.png
--- a/public/img/gauss.jpg
+++ b/public/img/gauss.jpg
--- a/public/img/git.png
+++ b/public/img/git.png
--- a/public/img/java.png
+++ b/public/img/java.png
--- a/public/img/jira.png
+++ b/public/img/jira.png
--- a/public/img/kubernetes.png
+++ b/public/img/kubernetes.png
--- a/public/img/logo_blanc.png
+++ b/public/img/logo_blanc.png
--- a/public/index.html
+++ b/public/index.html
@@ -1,46 +1,27 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
  <meta charset="utf-8" />
-    <link rel="icon" href="https://thibaut.ale-pri.com/img/logo.png" />
+  <link rel="icon" href="%PUBLIC_URL%/img/favicon_logo.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Portfolio de Thibaut ALESSI"
-    />
-    <meta property="og:image" content="https://thibaut.ale-pri.com/img/moiherosection.jpg" data-rh="true" />
+  <meta name="description" content="Portfolio de Thibaut ALESSI" />
+  <meta property="og:image" content="%PUBLIC_URL%/img/moiherosection.jpg" data-rh="true" />
  <meta property="og:description" content="Portfolio de Thibaut ALESSI" data-rh="true">
  <meta property="og:title" content="Portfolio" data-rh="true">
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
  <title>Portfolio</title>
+  <!-- Plausible -->
+  <script defer data-domain="thibaut.ale-pri.com"
+    src="https://plausible.ale-pri.com/js/script.file-downloads.hash.outbound-links.js"></script>
+  <script>window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
 </head>
+
 <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
 </body>
+
 </html>
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Home from "./Pages/Home/Homescreen";
 import Navbar from "./Pages/Home/Navbar";
+import "./i18n";

 function App() {
  return (
--- a/src/Pages/Home/AboutMe.jsx
+++ b/src/Pages/Home/AboutMe.jsx
@@ -1,4 +1,8 @@
+import { useTranslation } from "react-i18next";
+
 export default function AboutMe() {
+  const { t } = useTranslation();
+
  return (
    <section id="AboutMe" className="about--section">
      <div className="about--section--img">
@@ -6,18 +10,13 @@ export default function AboutMe() {
      </div>
      <div className="hero--section--content-box about--section--box">
        <div className="hero--section--content">
-          <p className="section--title">À propos</p>
-          <h1 className="skills-section--heading">À propos de moi</h1>
+          <p className="section--title">{t('about.title')}</p>
+          <h1 className="skills-section--heading">{t('about.heading')}</h1>
          <p className="hero--section-description">
-            Étudiant en deuxième année de classe préparatoire PeiP (Parcours des
-            écoles d'ingénieurs Polytech) Lyon, option Informatique.
+            {t('about.description1')}
          </p>
          <p className="hero--section-description">
-            Passionné d’informatique, je suis à la recherche d’une opportunité
-            en alternance dès mon entrée en école d’ingénieur pour développer
-            mes compétences et contribuer à un projet d'entreprise qu’il soit
-            orienté Infrastructure, Développement, OPS, Bases de Données ...
-            Qualifié en mathématiques et junior en code.
+            {t('about.description2')}
          </p>
        </div>
      </div>
--- a/src/Pages/Home/ContactMe.jsx
+++ b/src/Pages/Home/ContactMe.jsx
@@ -1,16 +1,19 @@
+import { useTranslation } from "react-i18next";
+
 export default function ContactMe() {
+  const { t } = useTranslation();
+
  return (
    <section id="Contact" className="contact--section">
      <div>
-        <p className="sub--title">Rentrer en Contact</p>
-        <h2>Contactez Moi</h2>
+        <p className="sub--title">{t('contact.title')}</p>
+        <h2>{t('contact.heading')}</h2>
        <p className="text-lg-with-margin">
-          Si vous voulez me contacter, vous pouvez m'envoyer un mail à l'adresse
-          email suivante :
+          {t('contact.description1')}
        </p>
        <a href="mailto:thibaut.alessi@free.fr">thibaut.alessi@free.fr</a>
        <p className="text-lg">
-          Ou bien directement par LinkedIn en bas de page.
+          {t('contact.description2')}
        </p>
      </div>
    </section>
--- a/src/Pages/Home/Footer.jsx
+++ b/src/Pages/Home/Footer.jsx
@@ -1,13 +1,25 @@
 import { Link } from "react-scroll";
 import React from "react";
+import { useTranslation } from "react-i18next";

 function Footer() {
+  const { t } = useTranslation();
+
  return (
    <footer className="footer--container">
      <div className="footer--link--container">
-        <div>
+        <Link
+          activeClass="navbar--active-content"
+          spy={true}
+          smooth={true}
+          offset={-70}
+          duration={500}
+          to="heroSection"
+          className="footer--logo"
+          style={{ cursor: 'pointer' }}
+        >
          <img src="./img/logo.png" alt="Logo" />
-        </div>
+        </Link>
        <div className="footer--items">
          <ul>
            <li>
@@ -19,8 +31,10 @@ function Footer() {
                duration={500}
                to="heroSection"
                className="text-md"
+                style={{ cursor: 'pointer' }}
+
              >
-                Accueil
+                {t('footer.home')}
              </Link>
            </li>
            <li>
@@ -32,8 +46,9 @@ function Footer() {
                duration={500}
                to="MyPortfolio"
                className="text-md"
+                style={{ cursor: 'pointer' }}
              >
-                Portfolio
+                {t('footer.portfolio')}
              </Link>
            </li>
            <li>
@@ -45,8 +60,9 @@ function Footer() {
                duration={500}
                to="AboutMe"
                className="text-md"
+                style={{ cursor: 'pointer' }}
              >
-                À propos de moi
+                {t('footer.about')}
              </Link>
            </li>
          </ul>
@@ -68,8 +84,8 @@ function Footer() {
                  fill="none"
                >
                  <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
                    d="M7.33341 4.65479H26.0001C27.4729 4.65479 28.6667 5.84869 28.6667 7.32145V25.9881C28.6667 27.4609 27.4729 28.6548 26.0001 28.6548H7.33341C5.86065 28.6548 4.66675 27.4609 4.66675 25.9881V7.32145C4.66675 5.84869 5.86065 4.65479 7.33341 4.65479ZM11.3334 24.6548C11.7016 24.6548 12.0001 24.3563 12.0001 23.9881V14.6548C12.0001 14.2867 11.7016 13.9881 11.3334 13.9881H9.33342C8.96523 13.9881 8.66675 14.2867 8.66675 14.6548V23.9881C8.66675 24.3563 8.96523 24.6548 9.33342 24.6548H11.3334ZM10.3334 12.6548C9.22884 12.6548 8.33341 11.7594 8.33341 10.6548C8.33341 9.55021 9.22884 8.65479 10.3334 8.65479C11.438 8.65479 12.3334 9.55021 12.3334 10.6548C12.3334 11.7594 11.438 12.6548 10.3334 12.6548ZM24.0001 24.6548C24.3682 24.6548 24.6667 24.3563 24.6667 23.9881V17.8548C24.7101 15.7359 23.1435 13.9275 21.0401 13.6681C19.5694 13.5338 18.1445 14.2207 17.3334 15.4548V14.6548C17.3334 14.2867 17.0349 13.9881 16.6667 13.9881H14.6667C14.2986 13.9881 14.0001 14.2867 14.0001 14.6548V23.9881C14.0001 24.3563 14.2986 24.6548 14.6667 24.6548H16.6667C17.0349 24.6548 17.3334 24.3563 17.3334 23.9881V18.9881C17.3334 17.8836 18.2289 16.9881 19.3334 16.9881C20.4379 16.9881 21.3334 17.8836 21.3334 18.9881V23.9881C21.3334 24.3563 21.6319 24.6548 22.0001 24.6548H24.0001Z"
                    fill="black"
                  />
--- a/src/Pages/Home/HeroSection.jsx
+++ b/src/Pages/Home/HeroSection.jsx
@@ -1,26 +1,24 @@
-import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";

 export default function HeroSection() {
-  const openGitHub = (link) => {
-    window.open(link, "_blank");
-  };
+  const { t } = useTranslation();

  return (
    <section id="heroSection" className="hero--section">
      <div className="hero--section--content-box">
        <div className="hero--section--content">
-          <p className="section--title">Hello, je suis ALESSI Thibaut</p>
+          <p className="section--title">{t('hero.hello')}</p>
          <h1 className="hero--section--title">
            <span className="hero--section--title--color">
-              Etudiant à Polytech Lyon
+              {t('hero.student')}
            </span>{" "}
            <br />
-            Passionné d'informatique
+            {t('hero.passion')}
          </h1>
          <p className="hero--section--description">
-            J'aime le C++, le SQL, la guitare, le sport et voyager.
+            {t('hero.description')}
            <br />
-            Mon objectif, m'améliorer chaque jour.
+            {t('hero.goal')}
          </p>
        </div>
      </div>
--- a/src/Pages/Home/MyPortfolio.jsx
+++ b/src/Pages/Home/MyPortfolio.jsx
@@ -1,8 +1,11 @@
-import { Link } from "react-router-dom";
 import data from "../../data/index.json";
+import { useTranslation } from "react-i18next";

 export default function MyPortfolio() {
-  const openGitHub = (link) => {
+  const { t, i18n } = useTranslation();
+  const currentLang = (i18n.language || 'fr').split('-')[0];
+
+  const openLinkInNewTab = (link) => {
    window.open(link, "_blank");
  };

@@ -10,11 +13,11 @@ export default function MyPortfolio() {
    <section className="portfolio--section" id="MyPortfolio">
      <div className="portfolio--container-box">
        <div className="portfolio--container">
-          <p className="sub--title">Projets récents</p>
-          <h2 className="section--heading">Mon Portfolio</h2>
+          <p className="sub--title">{t('portfolio.title')}</p>
+          <h2 className="section--heading">{t('portfolio.heading')}</h2>
        </div>
        <div>
-          <button className="btn btn-github" onClick={() => openGitHub("https://github.com/Morph01")}>
+          <button className="btn btn-github" onClick={() => openLinkInNewTab("https://github.com/Morph01")}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="32"
@@ -23,29 +26,33 @@ export default function MyPortfolio() {
              fill="none"
            >
              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                d="M16.3333 0.166748C7.50028 0.166748 0.333252 7.33378 0.333252 16.1667C0.333252 24.9997 7.50028 32.1667 16.3333 32.1667C25.1489 32.1667 32.3333 24.9997 32.3333 16.1667C32.3333 7.33378 25.1489 0.166748 16.3333 0.166748ZM26.9016 7.54202C28.8105 9.8674 29.9559 12.8348 29.9906 16.0452C29.5394 15.9585 25.0274 15.0387 20.4808 15.6114C20.3767 15.3858 20.2899 15.1428 20.1858 14.8999C19.9081 14.2405 19.5958 13.5637 19.2834 12.9216C24.3159 10.8739 26.6066 7.9238 26.9016 7.54202ZM16.3333 2.52684C19.804 2.52684 22.9797 3.82836 25.3919 5.96285C25.1489 6.30992 23.0838 9.06914 18.2248 10.8912C15.9862 6.77846 13.5047 3.41187 13.1229 2.89126C14.1467 2.64831 15.2227 2.52684 16.3333 2.52684ZM10.5199 3.811C10.8843 4.2969 13.3138 7.68085 15.5871 11.7068C9.20093 13.4075 3.56102 13.3728 2.95364 13.3728C3.83867 9.13855 6.70201 5.61577 10.5199 3.811ZM2.65863 16.1841C2.65863 16.0452 2.65863 15.9064 2.65863 15.7676C3.24865 15.7849 9.87772 15.8717 16.6977 13.824C17.0969 14.5875 17.4613 15.3684 17.8084 16.1493C17.6348 16.2014 17.4439 16.2535 17.2704 16.3055C10.2248 18.5788 6.47642 24.7914 6.16405 25.312C3.99485 22.8999 2.65863 19.6895 2.65863 16.1841ZM16.3333 29.8413C13.1749 29.8413 10.2595 28.7654 7.95147 26.9606C8.19442 26.4574 10.971 21.1125 18.676 18.4227C18.7107 18.4053 18.7281 18.4053 18.7628 18.388C20.689 23.3684 21.47 27.5506 21.6782 28.748C20.0296 29.4595 18.2248 29.8413 16.3333 29.8413ZM23.9515 27.4986C23.8127 26.6656 23.0838 22.6743 21.2964 17.7632C25.5828 17.0864 29.3311 18.1971 29.7997 18.3533C29.2097 22.1537 27.0231 25.4335 23.9515 27.4986Z"
                fill="currentColor"
              />
            </svg>
-            Visiter mon GitHub
+            {t('portfolio.github')}
          </button>
        </div>
      </div>
      <div className="portfolio--section--container">
        {data?.portfolio?.map((item, index) => (
-          <div key={index} className="portfolio--section--card">
+          <div key={index} className="portfolio--section--card"
+            onClick={() => openLinkInNewTab(item.link)}
+            style={{ cursor: 'pointer' }}>
            <div className="portfolio--section--img">
-              <img src={item.src} alt="Placeholder" />
+              <img src={item.src} alt={item.title[currentLang]} />
            </div>
            <div className="portfolio--section--card--content">
              <div>
-                <h3 className="portfolio--section--title">{item.title}</h3>
-                <p className="text-md">{item.description}</p>
+                <h3 className="portfolio--section--title">
+                  {item.title[currentLang]}
+                </h3>
+                <p className="text-md">{item.description[currentLang]}</p>
              </div>
-              <p className="text-sm portfolio--link" onClick={() => openGitHub(item.link)}>
-                {item.voir}
+              <p className="text-sm portfolio--link">
+                {item.voir[currentLang]}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
@@ -56,9 +63,9 @@ export default function MyPortfolio() {
                  <path
                    d="M4.66667 1.66675H18V15.0001M18 1.66675L2 17.6667L18 1.66675Z"
                    stroke="currentColor"
-                    stroke-width="2.66667"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
+                    strokeWidth="2.66667"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
                  />
                </svg>
              </p>
--- a/src/Pages/Home/MySkills.jsx
+++ b/src/Pages/Home/MySkills.jsx
@@ -1,21 +1,25 @@
+import { useTranslation } from "react-i18next";
 import data from "../../data/index.json";

 export default function MySkills() {
+  const { t, i18n } = useTranslation();
+  const currentLang = (i18n.language || 'fr').split('-')[0];
+
  return (
    <section className="skills--section" id="mySkills">
      <div className="portfolio--container">
-        <p className="section--title">Mes Compétences</p>
-        <h2 className="skills--section--heading">Mes Skills</h2>
+        <p className="section--title">{t('skills.title')}</p>
+        <h2 className="skills--section--heading">{t('skills.heading')}</h2>
      </div>
      <div className="skills--section--container">
        {data?.skills?.map((item, index) => (
          <div key={index} className="skills--section--card">
            <div className="skills--section--img">
-              <img src={item.src} alt="Tools" />
+              <img src={item.src} alt="Product Chain" />
            </div>
            <div className="skills--section--card--content">
-              <h3 className="skills--section--title">{item.title}</h3>
-              <p className="skills--section--description">{item.description}</p>
+              <h3 className="skills--section--title">{item.title[currentLang]}</h3>
+              <p className="skills--section--description">{item.description[currentLang]}</p>
            </div>
          </div>
        ))}
--- a/src/Pages/Home/Navbar.jsx
+++ b/src/Pages/Home/Navbar.jsx
@@ -1,8 +1,10 @@
 import { useState, useEffect } from "react";
 import { Link } from "react-scroll";
+import { useTranslation } from "react-i18next";

 function Navbar() {
  const [navActive, setNavActive] = useState(false);
+  const { t } = useTranslation();

  const toggleNav = () => {
    setNavActive(!navActive);
@@ -34,9 +36,19 @@ function Navbar() {

  return (
    <nav className={`navbar ${navActive ? "active" : ""}`}>
-      <div>
+      <Link
+        onClick={closeMenu}
+        activeClass="navbar--active-content"
+        spy={false}
+        smooth={true}
+        offset={-70}
+        duration={500}
+        to="heroSection"
+        className="navbar--logo"
+        style={{ cursor: 'pointer' }}
+      >
        <img src="./img/logo.png" alt="Logo" />
-      </div>
+      </Link>
      <a
        className={`nav__hamburger ${navActive ? "active" : ""}`}
        onClick={toggleNav}
@@ -58,7 +70,7 @@ function Navbar() {
              to="heroSection"
              className="navbar--content"
            >
-              Accueil
+              {t('navbar.home')}
            </Link>
          </li>
          <li>
@@ -72,7 +84,7 @@ function Navbar() {
              to="MyPortfolio"
              className="navbar--content"
            >
-              Portfolio
+              {t('navbar.portfolio')}
            </Link>
          </li>
          <li>
@@ -86,7 +98,7 @@ function Navbar() {
              to="AboutMe"
              className="navbar--content"
            >
-              À propos de moi
+              {t('navbar.about')}
            </Link>
          </li>
        </ul>
@@ -101,7 +113,7 @@ function Navbar() {
        to="Contact"
        className="btn btn-outline-primary"
      >
-        Contactez Moi
+        {t('navbar.contact')}
      </Link>
    </nav>
  );
--- a/src/data/index.json
+++ b/src/data/index.json
@@ -3,46 +3,151 @@
    {
      "id": "1",
      "src": "./img/cpp.png",
-      "title": "POO (Programmation Orientée Objet)",
-      "description": "Developpement en C++ du jeu Blitz."
+      "title": {
+        "fr": "POO (Programmation Orientée Objet)",
+        "en": "OOP (Object-Oriented Programming)"
+      },
+      "description": {
+        "fr": "Développement en C++ du jeu Blitz.",
+        "en": "Development of the Blitz game in C++."
+      }
    },
    {
      "id": "2",
      "src": "./img/sql.png",
-        "title": "Base de Données et SGBD MySQL",
-        "description": "Utilisation du SGBD MySQL pour le projet de mise en place d'une base de données pour le jeu Blitz."
+      "title": {
+        "fr": "Base de Données et SGBD MySQL",
+        "en": "Databases and MySQL DBMS"
+      },
+      "description": {
+        "fr": "Utilisation du SGBD MySQL pour le projet de mise en place d'une base de données pour le jeu Blitz.",
+        "en": "Using MySQL DBMS for implementing a database for the Blitz game."
+      }
    },
    {
      "id": "3",
      "src": "./img/html-css.png",
-      "title": "Front-End",
-      "description": "Développement de l'interface Front-End du site de notre participation à la Nuit de l'Info 2024 en HTML, SCSS, ReactJS + Vite."
+      "title": {
+        "fr": "Front-End",
+        "en": "Front-End"
+      },
+      "description": {
+        "fr": "Développement de l'interface Front-End du site de notre participation à la Nuit de l'Info 2024 en HTML, SCSS, ReactJS + Vite.",
+        "en": "Development of the Front-End interface for our 'Nuit de l'Info 2024' participation website using HTML, SCSS, ReactJS + Vite."
+      }
+    },
+    {
+      "id": "4",
+      "src": "./img/java.png",
+      "title": {
+        "fr": "POO (Programmation Orientée Objet)",
+        "en": "OOP (Object-Oriented Programming)"
+      },
+      "description": {
+        "fr": "Développement et compréhension de code JAVA, accordé avec Maven et Hibernate par exemple.",
+        "en": "Development and understanding of JAVA code, combined with tools like Maven and Hibernate."
+      }
+    },
+    {
+      "id": "5",
+      "src": "./img/jira.png",
+      "title": {
+        "fr": "Gestion de Projet / Méthodes agiles / ITIL",
+        "en": "Project Management / Agile Methods / ITIL"
+      },
+      "description": {
+        "fr": "Compréhension et application au quotidien de méthodes agiles, processus ITIL.",
+        "en": "Understanding and daily application of agile methods and ITIL processes."
+      }
+    },
+    {
+      "id": "6",
+      "src": "./img/git.png",
+      "title": {
+        "fr": "Git",
+        "en": "Git"
+      },
+      "description": {
+        "fr": "Utilisation de Git pour la gestion de version de tout mes projets.",
+        "en": "Using Git for version control of all my projects."
+      }
+    },
+    {
+      "id": "7",
+      "src": "./img/docker.png",
+      "title": {
+        "fr": "Docker",
+        "en": "Docker"
+      },
+      "description": {
+        "fr": "Utilisation de Docker pour mettre en place des conteneurs pour mes projets et expérience de la conteneurisation de diverses applications chez Worldline.",
+        "en": "Use of Docker to set up containers for my projects and experienced containerization of various applications at Worldline."
+      }
+    },
+    {
+      "id": "8",
+      "src": "./img/kubernetes.png",
+      "title": {
+        "fr": "Kubernetes",
+        "en": "Kubernetes"
+      },
+      "description": {
+        "fr": "Utilisation de Kubernetes pour la gestion de conteneurs d'une plateforme de plusieurs applications sur GCP (Google Cloud Platform).",
+        "en": "Using Kubernetes to manage containers for a multi-application platform on GCP (Google Cloud Platform)."
+      }
    }
  ],
  "portfolio": [
    {
      "id": "1",
-      "src": "./img/blitz.jpg",
-      "title": "Blitz",
-      "description": "Jeu 3D multijoueurs cross-platforme (Windows, Linux, MacOS, Android) développé en C++, interface 3D avec OpenGL, interface utilisateur avec ImGui.",
-      "voir": "Voir Sur Gitea",
-      "link": "https://git.ale-pri.com/Blitz/Blitz"
+      "src": "./img/cinetour.png",
+      "title": {
+        "fr": "Cinetour",
+        "en": "Cinetour"
+      },
+      "description": {
+        "fr": "Une application web pour les cinéphiles et les amateurs de voyage pour explorer les lieux réels où leurs films préférés ont été tournés. Développée avec Java (Spring Boot), React Frontend, MySQL, Dockerisée et hébergée sur un serveur cloud personnel.",
+        "en": "A web application for cinephiles and travel enthusiasts to explore the real-life locations where their favorite films were shot. Developed with Java (Spring Boot), React Frontend, MySQL, Dockerized and hosted on a personal cloud server."
+      },
+      "voir": {
+        "fr": "Découvrir",
+        "en": "Discover"
+      },
+      "link": "https://cinetour.ale-pri.com"
    },
    {
      "id": "2",
-        "src": "./img/gauss.png",
-        "title": "Elimination de Gauss-Jordan",
-        "description": "Utilisation C++ pour effectuer plusieurs opérations sur des matrices afin de trouver le noyau et l'image d'applications linéaires par la méthode du pivot de Gauss",
-        "voir": "Voir Sur Gitea",
-        "link": "https://git.ale-pri.com/ProjetMAM/Pivot"
+      "src": "./img/blitz.jpg",
+      "title": {
+        "fr": "Blitz",
+        "en": "Blitz"
+      },
+      "description": {
+        "fr": "Jeu 3D multijoueurs cross-platforme (Windows, Linux, MacOS, Android) développé en C++, interface 3D avec OpenGL, interface utilisateur avec ImGui.",
+        "en": "Cross-platform multiplayer 3D game (Windows, Linux, MacOS, Android) developed in C++, 3D interface with OpenGL, user interface with ImGui."
+      },
+      "voir": {
+        "fr": "Voir Sur Gitea",
+        "en": "View On Gitea"
+      },
+      "link": "https://git.ale-pri.com/Blitz/Blitz"
    },
    {
      "id": "3",
-      "src": "./img/nuitinfo.png",
-      "title": "Front-End",
-      "description": "Participation à la nuit de l'info 2024, coté au front-end.",
-      "voir": "Voir Sur GitHub",
-      "link": "https://github.com/PolyCrusader/PolyCrusader"
+      "src": "./img/gauss.jpg",
+      "title": {
+        "fr": "Elimination de Gauss-Jordan",
+        "en": "Gauss-Jordan Elimination"
+      },
+      "description": {
+        "fr": "Utilisation C++ pour effectuer plusieurs opérations sur des matrices afin de trouver le noyau et l'image d'applications linéaires par la méthode du pivot de Gauss",
+        "en": "Using C++ to perform various operations on matrices to find the kernel and image of linear applications using the Gaussian pivot method"
+      },
+      "voir": {
+        "fr": "Voir Sur Gitea",
+        "en": "View On Gitea"
+      },
+      "link": "https://git.ale-pri.com/ProjetMAM/Pivot"
    }
  ]
 }
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -0,0 +1,32 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import translationEN from './locales/en.json';
+import translationFR from './locales/fr.json';
+
+const resources = {
+    en: {
+        translation: translationEN
+    },
+    fr: {
+        translation: translationFR
+    }
+};
+
+i18n
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+        resources,
+        fallbackLng: 'fr',
+        detection: {
+            order: ['navigator', 'htmlTag', 'path', 'subdomain'],
+            caches: ['localStorage']
+        },
+        interpolation: {
+            escapeValue: false
+        }
+    });
+
+export default i18n;
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -0,0 +1,41 @@
+{
+    "navbar": {
+        "home": "Home",
+        "portfolio": "Portfolio",
+        "about": "About Me",
+        "contact": "Contact Me"
+    },
+    "hero": {
+        "hello": "Hello, I'm ALESSI Thibaut",
+        "student": "Student at Polytech Lyon",
+        "passion": "SRE/OPS apprentice at WORLDLINE",
+        "description": "I love Java, Docker, guitar, chess, sports, and traveling.",
+        "goal": "My goal is to improve every day."
+    },
+    "skills": {
+        "title": "My Competencies",
+        "heading": "My Skills"
+    },
+    "about": {
+        "title": "About",
+        "heading": "About Me",
+        "description1": "Third-year engineering student at Polytech Lyon in Computer Science, working as an SRE/OPS engineer at WORLDLINE through an apprenticeship program.",
+        "description2": "Passionate about IT, I'm looking for an opportunity for a summer internship abroad to develop my skills and contribute to a company project, whether Cloud, Infrastructure, Development, OPS..."
+    },
+    "portfolio": {
+        "title": "Recent Projects",
+        "heading": "My Portfolio",
+        "github": "Visit my GitHub"
+    },
+    "contact": {
+        "title": "Get in Touch",
+        "heading": "Contact Me",
+        "description1": "If you want to contact me, you can send me an email at:",
+        "description2": "Or directly through LinkedIn at the bottom of the page."
+    },
+    "footer": {
+        "home": "Home",
+        "portfolio": "Portfolio",
+        "about": "About Me"
+    }
+}
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -0,0 +1,41 @@
+{
+    "navbar": {
+        "home": "Accueil",
+        "portfolio": "Portfolio",
+        "about": "À propos de moi",
+        "contact": "Contactez Moi"
+    },
+    "hero": {
+        "hello": "Hello, je suis ALESSI Thibaut",
+        "student": "Etudiant à Polytech Lyon",
+        "passion": "Alternant SRE/OPS chez WORLDLINE",
+        "description": "J'aime Java, Docker, la guitare, les échecs, le sport et voyager.",
+        "goal": "Mon objectif, m'améliorer chaque jour."
+    },
+    "skills": {
+        "title": "Mes Compétences",
+        "heading": "Mes Skills"
+    },
+    "about": {
+        "title": "À propos",
+        "heading": "À propos de moi",
+        "description1": "Alternant en troisième année d'école d'ingénieur à Polytech Lyon en Informatique en alternance à WORLDLINE, occupant le poste d'ingénieur SRE/OPS.",
+        "description2": "Passionné d'informatique, je suis à la recherche d'une opportunité pour un stage d'été à l'étranger pour développer mes compétences et contribuer à un projet d'entreprise qu'il soit orienté Cloud, Infrastructure, Développement, OPS..."
+    },
+    "portfolio": {
+        "title": "Projets récents",
+        "heading": "Mon Portfolio",
+        "github": "Visiter mon GitHub"
+    },
+    "contact": {
+        "title": "Rentrer en Contact",
+        "heading": "Contactez Moi",
+        "description1": "Si vous voulez me contacter, vous pouvez m'envoyer un mail à l'adresse email suivante :",
+        "description2": "Ou bien directement par LinkedIn en bas de page."
+    },
+    "footer": {
+        "home": "Accueil",
+        "portfolio": "Portfolio",
+        "about": "À propos de moi"
+    }
+}
Author	SHA1	Message	Date
Morph01	543198994b	feat: add Plausible support All checks were successful Linux arm64 / Build-and-Deploy (push) Successful in 46s Details	2025-05-15 20:29:03 +02:00
Morph01	b9ce2ffdc2	Add multi-languages support with i18next Some checks failed Linux arm64 / Build-and-Deploy (push) Failing after 7s Details	2025-03-04 21:39:02 +01:00
Morph01	069be079eb	the CI file changed its name unintentionally ^^ All checks were successful Linux arm64 / Build-and-Deploy (push) Successful in 36s Details	2024-11-23 19:04:06 +01:00
Morph01	aac41fd363	Update build.yml with test deploy with brain All checks were successful Linux arm64 / Build-and-Deploy (push) Successful in 39s Details	2024-11-23 16:47:59 +00:00
Morph01	dff4093315	Update build.yml with test deploy All checks were successful Linux arm64 / Build-and-Deploy (push) Successful in 34s Details	2024-11-23 16:33:16 +00:00
Morph01	1be90da3c3	Update build.yml with test deploy Some checks failed Linux arm64 / Build-and-Deploy (push) Failing after 34s Details	2024-11-23 16:31:14 +00:00
Morph01	1588363d97	Update build.yml with test deploy with brain Some checks failed Linux arm64 / Build-and-Deploy (push) Failing after 38s Details	2024-11-23 16:27:55 +00:00
Morph01	0c64ba030c	Update build.yml with test deploy Some checks failed Linux arm64 / Build-and-Deploy (push) Failing after 38s Details	2024-11-23 16:26:00 +00:00
Morph01	d630bb4812	Update build.yml All checks were successful Linux arm64 / Build (push) Successful in 37s Details	2024-11-23 15:50:07 +00:00
Morph01	c067f0b437	test another ssh key Some checks failed Linux arm64 / Build (push) Failing after 35s Details	2024-11-06 15:54:13 +00:00
Morph01	21355ac913	feat: add pipeline Some checks failed Linux arm64 / Build (push) Failing after 36s Details	2024-11-06 12:35:34 +01:00
Morph01	1f650249a3	chore: up to 1.1 with npm updated packages	2024-11-05 21:11:44 +01:00
Morph01	9c9860c80e	fix: correct path and add better favicon	2024-11-05 21:06:05 +01:00
Morph01	2efe845306	feat: Add skills in My Skills	2024-11-05 21:05:33 +01:00
Morph01	7e14b570eb	feat: Update infos on About Me	2024-11-05 21:04:37 +01:00
Morph01	b48bd9f372	fix: Update JSX attributes to use camelCase convention	2024-11-05 21:02:49 +01:00