add phone view for project page
This commit is contained in:
parent
f12c49f7f4
commit
acaa3d2d24
20
my-app/package-lock.json
generated
20
my-app/package-lock.json
generated
@ -28,6 +28,7 @@
|
||||
"framer-motion": "^11.1.9",
|
||||
"i18next": "^23.11.4",
|
||||
"i18next-xhr-backend": "^3.2.2",
|
||||
"material-ui-popup-state": "^5.1.0",
|
||||
"react": "^18.3.1",
|
||||
"react-bootstrap": "^2.10.2",
|
||||
"react-country-flag": "^3.1.0",
|
||||
@ -15617,6 +15618,25 @@
|
||||
"tmpl": "1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/material-ui-popup-state": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-5.1.0.tgz",
|
||||
"integrity": "sha512-kG0xGqdPx3WM6AYnq0h7hCb3gk2M1FM/G/NFQN+HahcyABxCx3EFzLj5mdJICu2NYj0etZ2s7VDhAbrAezkxYg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/react": "^18.0.26",
|
||||
"classnames": "^2.2.6",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mui/material": "^5.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
"framer-motion": "^11.1.9",
|
||||
"i18next": "^23.11.4",
|
||||
"i18next-xhr-backend": "^3.2.2",
|
||||
"material-ui-popup-state": "^5.1.0",
|
||||
"react": "^18.3.1",
|
||||
"react-bootstrap": "^2.10.2",
|
||||
"react-country-flag": "^3.1.0",
|
||||
|
||||
@ -13,6 +13,11 @@ import { FormControl } from 'react-bootstrap';
|
||||
import { Box, InputLabel, MenuItem} from '@mui/material';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
|
||||
import Menu from '@mui/material/Menu';
|
||||
// import MenuItem from '@mui/material/MenuItem';
|
||||
import PopupState, { bindHover, bindMenu } from 'material-ui-popup-state';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
function Header()
|
||||
{
|
||||
const { i18n, t } = useTranslation();
|
||||
@ -70,6 +75,29 @@ function Header()
|
||||
<img src={logo} alt="Logo" />
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <PopupState variant="popover" popupId="demo-popup-menu">
|
||||
{(popupState) => (
|
||||
<React.Fragment>
|
||||
<Button className="pages" href="/skills" {...bindHover(popupState)}>
|
||||
{t("page2")}
|
||||
</Button>
|
||||
<Menu {...bindMenu(popupState)}>
|
||||
<MenuItem onClick={popupState.close}>Profile</MenuItem>
|
||||
<MenuItem onClick={popupState.close}>My account</MenuItem>
|
||||
<MenuItem onClick={popupState.close}>Logout</MenuItem>
|
||||
</Menu>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</PopupState> */}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="menu">
|
||||
<div className="pages">
|
||||
<a href="/projects">{t("page2")}</a>
|
||||
|
||||
0
my-app/src/components/menu
Normal file
0
my-app/src/components/menu
Normal file
@ -137,42 +137,52 @@ body {
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1vw;
|
||||
font-size: 3vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.presentation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* justify-content: center; */
|
||||
|
||||
width: 50vw;
|
||||
margin-top: 8%;
|
||||
margin-left: 15%;
|
||||
/* max-width: 40%; */
|
||||
}
|
||||
|
||||
.project {
|
||||
|
||||
width: 50vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
margin-top: 30vh;
|
||||
margin-right: 10vw;
|
||||
/* align-self: center; */
|
||||
justify-content: center;
|
||||
height: 85vh;
|
||||
padding-left: 10vw;
|
||||
/* margin-top: 30vh; */
|
||||
/* margin-right: 10vw; */
|
||||
|
||||
font-weight: 800;
|
||||
width: 50vh;
|
||||
height: 50%;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.presentation {
|
||||
margin-top: 8%;
|
||||
margin-left: 15%;
|
||||
max-width: 40%;
|
||||
/* width: 50vh; */
|
||||
/* height: 50%; */
|
||||
/* align-self: start; */
|
||||
}
|
||||
|
||||
.home {
|
||||
/* overflow: hidden; */
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
right: -100vw;
|
||||
animation: slideRight 2s ease forwards;
|
||||
/* right: -100vw; */
|
||||
animation: slideRight 1000ms ease forwards;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes slideRight {
|
||||
0% {
|
||||
right: -100vh; /* Position initiale */
|
||||
@ -185,6 +195,7 @@ body {
|
||||
.project_txt {
|
||||
font-weight: 800;
|
||||
font-size: 3vw;
|
||||
|
||||
}
|
||||
|
||||
.cv_button {
|
||||
@ -196,7 +207,8 @@ body {
|
||||
|
||||
.project_group {
|
||||
margin-top: 2vh;
|
||||
font-size: 1vw;
|
||||
/* font-size: 1vw; */
|
||||
font-size: 2vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
@ -11,7 +11,7 @@ img {
|
||||
}
|
||||
|
||||
.project_page {
|
||||
overflow: hidden;
|
||||
/* overflow: hidden; */
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -63,7 +63,41 @@ img {
|
||||
|
||||
|
||||
.project_home {
|
||||
margin-top: 20vh;
|
||||
/* margin-top: 20vh; */
|
||||
width: 100vw;
|
||||
margin-left: 45vw;
|
||||
margin-left: 35vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 992px){
|
||||
.project_page {
|
||||
text-align: center;
|
||||
/* overflow: hidden; */
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 85vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.project_detail {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.project_description{
|
||||
|
||||
margin: 0;
|
||||
max-width: 80%;
|
||||
/* margin-left: 10vw; */
|
||||
}
|
||||
.project_image {
|
||||
margin-top: 10vh;
|
||||
width: 80vw;
|
||||
/* margin-left: 10vw; */
|
||||
/* max-height: 30%; */
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user