WiP-3: career done, added resume

src/components/Career.js

@@ -0,0 +1,117 @@
+import { Divider, List, ListItem, ListItemText, Typography } from '@mui/material'
+import React from 'react'
+
+export const experiencesData = [
+  {
+    key: 'sde-intern-rq', type: 'prof', location: 'RootQuotient Technologies', designation: 'Software Developer Intern',
+    desc: [
+      'Developed interactive user interfaces for client applications using ReactJS, TypeScript, and the Ant Design library.',
+      'Implemented a comprehensive admin dashboard for a client’s banking administration application, following MVC\
+      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'
+  },
+  {
+    key: 'tech-sd-ctf', type: 'extra', location: 'CEG Tech Forum', designation: 'Student Director of Technical Operations',
+    desc: [
+      'Headed a 20-member strong technical operations team as the Lead Developer, Sysadmin, and Project Manager.',
+      '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.',
+      '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'
+  },
+  {
+    key: 'sec-nss', type: 'extra', location: 'National Service Scheme', designation: 'Secretary',
+    desc: [
+      '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.'
+    ],
+    startDate: 'Nov 2021', endDate: 'Oct 2022'
+  },
+  {
+    key: 'cs-ms-asu', type: 'edu', location: 'Arizona State University', designation: 'MS, Computer Science',
+    desc: [
+      // Add relevant coursework in the future
+    ],
+    startDate: 'Aug 2023', endDate: 'May 2025'
+  },
+  {
+    key: 'cse-be-ceg', type: 'edu', location: 'College of Engineering, Guindy', designation: 'BE, Computer Science and Engineering',
+    desc: [
+      'Graduated first-class with distinction with a 9.12 CGPA',
+      'Relevant coursework: DBMS, OOPS, full-stack development, cloud computing, deep learning, computer networks',
+    ],
+    startDate: 'Aug 2023', endDate: 'May 2025'
+  },
+];
+
+const Career = () => {
+  return (
+    <>
+      <Typography p={1} align="left" variant="h5">
+        Professional
+      </Typography>
+      {experiencesData.filter(exp => exp.type === 'prof').map(exp =>
+        <>
+          <Typography p={1} align="left" fontSize={16}>
+            <b>{exp.designation}, {exp.location}</b>, <i>{exp.startDate} - {exp.endDate}</i>
+          </Typography>
+          <Typography p={1} align="left">
+            <List disablePadding>
+              {exp.desc.map((line, index) =>
+                <ListItem disablePadding key={index}>
+                  <ListItemText primaryTypographyProps={{ p: 0, fontSize: 13 }} primary={line} />
+                </ListItem>
+              )}
+            </List>
+          </Typography>
+        </>
+      )}
+      <Divider />
+      <Typography p={1} align="left" variant="h5">
+        Education
+      </Typography>
+      {experiencesData.filter(exp => exp.type === 'edu').map(exp =>
+        <>
+          <Typography p={1} align="left" fontSize={16}>
+            <b>{exp.designation}, {exp.location}</b>, <i>{exp.startDate} - {exp.endDate}</i>
+          </Typography>
+          <Typography p={1} align="left">
+            <List disablePadding>
+              {exp.desc.map((line, index) =>
+                <ListItem disablePadding key={index}>
+                  <ListItemText primaryTypographyProps={{ p: 0, fontSize: 13 }} primary={line} />
+                </ListItem>
+              )}
+            </List>
+          </Typography>
+        </>
+      )}
+      <Divider />
+      <Typography p={1} align="left" variant="h5">
+        Volunteering
+      </Typography>
+      {experiencesData.filter(exp => exp.type === 'extra').map(exp =>
+        <>
+          <Typography p={1} align="left" fontSize={16}>
+            <b>{exp.designation}, {exp.location}</b>, <i>{exp.startDate} - {exp.endDate}</i>
+          </Typography>
+          <Typography p={1} align="left">
+            <List disablePadding>
+              {exp.desc.map((line, index) =>
+                <ListItem disablePadding key={index}>
+                  <ListItemText primaryTypographyProps={{ p: 0, fontSize: 13 }} primary={line} />
+                </ListItem>
+              )}
+            </List>
+          </Typography>
+        </>
+      )}
+    </>
+  )
+}
+
+export default Career;

src/components/Experiences.js

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

src/components/Landing.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Button, ButtonGroup, List, ListItem, ListItemText, Typography } from '@mui/material';
+import { Button, ButtonGroup, Divider, List, ListItem, ListItemText, Typography } from '@mui/material';
-import { handleButtonClick } from '../utils/linkClick';
+import { handleLinkClick } 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';
+import { experiencesData } from './Career';
 
 const socialsData = [
 	{ key: 'github', socialText: 'GitHub', socialLink: 'https://github.com/20kaushik02', socialIcon: <GitHubIcon /> },
@@ -20,7 +21,7 @@ const Landing = () => {
 				{/* one-liner summary */}
 				<ListItem>
 					<ListItemText
-						primary={"TL;DR: Aspiring SWE whose passions lie in cloud technologies,\
+						primary={"I'll be brief: Aspiring SWE whose passions lie in cloud technologies,\
 						web development and machine learning, but open to much more."} />
 				</ListItem>
 				{/* intro with education */}
@@ -29,13 +30,28 @@ const Landing = () => {
 						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 */}
+				{/* current stuff */}
 				<ListItem>
 					<ListItemText
-						primary={"Recently, I've been tinkering with " + projectsData[0].oneliner + ". My last stint was at *insert recent experience* as a\
+						primary={"Recently, I've been tinkering with " + projectsData[0].oneliner + "."} />
-						*insert recent role*, *insert recent role's description*."} />
+				</ListItem>
+				{/* last stint */}
+				<ListItem>
+					<ListItemText
+						primary={"My last stint was at " +
+							experiencesData.filter(exp => exp.type === 'prof')[0].location + " as a " +
+							experiencesData.filter(exp => exp.type === 'prof')[0].designation + "."} />
 				</ListItem>
 			</List>
+			<Divider />
+			<Button
+				size="large"
+				variant="outlined"
+				onClick={() => handleLinkClick(process.env.PUBLIC_URL + "myresume.pdf")}
+			>
+				My Resume
+			</Button>
+			<Divider />
 			<Typography paragraph>
 				Reach me at:
 			</Typography>
@@ -46,7 +62,7 @@ const Landing = () => {
 				{socialsData.map((social) => (
 					<Button
 						key={social.key}
-						onClick={() => handleButtonClick(social.socialLink)}
+						onClick={() => handleLinkClick(social.socialLink)}
 					>
 						{social.socialIcon}
 					</Button>

src/components/Menu.js

@@ -15,51 +15,69 @@ 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 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 SkilIcon from '@mui/icons-material/Laptop';
-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';
+import Career from './Career';
+import { handleLinkClick } from '../utils/linkClick';
 
 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: 'landing', display_name: 'Home', appbar_text: 'Hello There!', display_icon: <LandingIcon />,
-	{ key: 'exp', display_name: 'Experiences', appbar_text: 'My Career', display_icon: <ExpIcon />, },
+		extLink: false, component: <Landing />
-	{ 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: 'proj', display_name: 'Projects', appbar_text: 'My Projects', display_icon: <ProjIcon />,
-	{ key: 'resume', display_name: 'Resume', appbar_text: 'My Resume', display_icon: <ArticleIcon />, },
+		extLink: false, component: <Projects />
-];
+	},
-
+	{
-const menuSectionsData = [
+		key: 'exp', display_name: 'Career', appbar_text: 'My Journey', display_icon: <ExpIcon />,
-	{ key: 'landing', component: <Landing /> },
+		extLink: false, component: <Career />
-	{ key: 'proj', component: <Projects /> },
+	},
-	{ key: 'exp', component: <LoremIpsum /> },
+	{
-	{ key: 'skil', component: <LoremIpsum /> },
+		key: 'skil', display_name: 'Skills', appbar_text: 'My Skills', display_icon: <SkilIcon />,
-	{ key: 'edu', component: <LoremIpsum /> },
+		extLink: false, component: <LoremIpsum />
-	{ key: 'ints', component: <LoremIpsum /> },
+	},
-	{ key: 'resume', component: <LoremIpsum /> },
+	{
+		key: 'ints', display_name: 'Interests', appbar_text: 'My Interests', display_icon: <IntsIcon />,
+		extLink: false, component: <LoremIpsum />
+	},
+	{
+		key: 'resume', display_name: 'Resume', appbar_text: 'My Resume', display_icon: <ArticleIcon />,
+		extLink: true, link: process.env.PUBLIC_URL + "myresume.pdf"
+	},
 ];
 
 export default function Menu(props) {
 	const { window } = props;
 	const [mobileOpen, setMobileOpen] = React.useState(false);
-	const [activeSection, setActiveSection] = React.useState('landing');
+	const [activeSection, setActiveSection] = React.useState(menuSections[0]);
 
 	const handleDrawerToggle = () => {
 		setMobileOpen(!mobileOpen);
 	};
 
+	const handleDrawerSelect = (selectedSectionKey) => {
+		handleDrawerToggle();
+		const menuSection = menuSections.filter((menuItem) => menuItem.key === selectedSectionKey)[0];
+		if (menuSection.extLink === true) {
+			handleLinkClick(menuSection.link);
+			return;
+		}
+		setActiveSection(menuSection);
+	}
+
 	const drawer = (
 		<div>
 			{/* <Toolbar /> */}
@@ -70,8 +88,8 @@ export default function Menu(props) {
 			<Divider />
 			<List>
 				{menuSections.map((menuItem, index) => (
-					<ListItem onClick={() => { handleDrawerToggle(); setActiveSection(menuItem.key); }} key={menuItem.key} disablePadding>
+					<ListItem onClick={() => { handleDrawerSelect(menuItem.key); }} key={menuItem.key} disablePadding>
-						<ListItemButton selected={activeSection === menuItem.key}>
+						<ListItemButton selected={activeSection.key === menuItem.key}>
 							<ListItemIcon>
 								{menuItem.display_icon}
 							</ListItemIcon>
@@ -112,7 +130,7 @@ export default function Menu(props) {
 						<MenuIcon />
 					</IconButton>
 					<Typography variant="h6" noWrap component="div">
-						{menuSections.filter((menuItem) => menuItem.key === activeSection)[0].appbar_text}
+						{activeSection.appbar_text}
 					</Typography>
 				</Toolbar>
 			</AppBar>
@@ -153,7 +171,7 @@ export default function Menu(props) {
 				sx={{ flexGrow: 1, padding: 1, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
 			>
 				<Toolbar />
-				{menuSectionsData.filter((menuItem) => menuItem.key === activeSection)[0].component}
+				{activeSection.component}
 			</Box>
 		</Box>
 	);

src/components/Projects.js

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
-import { Box, Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, List, ListItem, ListItemText, Stack, Typography } from '@mui/material';
+import { Box, Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, List, ListItem, ListItemText, 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';
+import { handleLinkClick } from '../utils/linkClick';
 
 export const projectsData = [
 	{
@@ -13,6 +13,7 @@ export const projectsData = [
 		name: 'TCP-RL',
 		img: 'fyp-arch-diag.png',
 		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.',
 			'Demonstrated that performance under simple adversarial attacks was dampened by 40%.',
@@ -27,7 +28,7 @@ export const projectsData = [
 		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',
+			'Avg. traffic of 1,000 daily users and transactions',
 			'Built with React and Express.js',
 		],
 		tools: ['React', 'Express.js', 'AWS'],
@@ -39,7 +40,7 @@ export const projectsData = [
 		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.',
+			'Made with Unity, designed in Blender.',
 		],
 		tools: ['Blender', 'Unity'],
 		link: 'https://kirangeorge.itch.io/donut-eat-me'
@@ -67,7 +68,7 @@ const Projects = () => {
 						height="140"
 						image={process.env.PUBLIC_URL + "Projects/" + project.img}
 						alt={project.name}
-						onClick={() => handleButtonClick(process.env.PUBLIC_URL + "Projects/" + project.img)}
+						onClick={() => handleLinkClick(process.env.PUBLIC_URL + "Projects/" + project.img)}
 					/>
 					<CardContent align="left">
 						<Typography gutterBottom primaryTypographyProps={{ fontSize: 16 }} component="div">
@@ -88,7 +89,7 @@ const Projects = () => {
 					</CardContent>
 				</CardActionArea>
 				<CardActions>
-					<Button onClick={() => handleButtonClick(project.link)} className="CheckButton">
+					<Button onClick={() => handleLinkClick(project.link)} className="CheckButton">
 						Check it out
 					</Button>
 				</CardActions>

src/utils/linkClick.js

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