Skip to content

Commit 707dce4

Browse files
ar1603ar1603
committed
feat(): Adding the work experience
1 parent dc2b4da commit 707dce4

9 files changed

Lines changed: 260 additions & 46 deletions

File tree

‎src/components/Timeline/Timeline.tsx‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@ import { useScroll, useTransform, motion } from 'framer-motion';
22
import { useEffect, useRef, useState } from 'react';
33
import { TimelineEntry } from './types';
44

5-
const Timeline = ({ data }: { data: TimelineEntry[] }) => {
5+
const Timeline = ({
6+
title,
7+
data,
8+
}: {
9+
title: string;
10+
data: TimelineEntry[];
11+
}) => {
612
const ref = useRef<HTMLDivElement>(null);
713
const containerRef = useRef<HTMLDivElement>(null);
814
const [height, setHeight] = useState(0);
@@ -20,23 +26,22 @@ const Timeline = ({ data }: { data: TimelineEntry[] }) => {
2026
});
2127

2228
const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height]);
23-
const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
29+
const opacityTransform = useTransform(
30+
scrollYProgress,
31+
[0, 0.02, 0.04, 0.7, 0.1],
32+
[0, 0.1, 0.2, 0.3, 1],
33+
);
2434

2535
return (
2636
<div className="w-full bg-black font-sans md:px-10" ref={containerRef}>
27-
<div className="max-w-7xl mx-auto pt-20 px-4 md:px-8 lg:px-10">
28-
<p className="text-neutral-700 dark:text-neutral-300 text-sm md:text-base max-w-sm">
29-
I&apos;ve been working on Aceternity for the past 2 years. Here&apos;s
30-
a timeline of my journey.
37+
<div className="max-w-7xl mx-auto py-20 px-4 md:px-8 lg:px-10">
38+
<p className="text-neutral-700 dark:text-neutral-300 text-sm md:text-base max-w-xl">
39+
{title}
3140
</p>
3241
</div>
33-
34-
<div ref={ref} className="relative max-w-7xl mx-auto pb-20">
42+
<div ref={ref} className="relative max-w-7xl mx-auto pb-20 ">
3543
{data.map((item, index) => (
36-
<div
37-
key={index}
38-
className="flex justify-start pt-10 md:pt-40 md:gap-10"
39-
>
44+
<div key={index} className="flex justify-start">
4045
<div className="sticky flex flex-col md:flex-row z-1 items-center top-40 self-start max-w-xs lg:max-w-sm md:w-full">
4146
<div className="h-10 absolute left-3 md:left-3 w-10 rounded-full bg-white dark:bg-black flex items-center justify-center">
4247
<div className="h-4 w-4 rounded-full bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 p-2" />
@@ -46,7 +51,12 @@ const Timeline = ({ data }: { data: TimelineEntry[] }) => {
4651
</h3>
4752
</div>
4853

49-
<div className="relative pl-20 pr-4 md:pl-4 w-full">
54+
<div
55+
className="relative pl-20 pr-4 md:pl-4 w-full "
56+
style={{
57+
border: '1px solid gray',
58+
}}
59+
>
5060
<h3 className="md:hidden block text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500">
5161
{item.title}
5262
</h3>

‎src/data/Projects.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Language } from '@components';
22
import { ProjectItemType } from './types';
33
import { ProjectName } from '@assets';
44

5-
export const ProjectsData: ProjectItemType[] = [
5+
export const PROJECT_DATA: ProjectItemType[] = [
66
{
77
title: 'Hourcoding.com',
88
icon: ProjectName.Hourcoding,

‎src/data/Work.ts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { WorkType } from './types';
2+
3+
export const WORK_DATA: WorkType = {
4+
'2025': {
5+
title: 'Software Engineer III | React native ',
6+
description:
7+
'Started with more responsibilities along with handling the mobile x-platform dev team. Helped delivering the IoT based app for the client.',
8+
keyPoints: [
9+
'Delivered the IoT based app for the client.',
10+
'Started with more responsibilities along with handling the mobile x-platform dev team.',
11+
'Implemented many design patterns, best practices, and improved the app performance along with fixing the bugs',
12+
],
13+
tags: [
14+
'React',
15+
'TypeScript',
16+
'gRPC',
17+
'React Native',
18+
'LaunchDarkly',
19+
'Responsibilities',
20+
'Team handling',
21+
],
22+
links: [{ title: 'Span.io', link: 'https://www.span.io/' }],
23+
},
24+
'2024': {
25+
title: 'Software Engineer III | React native ',
26+
description:
27+
'Worked on a client project "SPAN" which is a Iot Based app. Span is a smart electrical panel that helps in monitoring the energy consumption of the house. This app is built using React Native and gRPC.',
28+
keyPoints: [
29+
'Onboarded SPAN project as a React Native developer at the start of the year',
30+
'Handled 3-4 junior developer with deliverable along with my own tasks',
31+
'Implemented many design patterns, best practices, and improved the app performance along with fixing the bugs',
32+
'Brainstormed code design and architecture decisions with the team',
33+
],
34+
tags: ['React', 'TypeScript', 'gRPC', 'Chakra', 'React Native'],
35+
links: [{ title: 'Span.io', link: 'https://www.span.io/' }],
36+
},
37+
'2023': {
38+
title: 'Software Engineer II | React / React Native | AI research',
39+
description:
40+
"Worked on Google home app's new feature till june, 2023, then moved to the React team per the requirements. Started learning TypeScript and React, worked on a internal Hiring app tools. Also, spent 2-3 months learning about the Github Copilot AI tools and helped creating the internal documentation + tutorials for RSL.",
41+
keyPoints: [
42+
'Wrapped up the Google Home App project',
43+
'Started learning TypeScript and React and worked on internal RSL Hiring app tools',
44+
'Brainstormed the code design + UI from scratch with the team',
45+
],
46+
tags: ['React', 'TypeScript', 'React-Native', 'AI', 'Kotlin'],
47+
links: [
48+
{ title: 'RSL', link: 'https://rajasoftwarelabs.com/' },
49+
{ title: 'Google HomeApp', link: 'https://home.google.com/welcome/' },
50+
{ title: 'Github Copilot', link: 'https://copilot.github.com/' },
51+
],
52+
},
53+
'2022': {
54+
title: 'Software Engineer I | Android Developer',
55+
description:
56+
'Started year with challenging tasks in GHA app Wifi, Camera flow. Helped fulfilling the requirements for feature requests and bug fixes.',
57+
keyPoints: [
58+
'Worked on GHA wifi flow and helped delivering the feature',
59+
'Worked on various other flows like user preferences, settings, etc',
60+
'Acquired skills of handling deliverables and providing the best solutions',
61+
],
62+
tags: [
63+
'Android',
64+
'Mobile development',
65+
'Google Home App',
66+
'gRPC',
67+
'Kotlin',
68+
'Jetpack Compose',
69+
],
70+
links: [
71+
{ title: 'RSL', link: 'https://rajasoftwarelabs.com/' },
72+
{ title: 'Google HomeApp', link: 'https://home.google.com/welcome/' },
73+
],
74+
},
75+
'2021': {
76+
title: 'Trainee Software Engineer',
77+
description:
78+
'Joined RSL as a software engineer on July 19, 2021. Had extensive training for android development. Soon onboarded to the Google Home App team on November.',
79+
keyPoints: [
80+
'Learned mobile development from scratch and got hands-on experience',
81+
'Onboarded to the Google Home App team on November and started delivering features',
82+
"Learned about the coding best practices and Google's internal tools",
83+
],
84+
tags: ['Android', 'Mobile development'],
85+
links: [{ title: 'RSL', link: 'https://rajasoftwarelabs.com/' }],
86+
},
87+
};

‎src/data/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
export { ProjectsData } from './Projects';
1+
export { PROJECT_DATA } from './Projects';
2+
export { WORK_DATA } from './Work';
23
export * from './types';

‎src/data/types.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,15 @@ export type ProjectItemType = {
1212
image?: [string, string, string];
1313
demoVideo?: string;
1414
};
15+
16+
export type WorkItemType = {
17+
title: string;
18+
description: string;
19+
keyPoints: string[];
20+
links: { title: string; link: string }[];
21+
tags: string[];
22+
};
23+
24+
export type WorkType = {
25+
[title: string]: WorkItemType;
26+
};

‎src/screens/common/NavigationBar.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,14 @@ const NavigationBar = () => {
6868
return (
6969
<HStack
7070
position={'fixed'}
71-
marginY={{ md: 2, xl: 4 }}
71+
paddingTop={{ md: 2, xl: 4 }}
72+
paddingBottom={4}
7273
width={'100%'}
7374
paddingRight={14}
7475
paddingLeft={{ base: 14, '2xl': 32 }}
7576
zIndex={2}
7677
justifyContent={'space-between'}
78+
bg={'linear-gradient(180deg, rgba(0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 100%)'}
7779
>
7880
<Img
7981
src={AmitRaikwarLogo}

‎src/screens/mainFlow/contents/Work.tsx‎

Lines changed: 128 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,140 @@
1-
import { Box, Heading } from '@chakra-ui/react';
1+
import { Box, Heading, HStack, Text, Wrap } from '@chakra-ui/react';
22
import { Timeline } from '@components';
3+
import { WORK_DATA } from '@data';
4+
import { AnimatePresence, motion } from 'framer-motion';
5+
import { useState } from 'react';
36
import { useTranslation } from 'react-i18next';
47

8+
const CustomHeading = ({ title }: { title: string }) => {
9+
return (
10+
<Text
11+
my={1}
12+
width={'fit-content'}
13+
fontWeight="bold"
14+
color="brand.500"
15+
marginTop={2}
16+
borderBottom={'1px solid'}
17+
>
18+
{title}
19+
</Text>
20+
);
21+
};
22+
23+
const WorkUIData = () => {
24+
return Object.entries(WORK_DATA)
25+
.sort((a, b) => Number(b[0]) - Number(a[0]))
26+
.map(([year, data]) => {
27+
const { title, description, keyPoints, tags, links } = data;
28+
return {
29+
title: year,
30+
content: (() => {
31+
// eslint-disable-next-line react-hooks/rules-of-hooks
32+
const [isOpen, setIsOpen] = useState(false);
33+
return (
34+
<Box
35+
padding={4}
36+
onMouseEnter={() => setIsOpen(true)}
37+
onMouseLeave={() => setIsOpen(false)}
38+
>
39+
<Text
40+
fontSize="2xl"
41+
fontWeight="bold"
42+
color="brand.500"
43+
marginBottom={2}
44+
>
45+
{title}
46+
</Text>
47+
<Text>{description}</Text>
48+
<AnimatePresence initial={false}>
49+
{isOpen && (
50+
<motion.section
51+
initial="collapsed"
52+
animate="open"
53+
exit="collapsed"
54+
variants={{
55+
open: { opacity: 1, height: 'auto' },
56+
collapsed: { opacity: 0, height: 0 },
57+
}}
58+
transition={{
59+
duration: 0.5,
60+
ease: [0.04, 0.62, 0.23, 0.98],
61+
}}
62+
>
63+
{keyPoints && keyPoints.length > 0 && (
64+
<CustomHeading title="Key points:" />
65+
)}
66+
{keyPoints.map((point, index) => (
67+
<Text
68+
marginStart={10}
69+
key={index}
70+
marginTop={2}
71+
fontWeight="500"
72+
color="brand.500"
73+
>
74+
{point}
75+
</Text>
76+
))}
77+
{tags && tags.length > 0 && (
78+
<CustomHeading title="Skills acquired:" />
79+
)}
80+
<Wrap spacingX={2}>
81+
{tags.map((tag, index) => (
82+
<Text
83+
px={1}
84+
_hover={{
85+
transform: 'scale(1.05)',
86+
cursor: 'pointer',
87+
}}
88+
transition={'transform 0.4s'}
89+
outline={'1px solid'}
90+
key={index}
91+
marginTop={2}
92+
fontWeight="500"
93+
color="brand.500"
94+
>
95+
{tag}
96+
</Text>
97+
))}
98+
</Wrap>
99+
<HStack>
100+
<CustomHeading title="Important Links:" />
101+
<Wrap spacing={1}>
102+
{links.map(({ title, link }, index) => (
103+
<Text
104+
key={index}
105+
as="a"
106+
href={link}
107+
target="_blank"
108+
marginTop={2}
109+
color="brand.500"
110+
fontWeight="bold"
111+
fontSize="md"
112+
>
113+
{title}
114+
</Text>
115+
))}
116+
</Wrap>
117+
</HStack>
118+
</motion.section>
119+
)}
120+
</AnimatePresence>
121+
</Box>
122+
);
123+
})(),
124+
};
125+
});
126+
};
127+
5128
const Work = () => {
6129
const { t } = useTranslation();
130+
const mainTitle =
131+
"I've been working on Raja software labs for the past 3.5 years. Here's a timeline of my journey at RSL along with key skills development.";
7132
return (
8-
<Box zIndex={0} height={'200vh'} width={'99vw'} id="work" paddingX={32}>
133+
<Box zIndex={0} minH={'100vh'} width={'99vw'} id="work" paddingX={32}>
9134
<Heading position={'sticky'} top={'10vh'} zIndex={3}>
10135
{t('work.title')}
11136
</Heading>
12-
<Timeline
13-
data={[
14-
{
15-
title: '2025',
16-
content: <></>,
17-
},
18-
{
19-
title: '2024',
20-
content: <></>,
21-
},
22-
{
23-
title: '2023',
24-
content: <></>,
25-
},
26-
{
27-
title: '2022',
28-
content: <></>,
29-
},
30-
{
31-
title: '2021',
32-
content: <></>,
33-
},
34-
]}
35-
/>
137+
<Timeline title={mainTitle} data={WorkUIData()} />
36138
</Box>
37139
);
38140
};

‎src/screens/mainFlow/contents/projects/Projects.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { motion, useScroll, useTransform } from 'framer-motion';
22
import { VStack, Wrap } from '@chakra-ui/react';
3-
import { ProjectsData } from '@data';
3+
import { PROJECT_DATA } from '@data';
44
import 'react-responsive-carousel/lib/styles/carousel.min.css';
55
import { Card, WavyBackground } from '@components';
66
import HeroText from './HeroText';
@@ -31,7 +31,7 @@ const Projects = () => {
3131
<WavyBackground />
3232
</motion.div>
3333
<Wrap style={{ zIndex: 0 }} spacing={16} justify="center" mx={24} mb={24}>
34-
{ProjectsData.map(({ title, tags, icon, description, link }, index) => (
34+
{PROJECT_DATA.map(({ title, tags, icon, description, link }, index) => (
3535
<Card
3636
key={index}
3737
titleText={title}

‎src/screens/projects/ProjectsScreen.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { VStack } from '@chakra-ui/react';
2-
import { ProjectsData } from '@data';
2+
import { PROJECT_DATA } from '@data';
33
import 'react-responsive-carousel/lib/styles/carousel.min.css';
44
import { ProjectItem } from './components';
55
import { useEffect, useRef } from 'react';
@@ -12,7 +12,7 @@ const Projects = () => {
1212
const secondName = location.pathname.split('/')[2];
1313
const ref = useRef(null);
1414

15-
const filteredProjects = ProjectsData.filter((project) =>
15+
const filteredProjects = PROJECT_DATA.filter((project) =>
1616
project.icon === secondName ? project : null,
1717
);
1818

0 commit comments

Comments
 (0)