add choose language

my-app/package-lock.json

@@ -23,10 +23,13 @@
         "bootstrap": "^4.6.0",
         "country-flag-icons": "^1.5.11",
         "framer-motion": "^11.1.7",
+        "i18next": "^23.11.3",
+        "i18next-xhr-backend": "^3.2.2",
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.2",
         "react-country-flag": "^3.1.0",
         "react-dom": "^18.3.1",
+        "react-i18next": "^14.1.1",
         "react-icons": "^5.2.0",
         "react-router-dom": "^6.23.0",
         "react-scripts": "^5.0.1",
@@ -9675,6 +9678,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
@@ -9818,6 +9829,37 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/i18next": {
+      "version": "23.11.3",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.3.tgz",
+      "integrity": "sha512-Pq/aSKowir7JM0rj+Wa23Kb6KKDUGno/HjG+wRQu0PxoTbpQ4N89MAT0rFGvXmLkRLNMb1BbBOKGozl01dabzg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-xhr-backend": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/i18next-xhr-backend/-/i18next-xhr-backend-3.2.2.tgz",
+      "integrity": "sha512-OtRf2Vo3IqAxsttQbpjYnmMML12IMB5e0fc5B7qKJFLScitYaXa1OhMX0n0X/3vrfFlpHL9Ro/H+ps4Ej2j7QQ==",
+      "deprecated": "replaced by i18next-http-backend",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -15542,6 +15584,27 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-i18next": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.1.tgz",
+      "integrity": "sha512-QSiKw+ihzJ/CIeIYWrarCmXJUySHDwQr5y8uaNIkbxoGRm/5DukkxZs+RPla79IKyyDPzC/DRlgQCABHtrQuQQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.0.tgz",
@@ -17923,6 +17986,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

my-app/package.json

@@ -18,10 +18,13 @@
     "bootstrap": "^4.6.0",
     "country-flag-icons": "^1.5.11",
     "framer-motion": "^11.1.7",
+    "i18next": "^23.11.3",
+    "i18next-xhr-backend": "^3.2.2",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
     "react-country-flag": "^3.1.0",
     "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.1",
     "react-icons": "^5.2.0",
     "react-router-dom": "^6.23.0",
     "react-scripts": "^5.0.1",

my-app/src/App.tsx

@@ -11,8 +11,9 @@ import React, { useState } from "react";
 import CssBaseline from '@mui/material/CssBaseline';
 import Header from './components/header';
 import { ColorModeContext } from './utils/color-toggle';
+import { useTranslation } from 'react-i18next';
 
-
+import "./utils/i18n";
 
 function App()
 {
@@ -37,6 +38,8 @@ function App()
     },
   });
 
+  const { i18n, t } = useTranslation();
+
   return (
     <BrowserRouter>
     <CssBaseline />

my-app/src/components/button.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 import { Button as BaseButton } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
 
 export default function ButtonSimple() {
+  const { i18n, t } = useTranslation();
   return (
     // <Stack spacing={2} direction="row">
-      <Button>Mon CV</Button>
+      <Button>{t("resume")}</Button>
   );
 }
 

my-app/src/components/header.tsx

@@ -1,63 +1,70 @@
 import MenuSimple from './language';
 import MaterialUISwitch from './switch'
 import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
-// import { ThemeProvider, createTheme } from '@mui/material/styles';
 import React, { useState, useContext } from "react";
-
 import logo from '../img/first.jpg';
 
-// import { ColorModeContext } from '../utils/color-toggle'
-
-// const theme = useTheme()
-// const colorMode = React.useContext(ColorModeContext);
-
 import { ColorModeContext } from '../utils/color-toggle';
+import { useTranslation } from 'react-i18next';
 
-// const { ColorMode, setColorMode } = useColorMode();
+import ReactCountryFlag from "react-country-flag"
-
+import { FormControl } from 'react-bootstrap';
+import { Box, InputLabel, MenuItem} from '@mui/material';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 
 function Header()
 {
-    
+    const { i18n, t } = useTranslation();
     const { changeMode } = useContext(ColorModeContext);
-    // const { colorMode, setColorMode } = changeMode();
+    const [language, setLanguage] = useState(1);
+
+    function handleChange() {
+        // i18n.language
+        i18n.changeLanguage(language ? 'en' : 'fr')
+        setLanguage(language ? 0 : 1)
+    }
 
-    // const toggleColorMode = () => {
-    //     // Call setColorMode and pass the new color mode value
-    //     setColorMode(colorMode === 'light' ? 'dark' : 'light');
-    // };
 
     return (
-        // <ThemeProvider theme={darkTheme}>
         <header>
-            <div className="header-content">
+            <div  className="header-content">
-              {/* <h1 className="title">A.P</h1> */}
+              <a className="logo" href="/">
-              <div className="logo">
                 <img src={logo} alt="Logo" />
-              </div>
+              </a>
-
               <div className="pages">
-                Contact
+                {t("page1")}
               </div>
               <div className="pages">
-                Projets
+                {t("page2")}
               </div>
               <div className="pages">
-                CV
+                {t("page3")}
               </div>
               <div className="pages">
-                Competences
+                {t("page4")}
               </div>
-
-
               <div className="language">
-                <MenuSimple/>
+                {/* <MenuSimple/> */}
+                <Box sx={{ minWidth: 120 }}>
+                {/* <FormControl > */}
+                  {/* <InputLabel id="demo-simple-select-label">Age</InputLabel> */}
+                  <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    value={language}
+                    // label="Age"
+                    onChange={handleChange}
+                  >
+                    <MenuItem value={0}><ReactCountryFlag countryCode="GB" svg/></MenuItem>
+                    <MenuItem value={1}><ReactCountryFlag countryCode="FR" svg/></MenuItem>
+                  </Select>
+                {/* </FormControl> */}
+                </Box>
+
                 <MaterialUISwitch onChange={changeMode}/>
-                {/* <Switch className="dark_mode" checked={toggleDarkMode} onChange={toggleDarkTheme} defaultChecked /> */}
               </div>
             </div>
         </header>
-        // </ThemeProvider>
     )
 }
 

my-app/src/css/mine.css

@@ -8,28 +8,19 @@
 }
 
 body {
-    /* overflow: hidden; */
+    overflow: hidden;
-    /* color:black; */
     max-width: 100vw;
     font-family: "Fira Sans", Arial, sans-serif;
-    /* height: 100vh; */
     width: 100vw;
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
-    /* border: 1vh solide white; */
   }
   
   header {
     width: 100%;
-    /* background-color: #a4a4a4; */
-    /* padding: 20px 0; */
     text-align: center;
     height: 15vh;
-
-    /* border-bottom-width: 5px; */
-    /* border-bottom: 1cm; */
-    /* border-color: rgb(207, 0, 0); */
   }
   
   .header-content {
@@ -37,39 +28,29 @@ body {
     width: 100vw;
     height: 100%;
     display: flex;
-    /* align-items: center; */
     justify-content: space-between;
-    /* padding-left: 0px; */
   }
   
   .logo img{
     height: 100%; /* Adjust the size as needed */
-    /* margin-right: 32.5vw; */
     margin-left: 3vw;
     margin-right: 20vw;
     margin-bottom: 1vh;
-    /* margin-left: 20px; */
   }
   
   .pages {
     margin-left: 5vw;
     font-weight: 800;
-    /* width: 5vw; */
-    /* margin-top: 5vh; */
     align-self: center;
-    /* height: 5vh; */
-
     transition-property: transform;
-    /* transition-duration: 200ms; */
     transition: all 200ms ease;
 
     &:hover {
       transform: scale(1.1);
-      border-bottom: 4px solid;
+      border-bottom: 2px solid;
     }
   }
 
-
   .title {
     color:black;
     font-weight: 800;
@@ -93,15 +74,11 @@ body {
     margin-right: 0vw;
   }
 
-  /* .css-15bhy65 {
-    /* margin-right:  20px; */
-
   Button{
     font-weight: 800;
   }
 
   .dark_mode {
-    /* font-weight: 800; */
     margin-right: 2vw;
     width: 8vw;
   }
@@ -128,10 +105,6 @@ body {
     width: 50vh;
     height: 50%;
     align-self: start;
-    /* margin-left: 30%; */
-    /* margin-left: 10%; */
-    /* margin-top: 15%; */
-    /* max-width: 60%; */
   }
   
   .presentation {
@@ -142,9 +115,7 @@ body {
 
   .home {
     position: absolute;
-    /* top: 50%; */
     right: -100vw;
-    /* height: 50%; */
     animation: slideRight 2s ease forwards; 
     display: flex;
     flex-direction: row;
@@ -173,25 +144,17 @@ body {
     margin-left: 70%;
 
   }
-  
-  /* .css-cg7pzv {
-    width: 20vw;
-  }  */
 
   .project_group {
     font-size: 1vw;
     display: flex;
     flex-direction: row;
-    /* width: 100vw; */
-    /* justify-content: center; */
-    /* align-self: left; */
     align-items: center;
   }
 
   .project_list {
     vertical-align: baseline;
     margin-right: 2vw;
-    /* justify-content: space-between; */
     transition-property: transform;
     transition-duration: 500ms;
     &:hover {
@@ -210,15 +173,9 @@ body {
     transition: all 700ms ease;
     transform: scale(1.15);
     color: rgb(0, 127, 255);
-    /* transition-property: transform; */
-    /* transition-duration: 700ms; */
-    /* padding-right: 10vh; */
     opacity: 0;
   }
 
   .project_list:hover + .arrow {
-    /* color: rgb(0, 127, 255); */
-    /* transition-property: transform; */
-    /* transition-duration: 700ms; */
     opacity: 1;
-  }
+  }

my-app/src/index.tsx

@@ -5,7 +5,7 @@ import App from './App';
 // import ColorModeProvider from './utils/color-toggle';
 import reportWebVitals from './reportWebVitals';
 
-
+import "./utils/i18n";
 import { ColorModeProvider } from "./utils/color-toggle"
 
 const root = ReactDOM.createRoot(

my-app/src/pages/home.tsx

@@ -2,26 +2,31 @@ import Header from '../components/header'
 import ButtonSimple from '../components/button'
 
 import { FaArrowRightLong } from "react-icons/fa6";
+import { useTranslation } from 'react-i18next';
 
 function Home()
 {
+
+    const { i18n, t } = useTranslation();
+
     return(
       <div>
         <body>
           {/* <Header/> */}
           <div className='home'>
             <div className="presentation">
-                <div className='hello'>Bienvenue.</div>
+                <div className='hello'>{t("welcome")}</div>
-                <div className="description">Étudiant a 42 en informatique, je cherche un emploi afin de compléter 
+                {/* <div className="description">É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.</div>
+                  et suis prêt à discuter de mon parcours plus amplement lors d’un entretien.</div> */}
+                  <div>{t("description")}</div>
                 <div className="cv_button">
                   <ButtonSimple/>
                 </div>
             </div>
             <div className="project">
-                <div className='project_txt'>Projects</div>
+                <div className='project_txt'>{t("project")}</div>
                 <div className = "project_group">
                   <p className="project_list">- Ft_Transcendence</p>
                   <FaArrowRightLong className="arrow"/>

my-app/src/utils/i18n.tsx

@@ -0,0 +1,52 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// import i18n from "i18next";
+// import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-xhr-backend";
+// import { initReactI18next } from "react-i18next";
+
+// const fallbackLng = ["en"];
+
+
+i18n
+  .use(Backend) // used to load data from othe directory
+//   .use(LanguageDetector) // detects the current language
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    fallbackLng: "fr",
+    // lng: getCurrentLang(),
+    interpolation: {
+      escapeValue: false,
+    },
+    resources: {
+      en: {
+        translation: {
+          page1: "Contact",
+          page2: "Projects",
+          page3: "Resume",
+          page4: "Skills",
+          page5: "",
+          description:"Student majoring in computer science at 42, I am seeking employment to complement my academic training with meaningful professional experience. I am open to various job opportunities related to my studies and am ready to discuss my background further during an interview.",
+          project:"Projects",
+          welcome:"Welcome.",
+          resume:"My Resume",
+        },
+      },
+      fr: {
+        translation: {
+          page1: "Contact",
+          page2: "Projets",
+          page3: "CV",
+          page4: "Competences",
+          page5: "",
+          description:"É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.",
+          project:"Projets",
+          welcome:"Bienvenue.",
+          resume:"Mon CV",
+        },
+      },
+    },
+  });
+
+export default i18n;

my-app/src/utils/language_index.tsx

@@ -0,0 +1,5 @@
+export const LANGUAGES = [
+    { label: "Spanish", code: "es" },
+    { label: "English", code: "en" },
+    { label: "French", code: "fr" },
+  ];