add phone view for project page

my-app/package-lock.json

@@ -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",

my-app/package.json

@@ -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",

my-app/src/components/header.tsx

@@ -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>

my-app/src/css/mine.css

@@ -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;
-
+    /* align-self: center; */
-    margin-top: 30vh;
+    justify-content: center;
-    margin-right: 10vw;
+    height: 85vh;
+    padding-left: 10vw;
+    /* margin-top: 30vh; */
+    /* margin-right: 10vw; */
 
     font-weight: 800;
-    width: 50vh;
+    /* width: 50vh; */
-    height: 50%;
+    /* height: 50%; */
-    align-self: start;
+    /* align-self: start; */
-  }
-  
-  .presentation {
-    margin-top: 8%;
-    margin-left: 15%;
-    max-width: 40%;
   }
 
   .home {
     /* overflow: hidden; */
+    width: 100vw;
     position: absolute;
-    right: -100vw;
+    /* right: -100vw; */
-    animation: slideRight 2s ease forwards; 
+    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;

my-app/src/css/project.css

@@ -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%; */
+	}
 }