ShogunIsHere/portfolio-website
1
0
Fork 0
mirror of https://github.com/20kaushik02/portfolio-website.git synced 2026-01-25 08:24:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

WiP-2: projects, incomplete

Browse Source
This commit is contained in:
Kaushik Narayan R
2023-11-05 12:04:27 -07:00
parent 75fc0482e8
commit a1c0975cfb
11 changed files with 146 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/App.js
View File

@@ -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">
<Menu />
</div>
<WidthContext.Provider value={width}>
<div className="App">
<Menu />
</div>
</WidthContext.Provider>
);
}

8
src/components/Landing.js
View File

@@ -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\
networks, web development and machine learning."} />
primary={"TL;DR: Aspiring SWE whose passions lie in cloud technologies,\
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\
here*. My last stint was at *insert recent experience* as a\
primary={"Recently, I've been tinkering with " + projectsData[0].oneliner + ". My last stint was at *insert recent experience* as a\
*insert recent role*, *insert recent role's description*."} />
</ListItem>
</List>

6
src/components/Menu.js
View File

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

108
src/components/Projects.js
View File

@@ -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 (
<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) =>
<ListItem>
<ListItemText primaryTypographyProps={{ fontSize: 12}} primary={line} />
{project.desc.map((line, index) =>
<ListItem disableGutters key={index}>
<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'>
{projectsData.map(project => ProjectCard(project))}
</Carousel>
<Box sx={{
width: '100%',
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>
</>
)
}