diff --git a/package-lock.json b/package-lock.json index 82ae74b..fb8d483 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 2a37229..30076cb 100644 --- a/package.json +++ b/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": { diff --git a/public/Projects/aunms-packet-capture.png b/public/Projects/aunms-packet-capture.png new file mode 100644 index 0000000..80fadd6 Binary files /dev/null and b/public/Projects/aunms-packet-capture.png differ diff --git a/public/Projects/donut-eat-me-gameplay.png b/public/Projects/donut-eat-me-gameplay.png new file mode 100644 index 0000000..d11e77f Binary files /dev/null and b/public/Projects/donut-eat-me-gameplay.png differ diff --git a/public/Projects/fyp-arch-diag.png b/public/Projects/fyp-arch-diag.png new file mode 100644 index 0000000..71e6c64 Binary files /dev/null and b/public/Projects/fyp-arch-diag.png differ diff --git a/public/Projects/fyp-tcp-rl.png b/public/Projects/fyp-tcp-rl.png deleted file mode 100644 index 4923a5b..0000000 Binary files a/public/Projects/fyp-tcp-rl.png and /dev/null differ diff --git a/public/Projects/k-site-landing.png b/public/Projects/k-site-landing.png new file mode 100644 index 0000000..126dfb2 Binary files /dev/null and b/public/Projects/k-site-landing.png differ diff --git a/src/App.js b/src/App.js index e57333d..2aad0f0 100644 --- a/src/App.js +++ b/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 ( -
- -
+ +
+ +
+ ); } diff --git a/src/components/Landing.js b/src/components/Landing.js index a1a71ca..18b595d 100644 --- a/src/components/Landing.js +++ b/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: }, @@ -19,8 +20,8 @@ const Landing = () => { {/* one-liner summary */} + primary={"TL;DR: Aspiring SWE whose passions lie in cloud technologies,\ + web development and machine learning, but open to much more."} /> {/* intro with education */} @@ -31,8 +32,7 @@ const Landing = () => { {/* current stuff and last stint */} diff --git a/src/components/Menu.js b/src/components/Menu.js index 82771fc..e23fef2 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -81,11 +81,11 @@ export default function Menu(props) { ))} - + {/* Made with MUI - + */} ); @@ -150,7 +150,7 @@ export default function Menu(props) { {/* content goes here */} {menuSectionsData.filter((menuItem) => menuItem.key === activeSection)[0].component} diff --git a/src/components/Projects.js b/src/components/Projects.js index a506d36..be48efe 100644 --- a/src/components/Projects.js +++ b/src/components/Projects.js @@ -1,45 +1,90 @@ -import React from 'react'; -import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, List, ListItem, ListItemText, Typography } from '@mui/material'; -import Carousel from 'react-material-ui-carousel'; +import React, { useContext } from 'react'; +import { Box, Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, List, ListItem, ListItemText, Stack, Typography } from '@mui/material'; +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', - img: 'fyp-tcp-rl.png', + name: 'TCP-RL', + img: 'fyp-arch-diag.png', desc: [ - 'Implementation of reinforcement learning based TCP congestion control mechanisms, namely deep Q-learning and PPO models,\ - which were 2% more performant than existing algorithms.', - 'Then, 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.' + 'Implemented RL based TCP congestion control (deep Q-learning and PPO models), which were 2% more performant\ + compared to TCPNewReno.', + 'Demonstrated that performance under simple adversarial attacks was dampened by 40%.', + '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 ( - + handleButtonClick(process.env.PUBLIC_URL + "Projects/" + project.img)} /> - + {project.name} - {project.desc.map((line) => - - + {project.desc.map((line, index) => + + )} + + {project.tools.map((tool, index) => + + )} + @@ -52,9 +97,36 @@ const Projects = () => { } return ( <> - - {projectsData.map(project => ProjectCard(project))} - + + = 480 ? 2.4 : 1.1} + // centeredSlides + grabCursor + > + {projectsData.map((project) => + + + + )} + + ) }