WiP-2: projects, incomplete

package-lock.json

@@ -17,8 +17,8 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-material-ui-carousel": "^3.4.2",
         "react-scripts": "5.0.1",
+        "swiper": "^11.0.3",
         "web-vitals": "^2.1.4"
       }
     },
@@ -9028,48 +9028,6 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
-    "node_modules/framer-motion": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz",
-      "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==",
-      "dependencies": {
-        "framesync": "5.3.0",
-        "hey-listen": "^1.0.8",
-        "popmotion": "9.3.6",
-        "style-value-types": "4.1.4",
-        "tslib": "^2.1.0"
-      },
-      "optionalDependencies": {
-        "@emotion/is-prop-valid": "^0.8.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.8 || ^17.0.0",
-        "react-dom": ">=16.8 || ^17.0.0"
-      }
-    },
-    "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "optional": true,
-      "dependencies": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "node_modules/framer-motion/node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "optional": true
-    },
-    "node_modules/framesync": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz",
-      "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -9454,11 +9412,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/hey-listen": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
-      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -13670,17 +13623,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/popmotion": {
-      "version": "9.3.6",
-      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz",
-      "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==",
-      "dependencies": {
-        "framesync": "5.3.0",
-        "hey-listen": "^1.0.8",
-        "style-value-types": "4.1.4",
-        "tslib": "^2.1.0"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -15260,28 +15202,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
-    "node_modules/react-material-ui-carousel": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.2.tgz",
-      "integrity": "sha512-jUbC5aBWqbbbUOOdUe3zTVf4kMiZFwKJqwhxzHgBfklaXQbSopis4iWAHvEOLcZtSIJk4JAGxKE0CmxDoxvUuw==",
-      "dependencies": {
-        "@emotion/react": "^11.7.1",
-        "@emotion/styled": "^11.6.0",
-        "@mui/icons-material": "^5.4.1",
-        "@mui/material": "^5.4.1",
-        "@mui/system": "^5.4.1",
-        "framer-motion": "^4.1.17"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "@emotion/styled": "^11.3.0",
-        "@mui/icons-material": "^5.0.0",
-        "@mui/material": "^5.0.0",
-        "@mui/system": "^5.0.0",
-        "react": "^17.0.1 || ^18.0.0",
-        "react-dom": "^17.0.2 || ^18.0.0"
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -16648,15 +16568,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/style-value-types": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz",
-      "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==",
-      "dependencies": {
-        "hey-listen": "^1.0.8",
-        "tslib": "^2.1.0"
-      }
-    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16863,6 +16774,24 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.3.tgz",
+      "integrity": "sha512-MyV9ooQsriAe2EibeamqewLjgCfSvl2xoyratl6S3ln5BXDL4BzlO6mxcbLMCzQL6Z60b/u0AS/nKrepL0+TAg==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -24870,44 +24799,6 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="
     },
-    "framer-motion": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz",
-      "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==",
-      "requires": {
-        "@emotion/is-prop-valid": "^0.8.2",
-        "framesync": "5.3.0",
-        "hey-listen": "^1.0.8",
-        "popmotion": "9.3.6",
-        "style-value-types": "4.1.4",
-        "tslib": "^2.1.0"
-      },
-      "dependencies": {
-        "@emotion/is-prop-valid": {
-          "version": "0.8.8",
-          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-          "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-          "optional": true,
-          "requires": {
-            "@emotion/memoize": "0.7.4"
-          }
-        },
-        "@emotion/memoize": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-          "optional": true
-        }
-      }
-    },
-    "framesync": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz",
-      "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==",
-      "requires": {
-        "tslib": "^2.1.0"
-      }
-    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -25170,11 +25061,6 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
-    "hey-listen": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
-      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
-    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -28216,17 +28102,6 @@
         }
       }
     },
-    "popmotion": {
-      "version": "9.3.6",
-      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz",
-      "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==",
-      "requires": {
-        "framesync": "5.3.0",
-        "hey-listen": "^1.0.8",
-        "style-value-types": "4.1.4",
-        "tslib": "^2.1.0"
-      }
-    },
     "postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -29192,19 +29067,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
-    "react-material-ui-carousel": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.2.tgz",
-      "integrity": "sha512-jUbC5aBWqbbbUOOdUe3zTVf4kMiZFwKJqwhxzHgBfklaXQbSopis4iWAHvEOLcZtSIJk4JAGxKE0CmxDoxvUuw==",
-      "requires": {
-        "@emotion/react": "^11.7.1",
-        "@emotion/styled": "^11.6.0",
-        "@mui/icons-material": "^5.4.1",
-        "@mui/material": "^5.4.1",
-        "@mui/system": "^5.4.1",
-        "framer-motion": "^4.1.17"
-      }
-    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -30209,15 +30071,6 @@
       "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
       "requires": {}
     },
-    "style-value-types": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz",
-      "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==",
-      "requires": {
-        "hey-listen": "^1.0.8",
-        "tslib": "^2.1.0"
-      }
-    },
     "stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -30379,6 +30232,11 @@
         }
       }
     },
+    "swiper": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.3.tgz",
+      "integrity": "sha512-MyV9ooQsriAe2EibeamqewLjgCfSvl2xoyratl6S3ln5BXDL4BzlO6mxcbLMCzQL6Z60b/u0AS/nKrepL0+TAg=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -12,8 +12,8 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-material-ui-carousel": "^3.4.2",
     "react-scripts": "5.0.1",
+    "swiper": "^11.0.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,11 +1,32 @@
+import { createContext, useEffect, useState } from 'react';
 import './App.css';
 import Menu from './components/Menu';
 
+export const WidthContext = createContext();
+
 function App() {
+  const [width, setWidth] = useState(0);
+  // Get window dimensions on resize
+  useEffect(() => {
+    window.addEventListener("resize", updateWindowDimensions);
+
+    return () => {
+      window.removeEventListener("resize", updateWindowDimensions);
+    };
+  }, []);
+
+  const updateWindowDimensions = () => {
+    setWidth(window.innerWidth);
+  };
+  useEffect(() => {
+    updateWindowDimensions();
+  }, []);
   return (
-    <div className="App">
+    <WidthContext.Provider value={width}>
-      <Menu />
+      <div className="App">
-    </div>
+        <Menu />
+      </div>
+    </WidthContext.Provider>
   );
 }
 

src/components/Landing.js

@@ -5,6 +5,7 @@ import { handleButtonClick } from '../utils/linkClick';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import EmailIcon from '@mui/icons-material/Email';
+import { projectsData } from './Projects';
 
 const socialsData = [
 	{ key: 'github', socialText: 'GitHub', socialLink: 'https://github.com/20kaushik02', socialIcon: <GitHubIcon /> },
@@ -19,8 +20,8 @@ const Landing = () => {
 				{/* one-liner summary */}
 				<ListItem>
 					<ListItemText
-						primary={"TL;DR: Aspiring SWE whose passions lie in computer\
+						primary={"TL;DR: Aspiring SWE whose passions lie in cloud technologies,\
-					networks, web development and machine learning."} />
+						web development and machine learning, but open to much more."} />
 				</ListItem>
 				{/* intro with education */}
 				<ListItem>
@@ -31,8 +32,7 @@ const Landing = () => {
 				{/* current stuff and last stint */}
 				<ListItem>
 					<ListItemText
-						primary={"Right now, I'm working on *insert recent project\
+						primary={"Recently, I've been tinkering with " + projectsData[0].oneliner + ". My last stint was at *insert recent experience* as a\
-						here*. My last stint was at *insert recent experience* as a\
 						*insert recent role*, *insert recent role's description*."} />
 				</ListItem>
 			</List>

src/components/Menu.js

@@ -81,11 +81,11 @@ export default function Menu(props) {
 				))}
 			</List>
 			<Divider />
-			<Box component="div" align="center" padding={2}>
+			{/* <Box component="div" align="center" padding={2}>
 				<Link sx={{ padding: 1 }} href="https://mui.com" underline="hover">
 					Made with MUI
 				</Link>
-			</Box>
+			</Box> */}
 		</div>
 	);
 
@@ -150,7 +150,7 @@ export default function Menu(props) {
 			{/* content goes here */}
 			<Box
 				component="main"
-				sx={{ flexGrow: 1, padding: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+				sx={{ flexGrow: 1, padding: 1, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
 			>
 				<Toolbar />
 				{menuSectionsData.filter((menuItem) => menuItem.key === activeSection)[0].component}

src/components/Projects.js

@@ -1,45 +1,90 @@
-import React from 'react';
+import React, { useContext } from 'react';
-import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, List, ListItem, ListItemText, Typography } from '@mui/material';
+import { Box, Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, List, ListItem, ListItemText, Stack, Typography } from '@mui/material';
-import Carousel from 'react-material-ui-carousel';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import "swiper/css";
+import { Pagination, Navigation, EffectFade } from "swiper/modules";
+
+import { WidthContext } from '../App';
 import { handleButtonClick } from '../utils/linkClick';
 
 export const projectsData = [
 	{
 		key: 'fyp-tcp-rl', oneliner: 'adversarial attacks on reinforcement learning-based congestion control for TCP',
-		name: 'Implementation of RL based TCP congestion control schemes and their performance evaluation under adversarial attacks',
+		name: 'TCP-RL',
-		img: 'fyp-tcp-rl.png',
+		img: 'fyp-arch-diag.png',
 		desc: [
-			'Implementation of reinforcement learning based TCP congestion control mechanisms, namely deep Q-learning and PPO models,\
+			'Implemented RL based TCP congestion control (deep Q-learning and PPO models), which were 2% more performant\
-			which were 2% more performant than existing algorithms.',
+			compared to TCPNewReno.',
-			'Then, demonstrated that performance under simple adversarial attacks was dampened by 40%.',
+			'Demonstrated that performance under simple adversarial attacks was dampened by 40%.',
-			'Utilized the ns-3 network simulator, TensorFlow and OpenAI’s Gym framework for reinforcement learning.'
+			'Utilized the ns-3 network simulator, TensorFlow and OpenAI’s Gym framework.'
 		],
 		tools: ['ns3', 'TensorFlow', 'OpenAI Gym'],
 		link: 'https://github.com/harish3030/FYP-TCP-RL'
 	},
+	{
+		key: 'k-site-2023', oneliner: 'the flagship website for Kurukshetra CEG',
+		name: 'Kurukshetra 2023',
+		img: 'k-site-landing.png',
+		desc: [
+			'Flagship website for the 2023 edition of Kurukshetra, CEG\'s international techno-management fest.',
+			'Handled a peak of 10,000 daily users and transactions',
+			'Built with React and Express.js',
+		],
+		tools: ['React', 'Express.js', 'AWS'],
+		link: 'https://k23.kurukshetraceg.org.in'
+	},
+	{
+		key: 'donut-eat-me', oneliner: 'a 3D pastry-themed action platformer',
+		name: 'Donut Eat Me',
+		img: 'donut-eat-me-gameplay.png',
+		desc: [
+			'An isometric 3D pastry-themed action platformer where you play as a donut and fight other pastries!',
+			'Made with Unity, all assets designed with Blender.',
+		],
+		tools: ['Blender', 'Unity'],
+		link: 'https://kirangeorge.itch.io/donut-eat-me'
+	},
+	{
+		key: 'aunms', oneliner: '',
+		name: 'Network Monitor',
+		img: 'aunms-packet-capture.png',
+		desc: [
+			'A simple Wireshark-like network monitoring tool to monitor live network traffic and devices',
+			'Developed using scapy and PyQt.',
+		],
+		tools: ['Python', 'Qt', 'scapy'],
+		link: 'https://kirangeorge.itch.io/donut-eat-me'
+	},
 ]
 const Projects = () => {
-	const ProjectCard = (project) => {
+	const width = useContext(WidthContext);
+	const ProjectCard = ({ project }) => {
 		return (
-			<Card scroll="paper" sx={{ maxWidth: 325 }} key={project.key}>
+			<Card sx={{ maxWidth: 400 }}>
 				<CardActionArea>
 					<CardMedia
 						component="img"
 						height="140"
 						image={process.env.PUBLIC_URL + "Projects/" + project.img}
 						alt={project.name}
+						onClick={() => handleButtonClick(process.env.PUBLIC_URL + "Projects/" + project.img)}
 					/>
 					<CardContent align="left">
-						<Typography gutterBottom primaryTypographyProps={{ fontSize: 16}} component="div">
+						<Typography gutterBottom primaryTypographyProps={{ fontSize: 16 }} component="div">
 							{project.name}
 						</Typography>
 						<List>
-							{project.desc.map((line) =>
+							{project.desc.map((line, index) =>
-								<ListItem>
+								<ListItem disableGutters key={index}>
-									<ListItemText primaryTypographyProps={{ fontSize: 12}} primary={line} />
+									<ListItemText primaryTypographyProps={{ fontSize: 12 }} primary={line} />
 								</ListItem>
 							)}
 						</List>
+						<Box>
+							{project.tools.map((tool, index) =>
+								<Chip key={index} label={tool} />
+							)}
+						</Box>
 					</CardContent>
 				</CardActionArea>
 				<CardActions>
@@ -52,9 +97,36 @@ const Projects = () => {
 	}
 	return (
 		<>
-			<Carousel navButtonsAlwaysVisible cycleNavigation animation='slide'>
+			<Box sx={{
-				{projectsData.map(project => ProjectCard(project))}
+				width: '100%',
-			</Carousel>
+				height: '100%',
+				maxWidth: '90vw',
+				maxHeight: '100vh',
+				minWidth: 0,
+				minHeight: 0
+			}} variant="div">
+				<Swiper
+					modules={[Pagination, Navigation, EffectFade]}
+					pagination={{
+						dynamicBullets: true,
+					}}
+					navigation
+					speed={400}
+					spaceBetween={10}
+					slidesPerView={width >= 480 ? 2.4 : 1.1}
+					// centeredSlides
+					grabCursor
+				>
+					{projectsData.map((project) =>
+						<SwiperSlide sx={{
+							width: 'auto',
+							flexShrink: 0, height: '90%'
+						}} key={project.key}>
+							<ProjectCard project={project} />
+						</SwiperSlide>
+					)}
+				</Swiper>
+			</Box>
 		</>
 	)
 }