diff --git a/my-app/package-lock.json b/my-app/package-lock.json index a007746..7d04b0d 100644 --- a/my-app/package-lock.json +++ b/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", diff --git a/my-app/package.json b/my-app/package.json index b3a1ba6..e8c1ed9 100644 --- a/my-app/package.json +++ b/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" diff --git a/my-app/src/App.tsx b/my-app/src/App.tsx index 58b3067..20399e1 100644 --- a/my-app/src/App.tsx +++ b/my-app/src/App.tsx @@ -1,50 +1,107 @@ -import React from 'react'; -import logo from './images/first.jpg'; +// import React from 'react'; +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 ( -
- -
-
+ + +
+ +
+
+ {/*

A.P

*/}
- Logo + Logo
-

A.P

- +
+ + +
+
+
+
+
+
Bienvenue.
+

É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.

+
+ +
+ {/*
*/} + {/* */} + {/*
*/}
-
-
-
-
Welcome.
-

É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.

-
-
-
Projects
-

- capjwdalw

-

- capjwdalw

-

- capjwdalw

-

- capjwdalw

-

- capjwdalw

+
+
Projects
+
+

- ft_transcendence

+ +
+
+

- cloud-1

+ +
+
+

- minishell

+ +
+
+

- cube3d

+ +
+
+

- Homemade NAS

+ +
+
-
- -
+ + + ); } diff --git a/my-app/src/components/button.tsx b/my-app/src/components/button.tsx new file mode 100644 index 0000000..bd02882 --- /dev/null +++ b/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 ( + + + {/* */} + + ); +} + +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); + } +`, +); diff --git a/my-app/src/css/mine.css b/my-app/src/css/mine.css index 8f28496..d5396cd 100644 --- a/my-app/src/css/mine.css +++ b/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; - padding: 20px 0; + /* background-color: #a4a4a4; */ + /* 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 { - width: 50px; /* Adjust the size as needed */ - margin-left: 20px; + .logo img{ + height: 15vh; /* Adjust the size as needed */ + /* 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; + 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%; - max-width: 10%; + + display: flex; + 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; + } diff --git a/my-app/src/images/_13fa3625-3762-4b76-9989-681d695f6d1c.jpg b/my-app/src/img/_13fa3625-3762-4b76-9989-681d695f6d1c.jpg similarity index 100% rename from my-app/src/images/_13fa3625-3762-4b76-9989-681d695f6d1c.jpg rename to my-app/src/img/_13fa3625-3762-4b76-9989-681d695f6d1c.jpg diff --git a/my-app/src/images/_13fa3625-3762-4b76-9989-681d695f6d1c.jpg:Zone.Identifier b/my-app/src/img/_13fa3625-3762-4b76-9989-681d695f6d1c.jpg:Zone.Identifier similarity index 100% rename from my-app/src/images/_13fa3625-3762-4b76-9989-681d695f6d1c.jpg:Zone.Identifier rename to my-app/src/img/_13fa3625-3762-4b76-9989-681d695f6d1c.jpg:Zone.Identifier diff --git a/my-app/src/images/_1fdf5e9f-b376-4150-b142-4c55e3300e8f.jpg:Zone.Identifier b/my-app/src/img/_1fdf5e9f-b376-4150-b142-4c55e3300e8f.jpg:Zone.Identifier similarity index 100% rename from my-app/src/images/_1fdf5e9f-b376-4150-b142-4c55e3300e8f.jpg:Zone.Identifier rename to my-app/src/img/_1fdf5e9f-b376-4150-b142-4c55e3300e8f.jpg:Zone.Identifier diff --git a/my-app/src/img/_701a9aa4-8d4f-48f1-a564-817e9242283e-modified.jpg:Zone.Identifier b/my-app/src/img/_701a9aa4-8d4f-48f1-a564-817e9242283e-modified.jpg:Zone.Identifier new file mode 100644 index 0000000..61ae4b6 --- /dev/null +++ b/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/ diff --git a/my-app/src/images/_9a5f51bf-8201-4b1c-8464-df1124c47bea.jpg b/my-app/src/img/_9a5f51bf-8201-4b1c-8464-df1124c47bea.jpg similarity index 100% rename from my-app/src/images/_9a5f51bf-8201-4b1c-8464-df1124c47bea.jpg rename to my-app/src/img/_9a5f51bf-8201-4b1c-8464-df1124c47bea.jpg diff --git a/my-app/src/images/_9a5f51bf-8201-4b1c-8464-df1124c47bea.jpg:Zone.Identifier b/my-app/src/img/_9a5f51bf-8201-4b1c-8464-df1124c47bea.jpg:Zone.Identifier similarity index 100% rename from my-app/src/images/_9a5f51bf-8201-4b1c-8464-df1124c47bea.jpg:Zone.Identifier rename to my-app/src/img/_9a5f51bf-8201-4b1c-8464-df1124c47bea.jpg:Zone.Identifier diff --git a/my-app/src/img/background.jpg b/my-app/src/img/background.jpg new file mode 100644 index 0000000..894c790 Binary files /dev/null and b/my-app/src/img/background.jpg differ diff --git a/my-app/src/images/first.jpg b/my-app/src/img/first.jpg similarity index 100% rename from my-app/src/images/first.jpg rename to my-app/src/img/first.jpg