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

WiP-3: career done, added resume

Browse Source
This commit is contained in:
Kaushik Narayan R 2023-11-05 16:31:24 -07:00
parent a1c0975cfb
commit 91acf7564c
7 changed files with 191 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/myresume.pdf Normal file
View File

Binary file not shown.

117
src/components/Career.js Normal file
View File

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

9
src/components/Experiences.js
View File

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

30
src/components/Landing.js
View File

@ -1,11 +1,12 @@
import React from 'react';
import { Button, ButtonGroup, List, ListItem, ListItemText, Typography } from '@mui/material';
import { handleButtonClick } from '../utils/linkClick';
import { Button, ButtonGroup, Divider, List, ListItem, ListItemText, Typography } from '@mui/material';
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\
*insert recent role*, *insert recent role's description*."} />
primary={"Recently, I've been tinkering with " + projectsData[0].oneliner + "."} />
</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>

68
src/components/Menu.js
View File

@ -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 EduIcon from '@mui/icons-material/School';
import SkilIcon from '@mui/icons-material/Laptop';
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: '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 /> },
{
key: 'landing', display_name: 'Home', appbar_text: 'Hello There!', display_icon: <LandingIcon />,
extLink: false, component: <Landing />
},
{
key: 'proj', display_name: 'Projects', appbar_text: 'My Projects', display_icon: <ProjIcon />,
extLink: false, component: <Projects />
},
{
key: 'exp', display_name: 'Career', appbar_text: 'My Journey', display_icon: <ExpIcon />,
extLink: false, component: <Career />
},
{
key: 'skil', display_name: 'Skills', appbar_text: 'My Skills', display_icon: <SkilIcon />,
extLink: false, 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>
<ListItemButton selected={activeSection === menuItem.key}>
<ListItem onClick={() => { handleDrawerSelect(menuItem.key); }} key={menuItem.key} disablePadding>
<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>
);

13
src/components/Projects.js
View File

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

2
src/utils/linkClick.js
View File

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