Add multi-languages support with i18next

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,13 +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">
-            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.
+            {t('about.description1')}
           </p>
           <p className="hero--section-description">
-            Passionné d’informatique, je suis à la recherche d’une mobilité à l'étranger pour développer mes compétences et contribuer à un projet d'entreprise qu’il soit orienté Infrastructure, Développement, OPS, Bases de Données ...
+            {t('about.description2')}
           </p>
         </div>
       </div>

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>

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>

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>

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"
@@ -29,23 +32,27 @@ export default function MyPortfolio() {
                 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"

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>
         ))}

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>
   );