fix: responsive fix and Teams fixed

EnigmaVSSUT · Apr 15, 2024 · 32fb478 · 32fb478
1 parent b3fc38d
commit 32fb478
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 5,647 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,23 +14,22 @@
     "react-dom": "^17.0.0 || ^yarn18.0.0"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/icons-material": "^5.15.10",
-    "@mui/material": "^5.15.10",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
     "@mui/x-date-pickers": "^6.18.0",
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "framer-motion": "^10.12.17",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^yarn18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.0",
-    "styled-components": "^6.1.8",
     "vite": "^4.3.9",
     "zustand": "^4.3.8"
   },
@@ -47,4 +46,4 @@
     "eslint-plugin-react-refresh": "^0.3.4",
     "typescript": "^5.0.2"
   }
-}
+}
diff --git a/public/assets/image8.jpg b/public/assets/image8.jpg
diff --git a/src/app/blogs/Blogs.jsx b/src/app/blogs/Blogs.jsx
@@ -1,4 +1,4 @@
-import { Stack, Typography,Box } from "@mui/material";
+import { Stack, Typography,Box} from "@mui/material";
 import blogStyles from "./blogs.module.css";
 import AnimatePage from "../../ui/AnimatePage";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -78,7 +78,7 @@ export default function Blogs() {
 	};
 
 	return (
-		<AnimatePage>
+		// <AnimatePage>
 			<Stack
 				orderColor="#f0f"
 				justifyContent="flex-start"
@@ -104,18 +104,16 @@ export default function Blogs() {
 							key={index}
 							minHeight="300px"
 							minWidth="250px"
-							borderRadius="20px"
+							borderRadius="10px"
 							position="relative"
 						>
 							<Box
 							component="img"
 							src={blog.img}
 								className={blogStyles.blogimage}
 								height="300px"
-								// width="400px"
-								// src={blog.img}
 								alt={blog.title}
-								sx={{ objectFit: "cover", borderRadius: "20px",width:{xs:"250px !important",md:"400px"} }}
+								sx={{ objectFit: "cover", borderRadius: "20px",width:{xs:"250px",md:"400px"} }}
 							/>
 							<Stack
 								className={blogStyles.title}
@@ -126,7 +124,7 @@ export default function Blogs() {
 								alignItems="self-start"
 								justifyContent="space-between"
 							>
-								<Typography className={blogStyles.titleHeading} variant="h6" sx={{width:'300px'}}>{blog.title}</Typography>
+								<Typography className={blogStyles.titleHeading} variant="h6" sx={{width:"100%"}}>{blog.title}</Typography>
 								<Typography variant="caption">{blog.date}</Typography>
 							</Stack>
 							<Stack
@@ -157,6 +155,6 @@ export default function Blogs() {
 					</IconButton>
 				</Stack>
 			</Stack>
-		</AnimatePage>
+		// </AnimatePage>
 	);
 }
diff --git a/src/app/projects/Projects.jsx b/src/app/projects/Projects.jsx
@@ -3,19 +3,15 @@ import { Stack, Typography } from "@mui/material";
 import AnimatePage from "../../ui/AnimatePage";
 
 import ProjectCard from "./components/ProjectCard";
-import img1 from "/assets/image1.jpg?url"
-import img2 from "/assets/image2.jpg?url"
-import img3 from "/assets/image3.jpg?url"
-import img4 from "/assets/image4.jpg?url"
-import img5 from "/assets/image5.png?url"
-
-import img2 from "/assets/image2.jpg?url"
 import img1 from "/assets/image1.png?url"
 import img4 from "/assets/image4.jpg?url"
 import img5 from "/assets/image5.png?url"
 import img6 from "/assets/image6.jpg?url"
 import img7 from "/assets/image7.png?url"
 import img8 from "/assets/image8.jpg?url"
+import img2 from "/assets/image2.jpg?url"
+
+
 export default function Projects() {
 	// const [value, setValue] = useState("one");
 
@@ -25,7 +21,7 @@ export default function Projects() {
 
 	// console.log(value);
 	return (
-		// <AnimatePage>
+		<AnimatePage>
 			<Stack
 				justifyContent="flex-start"
 				alignItems={"center"}
@@ -92,7 +88,7 @@ export default function Projects() {
 					alignItems={"center"}
 					flexWrap={"wrap"}
 					gap={6}
-					sx={{padding:{xs:"20px",md:"48px"}}}
+					sx={{margin:{xs:"20px",md:"48px"}}}
 				>
 					{/* {value === "one" && (
 						<>
@@ -121,9 +117,8 @@ export default function Projects() {
 					<ProjectCard  title="SMS" status="ongoing" content="VSSUT's Student Management System app enhances connectivity, streamlining student information." imgUrl={img8} />
 
 					<ProjectCard  title="Schedule" status="upcoming" content="Efficiently manage tasks with our user-friendly schedule app for streamlined organization, productivity, and stress-free planning." imgUrl={img4} />
-
 				</Stack>
 			</Stack>
-		// </AnimatePage>
+		</AnimatePage>
 	);
-}
+}
diff --git a/src/app/projects/components/ProjectCard.jsx b/src/app/projects/components/ProjectCard.jsx
@@ -7,48 +7,40 @@ export default function ProjectCard({imgUrl,title,content,status}) {
 	return (
 		<Stack
 			className={projectStyles.projectCard}
-
+			maxWidth={"400px"}
 			borderRadius={2}
 			sx={{
 				backgroundColor: "rgba(72, 75, 73, 0.5)",
-				display:"flex",
-				height:"100%",maxWidth:{xs:"none",md:"400px"},width:"100%"
-
+
 			}}
 		>
 			<Stack className="image-wrapper" sx={{ height:"300px"}}>
-				<Box 
+				<Box
 				component="img"
 					sx={{
 						objectFit: "cover",
 						borderRadius: "6px 6px 0 0",
-						width:{xs:"100%",md:"100%"}
+						width:{xs:"100%",md:"100%"},height:"100%"
 					}}
 					src={imgUrl}
 					alt=""
-
-					height="100%"
+
 				/>
 			</Stack>
 			<Stack className={projectStyles.data} gap={2} padding={3}>
 			<Box sx={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
-			<Typography sx={{fontSize:{xs:"4.5vw", sm:"2.8vw",md:"2.5vw",lg:"2.5vw"}}} >
+			<Typography variant="h4" sx={{fontSize:{xs:"4.5vw", md:"34px"}}} >
 					{title}
 				</Typography>
-				<Typography  sx={{fontSize:{xs:"4.5vw",sm:"2.8vw",md:"2.5vw",lg:"2.5vw"}}}>
+				<Typography variant="h4" sx={{fontSize:{xs:"4.5vw", md:"34px"}}} >
 					{status}
 				</Typography>
-			{/* </Box> */}
+			</Box>
 
 
-				<Typography  color={"#ABABAB"} sx={{fontSize:{xs:"3.5vw",sm:"2vw" ,md:"1.7vw",lg:"1.3vw"}}}>
+				<Typography variant="body1"  color={"#ABABAB"} sx={{fontSize:{xs:"3.5vw",md:"16px"}}}>
 					{content}
 				</Typography>
-				<Typography variant="h4" className={projectStyles.projectTitle}>
-					{status}
-				</Typography>
-			</Box>
-
 
 				{/* <Stack
 					className="stats"
@@ -124,4 +116,4 @@ export default function ProjectCard({imgUrl,title,content,status}) {
 			</Stack>
 		</Stack>
 	);
-}
+}