add responsive

my-app/package-lock.json

@@ -20,9 +20,11 @@
         "@types/node": "^16.18.96",
         "@types/react": "^18.3.1",
         "@types/react-dom": "^18.3.0",
+        "bootstrap": "^4.6.0",
         "country-flag-icons": "^1.5.11",
         "framer-motion": "^11.1.7",
         "react": "^18.3.1",
+        "react-bootstrap": "^2.10.2",
         "react-country-flag": "^3.1.0",
         "react-dom": "^18.3.1",
         "react-icons": "^5.2.0",
@@ -3754,6 +3756,59 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.3.tgz",
+      "integrity": "sha512-5bUZ93dmvHFcmfUcEN7qzYe8yQQ8JY+nHN6m9/iSDCQ/QmCiE0kWXYwhurjw5ch6I8WokQzx66xKIMHBAa4NNA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.8.tgz",
+      "integrity": "sha512-6ndCv3oZ7r9vuP1Ok9KH55TM1/UkdBnP/fSraW0DFDMbPMzWKhVKeFAIEUCRCSdzayjZDcFYK6xbMlipN9dmMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4072,6 +4127,14 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.11.tgz",
+      "integrity": "sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz",
@@ -4712,6 +4775,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.10",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@@ -6017,6 +6085,19 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6284,6 +6365,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz",
       "integrity": "sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q=="
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -9867,6 +9953,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
@@ -12443,6 +12537,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -13706,6 +13806,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -15000,6 +15111,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -15174,6 +15302,35 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.2.tgz",
+      "integrity": "sha512-UvB7mRqQjivdZNxJNEA2yOQRB7L9N43nBnKc33K47+cH90/ujmnMwatTCwQLu83gLhrzAl8fsa6Lqig/KLghaA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.8",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-country-flag": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
@@ -15389,6 +15546,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17514,6 +17676,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/underscore": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
@@ -17736,6 +17912,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",

my-app/package.json

@@ -15,9 +15,11 @@
     "@types/node": "^16.18.96",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
+    "bootstrap": "^4.6.0",
     "country-flag-icons": "^1.5.11",
     "framer-motion": "^11.1.7",
     "react": "^18.3.1",
+    "react-bootstrap": "^2.10.2",
     "react-country-flag": "^3.1.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.0",

my-app/src/App.tsx

@@ -5,9 +5,11 @@ import background from "./img/background.jpg";
 // import background_dark from "./img/background_dark.jpg";
 import './css/App.css';
 import './css/mine.css';
+import './css/mine_phone.css';
 
 import MenuSimple from './components/language';
-import UnstyledButtonsSimple from './components/button'
+import ButtonSimple from './components/button'
+import MaterialUISwitch from './components/switch'
 
 import { Card, CardContent, CardMedia, Switch, Typography } from "@mui/material"
 import { ThemeProvider, createTheme } from '@mui/material/styles';
@@ -15,9 +17,10 @@ import CssBaseline from '@mui/material/CssBaseline';
 import { dark } from '@mui/material/styles/createPalette';
 // import { Switch } from '@mui/base/Switch';
 import React, { useState } from "react";
-
 import { FaArrowRightLong } from "react-icons/fa6";
 
+import Button from '@mui/material/Button';
+
 function App()
 {
 
@@ -42,7 +45,6 @@ function App()
     },
   });
 
-
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
@@ -71,19 +73,21 @@ function App()
 
                 <div className="language">
                   <MenuSimple/>
-                  <Switch className="dark_mode" checked={toggleDarkMode} onChange={toggleDarkTheme} defaultChecked />
+                  <MaterialUISwitch onChange={toggleDarkTheme}/>
+                  {/* <Switch className="dark_mode" checked={toggleDarkMode} onChange={toggleDarkTheme} defaultChecked /> */}
                 </div>
               </div>
           </header>
           <div className='home'>
             <div className="presentation">
                 <div className='hello'>Bienvenue.</div>
-                <p 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.</p>
+                  et suis prêt à discuter de mon parcours plus amplement lors d’un entretien.</div>
                 <div className="cv_button">
-                  <UnstyledButtonsSimple/>
+                  {/* <UnstyledButtonsSimple/> */}
+                  <ButtonSimple/>
                 </div>
                 {/* <div className="project_button"> */}
                   {/* <UnstyledButtonsSimple/> */}

my-app/src/components/button.tsx

@@ -3,12 +3,10 @@ import { Button as BaseButton } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
-export default function UnstyledButtonsSimple() {
+export default function ButtonSimple() {
   return (
-    <Stack spacing={2} direction="row">
+    // <Stack spacing={2} direction="row">
       <Button>Mon CV</Button>
-      {/* <Button disabled>Disabled</Button> */}
-    </Stack>
   );
 }
 
@@ -44,14 +42,16 @@ const Button = styled(BaseButton)(
   padding: 8px 16px;
   border-radius: 8px;
   color: white;
-  transition: all 150ms ease;
+  transition: all 200ms ease;
   cursor: pointer;
   border: 1px solid ${blue[500]};
   box-shadow: 0 2px 1px ${
     theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
   }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
+  
   &:hover {
+    transform: scale(1.1);
     background-color: ${blue[600]};
   }
 

my-app/src/components/switch.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Switch, { SwitchProps } from '@mui/material/Switch'; 
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+const MaterialUISwitch = styled(Switch)(({ theme }) => ({
+  width: 62,
+  height: 34,
+  padding: 7,
+  '& .MuiSwitch-switchBase': {
+    margin: 1,
+    padding: 0,
+    transform: 'translateX(6px)',
+    '&.Mui-checked': {
+      color: '#fff',
+      transform: 'translateX(22px)',
+      '& .MuiSwitch-thumb:before': {
+        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+          '#fff',
+        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
+      },
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
+      },
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',
+    width: 32,
+    height: 32,
+    '&::before': {
+      content: "''",
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      left: 0,
+      top: 0,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+        '#fff',
+      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
+    },
+  },
+  '& .MuiSwitch-track': {
+    opacity: 1,
+    backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
+    borderRadius: 20 / 2,
+  },
+}));
+
+export default function CustomizedSwitches({ onChange }: any) {
+    const handleSwitchChange = (event: any) => {
+      if (onChange) {
+        onChange(event.target.checked);
+      }
+    };
+  
+    return (
+      <FormGroup>
+        <FormControlLabel
+          control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked />}
+          label=""
+          onChange={handleSwitchChange}
+        />
+      </FormGroup>
+    );
+  }

my-app/src/css/mine.css

@@ -1,5 +1,6 @@
 .app {
-  height: 100%;
+  height: 100vh;
+  width: 100vw;
   background-size: 100% 100%;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
@@ -7,23 +8,24 @@
 }
 
 body {
-    overflow: hidden;
+    /* overflow: hidden; */
     /* color:black; */
+    max-width: 100vw;
     font-family: "Fira Sans", Arial, sans-serif;
-    height: 100vh;
+    /* height: 100vh; */
+    width: 100vw;
     margin: 0;
+    padding: 0;
     font-family: Arial, sans-serif;
     /* border: 1vh solide white; */
   }
   
   header {
-    height: 15vh;
     width: 100%;
     /* background-color: #a4a4a4; */
     /* padding: 20px 0; */
     text-align: center;
-
+    height: 15vh;
-    border-bottom: 4px solid
 
     /* border-bottom-width: 5px; */
     /* border-bottom: 1cm; */
@@ -31,15 +33,17 @@ body {
   }
   
   .header-content {
+    border-bottom: 4px solid;
     width: 100vw;
+    height: 100%;
     display: flex;
     /* align-items: center; */
-    justify-content: space-between; /* Align items horizontally */
+    justify-content: space-between;
     /* padding-left: 0px; */
   }
   
   .logo img{
-    height: 14.5vh; /* Adjust the size as needed */
+    height: 100%; /* Adjust the size as needed */
     /* margin-right: 32.5vw; */
     margin-left: 3vw;
     margin-right: 20vw;
@@ -48,10 +52,12 @@ body {
   }
   
   .pages {
+    margin-left: 5vw;
     font-weight: 800;
     /* width: 5vw; */
-    margin-top: 5vh;
+    /* margin-top: 5vh; */
-    height: 5vh;
+    align-self: center;
+    /* height: 5vh; */
 
     transition-property: transform;
     transition-duration: 1s;
@@ -76,34 +82,38 @@ body {
   }
 
   .language {
+    align-items: center;
     display: flex;
     flex-direction: row;
-    width: 10vw;
+    justify-content: right;
-    margin-top: 5vh;
+    width: 50vw;
-    margin-left: 20vw;
+    margin-top: 0vh;
-    height: 6vh;
+    margin-left: 0vw;
-    /* margin-right: 2vw; */
+    height: 100%;
+    margin-right: 0vw;
   }
 
   .css-15bhy65 {
-    margin-right:  20px;
+    /* margin-right:  20px; */
+  }
+
+  Button{
+    font-weight: 800;
   }
 
   .dark_mode {
-    /* margin-top: 5vh; */
+    /* font-weight: 800; */
     margin-right: 2vw;
     width: 8vw;
-    /* position: absolute; */
-    /* margin: 0 */
   }
 
   .hello {
     font-weight: 800;
-    font-size: 700%;    
+    font-size: 6vw;    
   }
 
   .description {
-    font-size: 100%;
+    font-size: 1vw;
   }
 
   .project {
@@ -142,6 +152,8 @@ body {
     justify-content: space-between;
   }
 
+
+  
   @keyframes slideRight {
     0% {
       right: -100vh; /* Position initiale */
@@ -153,33 +165,32 @@ body {
 
   .project_txt {
     font-weight: 800;
-    font-size: 200%;
+    font-size: 3vw;
   }
   
   .cv_button {
+    font-family: 'IBM Plex Sans', sans-serif;
     margin-top: 10%;
     margin-left: 70%;
 
   }
   
   .css-cg7pzv {
-    transition-property: transform;
+    width: 20vw;
-    transition-duration: 1s;
-    &:hover {
-        transform: scale(1.3);
-    }
   } 
 
   .project_group {
+    font-size: 1vw;
     display: flex;
     flex-direction: row;
-    width: 100%;
+    /* 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;
@@ -194,6 +205,7 @@ body {
   }
 
   .arrow {
+    vertical-align: baseline;
     transition-property: transform;
     transition-duration: 700ms;
     transition: all 700ms ease;

my-app/src/css/mine_phone.css

@@ -0,0 +1,107 @@
+@media screen and (max-width: 992px){
+    .home {
+      flex-direction: column;
+      width: 100vw;
+    }
+    body {
+        max-width: 100vw;
+        /* max-width: 100%; */
+        overflow: scroll;
+      }
+    header {
+        overflow: hidden;
+        /* margin: 0; */
+        height: 8vh;
+      }
+    .logo img {
+        height: 100%; 
+        margin-left: 0vw;
+        margin-right: 0vw;
+    }
+    .pages {
+        display: none;
+    }
+    .hello {
+        margin: auto;
+        margin-top: 10vw;
+        width: 100vw;
+        font-weight: 800;
+        font-size: 10vw;
+        /* align-items: center;   */
+    }
+    .presentation {
+        max-width: 100vw;
+        margin: auto;
+        width: 100vw;
+        text-align: center;
+        align-items: center;
+        /* align-self: center; */
+    }
+    .description {
+        /* text-align: center; */
+        /* max-width: 100vw; */
+        /* margin-left: 10%; */
+        display: inline-block;
+        width: 80%;
+        font-size: 4vw;
+        max-width: 100%;
+    }
+    .cv_button {
+        width: 20vw;
+        margin: 0;
+        margin-top: 5vw;
+        margin-right: 40vw;
+        margin-left: 40vw;
+
+        /* align-module: center; */
+        /* align-items: center; */
+        /* display: inline-block; */
+    }
+    .language {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: right;
+        width: 50vw;
+        margin-top: 0vh;
+        margin-left: 0vw;
+        height: 100%;
+        margin-right: 0vw;
+    }
+    .header-content {
+        width: 100vw;
+        display: flex;
+        /* align-items: center; */
+        justify-content: space-between;
+        /* padding-left: 0px; */
+    }
+    .dark_mode {
+        /* margin-top: 5vh; */
+        margin-right: 0vw;
+        width: 0vw;
+        /* position: absolute; */
+        /* margin: 0 */
+    }
+    .project {
+        align-items: center;
+        /* font-size: 6vw; */
+        width: 100%;
+        margin: 0;
+        margin-bottom: 40vw;
+        margin-top: 20vw;
+        align-content: center;
+    }
+    .arrow {
+        
+    }
+    .project_txt {
+        font-weight: 800;
+        font-size: 10vw;
+        margin-bottom: 5vw;
+    }
+    .project_list {
+        /* align-self: self-start; */
+        font-size: 4vw;
+        margin: 0;
+    }
+  }