start to ressembler a quelque chose

my-app/package-lock.json

@@ -11,6 +11,7 @@
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@emotion/styled": "^11.11.5",
         "@mui/base": "^5.0.0-beta.40",
+        "@mui/material": "^5.15.16",
         "@mui/system": "^5.15.15",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
@@ -20,9 +21,11 @@
         "@types/react": "^18.3.1",
         "@types/react-dom": "^18.3.0",
         "country-flag-icons": "^1.5.11",
+        "framer-motion": "^11.1.7",
         "react": "^18.3.1",
         "react-country-flag": "^3.1.0",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.2.0",
         "react-scripts": "^5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -3427,6 +3430,64 @@
         }
       }
     },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.15.16",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz",
+      "integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.15.16",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz",
+      "integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/core-downloads-tracker": "^5.15.16",
+        "@mui/system": "^5.15.15",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/@mui/private-theming": {
       "version": "5.15.14",
       "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
@@ -4572,6 +4633,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -7243,6 +7312,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -8971,6 +9049,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.1.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.7.tgz",
+      "integrity": "sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -15274,6 +15376,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.0.tgz",
+      "integrity": "sha512-n52Y7Eb4MgQZHsSZOhSXv1zs2668/hBYKfSRIvKh42yExjyhZu0d1IK2CLLZ3BZB1oo13lDfwx2vOh2z9FTV6Q==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15359,6 +15469,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

my-app/package.json

@@ -6,6 +6,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@emotion/styled": "^11.11.5",
     "@mui/base": "^5.0.0-beta.40",
+    "@mui/material": "^5.15.16",
     "@mui/system": "^5.15.15",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -15,9 +16,11 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "country-flag-icons": "^1.5.11",
+    "framer-motion": "^11.1.7",
     "react": "^18.3.1",
     "react-country-flag": "^3.1.0",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.0",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

my-app/src/App.tsx

@@ -1,50 +1,107 @@
 
-import React from 'react';
+// import React from 'react';
-import logo from './images/first.jpg';
+import logo from './img/first.jpg';
+import background from "./img/background.jpg";
+// import background_dark from "./img/background_dark.jpg";
 import './css/App.css';
 import './css/mine.css';
 
 import MenuSimple from './components/language';
+import UnstyledButtonsSimple from './components/button'
 
+import { Card, CardContent, CardMedia, Switch, Typography } from "@mui/material"
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { dark } from '@mui/material/styles/createPalette';
+// import { Switch } from '@mui/base/Switch';
+import React, { useState } from "react";
 
-function App() {
+import { FaArrowRightLong } from "react-icons/fa6";
+
+function App()
+{
+
+  // state to manage the dark mode
+  const [toggleDarkMode, setToggleDarkMode] = useState(true);
+
+  // function to toggle the dark mode as true or false
+  const toggleDarkTheme = () => {
+    console.log("changed");
+    setToggleDarkMode(!toggleDarkMode);
+  };
+
+  const darkTheme = createTheme({
+    palette: {
+      mode: toggleDarkMode ? 'dark' : 'light',
+      primary: {
+        main: '#90caf9',
+      },
+      secondary: {
+        main: '#131052',
+      },
+    },
+  });
 
-  // function createHandleMenuClick(arg0: string): any {
-  //   // throw new Error('Function not implemented.');
-  // }
 
   return (
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
       <div>
         <body>
           <header>
               <div className="header-content">
+                {/* <h1 className="title">A.P</h1> */}
                 <div className="logo">
                   <img src={logo} alt="Logo" />
                 </div>
-                <h1 className="title">A.P</h1>
+                <div className="language">
                   <MenuSimple/> 
+                  <Switch className="dark_mode" checked={toggleDarkMode} onChange={toggleDarkTheme} defaultChecked />
+                </div>
               </div>
           </header>
           <div className='home'>
             <div className="presentation">
-              <div className='hello'>Welcome.</div>
+                <div className='hello'>Bienvenue.</div>
-              <p>Étudiant a 42 en informatique, je cherche un emploi afin de compléter 
+                <p 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>
+                <div className="cv_button">
+                  <UnstyledButtonsSimple/>
+                </div>
+                {/* <div className="project_button"> */}
+                  {/* <UnstyledButtonsSimple/> */}
+                {/* </div> */}
             </div>
             <div className="project">
                 <div className='project_txt'>Projects</div>
-              <p>- capjwdalw</p>
+                <div className = "project_group">
-              <p>- capjwdalw</p>
+                  <p className="project_list">- ft_transcendence</p>
-              <p>- capjwdalw</p>
+                  <FaArrowRightLong className="arrow"/>
-              <p>- capjwdalw</p>
+                </div>
-              <p>- capjwdalw</p>
+                <div className = "project_group">
+                  <p className="project_list">- cloud-1</p>
+                  <FaArrowRightLong className="arrow"/>
+                </div>
+                <div className = "project_group">
+                  <p className="project_list">- minishell</p>
+                  <FaArrowRightLong className="arrow"/>
+                </div>
+                <div className = "project_group">
+                  <p className="project_list">- cube3d</p>
+                  <FaArrowRightLong className="arrow"/>
+                </div>
+                <div className = "project_group">
+                  <p className="project_list">- Homemade NAS</p>
+                  <FaArrowRightLong className="arrow"/>
+                </div>
 
             </div>
           </div>
         </body>
       </div>
+    </ThemeProvider>
   );
 }
 

my-app/src/components/button.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Button as BaseButton } from '@mui/base/Button';
+import { styled } from '@mui/system';
+import Stack from '@mui/material/Stack';
+
+export default function UnstyledButtonsSimple() {
+  return (
+    <Stack spacing={2} direction="row">
+      <Button>Mon CV</Button>
+      {/* <Button disabled>Disabled</Button> */}
+    </Stack>
+  );
+}
+
+const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: ${blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms 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 {
+    background-color: ${blue[600]};
+  }
+
+  &:active {
+    background-color: ${blue[700]};
+    box-shadow: none;
+    transform: scale(0.99);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+
+  &.base--disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 0;
+    cursor: default;
+    box-shadow: none;
+    transform: scale(1);
+  }
+`,
+);

my-app/src/css/mine.css

@@ -1,48 +1,100 @@
+.app {
+  height: 100%;
+  background-size: 100% 100%;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: black;
+  color: white;
+}
+
 body {
+    /* color:black; */
+    font-family: "Fira Sans", Arial, sans-serif;
+    height: 100vh;
     margin: 0;
     font-family: Arial, sans-serif;
   }
   
   header {
+    height: 15vh;
     width: 100%;
-    background-color: #f0f0f0;
+    /* background-color: #a4a4a4; */
-    padding: 20px 0;
+    /* padding: 20px 0; */
     text-align: center;
   }
   
   .header-content {
-    width: 100%;
+    width: 100vw;
     display: flex;
-    align-items: center;
+    /* align-items: center; */
     justify-content: space-between; /* Align items horizontally */
-    padding-left: 0px;
+    /* padding-left: 0px; */
   }
   
-  .logo img {
+  .logo img{
-    width: 50px; /* Adjust the size as needed */
+    height: 15vh; /* Adjust the size as needed */
-    margin-left: 20px;
+    /* margin-right: 32.5vw; */
+    margin-left: 3vw;
+    /* margin-left: 20px; */
   }
   
   .title {
-    margin: 0;
+    color:black;
+    font-weight: 800;
+    margin-left: 2vw;
+    margin-right: 98vw;
   }
   
   .menu {
     float: right;
   }
 
+  .language {
+    display: flex;
+    flex-direction: row;
+    width: 10vw;
+    margin-top: 5vh;
+    height: 6vh;
+    /* margin-right: 2vw; */
+  }
+
   .css-15bhy65 {
     margin-right:  20px;
   }
 
+  .dark_mode {
+    /* margin-top: 5vh; */
+    margin-right: 2vw;
+    width: 8vw;
+    /* position: absolute; */
+    /* margin: 0 */
+  }
+
   .hello {
+    font-weight: 800;
     font-size: 700%;    
   }
 
+  .description {
+    font-size: 100%;
+  }
+
   .project {
-    margin-left: 10%;
+
-    margin-top: 15%;
+    display: flex;
-    max-width: 10%;
+    flex-direction: column;
+    align-items: flex-start;
+
+    margin-top: 30vh;
+    margin-right: 10vw;
+
+    font-weight: 800;
+    width: 50vh;
+    height: 50%;
+    align-self: start;
+    /* margin-left: 30%; */
+    /* margin-left: 10%; */
+    /* margin-top: 15%; */
+    /* max-width: 60%; */
   }
   
   .presentation {
@@ -52,11 +104,69 @@ body {
   }
 
   .home {
+    /* height: 50%; */
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
   }
 
   .project_txt {
+    font-weight: 800;
     font-size: 200%;
   }
   
+  .cv_button {
+    margin-top: 10%;
+    margin-left: 70%;
+
+  }
+  
+  .css-cg7pzv {
+    transition-property: transform;
+    transition-duration: 1s;
+    &:hover {
+        transform: scale(1.3);
+    }
+  } 
+
+  .project_group {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    /* justify-content: center; */
+    /* align-self: left; */
+    align-items: center;
+  }
+
+  .project_list {
+    margin-right: 2vw;
+    /* justify-content: space-between; */
+    transition-property: transform;
+    transition-duration: 700ms;
+    &:hover {
+        transform: scale(1.15);
+    }
+  }
+
+  .project_list:hover {
+    color: rgb(0, 127, 255);
+  }
+
+  .arrow {
+    transition-property: transform;
+    transition-duration: 700ms;
+    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/img/_701a9aa4-8d4f-48f1-a564-817e9242283e-modified.jpg:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://invert.imageonline.co/