diff --git a/my-app/package-lock.json b/my-app/package-lock.json index 35c15ab..06ca03e 100644 --- a/my-app/package-lock.json +++ b/my-app/package-lock.json @@ -28,6 +28,7 @@ "react-country-flag": "^3.1.0", "react-dom": "^18.3.1", "react-icons": "^5.2.0", + "react-router-dom": "^6.23.0", "react-scripts": "^5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" @@ -3770,6 +3771,14 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" } }, + "node_modules/@remix-run/router": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz", + "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@restart/hooks": { "version": "0.4.16", "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz", @@ -15559,6 +15568,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", + "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==", + "dependencies": { + "@remix-run/router": "1.16.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz", + "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==", + "dependencies": { + "@remix-run/router": "1.16.0", + "react-router": "6.23.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/my-app/package.json b/my-app/package.json index ebda695..5aa4488 100644 --- a/my-app/package.json +++ b/my-app/package.json @@ -23,6 +23,7 @@ "react-country-flag": "^3.1.0", "react-dom": "^18.3.1", "react-icons": "^5.2.0", + "react-router-dom": "^6.23.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 d0c3c50..3d74de4 100644 --- a/my-app/src/App.tsx +++ b/my-app/src/App.tsx @@ -1,29 +1,21 @@ -// 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 './css/mine_phone.css'; -import MenuSimple from './components/language'; -import ButtonSimple from './components/button' -import MaterialUISwitch from './components/switch' +import Home from './pages/home' -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 { BrowserRouter, Route, Routes } from 'react-router-dom'; import React, { useState } from "react"; -import { FaArrowRightLong } from "react-icons/fa6"; +import CssBaseline from '@mui/material/CssBaseline'; +import Header from './components/header'; +import { ColorModeContext } from './utils/color-toggle'; + -import Button from '@mui/material/Button'; function App() { - // state to manage the dark mode const [toggleDarkMode, setToggleDarkMode] = useState(true); @@ -46,81 +38,14 @@ function App() }); return ( - - -
- -
-
- {/*

A.P

*/} -
- Logo -
- -
- Contact -
-
- Projets -
-
- CV -
-
- Competences -
- - -
- - - {/* */} -
-
-
-
-
-
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.
-
- {/* */} - -
- {/*
*/} - {/* */} - {/*
*/} -
-
-
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 index 43dbc01..29723a9 100644 --- a/my-app/src/components/button.tsx +++ b/my-app/src/components/button.tsx @@ -34,10 +34,10 @@ const grey = { const Button = styled(BaseButton)( ({ theme }) => ` + align-self: center; 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; diff --git a/my-app/src/components/header.tsx b/my-app/src/components/header.tsx new file mode 100644 index 0000000..ed11feb --- /dev/null +++ b/my-app/src/components/header.tsx @@ -0,0 +1,64 @@ +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'; + +// const { ColorMode, setColorMode } = useColorMode(); + + +function Header() +{ + + const { changeMode } = useContext(ColorModeContext); + // const { colorMode, setColorMode } = changeMode(); + + // const toggleColorMode = () => { + // // Call setColorMode and pass the new color mode value + // setColorMode(colorMode === 'light' ? 'dark' : 'light'); + // }; + + return ( + // +
+
+ {/*

A.P

*/} +
+ Logo +
+ +
+ Contact +
+
+ Projets +
+
+ CV +
+
+ Competences +
+ + +
+ + + {/* */} +
+
+
+ // + ) +} + +export default Header; \ No newline at end of file diff --git a/my-app/src/components/test.tsx b/my-app/src/components/test.tsx new file mode 100644 index 0000000..f056c7b --- /dev/null +++ b/my-app/src/components/test.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; +import IconButton from '@mui/material/IconButton'; +import Box from '@mui/material/Box'; +import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles'; +// import Brightness4Icon from '@mui/icons-material/Brightness4'; +// import Brightness7Icon from '@mui/icons-material/Brightness7'; + +const ColorModeContext = React.createContext({ toggleColorMode: () => {} }); + +// function MyApp() { +// const theme = useTheme(); +// const colorMode = React.useContext(ColorModeContext); +// return ( +// +// {theme.palette.mode} mode +// +// {theme.palette.mode === 'dark' ? : } +// +// +// ); +// } + +export default function ToggleColorMode() { + const [mode, setMode] = React.useState<'light' | 'dark'>('light'); + const colorMode = React.useMemo( + () => ({ + toggleColorMode: () => { + setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light')); + }, + }), + [], + ); + + const theme = React.useMemo( + () => + createTheme({ + palette: { + mode, + }, + }), + [mode], + ); + +// return ( +// +// +// +// +// +// ); +} diff --git a/my-app/src/css/mine.css b/my-app/src/css/mine.css index 0512711..d5040b0 100644 --- a/my-app/src/css/mine.css +++ b/my-app/src/css/mine.css @@ -60,8 +60,8 @@ body { /* height: 5vh; */ transition-property: transform; - transition-duration: 1s; - transition: all 700ms ease; + /* transition-duration: 200ms; */ + transition: all 200ms ease; &:hover { transform: scale(1.1); @@ -93,9 +93,8 @@ body { margin-right: 0vw; } - .css-15bhy65 { + /* .css-15bhy65 { /* margin-right: 20px; */ - } Button{ font-weight: 800; @@ -175,9 +174,9 @@ body { } - .css-cg7pzv { + /* .css-cg7pzv { width: 20vw; - } + } */ .project_group { font-size: 1vw; @@ -194,7 +193,7 @@ body { margin-right: 2vw; /* justify-content: space-between; */ transition-property: transform; - transition-duration: 700ms; + transition-duration: 500ms; &:hover { transform: scale(1.15); } diff --git a/my-app/src/css/mine_phone.css b/my-app/src/css/mine_phone.css index b43aaf2..665c695 100644 --- a/my-app/src/css/mine_phone.css +++ b/my-app/src/css/mine_phone.css @@ -47,12 +47,11 @@ max-width: 100%; } .cv_button { - width: 20vw; + width: 100%; margin: 0; margin-top: 5vw; - margin-right: 40vw; - margin-left: 40vw; - + /* margin-right: 40vw; */ + /* margin-left: 40vw; */ /* align-module: center; */ /* align-items: center; */ /* display: inline-block; */ @@ -92,7 +91,7 @@ align-content: center; } .arrow { - + } .project_txt { font-weight: 800; diff --git a/my-app/src/index.tsx b/my-app/src/index.tsx index 032464f..11a3f35 100644 --- a/my-app/src/index.tsx +++ b/my-app/src/index.tsx @@ -2,14 +2,18 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; +// import ColorModeProvider from './utils/color-toggle'; import reportWebVitals from './reportWebVitals'; + +import { ColorModeProvider } from "./utils/color-toggle" + const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( - + ); diff --git a/my-app/src/pages/home.tsx b/my-app/src/pages/home.tsx new file mode 100644 index 0000000..487a869 --- /dev/null +++ b/my-app/src/pages/home.tsx @@ -0,0 +1,52 @@ +import Header from '../components/header' +import ButtonSimple from '../components/button' + +import { FaArrowRightLong } from "react-icons/fa6"; + +function Home() +{ + return( +
+ + {/*
*/} +
+
+
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.
+
+ +
+
+
+
Projects
+
+

- Ft_Transcendence

+ +
+
+

- Cloud-1

+ +
+
+

- Minishell

+ +
+
+

- Cube3d

+ +
+
+

- Homemade NAS

+ +
+
+
+ +
+ ) +} + +export default Home; \ No newline at end of file diff --git a/my-app/src/setupTests.ts b/my-app/src/setupTests.ts deleted file mode 100644 index 8f2609b..0000000 --- a/my-app/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/my-app/src/utils/color-toggle.tsx b/my-app/src/utils/color-toggle.tsx new file mode 100644 index 0000000..6a988b8 --- /dev/null +++ b/my-app/src/utils/color-toggle.tsx @@ -0,0 +1,41 @@ +import React, { createContext, useContext, useState } from 'react'; +import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles'; +import { BrowserRouter, Route, Routes } from 'react-router-dom'; + +import CssBaseline from '@mui/material/CssBaseline'; + +import Header from '../components/header'; +import App from "../App" + + +export const ColorModeContext = createContext(true); + +export const ColorModeProvider = ({ children }: any) => { + + const [ColorMode, setColorMode] = useState(true); // Define your initial state here + const darkTheme = createTheme({ + palette: { + mode: ColorMode ? 'dark' : 'light', + primary: { + main: '#90caf9', + }, + secondary: { + main: '#131052', + }, + }, + }); + + function changeMode() { + console.log("CHANGE MOOOOODE") + setColorMode(!ColorMode) + } + + return ( + + + + + + + ); +};