start project and contact
This commit is contained in:
parent
fae0487ead
commit
0caf57d597
6677
my-app/package-lock.json
generated
6677
my-app/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,30 +6,34 @@
|
||||
"@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/material": "^5.15.17",
|
||||
"@mui/system": "^5.15.15",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^16.18.96",
|
||||
"@react-pdf/renderer": "^3.4.4",
|
||||
"@testing-library/jest-dom": "^6.4.5",
|
||||
"@testing-library/react": "^15.0.7",
|
||||
"@testing-library/user-event": "^14.5.2",
|
||||
"@types/jest": "^29.5.12",
|
||||
"@types/node": "^20.12.11",
|
||||
"@types/react": "^18.3.1",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"bootstrap": "^4.6.0",
|
||||
"@types/react-pdf": "^7.0.0",
|
||||
"bootstrap": "^5.3.3",
|
||||
"country-flag-icons": "^1.5.11",
|
||||
"framer-motion": "^11.1.7",
|
||||
"i18next": "^23.11.3",
|
||||
"file-saver": "^2.0.5",
|
||||
"framer-motion": "^11.1.9",
|
||||
"i18next": "^23.11.4",
|
||||
"i18next-xhr-backend": "^3.2.2",
|
||||
"react": "^18.3.1",
|
||||
"react-bootstrap": "^2.10.2",
|
||||
"react-country-flag": "^3.1.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-i18next": "^14.1.1",
|
||||
"react-icons": "^5.2.0",
|
||||
"react-icons": "^5.2.1",
|
||||
"react-pdf": "^8.0.2",
|
||||
"react-router-dom": "^6.23.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
"typescript": "^4",
|
||||
"web-vitals": "^3.5.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import React from 'react';
|
||||
import '@testing-library/jest-dom/jest-globals';
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
|
||||
import './css/App.css';
|
||||
import './css/mine.css';
|
||||
import './css/project.css';
|
||||
import './css/mine_phone.css';
|
||||
import './css/contact.css';
|
||||
|
||||
import Home from './pages/home'
|
||||
import Contact from './pages/contact'
|
||||
@ -47,7 +49,7 @@ function App()
|
||||
// const location = useLocation();
|
||||
|
||||
return (
|
||||
<React.StrictMode>
|
||||
// <React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<CssBaseline />
|
||||
{/* <Router> */}
|
||||
@ -61,7 +63,7 @@ function App()
|
||||
</Routes>
|
||||
{/* </Router> */}
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
// </React.StrictMode>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import MenuSimple from './language';
|
||||
import MaterialUISwitch from './switch'
|
||||
import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
import React, { useState, useContext } from "react";
|
||||
import React, { useState, useContext} from "react";
|
||||
import { useEffect } from "react";
|
||||
import logo from '../img/first.jpg';
|
||||
|
||||
import { ColorModeContext } from '../utils/color-toggle';
|
||||
@ -17,13 +18,50 @@ function Header()
|
||||
const { i18n, t } = useTranslation();
|
||||
const { changeMode } = useContext(ColorModeContext);
|
||||
const [language, setLanguage] = useState(1);
|
||||
const [mode, setMode] = useState("dark");
|
||||
// const [checked, setChecked] = useState(1);
|
||||
const [checked, setChecked] = React.useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (!localStorage.getItem('language'))
|
||||
localStorage.setItem('language', 'en');
|
||||
else
|
||||
{
|
||||
let current = localStorage.getItem('language')
|
||||
if (current == 'en')
|
||||
{
|
||||
setLanguage(current ? 0 : 1)
|
||||
i18n.changeLanguage(current)
|
||||
}
|
||||
}
|
||||
|
||||
if (!localStorage.getItem('mode'))
|
||||
localStorage.setItem('mode', 'dark');
|
||||
else
|
||||
{
|
||||
let current = localStorage.getItem('mode')
|
||||
if (current == "light")
|
||||
{
|
||||
changeMode()
|
||||
setChecked(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}, []);
|
||||
|
||||
function handleChange() {
|
||||
// i18n.language
|
||||
i18n.changeLanguage(language ? 'en' : 'fr')
|
||||
localStorage.setItem('language', language ? 'en' : 'fr');
|
||||
setLanguage(language ? 0 : 1)
|
||||
}
|
||||
|
||||
function handleMode() {
|
||||
let current = localStorage.getItem('mode')
|
||||
localStorage.setItem('mode', current == 'light' ? 'dark' : 'light');
|
||||
changeMode()
|
||||
setChecked(checked ? false : true)
|
||||
}
|
||||
|
||||
return (
|
||||
<header>
|
||||
@ -61,7 +99,7 @@ function Header()
|
||||
{/* </FormControl> */}
|
||||
</Box>
|
||||
|
||||
<MaterialUISwitch onChange={changeMode}/>
|
||||
<MaterialUISwitch checked={checked} onChange={handleMode}/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@ -69,3 +107,7 @@ function Header()
|
||||
}
|
||||
|
||||
export default Header;
|
||||
|
||||
// function useEffect(arg0: () => void, arg1: number[]) {
|
||||
// throw new Error('Function not implemented.');
|
||||
// }
|
||||
|
||||
@ -51,7 +51,7 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
export default function CustomizedSwitches({ onChange }: any) {
|
||||
export default function CustomizedSwitches({ checked, onChange }: any) {
|
||||
const handleSwitchChange = (event: any) => {
|
||||
if (onChange) {
|
||||
onChange(event.target.checked);
|
||||
@ -61,7 +61,7 @@ export default function CustomizedSwitches({ onChange }: any) {
|
||||
return (
|
||||
<FormGroup>
|
||||
<FormControlLabel
|
||||
control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked />}
|
||||
control={<MaterialUISwitch sx={{ m: 1 }} checked={checked} />}
|
||||
label=""
|
||||
onChange={handleSwitchChange}
|
||||
/>
|
||||
|
||||
33
my-app/src/css/contact.css
Normal file
33
my-app/src/css/contact.css
Normal file
@ -0,0 +1,33 @@
|
||||
.contact_page {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
/* justify-content: center; */
|
||||
}
|
||||
|
||||
.contact_title {
|
||||
margin-top: 10vh;
|
||||
font-size: 3vw;
|
||||
font-weight: 800;
|
||||
/* margin: auto; */
|
||||
width: 100%;
|
||||
/* align-self: center; */
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.contact_list{
|
||||
font-size: 1vw;
|
||||
font-weight: 800;
|
||||
margin-top: 1vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center
|
||||
/* vertical-align: middle */
|
||||
/* align-self: center; */
|
||||
}
|
||||
|
||||
.contact_badge {
|
||||
margin-top: 3vh;
|
||||
}
|
||||
@ -12,8 +12,21 @@ a, a:visited, a:hover, a:active {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
.resume {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.resume_jpg {
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
/* overflow: hidden; */
|
||||
max-width: 100vw;
|
||||
font-family: "Fira Sans", Arial, sans-serif;
|
||||
width: 100vw;
|
||||
@ -22,10 +35,14 @@ body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* body.page-with-overflow {
|
||||
overflow: visible;
|
||||
} */
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 15vh;
|
||||
height: 12vh;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@ -119,6 +136,7 @@ body {
|
||||
}
|
||||
|
||||
.home {
|
||||
/* overflow: hidden; */
|
||||
position: absolute;
|
||||
right: -100vw;
|
||||
animation: slideRight 2s ease forwards;
|
||||
|
||||
52
my-app/src/css/project.css
Normal file
52
my-app/src/css/project.css
Normal file
@ -0,0 +1,52 @@
|
||||
.s_20{
|
||||
font-size: 5vh;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: inherit;
|
||||
max-height: inherit;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.project_page {
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
height: 85vh;
|
||||
/* justify-content: left; */
|
||||
}
|
||||
|
||||
.project_detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 15vh;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.project_description{
|
||||
margin-top: 25vh;
|
||||
margin-left: 10vh;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.project_image {
|
||||
width: 40vw;
|
||||
/* max-height: 30%; */
|
||||
}
|
||||
|
||||
.badge_list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
||||
justify-content: space-evenly;
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
.badge {
|
||||
height: 5vh;
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
/* styles.css */
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: large; /* Ajustez la taille selon vos préférences */
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: grey; /* Ajustez la couleur selon vos préférences */
|
||||
color: white;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.projects {
|
||||
/* Styles pour la section des projets */
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
[ZoneTransfer]
|
||||
ZoneId=3
|
||||
HostUrl=https://copilot.microsoft.com/
|
||||
@ -1,3 +0,0 @@
|
||||
[ZoneTransfer]
|
||||
LastWriterPackageFamilyName=Microsoft.Windows.Photos_8wekyb3d8bbwe
|
||||
ZoneId=3
|
||||
@ -1,3 +0,0 @@
|
||||
[ZoneTransfer]
|
||||
ZoneId=3
|
||||
HostUrl=https://invert.imageonline.co/
|
||||
@ -1,3 +0,0 @@
|
||||
[ZoneTransfer]
|
||||
ZoneId=3
|
||||
HostUrl=https://copilot.microsoft.com/
|
||||
BIN
my-app/src/img/cv.jpg
Normal file
BIN
my-app/src/img/cv.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
BIN
my-app/src/img/cv.pdf
Normal file
BIN
my-app/src/img/cv.pdf
Normal file
Binary file not shown.
BIN
my-app/src/img/pong.webp
Normal file
BIN
my-app/src/img/pong.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
@ -12,9 +12,9 @@ const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
// <React.StrictMode>
|
||||
<ColorModeProvider />
|
||||
</React.StrictMode>
|
||||
// </React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
||||
@ -1,15 +1,27 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function Contact()
|
||||
{
|
||||
const { i18n, t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="contact">
|
||||
<div>
|
||||
Github
|
||||
<div className="contact_page">
|
||||
<div className="contact_title">{t("contact_me")}</div>
|
||||
<svg className="badge contact_badge" fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 2C9 1.44772 9.44772 1 10 1H14C14.5523 1 15 1.44772 15 2V3C15 3.55228 14.5523 4 14 4H10C9.44772 4 9 3.55228 9 3V2Z" fill="#000000"/><rect x="5.75" y="1.75" width="12.5" height="20.5" rx="1.75" stroke="#000000" stroke-width="1.5"/><path d="M9 19.5H15" stroke="#000000" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
<div className="contact_list">
|
||||
06.52.40.38.30
|
||||
</div>
|
||||
<div>
|
||||
Telephone
|
||||
<svg className="badge contact_badge" fill="#EA4335" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gmail</title><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"/></svg>
|
||||
<div className="contact_list">
|
||||
contact@alexandre-pommier.com
|
||||
</div>
|
||||
<div>
|
||||
Email
|
||||
<svg className="badge contact_badge" fill="grey" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
|
||||
<div className="contact_list">
|
||||
kinou-p
|
||||
</div>
|
||||
<svg className="badge contact_badge" fill="#0A66C2" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
||||
<div className="contact_list">
|
||||
linkedIn
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,10 +1,19 @@
|
||||
function Resume()
|
||||
import React from 'react';
|
||||
import resume from "../img/cv.jpg";
|
||||
|
||||
function Resume ()
|
||||
{
|
||||
|
||||
return (
|
||||
<div className="resume">
|
||||
resume here , pdf ?
|
||||
<div className="resume_jpg">
|
||||
<img src={resume}/>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Resume;
|
||||
|
||||
|
||||
|
||||
|
||||
5
my-app/src/react-app-env.d.ts
vendored
5
my-app/src/react-app-env.d.ts
vendored
@ -1 +1,6 @@
|
||||
/// <reference types="react-scripts" />
|
||||
|
||||
declare module '*.pdf' {
|
||||
const value: string;
|
||||
export default value;
|
||||
}
|
||||
@ -31,6 +31,7 @@ i18n
|
||||
project:"Projects",
|
||||
welcome:"Welcome.",
|
||||
resume:"My Resume",
|
||||
contact_me:"CONTACT ME",
|
||||
},
|
||||
},
|
||||
fr: {
|
||||
@ -44,6 +45,7 @@ i18n
|
||||
project:"Projets",
|
||||
welcome:"Bienvenue.",
|
||||
resume:"Mon CV",
|
||||
contact_me:"CONTACTEZ MOI",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user