Skip to content

Commit 9183974

Browse files
steadyfallsteadyfall
committed
feat: convert extra info paragraphs to AccordionForExtraInfo component in About component
Refactored the static informational paragraphs into a dynamic Accordion component.
1 parent 521349f commit 9183974

File tree

1 file changed

+131
-61
lines changed

1 file changed

+131
-61
lines changed

‎src/components/About.tsx

Lines changed: 131 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,132 @@
1+
import { FlagTriangleRight, GitCommitVertical, Signpost } from 'lucide-react';
2+
3+
import {
4+
Accordion,
5+
AccordionContent,
6+
AccordionItem,
7+
AccordionTrigger,
8+
} from '@/components/ui/Accordion';
19
import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
2-
import Highlight from '@/components/ui/Highlighter';
310
import LinkWithArrow from '@/components/ui/LinkWithArrow';
11+
import StrikeHighlight from '@/components/ui/StrikeHighlighter';
412
import { cn } from '@/lib/utils';
513

14+
type CustomAccordionItemDetails = {
15+
value: string;
16+
iconTitle: React.ReactNode;
17+
title: string;
18+
iconBody: React.ReactNode;
19+
body: React.ReactNode[];
20+
};
21+
22+
const AccordionForExtraInfo = (items: CustomAccordionItemDetails[] = []) => {
23+
const AccordionItemCustom = ({
24+
value,
25+
iconTitle,
26+
title,
27+
iconBody,
28+
body,
29+
}: CustomAccordionItemDetails) => {
30+
return (
31+
<AccordionItem value={value}>
32+
<AccordionTrigger className="text-black dark:text-white">
33+
<span className="flex items-center gap-2">
34+
{iconTitle}
35+
<span>{title}</span>
36+
</span>
37+
</AccordionTrigger>
38+
<AccordionContent className="ps-7 text-base">
39+
<ul className="list-inside list-none space-y-1 text-gray-700 dark:text-gray-300">
40+
{body.map((node, idx) => (
41+
<li key={idx}>
42+
{iconBody}
43+
{node}
44+
</li>
45+
))}
46+
</ul>
47+
</AccordionContent>
48+
</AccordionItem>
49+
);
50+
};
51+
52+
return (
53+
<Accordion type="single" collapsible>
54+
{items.map((item, idx) => (
55+
<AccordionItemCustom key={idx} {...item} />
56+
))}
57+
</Accordion>
58+
);
59+
};
60+
661
const About = () => {
62+
const findMeDoingBody = [
63+
<>
64+
<StrikeHighlight text="re-watching" color="pink" /> any one of these series:{' '}
65+
<StrikeHighlight text="Breaking Bad" color="pink" />,{' '}
66+
<StrikeHighlight text="Silicon Valley" color="pink" />,{' '}
67+
<StrikeHighlight text="South Park" color="pink" /> and{' '}
68+
<StrikeHighlight text="The Office" color="pink" />.
69+
</>,
70+
];
71+
const thoseOfYouCuriousBody = [
72+
<>
73+
The favicon is a <StrikeHighlight text="4-hypercube graph" color="cyan" /> made via Python,
74+
using NetworkX and Matplotlib. Check the{' '}
75+
<LinkWithArrow
76+
href="/icon.ico"
77+
target="_blank"
78+
className="mr-1 text-orange-500 hover:underline hover:underline-offset-2"
79+
>
80+
image
81+
</LinkWithArrow>
82+
out, learn{' '}
83+
<LinkWithArrow
84+
href="https://en.wikipedia.org/wiki/Hypercube_graph"
85+
target="_blank"
86+
className="mr-1 text-blue-violet-500 hover:underline hover:underline-offset-2"
87+
>
88+
more
89+
</LinkWithArrow>{' '}
90+
about hypercube graphs & here is the{' '}
91+
<LinkWithArrow
92+
href="https://github.com/steadyfall/steadyfall.github.io/blob/main/hypercube/generate.py"
93+
target="_blank"
94+
className="mr-1 text-firefly-600 hover:underline hover:underline-offset-2 dark:text-firefly-500"
95+
>
96+
code
97+
</LinkWithArrow>{' '}
98+
to generate it yourself.
99+
</>,
100+
];
101+
const itemsForExtraInfo: CustomAccordionItemDetails[] = [
102+
{
103+
value: 'findme',
104+
iconTitle: (
105+
<>
106+
<Signpost className="h-4 w-4 opacity-90 md:h-5 md:w-5" aria-hidden="true" />
107+
</>
108+
),
109+
title: 'You can find me:',
110+
iconBody: (
111+
<>
112+
<GitCommitVertical className="mr-1 inline-block h-4 w-4 align-middle md:h-5 md:w-5" />
113+
</>
114+
),
115+
body: findMeDoingBody,
116+
},
117+
{
118+
value: 'curious',
119+
iconTitle: (
120+
<>
121+
<FlagTriangleRight className="h-4 w-4 opacity-90 md:h-5 md:w-5" aria-hidden="true" />
122+
</>
123+
),
124+
title: 'For those of you curious:',
125+
iconBody: <></>,
126+
body: thoseOfYouCuriousBody,
127+
},
128+
];
129+
7130
return (
8131
<section id="about" className="mb-12">
9132
<BlurFade delay={BLUR_FADE_DELAY * 3}>
@@ -19,70 +142,17 @@ const About = () => {
19142
<BlurFade delay={BLUR_FADE_DELAY * 4}>
20143
<div className="text-gray-700 dark:text-gray-300">
21144
<p className="mb-2">
22-
I am a <Highlight text="software developer" color="red" /> based in{' '}
23-
<Highlight text="Toronto" color="red" /> and currently a <Highlight text="junior" />{' '}
24-
pursuing a
25-
<Highlight text="Computational Mathematics" /> major at the{' '}
26-
<Highlight text="University of Waterloo" />. I am passionate about tech and innovation,
27-
always exploring the{' '}
145+
I am a <StrikeHighlight text="software developer" color="red" /> based in{' '}
146+
<StrikeHighlight text="Toronto" color="red" /> and currently a{' '}
147+
<StrikeHighlight text="junior" /> pursuing a{' '}
148+
<StrikeHighlight text="Computational Mathematics" /> major at the{' '}
149+
<StrikeHighlight text="University of Waterloo" />. I am passionate about tech and
150+
innovation, always exploring the{' '}
28151
<span className="underline underline-offset-4">
29152
intersection of software development and AI.
30153
</span>
31154
</p>
32-
{/* <p className="mb-2">
33-
Outside of academics and professional career, I enjoy contributing to open-source projects, working on side projects, participating in hackathons and playing
34-
table tennis, football, cricket and badminton. I also like to travel & explore new places, cuisines & restaurants.
35-
</p> */}
36-
{/* <div className="inline-flex flex-wrap gap-x-0.5 gap-y-1 mb-2 ">
37-
<span>You can find me</span> <Highlight text="re-watching" color="pink"/> <span>any one of these TV series:</span>
38-
<Highlight text="Silicon Valley" color="pink"/>,
39-
<Highlight text="South Park" color="pink"/>,
40-
<Highlight text="The Office" color="pink"/>,
41-
<Highlight text="The Big Bang Theory" color="pink"/>,
42-
<Highlight text="Suits" color="pink"/>,
43-
<Highlight text="Brooklyn 9-9" color="pink"/>,
44-
<Highlight text="How I Met Your Mother" color="pink"/>,
45-
<Highlight text="Impractical Jokers" color="pink"/>.
46-
</div> */}
47-
<p className="mb-2">
48-
You can find me <Highlight text="re-watching" color="pink" /> any one of these
49-
series:&nbsp;
50-
<Highlight text="Breaking Bad" color="pink" />
51-
,&nbsp;
52-
<Highlight text="Silicon Valley" color="pink" />
53-
,&nbsp;
54-
<Highlight text="South Park" color="pink" /> and{' '}
55-
<Highlight text="The Office" color="pink" />.
56-
</p>
57-
<p className="mb-2">
58-
For those of you curious, the favicon is a{' '}
59-
<Highlight text="4-hypercube graph" color="cyan" /> made via Python, using NetworkX and
60-
Matplotlib. Check the{' '}
61-
<LinkWithArrow
62-
href="/icon.ico"
63-
target="_blank"
64-
className="mr-1 text-orange-500 hover:underline hover:underline-offset-2"
65-
>
66-
image
67-
</LinkWithArrow>
68-
out, learn{' '}
69-
<LinkWithArrow
70-
href="https://en.wikipedia.org/wiki/Hypercube_graph"
71-
target="_blank"
72-
className="mr-1 text-blue-violet-500 hover:underline hover:underline-offset-2"
73-
>
74-
more
75-
</LinkWithArrow>{' '}
76-
about hypercube graphs & here is the{' '}
77-
<LinkWithArrow
78-
href="https://github.com/steadyfall/steadyfall.github.io/blob/main/hypercube/generate.py"
79-
target="_blank"
80-
className="mr-1 text-firefly-600 hover:underline hover:underline-offset-2 dark:text-firefly-500"
81-
>
82-
code
83-
</LinkWithArrow>{' '}
84-
to generate it yourself.
85-
</p>
155+
<div className="mb-2">{AccordionForExtraInfo(itemsForExtraInfo)}</div>
86156
</div>
87157
</BlurFade>
88158
</section>

0 commit comments

Comments
 (0)