ShogunIsHere/portfolio-website
1
0
Fork 0
mirror of https://github.com/20kaushik02/portfolio-website.git synced 2025-12-06 07:44:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

updates, updates, updates

Browse Source 
package updates
added projects
updated career page
updated resume
cleaned up a bit
This commit is contained in:
Kaushik Narayan R 2025-06-06 21:29:57 -07:00
parent 574eded634
commit 7d6afd6f2c
17 changed files with 6399 additions and 18794 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24849
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

25
package.json
View File

@ -3,18 +3,16 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.1", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.11.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^5.14.16", "@mui/icons-material": "^7.1.1",
"@mui/material": "^5.14.16", "@mui/material": "^7.1.1",
"@testing-library/jest-dom": "^5.17.0", "react": "^19.1.0",
"@testing-library/react": "^13.4.0", "react-dom": "^19.1.0",
"@testing-library/user-event": "^13.5.0", "swiper": "^11.2.8"
"react": "^18.2.0", },
"react-dom": "^18.2.0", "devDependencies": {
"react-scripts": "5.0.1", "react-scripts": "5.0.1"
"swiper": "^11.0.3",
"web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
@ -39,8 +37,5 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11"
} }
} }

BIN
public/Projects/kchg-arch-diag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
public/Projects/spot-pl-mgr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 425 KiB

BIN
public/myresume.pdf
View File

Binary file not shown.

38
src/App.css
View File

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

5
src/App.js
View File

@ -1,5 +1,4 @@
import { createContext, useEffect, useState } from 'react'; import { createContext, useEffect, useState } from 'react';
import './App.css';
import Menu from './components/Menu'; import Menu from './components/Menu';
export const WidthContext = createContext(); export const WidthContext = createContext();
@ -23,9 +22,7 @@ function App() {
}, []); }, []);
return ( return (
<WidthContext.Provider value={width}> <WidthContext.Provider value={width}>
<div className="App"> <Menu />
<Menu />
</div>
</WidthContext.Provider> </WidthContext.Provider>
); );
} }

8
src/App.test.js
View File

@ -1,8 +0,0 @@
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

96
src/components/Career.js
View File

@ -1,30 +1,33 @@
import { Divider, List, ListItem, ListItemText, Typography } from '@mui/material' import { Divider, List, ListItem, ListItemText, Typography } from '@mui/material'
import React from 'react' import React, { Fragment } from 'react'
export const experiencesData = [ export const experiencesData = [
{
key: 'grad-res-asu', type: 'prof', location: 'Arizona State University', designation: 'Graduate Researcher',
desc: [
'Modelled the TCP protocol using high-level Petri nets to enable mathematical analysis of its state machine',
'Modified the protocol model to design variants to help achieve censorship circumvention',
'Employed CTL checking and Markov chain analysis to formally verify and test performance'
],
startDate: 'Jan 2025', endDate: 'June 2025'
},
{ {
key: 'sde-intern-rq', type: 'prof', location: 'RootQuotient Technologies', designation: 'Software Developer Intern', key: 'sde-intern-rq', type: 'prof', location: 'RootQuotient Technologies', designation: 'Software Developer Intern',
desc: [ desc: [
'Developed interactive user interfaces for client applications using ReactJS, TypeScript, and the Ant Design library.', 'Built user-friendly web applications using ReactJS, ExpressJS, TypeScript, and the Ant Design library',
// eslint-disable-next-line 'Implemented a comprehensive admin dashboard for a client’s banking administration application, following MVC patterns for seamless backend integration.',
'Implemented a comprehensive admin dashboard for a client’s banking administration application, following MVC\ 'Actively contributed to fixing persistent bugs and enhanced internal packages by adding API documentation'
patterns for seamless backend integration.',
'Actively contributed to bug fixes and enhanced an internal package by adding API documentation.'
], ],
startDate: 'May 2022', endDate: 'July 2022' startDate: 'May 2022', endDate: 'July 2022'
}, },
{ {
key: 'tech-sd-ctf', type: 'extra', location: 'CEG Tech Forum', designation: 'Student Director of Technical Operations', key: 'tech-sd-ctf', type: 'extra', location: 'CEG Tech Forum', designation: 'Student Director - Technical Operations',
desc: [ desc: [
'Headed a 20-member strong technical operations team as the Lead Developer, Sysadmin, and Project Manager.', 'Headed a 20-member strong technical operations team as the Lead Developer, Sysadmin, and Project Manager',
// eslint-disable-next-line 'Spearheaded multiple web apps developed for various purposes, such as a custom ERP mobile app, admin dashboards, and the flagship website for Kurukshetra, the international techno-management fest of CEG',
'Spearheaded multiple web apps developed for various purposes, such as a custom ERP mobile app, admin dashboards,\ 'Organized a technical summit on "Innovation and Transformation: AI, Autonomous Systems, and Disruptive Trends" featuring projects by local innovators and keynotes from BNY Mellon, Microsoft, and startups'
and the flagship website for Kurukshetra, the international techno-management fest of CEG.',
// eslint-disable-next-line
'Organized a technical summit on "Innovation and Transformation: AI, Autonomous Systems, and Disruptive Trends"\
featuring projects by local innovators and keynotes from BNY Mellon, Microsoft, and startups.'
], ],
startDate: 'July 2022', endDate: 'July 2023' startDate: 'July 2022', endDate: 'June 2023'
}, },
{ {
key: 'sec-nss', type: 'extra', location: 'National Service Scheme', designation: 'Secretary', key: 'sec-nss', type: 'extra', location: 'National Service Scheme', designation: 'Secretary',
@ -32,20 +35,19 @@ export const experiencesData = [
'Organized cleanliness campaigns, awareness rallies, and the annual village development camp.', 'Organized cleanliness campaigns, awareness rallies, and the annual village development camp.',
'Conducted a 3-day city-wide waste collection and awareness drive in collaboration with AWCEM, Chennai.' 'Conducted a 3-day city-wide waste collection and awareness drive in collaboration with AWCEM, Chennai.'
], ],
startDate: 'Nov 2021', endDate: 'Oct 2022' startDate: 'November 2021', endDate: 'October 2022'
}, },
{ {
key: 'cs-ms-asu', type: 'edu', location: 'Arizona State University', designation: 'MS, Computer Science', key: 'cs-ms-asu', type: 'edu', location: 'Arizona State University', designation: 'MS, Computer Science',
desc: [ desc: [
// Add relevant coursework in the future 'Learnt some more: OS, cloud computing, software security, network security, distributed databases'
], ],
startDate: 'Aug 2023', endDate: 'May 2025' startDate: 'August 2023', endDate: 'May 2025'
}, },
{ {
key: 'cse-be-ceg', type: 'edu', location: 'College of Engineering, Guindy', designation: 'BE, Computer Science and Engineering', key: 'cse-be-ceg', type: 'edu', location: 'College of Engineering, Guindy', designation: 'BE, Computer Science and Engineering',
desc: [ desc: [
'Graduated first-class with distinction with a 9.12 CGPA', 'Learnt a lot: DBMS, OS, compilers, comp-arch., networking, network security and cryptography, cloud computing, distributed systems, deep learning, big data analytics, software project management',
'Relevant coursework: DBMS, OOPS, full-stack development, cloud computing, deep learning, computer networks',
], ],
startDate: 'July 2019', endDate: 'June 2023' startDate: 'July 2019', endDate: 'June 2023'
}, },
@ -54,64 +56,64 @@ export const experiencesData = [
const Career = () => { const Career = () => {
return ( return (
<> <>
<Typography p={1} align="left" variant="h5"> <Typography p={2} align="left" variant="h5">
Professional Professional
</Typography> </Typography>
{experiencesData.filter(exp => exp.type === 'prof').map(exp => {experiencesData.filter(exp => exp.type === 'prof').map((exp, idx) =>
<> <Fragment key={idx}>
<Typography p={1} align="left" fontSize={16}> <Typography px={2} align="left" fontSize={16}>
<b>{exp.designation}, {exp.location}</b>, <i>{exp.startDate} - {exp.endDate}</i> <b>{exp.designation}, {exp.location}</b>, <i>{exp.startDate} - {exp.endDate}</i>
</Typography> </Typography>
<Typography p={1} align="left"> <Typography component="div" p={2} align="left">
<List disablePadding> <List disablePadding sx={{ pl: 2, listStyleType: 'disc' }}>
{exp.desc.map((line, index) => {exp.desc.map((line, index) =>
<ListItem disablePadding key={index}> <ListItem disablePadding key={index} sx={{ display: 'list-item' }}>
<ListItemText primaryTypographyProps={{ p: 0, fontSize: 13 }} primary={line} /> <ListItemText slotProps={{ primary: { fontSize: 13 } }} primary={line} />
</ListItem> </ListItem>
)} )}
</List> </List>
</Typography> </Typography>
</> </Fragment>
)} )}
<Divider /> <Divider />
<Typography p={1} align="left" variant="h5"> <Typography p={2} align="left" variant="h5">
Education Education
</Typography> </Typography>
{experiencesData.filter(exp => exp.type === 'edu').map(exp => {experiencesData.filter(exp => exp.type === 'edu').map((exp, idx) =>
<> <Fragment key={idx}>
<Typography p={1} align="left" fontSize={16}> <Typography px={2} align="left" fontSize={16}>
<b>{exp.designation}, {exp.location}</b>, <i>{exp.startDate} - {exp.endDate}</i> <b>{exp.designation}, {exp.location}</b>, <i>{exp.startDate} - {exp.endDate}</i>
</Typography> </Typography>
<Typography p={1} align="left"> <Typography component="div" p={2} align="left">
<List disablePadding> <List disablePadding sx={{ pl: 2, listStyleType: 'disc' }}>
{exp.desc.map((line, index) => {exp.desc.map((line, index) =>
<ListItem disablePadding key={index}> <ListItem disablePadding key={index} sx={{ display: 'list-item' }}>
<ListItemText primaryTypographyProps={{ p: 0, fontSize: 13 }} primary={line} /> <ListItemText slotProps={{ primary: { fontSize: 13 } }} primary={line} />
</ListItem> </ListItem>
)} )}
</List> </List>
</Typography> </Typography>
</> </Fragment>
)} )}
<Divider /> <Divider />
<Typography p={1} align="left" variant="h5"> <Typography p={2} align="left" variant="h5">
Volunteering Volunteering
</Typography> </Typography>
{experiencesData.filter(exp => exp.type === 'extra').map(exp => {experiencesData.filter(exp => exp.type === 'extra').map((exp, idx) =>
<> <Fragment key={idx}>
<Typography p={1} align="left" fontSize={16}> <Typography px={2} align="left" fontSize={16}>
<b>{exp.designation}, {exp.location}</b>, <i>{exp.startDate} - {exp.endDate}</i> <b>{exp.designation}, {exp.location}</b>, <i>{exp.startDate} - {exp.endDate}</i>
</Typography> </Typography>
<Typography p={1} align="left"> <Typography component="div" p={2} align="left">
<List disablePadding> <List disablePadding sx={{ pl: 2, listStyleType: 'disc' }}>
{exp.desc.map((line, index) => {exp.desc.map((line, index) =>
<ListItem disablePadding key={index}> <ListItem disablePadding key={index} sx={{ display: 'list-item' }}>
<ListItemText primaryTypographyProps={{ p: 0, fontSize: 13 }} primary={line} /> <ListItemText slotProps={{ primary: { fontSize: 13 } }} primary={line} />
</ListItem> </ListItem>
)} )}
</List> </List>
</Typography> </Typography>
</> </Fragment>
)} )}
</> </>
) )

20
src/components/Landing.js
View File

@ -18,17 +18,18 @@ const Landing = () => {
return ( return (
<> <>
<List> <List>
{/* one-liner summary */} {/* summary */}
<ListItem> <ListItem>
<ListItemText <ListItemText
primary={"I'll be brief: Aspiring SWE whose passions lie in cloud technologies,\ primary={"Welcome to my (messy) homepage. I'm an aspiring software developer\
web development and machine learning, but open to much more."} /> whose passions lie in distributed technologies, networks and security,\
web development, and machine learning, but open to much more." } />
</ListItem> </ListItem>
{/* education, for now */} {/* current endeavor */}
<ListItem> <ListItem>
<ListItemText <ListItemText
primary={"I'm currently pursuing my masters in computer\ primary={"I'm currently looking for a job! If you know any openings that\
science at ASU, and will be graduating in the summer of 2025."} /> you think I would be a good fit for, do reach out." } />
</ListItem> </ListItem>
{/* current stuff */} {/* current stuff */}
<ListItem> <ListItem>
@ -42,14 +43,9 @@ const Landing = () => {
experiencesData.filter(exp => exp.type === 'prof')[0].location + " as a " + experiencesData.filter(exp => exp.type === 'prof')[0].location + " as a " +
experiencesData.filter(exp => exp.type === 'prof')[0].designation + "."} /> experiencesData.filter(exp => exp.type === 'prof')[0].designation + "."} />
</ListItem> </ListItem>
{/* last stint */}
<ListItem>
<ListItemText
primary={"Yes it's a simple website, and yes it's not finished yet :)"} />
</ListItem>
</List> </List>
<Divider /> <Divider />
<Typography paragraph p={1}> <Typography p={2}>
More at: More at:
</Typography> </Typography>
<ButtonGroup <ButtonGroup

4
src/components/LoremIpsum.js
View File

@ -4,7 +4,7 @@ import * as React from 'react'
const LoremIpsum = () => { const LoremIpsum = () => {
return ( return (
<> <>
<Typography paragraph> <Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
@ -18,7 +18,7 @@ const LoremIpsum = () => {
consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
sapien faucibus et molestie ac. sapien faucibus et molestie ac.
</Typography> </Typography>
<Typography paragraph> <Typography>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra

83
src/components/Menu.js
View File

@ -18,11 +18,11 @@ import Typography from '@mui/material/Typography';
// import Link from '@mui/material/Link'; // import Link from '@mui/material/Link';
import LandingIcon from '@mui/icons-material/Home'; import LandingIcon from '@mui/icons-material/Home';
import ProjIcon from '@mui/icons-material/AccountTree'; import ProjectsIcon from '@mui/icons-material/AccountTree';
import ExpIcon from '@mui/icons-material/Work'; import CareerIcon from '@mui/icons-material/Work';
import SkilIcon from '@mui/icons-material/Laptop'; import InterestsIcon from '@mui/icons-material/Headphones';
import IntsIcon from '@mui/icons-material/SportsEsports';
import ArticleIcon from '@mui/icons-material/Article'; import ArticleIcon from '@mui/icons-material/Article';
import BlogIcon from '@mui/icons-material/RateReview';
import Landing from './Landing'; import Landing from './Landing';
// import LoremIpsum from './LoremIpsum'; // import LoremIpsum from './LoremIpsum';
@ -35,47 +35,54 @@ const drawerWidth = 240;
const menuSections = [ const menuSections = [
{ {
key: 'landing', display_name: 'Home', appbar_text: 'Hello There!', display_icon: <LandingIcon />, key: 'landing', display_name: 'About', appbar_text: 'Hello There!', display_icon: <LandingIcon />,
extLink: false, component: <Landing /> extLink: false, component: <Landing />
}, },
{ {
key: 'proj', display_name: 'Projects', appbar_text: 'My Projects', display_icon: <ProjIcon />, key: 'proj', display_name: 'Stuff', appbar_text: 'Workbench', display_icon: <ProjectsIcon />,
extLink: false, component: <Projects /> extLink: false, component: <Projects />
}, },
{ {
key: 'exp', display_name: 'Career', appbar_text: 'My Journey', display_icon: <ExpIcon />, key: 'exp', display_name: 'Work', appbar_text: 'Journey', display_icon: <CareerIcon />,
extLink: false, component: <Career /> extLink: false, component: <Career />
}, },
{ {
key: 'skil', display_name: 'Skills', appbar_text: 'My Skills', display_icon: <SkilIcon />, key: 'ints', display_name: 'Interests', appbar_text: 'My Interests', display_icon: <InterestsIcon />,
extLink: false, component: <UnderConstruction /> extLink: false, component: <UnderConstruction />
}, },
{ {
key: 'ints', display_name: 'Interests', appbar_text: 'My Interests', display_icon: <IntsIcon />, key: 'resume', display_name: 'Resume/CV', appbar_text: 'Resume/CV', display_icon: <ArticleIcon />,
extLink: false, component: <UnderConstruction />
},
{
key: 'resume', display_name: 'Resume', appbar_text: 'My Resume', display_icon: <ArticleIcon />,
extLink: true, link: process.env.PUBLIC_URL + "myresume.pdf" extLink: true, link: process.env.PUBLIC_URL + "myresume.pdf"
}, },
{
key: 'blog', display_name: 'My Scribbles', appbar_text: 'My Scribbles', display_icon: <BlogIcon />,
extLink: true, link: "https://blog.knravish.me"
},
]; ];
export default function Menu(props) { function Menu(props) {
const { window } = props;
const [mobileOpen, setMobileOpen] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false);
const [isClosing, setIsClosing] = React.useState(false);
const [activeSection, setActiveSection] = React.useState(menuSections[0]); const [activeSection, setActiveSection] = React.useState(menuSections[0]);
const handleDrawerClose = () => {
setIsClosing(true);
setMobileOpen(false);
};
const handleDrawerTransitionEnd = () => {
setIsClosing(false);
};
const handleDrawerToggle = () => { const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen); if (!isClosing) {
setMobileOpen(!mobileOpen);
}
}; };
const handleDrawerSelect = (selectedSectionKey) => { const handleDrawerSelect = (selectedSectionKey) => {
handleDrawerToggle(); handleDrawerClose();
const menuSection = menuSections.filter((menuItem) => menuItem.key === selectedSectionKey)[0]; const menuSection = menuSections.filter((menuItem) => menuItem.key === selectedSectionKey)[0];
if (menuSection.extLink === true) {
handleLinkClick(menuSection.link);
return;
}
setActiveSection(menuSection); setActiveSection(menuSection);
} }
@ -83,12 +90,12 @@ export default function Menu(props) {
<div> <div>
{/* <Toolbar /> */} {/* <Toolbar /> */}
<Box component="div" align="center" padding={2}> <Box component="div" align="center" padding={2}>
<Avatar src={process.env.PUBLIC_URL + "pappu2.jpg"} alt='' sx={{ width: 120, height: 120 }} /> <Avatar src={process.env.PUBLIC_URL + "pappu2.jpg"} alt='profile pic' sx={{ width: 120, height: 120 }} />
<Typography sx={{ padding: 2 }}>Kaushik Narayan Ravishankar</Typography> <Typography sx={{ padding: 2 }}>Kaushik Narayan Ravishankar</Typography>
</Box> </Box>
<Divider /> <Divider />
<List> <List>
{menuSections.map((menuItem, index) => ( {menuSections.filter(menuItem => menuItem.extLink === false).map(menuItem => (
<ListItem onClick={() => { handleDrawerSelect(menuItem.key); }} key={menuItem.key} disablePadding> <ListItem onClick={() => { handleDrawerSelect(menuItem.key); }} key={menuItem.key} disablePadding>
<ListItemButton selected={activeSection.key === menuItem.key}> <ListItemButton selected={activeSection.key === menuItem.key}>
<ListItemIcon> <ListItemIcon>
@ -100,6 +107,19 @@ export default function Menu(props) {
))} ))}
</List> </List>
<Divider /> <Divider />
<List>
{menuSections.filter(menuItem => menuItem.extLink === true).map(menuItem => (
<ListItem onClick={() => { handleLinkClick(menuItem.link); }} key={menuItem.key} disablePadding>
<ListItemButton>
<ListItemIcon>
{menuItem.display_icon}
</ListItemIcon>
<ListItemText primary={menuItem.display_name} />
</ListItemButton>
</ListItem>
))}
</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"> <Link sx={{ padding: 1 }} href="https://mui.com" underline="hover">
Made with MUI Made with MUI
@ -108,8 +128,6 @@ export default function Menu(props) {
</div> </div>
); );
const container = window !== undefined ? () => window().document.body : undefined;
return ( return (
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<CssBaseline /> <CssBaseline />
@ -138,15 +156,17 @@ export default function Menu(props) {
<Box <Box
component="nav" component="nav"
sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }} sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
aria-label="mailbox folders" aria-label="page links"
> >
<Drawer <Drawer
container={container}
variant="temporary" variant="temporary"
open={mobileOpen} open={mobileOpen}
onClose={handleDrawerToggle} onTransitionEnd={handleDrawerTransitionEnd}
ModalProps={{ onClose={handleDrawerClose}
keepMounted: true, // Better open performance on mobile. slotProps={{
root: {
keepMounted: true, // Better open performance on mobile.
},
}} }}
sx={{ sx={{
display: { xs: 'block', sm: 'none' }, display: { xs: 'block', sm: 'none' },
@ -166,7 +186,6 @@ export default function Menu(props) {
{drawer} {drawer}
</Drawer> </Drawer>
</Box> </Box>
{/* content goes here */}
<Box <Box
component="main" component="main"
sx={{ flexGrow: 1, padding: 1, width: { sm: `calc(100% - ${drawerWidth}px)` } }} sx={{ flexGrow: 1, padding: 1, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
@ -177,3 +196,5 @@ export default function Menu(props) {
</Box> </Box>
); );
} }
export default Menu;

39
src/components/Projects.js
View File

@ -8,14 +8,35 @@ import { WidthContext } from '../App';
import { handleLinkClick } from '../utils/linkClick'; import { handleLinkClick } from '../utils/linkClick';
export const projectsData = [ export const projectsData = [
{
key: 'spot-pl-mgr', oneliner: 'the Spotify API to manage playlists in a graph-based flow',
name: 'Spotify Playlist Manager',
img: 'spot-pl-mgr.png',
desc: [
'Webapp to sync tracks between your Spotify playlists using the Spotify Web API',
'Implemented directed acyclic graph data structures and search algorithms',
'Built with ExpressJS, React, PostgreSQL, Docker and deployed on Oracle Cloud VM'
],
tools: ['React', 'ExpressJS', 'PostgreSQL', 'Spotify API', 'Docker'],
link: 'https://spotify-manager.knravish.me'
},
{
key: 'kafka-ch-grafana', oneliner: 'a distributed ETL pipeline for analyzing large-scale Internet traffic traces, using Clickhouse, Kafka and Grafana',
name: 'Real-Time Internet Traffic Data Analysis',
img: 'kchg-arch-diag.png',
desc: [
'An end-to-end ETL pipeline for ingesting and analyzing terabyte-scale Internet traffic traces',
'Designed using Clickhouse, Kafka, Grafana, and Docker to achieve autoscaling and fault tolerance'
],
tools: ['Docker', 'Kafka', 'Clickhouse', 'Grafana'],
link: 'https://github.com/20kaushik02/real-time-traffic-analysis-clickhouse'
},
{ {
key: 'fyp-tcp-rl', oneliner: 'adversarial attacks on reinforcement learning-based congestion control for TCP', key: 'fyp-tcp-rl', oneliner: 'adversarial attacks on reinforcement learning-based congestion control for TCP',
name: 'TCP-RL', name: 'TCP-RL',
img: 'fyp-arch-diag.png', img: 'fyp-arch-diag.png',
desc: [ desc: [
// eslint-disable-next-line 'Implemented RL based TCP congestion control (deep Q-learning and PPO models), which were 2% more performant compared to TCPNewReno.',
'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%.', 'Demonstrated that performance under simple adversarial attacks was dampened by 40%.',
'Utilized the ns-3 network simulator, TensorFlow and OpenAI’s Gym framework.' 'Utilized the ns-3 network simulator, TensorFlow and OpenAI’s Gym framework.'
], ],
@ -28,10 +49,10 @@ export const projectsData = [
img: 'k-site-landing.png', img: 'k-site-landing.png',
desc: [ desc: [
'Flagship website for the 2023 edition of Kurukshetra, CEG\'s international techno-management fest.', 'Flagship website for the 2023 edition of Kurukshetra, CEG\'s international techno-management fest.',
'Avg. traffic of 1,000 daily users and transactions', 'Averaged traffic of 1,000 daily users and transactions.',
'Built with React and Express.js', 'Built with React, ExpressJS, PostgreSQL and deployed on AWS EC2',
], ],
tools: ['React', 'Express.js', 'AWS'], tools: ['React', 'ExpressJS', 'PostgreSQL', 'AWS EC2'],
link: 'https://k23.kurukshetraceg.org.in' link: 'https://k23.kurukshetraceg.org.in'
}, },
{ {
@ -71,13 +92,13 @@ const Projects = () => {
onClick={() => handleLinkClick(process.env.PUBLIC_URL + "Projects/" + project.img)} onClick={() => handleLinkClick(process.env.PUBLIC_URL + "Projects/" + project.img)}
/> />
<CardContent align="left"> <CardContent align="left">
<Typography gutterBottom primaryTypographyProps={{ fontSize: 16 }} component="div"> <Typography gutterBottom component="div">
{project.name} {project.name}
</Typography> </Typography>
<List> <List>
{project.desc.map((line, index) => {project.desc.map((line, index) =>
<ListItem disableGutters key={index}> <ListItem disableGutters key={index}>
<ListItemText primaryTypographyProps={{ fontSize: 12 }} primary={line} /> <ListItemText slotProps={{ primary: { fontSize: 12 } }} primary={line} />
</ListItem> </ListItem>
)} )}
</List> </List>
@ -114,7 +135,7 @@ const Projects = () => {
navigation navigation
speed={400} speed={400}
spaceBetween={10} spaceBetween={10}
slidesPerView={width >= 480 ? 2.4 : 1.1} slidesPerView={width >= 480 ? 2.6 : 1.1}
// centeredSlides // centeredSlides
grabCursor grabCursor
> >

4
src/index.css
View File

@ -12,10 +12,6 @@ code {
monospace; monospace;
} }
.App-logo {
animation: spin 1s infinite linear;
}
@keyframes spin { @keyframes spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);

6
src/index.js
View File

@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
@ -10,8 +9,3 @@ root.render(
<App /> <App />
</React.StrictMode> </React.StrictMode>
); );
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

1
src/logo.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

13
src/reportWebVitals.js
View File

@ -1,13 +0,0 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;