feat: adding responsivity and more translation

Aurelienschmi · Oct 5, 2024 · c571590 · c571590
1 parent 0fb24cb
commit c571590
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/react": "^18.3.9"
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -13,10 +13,9 @@ const App = () => {
   const [works] = useState(false);
   const [contact] = useState(false);
   const [isDarkMode, setIsDarkMode] = useState(false);
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   useEffect(() => {
-    const darkModeClass = 'dark';
+    const darkModeClass = "dark";
     const rootElement = document.documentElement;
 
     if (isDarkMode) {
@@ -26,52 +25,54 @@ const App = () => {
     }
   }, [isDarkMode]);
 
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
   const toggleDarkMode = () => {
     setIsDarkMode(!isDarkMode);
   };
 
   return (
     <AppProvider>
       <div
-        className={`bg-cover bg-center flex justify-center items-start min-h-screen ${isDarkMode ? 'bg-dark' : 'bg-light'}`}
+        className={`bg-cover bg-center flex flex-wrap lg:flex-nowrap justify-center items-start min-h-screen ${
+          isDarkMode ? "bg-dark" : "bg-light"
+        }`}
         style={{
           backgroundImage: isDarkMode
             ? `url(/images/background_dark.jpg)`
-            : `url(/images/background_light.jpg)`
+            : `url(/images/background_light.jpg)`,
         }}
       >
-        <div className="sticky top-16 bg-white dark:bg-black rounded-3xl p-6 mt-56">
-          <PersonalInfo />
-        </div>
-        <div className="absolute top-0 right-0 m-4 flex space-x-4">
-          {windowWidth <= 1080 && (
-            <BurgerMenu about={about} resume={resume} works={works} contact={contact} />
-          )}
+        <div className="absolute top-0 right-0 m-4 flex space-x-4 ">
+          <div className="2xl:hidden">
+          <BurgerMenu
+              about={about}
+              resume={resume}
+              works={works}
+              contact={contact}
+            />
+          </div>
+
           <Translation />
           <SwitchTheme toggleDarkMode={toggleDarkMode} />
         </div>
-        <div className="flex flex-col w-1/2 p-5 m-5 bg-white dark:bg-black rounded-3xl mt-40">
+
+        <div className="lg:sticky top-16 bg-white dark:bg-black rounded-3xl p-6 mt-56 w-5/6 lg:w-1/3 mx-5">
+          <PersonalInfo />
+        </div>
+
+        <div className="flex flex-col w-5/6 p-5 m-5 bg-white dark:bg-black rounded-3xl lg:mt-40 bx-border">
           <Home about={about} resume={resume} works={works} contact={contact} />
         </div>
-        <div className="sticky top-16 bg-white dark:bg-black rounded-3xl p-4 mt-56">
-        {windowWidth > 1080 && (
-            <Header about={about} resume={resume} works={works} contact={contact} />
-          )}
+        <div className="sticky top-16 bg-white dark:bg-black rounded-3xl p-4 mt-56 hidden 2xl:block mx-5">
+            <Header
+              about={about}
+              resume={resume}
+              works={works}
+              contact={contact}
+            />
         </div>
       </div>
     </AppProvider>
   );
 };
 
-export default App;
+export default App;
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -80,7 +80,7 @@ const Home = () => {
             <p className="mx-6">{t("home.AboutContent")}</p>
             <h3 className="text-2xl font-semibold mx-6">{t("home.About1")}</h3>
             <div className="flex flex-wrap justify-around 2xl:flex-nowrap ">
-              <div >
+              <div>
                 <div className="bg-pink-50 dark:bg-black border dark:border-white rounded-3xl p-2 w-auto h-auto flex justify-start m-2">
                   <img
                     src="/images/dev.svg"
@@ -98,7 +98,7 @@ const Home = () => {
                 <div className="bg-blue-50 dark:bg-black border dark:border-white rounded-3xl p-2 w-auto h-auto flex justify-start m-2">
                   <img
                     src="/images/network.svg"
-                    alt="developpment icon"
+                    alt="network icon"
                     className="h-20"
                   />
                   <div className="flex flex-col m-5">
@@ -114,7 +114,7 @@ const Home = () => {
                 <div className="bg-blue-50 dark:bg-black border dark:border-white rounded-3xl p-2 w-auto h-auto flex justify-start m-2">
                   <img
                     src="/images/database.svg"
-                    alt="developpment icon"
+                    alt="database icon"
                     className="h-20"
                   />
                   <div className="flex flex-col m-5">
@@ -128,7 +128,7 @@ const Home = () => {
                 <div className="bg-pink-50 dark:bg-black border dark:border-white rounded-3xl p-2 w-auto h-auto flex justify-start m-2">
                   <img
                     src="/images/sports.svg"
-                    alt="developpment icon"
+                    alt="Sports icon"
                     className="h-20"
                   />
                   <div className="flex flex-col m-5">
@@ -185,8 +185,7 @@ const Home = () => {
                   {t("home.Education")}
                 </h3>
               </div>
-              <div className="flex justify-around">
-                <div className="bg-pink-50 dark:bg-black border border-white rounded-3xl p-2 w-full 2xl:w-auto h-auto flex flex-col justify-center items-center 2xl:items-start m-5">
+                <div className="bg-pink-50 dark:bg-black border border-white rounded-3xl p-2 w-full 2xl:w-auto h-auto flex flex-col items-start m-5">
                   <div className="p-2 text-zinc-600 dark:text-zinc-400">
                     <p className="text-sm">{t("home.EnigmaYear")}</p>
                     <div className="flex flex-nowrap items-center ">
@@ -199,10 +198,8 @@ const Home = () => {
                     <p>{t("home.EnigmaContent")}</p>
                     <p> {t("home.EnigmaPosition")}</p>
                   </div>
-                </div>
               </div>
-              <div className="flex flex-wrap justify-around 2xl:flex-nowrap">
-                <div className="bg-blue-50 dark:bg-black border border-white rounded-3xl p-2 w-full 2xl:w-80 h-40 flex flex-col justify-center items-center 2xl:items-start m-5">
+                <div className="bg-blue-50 dark:bg-black border border-white rounded-3xl p-2 w-full 2xl:w-auto h-auto flex flex-col items-start m-5">
                   <div className="p-2 text-zinc-600 dark:text-zinc-400">
                     <p className="text-sm">{t("home.StapsYear")}</p>
                     <div className="flex flex-nowrap items-center ">
@@ -217,7 +214,7 @@ const Home = () => {
                   </div>
                 </div>
 
-                <div className="bg-pink-50 dark:bg-black border border-white rounded-3xl p-2 w-full 2xl:w-80 h-40 flex flex-col justify-center items-center items-start m-5">
+                <div className="bg-pink-50 dark:bg-black border border-white rounded-3xl p-2 w-full 2xl:w-auto h-auto flex flex-col items-start m-5">
                   <div className="p-2 text-zinc-600 dark:text-zinc-400">
                     <p className="text-sm">{t("home.LyceeYear")}</p>
                     <div className="flex flex-nowrap items-center ">
@@ -231,7 +228,6 @@ const Home = () => {
                     <p> {t("home.LyceePosition")}</p>
                   </div>
                 </div>
-              </div>
 
               <div className="mt-8 flex flex-nowrap items-center">
                 <img

diff --git a/src/components/PersonalInfo.tsx b/src/components/PersonalInfo.tsx
@@ -1,11 +1,14 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
+import { useTranslation } from "react-i18next";
 
 const PersonalInfo: React.FC = () => {
   const [birthDateIsHovered, setBirthDateIsHovered] = useState(false);
   const [locationIsHovered, setLocationIsHovered] = useState(false);
   const [emailIsHovered, setEmailIsHovered] = useState(false);
   const [phoneIsHovered, setPhoneIsHovered] = useState(false);
 
+  const { t } = useTranslation("global");
+
   const calculateAge = (birthDate: string): number => {
     const birth = new Date(birthDate);
     const today = new Date();
@@ -86,7 +89,7 @@ const PersonalInfo: React.FC = () => {
           </button>
         </section>
       </div>
-      <div className="bg-zinc-100 dark:bg-zinc-900 rounded-lg p-3">
+      <div className="bg-zinc-100 dark:bg-zinc-900 rounded-lg p-3 w-full">
         <div className="flex border-b-2 dark:border-zinc-600 py-2.5 ml-5">
           <button
             className="bg-white dark:bg-black m-1 rounded-lg p-1 hover:bg-blue-500 dark:hover:bg-blue-500 transition-colors duration-600"
@@ -118,7 +121,7 @@ const PersonalInfo: React.FC = () => {
 
           <div>
             <p className="text-sm ml-5">
-              <em>Âge</em>
+              <em>{t("personnalInfo.Age")}</em>
             </p>
             <p className="ml-5">{age} ans</p>
           </div>
@@ -142,14 +145,14 @@ const PersonalInfo: React.FC = () => {
           </button>
           <div>
             <p className="text-sm ml-5">
-              <em>Localisation:</em>
+              <em>{t("personnalInfo.Localisation")}</em>
             </p>
 
             <p className="ml-5">59510, HEM</p>
           </div>
         </div>
 
-        <div className="flex border-b-2 dark:border-zinc-600 py-2.5 ml-5">
+        <div className="flex border-b-2 dark:border-zinc-600 ml-5">
           <a href="mailto:[email protected]">
             <button
               className="bg-white dark:bg-black m-1 rounded-lg p-1 hover:bg-blue-500 dark:hover:bg-blue-500 transition-colors duration-600"
@@ -180,11 +183,13 @@ const PersonalInfo: React.FC = () => {
               </svg>
             </button>
           </a>
-          <div>
+          <div className="w-full box-border overflow-hidden max-w-full break-words">
             <p className="text-sm ml-5">
-              <em>Email:</em>
+              <em>{t("personnalInfo.Email")}</em>
+            </p>
+            <p className="whitespace-pre-wrap-sm ml-5">
+              [email protected]
             </p>
-            <p className="ml-5">[email protected]</p>
           </div>
         </div>
 
@@ -219,7 +224,7 @@ const PersonalInfo: React.FC = () => {
           </a>
           <div>
             <p className="text-sm ml-5">
-              <em>Téléphone:</em>
+              <em>{t("personnalInfo.Phone")}</em>
             </p>
             <p className="ml-5">07 81 65 00 03</p>
           </div>

diff --git a/src/index.tsx b/src/index.tsx
@@ -25,9 +25,7 @@ i18next.init({
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
-const onClose = () => {
-  console.log("Close button clicked");
-};
+
 
 root.render(
   <div>

diff --git a/src/translations/en/global.json b/src/translations/en/global.json
@@ -5,6 +5,12 @@
         "Works": "Projects",
         "Contact": "Contact"
     },
+    "personnalInfo": {
+        "Age": "Age",
+        "Localisation": "Localisation ",
+        "Email": "Email",
+        "Phone": "Phone"
+    },
     "home": {
         "About": "Biography",
         "AboutContent": "As a second-year student at ENIGMA school, I am looking for an apprenticeship in network administration to start my career in this field. My long-term goal is to specialize in network security, a domain that particularly interests me. I aim to first acquire solid experience in network infrastructure management as well as system configuration. Highly motivated and autonomous, I am ready to bring my technical skills to a dynamic IT team.",

diff --git a/src/translations/fr/global.json b/src/translations/fr/global.json
@@ -5,6 +5,12 @@
         "Works": "Projets",
         "Contact": "Contact"
     },
+    "personnalInfo": {
+        "Age": "Âge",
+        "Localisation": "Localisation ",
+        "Email": "Email",
+        "Phone": "Téléphone"
+    },
     "home": {
         "About": "Biographie",
         "AboutContent": "En tant qu'étudiant en deuxième année à l'école ENIGMA, je suis à la recherche d'une alternance en administration réseaux afin de commencer ma carrière dans ce domaine. Mon objectif à long terme est de me spécialiser dans la sécurité des réseaux, un domaine qui m'intéresse particulièrement. Je souhaite d'abord acquérir une solide expérience dans la gestion des infrastructures réseau ainsi que la configuration des systèmes. Doté d'une grande motivation et d'une autonomie certaine, je suis prêt à apporter mes compétences techniques au sein d'une équipe IT dynamique.",

diff --git a/vercel.josn → vercel.json b/vercel.josn → vercel.json