Skip to content

Commit b10061b

Browse files
akshaybhedaakshaybheda
committed
Refactor component IDs to lowercase, enhance hash change handling, and improve project card key assignment
1 parent a0cf2f8 commit b10061b

7 files changed

Lines changed: 75 additions & 78 deletions

File tree

‎portfolio/src/components/Homepage/Homepage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import Techstack from "../Techstack/Techstack";
55
function Homepage() {
66
return (
77
<>
8-
<div id="Home">
8+
<div id="home">
99
<MyInfo />
1010
</div>
11-
<div id="Timeline">
11+
<div id="timeline">
1212
<MyTimeLine />
1313
</div>
14-
<div id="Tech Stack">
14+
<div id="tech-stack">
1515
<Techstack />
1616
</div>
1717
</>

‎portfolio/src/components/MyInfo/MyInfo.tsx‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,27 @@ export default function MainContent() {
1010
const theme = useTheme();
1111

1212
useEffect(() => {
13-
const scrollTo = sessionStorage.getItem("scrollTo");
13+
const handleHashChange = () => {
14+
const scrollTo = sessionStorage.getItem("scrollTo");
15+
if (scrollTo && window.location.hash === "#/") {
16+
setTimeout(() => {
17+
const element = document.getElementById(scrollTo);
18+
if (element) {
19+
element.scrollIntoView({ behavior: "smooth", block: "start" });
20+
}
21+
sessionStorage.removeItem("scrollTo");
22+
}, 100);
23+
} else if (window.location.hash === "#/project") {
24+
// Force scroll to top when navigating to /project
25+
window.scrollTo({ top: 0, behavior: "smooth" });
26+
}
27+
};
1428

15-
if (scrollTo && window.location.hash === "#/") {
16-
setTimeout(() => {
17-
const element = document.getElementById(scrollTo);
18-
if (element) {
19-
element.scrollIntoView({ behavior: "smooth", block: "start" });
20-
}
21-
sessionStorage.removeItem("scrollTo");
22-
}, 100);
23-
} else if (window.location.hash === "#/project") {
24-
// Force scroll to top when navigating to /project
25-
window.scrollTo({ top: 0, behavior: "smooth" });
26-
}
27-
}, [window.location.hash]);
29+
// run on mount (in case user landed directly)
30+
handleHashChange();
31+
window.addEventListener("hashchange", handleHashChange);
32+
return () => window.removeEventListener("hashchange", handleHashChange);
33+
}, []);
2834

2935
return (
3036
<Box

‎portfolio/src/components/NavBar/Navbar.tsx‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -99,40 +99,39 @@ function Navbar() {
9999
onClose={handleCloseNavMenu}
100100
>
101101
{pages.map((page) => (
102-
<Button
103-
key={page}
104-
onClick={() => {
105-
if (page === "Resume") {
106-
window.open(Resume, "_blank"); // Open resume in new tab
107-
} else if (page === "Projects") {
108-
window.location.hash = "#/project"; // Use hash-based navigation
109-
} else if (page === "Open Source") {
110-
window.location.hash = "#/opensource"; // Use hash-based navigation
111-
} else {
112-
if (window.location.hash !== "#/") {
113-
// Store target section in sessionStorage
114-
sessionStorage.setItem("scrollTo", page);
115-
window.location.hash = "#/"; // Redirect to homepage
102+
<Button
103+
key={page}
104+
onClick={() => {
105+
const slug = page.replace(/\s+/g, "-").toLowerCase();
106+
if (page === "Resume") {
107+
window.open(Resume, "_blank"); // Open resume in new tab
108+
} else if (page === "Projects") {
109+
window.location.hash = "#/project"; // Use hash-based navigation
110+
} else if (page === "Open Source") {
111+
window.location.hash = "#/opensource"; // Use hash-based navigation
116112
} else {
117-
document.getElementById(page)?.scrollIntoView({
118-
behavior: "smooth",
119-
block: "start",
120-
});
113+
if (window.location.hash !== "#/") {
114+
// Store target section in sessionStorage
115+
sessionStorage.setItem("scrollTo", slug);
116+
window.location.hash = "#/"; // Redirect to homepage
117+
} else {
118+
const el = document.getElementById(slug);
119+
el?.scrollIntoView({ behavior: "smooth", block: "start" });
120+
}
121121
}
122-
}
123-
}}
124-
sx={{
125-
my: 0,
126-
display: "block",
127-
color: mode == "light" ? "black" : "white",
128-
p: 1,
129-
}}
130-
>
131-
<Typography sx={{ textAlign: "center" }}>
132-
{page}
133-
</Typography>
134-
</Button>
135-
))}
122+
}}
123+
sx={{
124+
my: 0,
125+
display: "block",
126+
color: mode == "light" ? "black" : "white",
127+
p: 1,
128+
}}
129+
>
130+
<Typography sx={{ textAlign: "center" }}>
131+
{page}
132+
</Typography>
133+
</Button>
134+
))}
136135
</Menu>
137136
</Box>
138137
<Box
@@ -145,6 +144,7 @@ function Navbar() {
145144
<Button
146145
key={page}
147146
onClick={() => {
147+
const slug = page.replace(/\s+/g, "-").toLowerCase();
148148
if (page === "Resume") {
149149
window.open(Resume, "_blank"); // Open resume in new tab
150150
} else if (page === "Projects") {
@@ -154,13 +154,11 @@ function Navbar() {
154154
} else {
155155
if (window.location.hash !== "#/") {
156156
// Store target section in sessionStorage
157-
sessionStorage.setItem("scrollTo", page);
157+
sessionStorage.setItem("scrollTo", slug);
158158
window.location.hash = "#/"; // Redirect to homepage
159159
} else {
160-
document.getElementById(page)?.scrollIntoView({
161-
behavior: "smooth",
162-
block: "start",
163-
});
160+
const el = document.getElementById(slug);
161+
el?.scrollIntoView({ behavior: "smooth", block: "start" });
164162
}
165163
}
166164
}}
@@ -175,13 +173,13 @@ function Navbar() {
175173
display: { justifyContent: "end" },
176174
}}
177175
>
178-
<IconButton href="tel:+1-980-358-0053">
176+
<IconButton component="a" href="tel:+1-980-358-0053" aria-label="call">
179177
<Phone />
180178
</IconButton>
181-
<IconButton href="https://www.linkedin.com/in/akshaybheda/">
179+
<IconButton component="a" href="https://www.linkedin.com/in/akshaybheda/" aria-label="linkedin">
182180
<LinkedIn />
183181
</IconButton>
184-
<IconButton href="https://github.com/akshaybheda">
182+
<IconButton component="a" href="https://github.com/akshaybheda" aria-label="github">
185183
<GitHub />
186184
</IconButton>
187185
<IconButton onClick={toggleDarkMode}>

‎portfolio/src/components/Projects/Project.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ export default function Project() {
6969
<Typography variant="h5" align="center" gutterBottom>
7070
Solo Achievements begin right down here!
7171
</Typography>
72-
{ProjectsData.map((project, index) => (
72+
{ProjectsData.map((project) => (
7373
<ProjectCard
74-
key={index}
74+
key={project.Title}
7575
Title={project.Title}
7676
Description={project.Description}
7777
AdditionalText1={project.AdditionalText1}

‎portfolio/src/components/Projects/ProjectCard.tsx‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,11 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
2323
transition: theme.transitions.create("transform", {
2424
duration: theme.transitions.duration.shortest,
2525
}),
26-
variants: [
27-
{
28-
props: ({ expand }) => !expand,
29-
style: {
30-
transform: "rotate(0deg)",
31-
},
32-
},
33-
{
34-
props: ({ expand }) => !!expand,
35-
style: {
36-
transform: "rotate(180deg)",
37-
},
38-
},
39-
],
26+
transform: "rotate(0deg)",
27+
// rotate when `data-expanded` attribute is true (set below via prop)
28+
"&[data-expanded='true']": {
29+
transform: "rotate(180deg)",
30+
},
4031
}));
4132

4233
export default function ProjectCard(props: ProjectInfo) {
@@ -64,6 +55,7 @@ export default function ProjectCard(props: ProjectInfo) {
6455
<CardActions title="Learn More!" disableSpacing sx={{padding: 0}}>
6556
<ExpandMore
6657
expand={expanded}
58+
data-expanded={expanded}
6759
onClick={handleExpandClick}
6860
aria-expanded={expanded}
6961
aria-label="show more"

‎portfolio/src/components/Projects/types/ProjectInfo.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export type ProjectInfo = {
22
Title: string;
33
Description: string;
4-
AdditionalText1: string;
5-
AdditionalText2: string;
6-
AdditionalText3: string;
4+
AdditionalText1?: string;
5+
AdditionalText2?: string;
6+
AdditionalText3?: string;
77
}

‎portfolio/src/components/Techstack/Techstack.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ export default function Techstack() {
3838
spacing={{ xs: 1, md: 2 }}
3939
marginTop={3}
4040
>
41-
{TechIconsSource.map((item, index: number) => (
42-
<Grid size={3} key={index}>
41+
{TechIconsSource.map((item) => (
42+
<Grid size={3} key={item.Title}>
4343
<Card
4444
sx={{
4545
boxShadow: 0,
@@ -50,6 +50,7 @@ export default function Techstack() {
5050
component="img"
5151
image={item.Image}
5252
alt={item.Title}
53+
loading="lazy"
5354
sx={{ height: 80, objectFit: "contain" }}
5455
/>
5556
<CardContent

0 commit comments

Comments
 (0)