Skip to content

Commit 1415cda

Browse files
LoupesDEVLoupesDEV
committed
feat: added about section
1 parent 12179ec commit 1415cda

File tree

5 files changed

+403
-7
lines changed

5 files changed

+403
-7
lines changed

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,5 @@ yarn-debug.log*
2323
yarn-error.log*
2424

2525
test.txt
26-
/src/Components/About.jsx
2726
/src/Components/Contact.jsx
2827
/src/Components/ContactForm.jsx
29-
/src/Components/Experience.jsx
30-
/src/Components/Experience.jsx

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
22
import { Route, Routes } from 'react-router-dom';
33

44
import Home from './Components/Home';
5+
import About from './Components/About';
56
import Portfolio from './Components/Portfolio';
67
import NavbarBottom from './Components/NavbarBottom';
78
import TogleTheme from './Components/TogleTheme';
@@ -42,6 +43,7 @@ function App() {
4243

4344
<Routes>
4445
<Route path='/' element={<Home />} />
46+
<Route path='/about' element={<About />} />
4547
<Route path='/portfolio' element={<Portfolio />} />
4648
</Routes>
4749

‎src/Components/About.jsx‎

Lines changed: 296 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,296 @@
1+
import React from "react";
2+
import {
3+
Avatar,
4+
Box,
5+
Container,
6+
Divider,
7+
Link,
8+
Stack,
9+
Typography,
10+
} from "@mui/material";
11+
import Grid from "@mui/material/Unstable_Grid2/Grid2";
12+
13+
import myImage2 from "../Images/02.png";
14+
import myImage3 from "../Images/03.png";
15+
16+
import { myPersonalInfo, skills, skills2 } from "./data";
17+
// import {LinearWithLabel} from './ProgressWithLabel'
18+
import Experience from "./Experience";
19+
import { FiDownload } from "react-icons/fi";
20+
21+
import "../Styles/index.css";
22+
import "animate.css";
23+
24+
import useProgressiveImg from "./useProgressiveImg";
25+
import { motion } from "framer-motion";
26+
27+
export default function About() {
28+
const [src, { blur }] = useProgressiveImg(myImage3, myImage2);
29+
const container = {
30+
hidden: { opacity: 1, scale: 0 },
31+
visible: {
32+
opacity: 1,
33+
scale: 1,
34+
transition: {
35+
delayChildren: 0.3,
36+
staggerChildren: 0.2,
37+
duration: 0.5,
38+
},
39+
},
40+
};
41+
42+
const item = {
43+
hidden: { y: "100%", opacity: 0 },
44+
visible: { y: 0, opacity: 1 },
45+
};
46+
47+
return (
48+
<Container sx={{ my: { xs: "12%", lg: "70px" } }}>
49+
<Stack textTransform="uppercase" mb={6} position="relative">
50+
<Typography
51+
fontWeight="900"
52+
fontSize={{ xs: "25px", lg: "60px" }}
53+
textAlign="center"
54+
>
55+
À propos de
56+
<span style={{ color: "var(--mainPrimary)" }}> MOI</span>
57+
</Typography>
58+
</Stack>
59+
60+
<Grid container spacing={3}>
61+
<Grid item xs={12} lg={5} color="text.secondary">
62+
<Box display="flex" justifyContent="center" mb={{ xs: 6, lg: 0 }}>
63+
<Avatar
64+
alt="Mathéo PICHOT-MOÏSE"
65+
src={src}
66+
sx={{
67+
width: "300px",
68+
height: "300px",
69+
border: "4px solid #252525",
70+
objectFit: "top",
71+
boxShadow: "0 8px 4px 0 text.primary, 0 6px 20px 0 primary",
72+
}}
73+
style={{
74+
filter: blur ? "blur(20px)" : "none",
75+
transition: blur ? "none" : "filter 0.3s ease-out",
76+
}}
77+
/>
78+
</Box>
79+
</Grid>
80+
81+
{/* ------------------------------------- personal infos ------------------------------ */}
82+
<Grid item xs={12} lg={7}>
83+
<Box
84+
display="flex"
85+
flexDirection="column"
86+
justifyContent="center"
87+
width="100%"
88+
>
89+
<Typography variant="h5" textTransform="uppercase">
90+
Mes informations :
91+
</Typography>
92+
93+
<Box
94+
display="flex"
95+
flexWrap="wrap"
96+
justifyContent="space-between"
97+
mt={3}
98+
color="text.secondary"
99+
>
100+
{myPersonalInfo &&
101+
myPersonalInfo.map((e) => (
102+
<Stack flex="0 0 50%" key={e?.id}>
103+
<Stack
104+
direction={{ xs: "column", sm: "row" }}
105+
mb={1}
106+
columnGap={2}
107+
>
108+
<Typography
109+
textTransform="capitalize"
110+
color="text.secondary"
111+
>
112+
{`${e?.title}: `}
113+
</Typography>
114+
{e?.title === "email" ? (
115+
<a
116+
href={"mailto:" + e?.info}
117+
target="_blank"
118+
rel="noreferrer"
119+
>
120+
<Typography
121+
fontWeight={900}
122+
color={e?.color || "var(--mainPrimary)"}
123+
mr={2}
124+
className="animate__animated animate__flipInX"
125+
sx={{ textDecoration: "underline" }}
126+
>
127+
{e?.info}
128+
</Typography>
129+
</a>
130+
) : e?.title === "phone" ? (
131+
<a
132+
href={"tel:" + e?.info.replace(/\s/g, "")}
133+
target="_blank"
134+
rel="noreferrer"
135+
>
136+
<Typography
137+
fontWeight={900}
138+
color={e?.color || "var(--mainPrimary)"}
139+
mr={2}
140+
className="animate__animated animate__flipInX"
141+
sx={{ textDecoration: "underline" }}
142+
>
143+
{e?.info}
144+
</Typography>
145+
</a>
146+
) : (
147+
<Typography
148+
fontWeight={900}
149+
color={e?.color || "var(--mainPrimary)"}
150+
mr={2}
151+
className="animate__animated animate__flipInX"
152+
>
153+
{e?.info}
154+
</Typography>
155+
)}
156+
</Stack>
157+
</Stack>
158+
))}
159+
</Box>
160+
</Box>
161+
162+
<Box display="flex" justifyContent={{ xs: "center", lg: "left" }}>
163+
<Link
164+
href="../../public/index.html"
165+
download
166+
color="#ffffff"
167+
underline="none"
168+
>
169+
<Box className="project-btn" color="text.primary" mt={5}>
170+
<Box className="project-btn-icon">
171+
<FiDownload />{" "}
172+
</Box>
173+
<Box className="project-btn-text"> Télécharger mon CV </Box>
174+
</Box>
175+
</Link>
176+
</Box>
177+
</Grid>
178+
</Grid>
179+
180+
<Divider sx={{ bgcolor: "gray", width: "50%", mx: "auto", my: 4 }} />
181+
182+
{/* ------------------------------------- Skills ------------------------------ */}
183+
<Box mt={6} component="section">
184+
<Typography variant="h5" textTransform="uppercase" fontWeight={700}>
185+
Compétences :
186+
</Typography>
187+
188+
<Grid
189+
container
190+
spacing={2}
191+
my={4}
192+
color="text.primary"
193+
textAlign="center"
194+
// className="animate__animated animate__zoomIn"
195+
component={motion.ul}
196+
variants={container}
197+
initial="hidden"
198+
whileInView="visible"
199+
viewport={{ once: true }}
200+
className="container"
201+
>
202+
{skills?.map((skill, i) => (
203+
<Grid
204+
xs={6}
205+
sm={4}
206+
lg={3}
207+
key={skill?.id}
208+
sx={{ listStyle: "none", flexGrow: "1 !important" }}
209+
component={motion.li}
210+
variants={item}
211+
>
212+
<Box
213+
fontSize={60}
214+
color={skill?.color || "text.primary"}
215+
bgcolor="action.hover"
216+
paddingY="20px"
217+
borderRadius="10px"
218+
boxShadow={3}
219+
borderBottom="2px solid #d2b76f"
220+
sx={{
221+
"&:hover": {
222+
// boxShadow: '0 4px 8px 0 rgb(1 141 255 / 42%)',
223+
boxShadow: "0 4px 8px 0 rgb(210 183 111 / 42%)",
224+
transform: "translateY(-10px)",
225+
transition: "all .5s",
226+
transitionDelay: 80 * i,
227+
},
228+
}}
229+
>
230+
{skill?.icon}
231+
<Typography
232+
variant="body1"
233+
fontWeight={700}
234+
sx={{ userSelect: "none" }}
235+
>
236+
{skill?.title}
237+
</Typography>
238+
</Box>
239+
</Grid>
240+
))}
241+
</Grid>
242+
</Box>
243+
244+
<Divider sx={{ bgcolor: "Divider", width: "50%", mx: "auto", my: 4 }} />
245+
246+
<Box my={6}>
247+
<Typography
248+
variant="h5"
249+
textTransform="uppercase"
250+
fontWeight={700}
251+
mb={2}
252+
>
253+
Outils :
254+
</Typography>
255+
256+
<Box
257+
display="flex"
258+
flexDirection="row"
259+
gap={3}
260+
flexWrap="wrap"
261+
textAlign="center"
262+
>
263+
{skills2?.map((skill, i) => (
264+
<Box
265+
key={skill?.id}
266+
fontSize={60}
267+
color={skill?.color || "primary"}
268+
flex={{ xs: "1 1 auto" }}
269+
>
270+
<Box
271+
sx={{
272+
"&:hover": {
273+
transform: "scale(1.2)",
274+
transition: "all .5s",
275+
filter: `drop-shadow(0 4px 8px ${skill?.color || "blue"})`,
276+
},
277+
}}
278+
>
279+
{skill?.icon}
280+
</Box>
281+
282+
<Typography variant="body1" mb={2}>
283+
{skill?.title}
284+
</Typography>
285+
</Box>
286+
))}
287+
</Box>
288+
</Box>
289+
290+
<Divider sx={{ bgcolor: "gray", width: "50%", mx: "auto", my: 4 }} />
291+
292+
{/* Experience component ------------------------------------- */}
293+
<Experience />
294+
</Container>
295+
);
296+
}

0 commit comments

Comments
 (0)