WiP-1

src/App.js

@@ -1,23 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
+import Menu from './components/Menu';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Menu />
     </div>
   );
 }

src/components/Experiences.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Experiences = () => {
+  return (
+	<div>Experiences</div>
+  )
+}
+
+export default Experiences

src/components/Interests.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Interests = () => {
+  return (
+	<div>Interests</div>
+  )
+}
+
+export default Interests

src/components/Landing.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Button, ButtonGroup, List, ListItem, ListItemText, Typography } from '@mui/material';
+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';
+
+const socialsData = [
+	{ key: 'github', socialText: 'GitHub', socialLink: 'https://github.com/20kaushik02', socialIcon: <GitHubIcon /> },
+	{ key: 'linkedin', socialText: 'LinkedIn', socialLink: 'https://linkedin.com/in/kaushik-ravishankar', socialIcon: <LinkedInIcon /> },
+	{ key: 'email', socialText: 'Email', socialLink: 'mailto:hello@knravish.me', socialIcon: <EmailIcon /> },
+];
+
+const Landing = () => {
+	return (
+		<>
+			<List>
+				{/* one-liner summary */}
+				<ListItem>
+					<ListItemText
+						primary={"TL;DR: Aspiring SWE whose passions lie in computer\
+					networks, web development and machine learning."} />
+				</ListItem>
+				{/* intro with education */}
+				<ListItem>
+					<ListItemText
+						primary={"I'm currently pursuing my masters in computer\
+					science at ASU, and will be graduating in the summer of 2025."} />
+				</ListItem>
+				{/* 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\
+						*insert recent role*, *insert recent role's description*."} />
+				</ListItem>
+			</List>
+			<Typography paragraph>
+				Reach me at:
+			</Typography>
+			<ButtonGroup
+				size="large"
+				variant="outlined"
+				aria-label="social media links button group">
+				{socialsData.map((social) => (
+					<Button
+						key={social.key}
+						onClick={() => handleButtonClick(social.socialLink)}
+					>
+						{social.socialIcon}
+					</Button>
+				))}
+			</ButtonGroup>
+		</>
+	)
+}
+
+export default Landing;

src/components/LoremIpsum.js

@@ -0,0 +1,38 @@
+import { Typography } from '@mui/material'
+import * as React from 'react'
+
+const LoremIpsum = () => {
+	return (
+		<>
+			<Typography paragraph>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
+				enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
+				imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
+				Convallis convallis tellus id interdum velit laoreet id donec ultrices.
+				Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+				adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
+				nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
+				leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
+				feugiat vivamus at augue. At augue eget arcu dictum varius duis at
+				consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
+				sapien faucibus et molestie ac.
+			</Typography>
+			<Typography paragraph>
+				Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
+				eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
+				neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
+				tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
+				sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
+				tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
+				gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
+				et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
+				tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
+				eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
+				posuere sollicitudin aliquam ultrices sagittis orci a.
+			</Typography>
+		</>
+	)
+}
+
+export default LoremIpsum;

src/components/Menu.js

@@ -0,0 +1,160 @@
+import * as React from 'react';
+
+import AppBar from '@mui/material/AppBar';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import CssBaseline from '@mui/material/CssBaseline';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuIcon from '@mui/icons-material/Menu';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+
+import LandingIcon from '@mui/icons-material/Home';
+import ProjIcon from '@mui/icons-material/AccountTree';
+import ExpIcon from '@mui/icons-material/Work';
+import SkilIcon from '@mui/icons-material/Build';
+import EduIcon from '@mui/icons-material/School';
+import IntsIcon from '@mui/icons-material/SportsEsports';
+import ArticleIcon from '@mui/icons-material/Article';
+
+import Landing from './Landing';
+import LoremIpsum from './LoremIpsum';
+import Projects from './Projects';
+
+const drawerWidth = 240;
+
+const menuSections = [
+	{ key: 'landing', display_name: 'Home', appbar_text: 'Hello There!', display_icon: <LandingIcon />, },
+	{ key: 'proj', display_name: 'Projects', appbar_text: 'My Projects', display_icon: <ProjIcon />, },
+	{ key: 'exp', display_name: 'Experiences', appbar_text: 'My Career', display_icon: <ExpIcon />, },
+	{ key: 'skil', display_name: 'Skills', appbar_text: 'My Skills', display_icon: <SkilIcon />, },
+	{ key: 'edu', display_name: 'Education', appbar_text: 'My Education', display_icon: <EduIcon />, },
+	{ key: 'ints', display_name: 'Interests', appbar_text: 'My Interests', display_icon: <IntsIcon />, },
+	{ key: 'resume', display_name: 'Resume', appbar_text: 'My Resume', display_icon: <ArticleIcon />, },
+];
+
+const menuSectionsData = [
+	{ key: 'landing', component: <Landing /> },
+	{ key: 'proj', component: <Projects /> },
+	{ key: 'exp', component: <LoremIpsum /> },
+	{ key: 'skil', component: <LoremIpsum /> },
+	{ key: 'edu', component: <LoremIpsum /> },
+	{ key: 'ints', component: <LoremIpsum /> },
+	{ key: 'resume', component: <LoremIpsum /> },
+];
+
+export default function Menu(props) {
+	const { window } = props;
+	const [mobileOpen, setMobileOpen] = React.useState(false);
+	const [activeSection, setActiveSection] = React.useState('landing');
+
+	const handleDrawerToggle = () => {
+		setMobileOpen(!mobileOpen);
+	};
+
+	const drawer = (
+		<div>
+			{/* <Toolbar /> */}
+			<Box component="div" align="center" padding={2}>
+				<Avatar src={process.env.PUBLIC_URL + "pappu2.jpg"} alt='' sx={{ width: 120, height: 120 }} />
+				<Typography sx={{ padding: 2 }}>Kaushik Narayan Ravishankar</Typography>
+			</Box>
+			<Divider />
+			<List>
+				{menuSections.map((menuItem, index) => (
+					<ListItem onClick={() => { handleDrawerToggle(); setActiveSection(menuItem.key); }} key={menuItem.key} disablePadding>
+						<ListItemButton selected={activeSection === menuItem.key}>
+							<ListItemIcon>
+								{menuItem.display_icon}
+							</ListItemIcon>
+							<ListItemText primary={menuItem.display_name} />
+						</ListItemButton>
+					</ListItem>
+				))}
+			</List>
+			<Divider />
+			<Box component="div" align="center" padding={2}>
+				<Link sx={{ padding: 1 }} href="https://mui.com" underline="hover">
+					Made with MUI
+				</Link>
+			</Box>
+		</div>
+	);
+
+	const container = window !== undefined ? () => window().document.body : undefined;
+
+	return (
+		<Box sx={{ display: 'flex' }}>
+			<CssBaseline />
+			<AppBar
+				position="fixed"
+				sx={{
+					width: { sm: `calc(100% - ${drawerWidth}px)` },
+					ml: { sm: `${drawerWidth}px` },
+				}}
+			>
+				<Toolbar>
+					<IconButton
+						color="inherit"
+						aria-label="open drawer"
+						edge="start"
+						onClick={handleDrawerToggle}
+						sx={{ mr: 2, display: { sm: 'none' } }}
+					>
+						<MenuIcon />
+					</IconButton>
+					<Typography variant="h6" noWrap component="div">
+						{menuSections.filter((menuItem) => menuItem.key === activeSection)[0].appbar_text}
+					</Typography>
+				</Toolbar>
+			</AppBar>
+			<Box
+				component="nav"
+				sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+				aria-label="mailbox folders"
+			>
+				<Drawer
+					container={container}
+					variant="temporary"
+					open={mobileOpen}
+					onClose={handleDrawerToggle}
+					ModalProps={{
+						keepMounted: true, // Better open performance on mobile.
+					}}
+					sx={{
+						display: { xs: 'block', sm: 'none' },
+						'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+					}}
+				>
+					{drawer}
+				</Drawer>
+				<Drawer
+					variant="permanent"
+					sx={{
+						display: { xs: 'none', sm: 'block' },
+						'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+					}}
+					open
+				>
+					{drawer}
+				</Drawer>
+			</Box>
+			{/* content goes here */}
+			<Box
+				component="main"
+				sx={{ flexGrow: 1, padding: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+			>
+				<Toolbar />
+				{menuSectionsData.filter((menuItem) => menuItem.key === activeSection)[0].component}
+			</Box>
+		</Box>
+	);
+}

src/components/Projects.js

@@ -0,0 +1,62 @@
+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 { 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',
+		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.'
+		],
+		tools: ['ns3', 'TensorFlow', 'OpenAI Gym'],
+		link: 'https://github.com/harish3030/FYP-TCP-RL'
+	},
+]
+const Projects = () => {
+	const ProjectCard = (project) => {
+		return (
+			<Card scroll="paper" sx={{ maxWidth: 325 }} key={project.key}>
+				<CardActionArea>
+					<CardMedia
+						component="img"
+						height="140"
+						image={process.env.PUBLIC_URL + "Projects/" + project.img}
+						alt={project.name}
+					/>
+					<CardContent align="left">
+						<Typography gutterBottom primaryTypographyProps={{ fontSize: 16}} component="div">
+							{project.name}
+						</Typography>
+						<List>
+							{project.desc.map((line) =>
+								<ListItem>
+									<ListItemText primaryTypographyProps={{ fontSize: 12}} primary={line} />
+								</ListItem>
+							)}
+						</List>
+					</CardContent>
+				</CardActionArea>
+				<CardActions>
+					<Button onClick={() => handleButtonClick(project.link)} className="CheckButton">
+						Check it out
+					</Button>
+				</CardActions>
+			</Card>
+		)
+	}
+	return (
+		<>
+			<Carousel navButtonsAlwaysVisible cycleNavigation animation='slide'>
+				{projectsData.map(project => ProjectCard(project))}
+			</Carousel>
+		</>
+	)
+}
+
+export default Projects;

src/components/Skills.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Skills = () => {
+  return (
+	<div>Skills</div>
+  )
+}
+
+export default Skills

src/index.css

@@ -11,3 +11,16 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.App-logo {
+  animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/utils/linkClick.js

@@ -0,0 +1,3 @@
+export const handleButtonClick = (link) => {
+	window.open(link, "_blank", "noopener")
+}