Skip to content

Commit 1afc130

Browse files
br-Chanbr-Chan
committed
feat: expand Volunteer Work section; revamp background colour change logic
1 parent ce71e47 commit 1afc130

File tree

7 files changed

+177
-60
lines changed

7 files changed

+177
-60
lines changed

‎src/components/ProjectCard.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const ProjectCard: FC<ProjectCardProps> = ({
2727
titleClassName,
2828
}) => {
2929
return (
30-
<Card className={cn("font-normal-sans", className)}>
30+
<Card className={cn(className)}>
3131
{/* TODO: add image of project to the left side */}
3232
<CardHeader>
3333
<CardTitle className="flex flex-col justify-between md:flex-row md:gap-4">
@@ -67,10 +67,9 @@ export const ProjectCard: FC<ProjectCardProps> = ({
6767
)}
6868
</CardContent>
6969
<CardFooter>
70-
<span className="flex gap-2">
70+
<span className="flex flex-wrap gap-2">
7171
{project.links?.map((link) => (
7272
<BadgeLink
73-
className="text-xs"
7473
href={link.href}
7574
key={link.href}
7675
label={link.type}

‎src/components/ui/card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
66
return (
77
<div
88
className={cn(
9-
"flex flex-col gap-2 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
9+
"flex flex-col gap-2 rounded-xl border bg-card py-6 font-normal-sans text-card-foreground shadow-sm",
1010
className,
1111
)}
1212
data-slot="card"

‎src/routes/(home)/-components/Projects.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export interface ProjectsProps {
99

1010
export const Projects: FC<ProjectsProps> = memo(({ projects, projectType }) => {
1111
return (
12-
<div className="grid gap-4 lg:grid-cols-2 2xl:grid-cols-3">
12+
<div className="grid gap-4 sm:grid-cols-2 2xl:grid-cols-3">
1313
{projects
1414
.filter(
1515
(project) =>

‎src/routes/(home)/-components/VolunteerWork.tsx‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import { PiCowFill, PiSwordFill } from "react-icons/pi";
2+
import { BadgeLink } from "@/components/BadgeLink";
3+
import {
4+
Card,
5+
CardContent,
6+
CardDescription,
7+
CardFooter,
8+
CardHeader,
9+
CardTitle,
10+
} from "@/components/ui/card";
11+
12+
// TODO: make this configurable in json rather than hard-coded?
13+
export const VolunteerWork = () => (
14+
<div className="grid gap-4 sm:grid-cols-2 2xl:grid-cols-3">
15+
<Card>
16+
<CardHeader>
17+
<CardTitle className="font-bold text-lg">
18+
WDCC Project Member
19+
</CardTitle>
20+
<CardDescription>
21+
<span className="font-bold">Apr 2025</span>
22+
&nbsp;-&nbsp;
23+
<span className="space-x-1 font-bold">Oct 2025</span>
24+
</CardDescription>
25+
</CardHeader>
26+
<CardContent className="h-full whitespace-pre-line">
27+
<p>
28+
I was a software developer in a software project at the Web
29+
Development and Consulting Club! In a team of 11 we revamped
30+
and deployed the University of Auckland Badminton Club's web
31+
portal for member management and court bookings.
32+
<br />I worked full-stack: I created components for the
33+
frontend, worked on backend services and endpoints and built
34+
frontend interfaces such as login, onboarding flows and
35+
admin interfaces. My last feature will hopefully be
36+
implementing{" "}
37+
<a
38+
className="font-normal-mono"
39+
href="https://nextjs.org/?uwu=true"
40+
rel="noopener"
41+
target="_blank"
42+
>
43+
?uwu=true
44+
</a>{" "}
45+
to the logo :)
46+
<br />
47+
This was among the best experiences I've had in my degree
48+
(and possibly beyond?), where I got to meet so many people,
49+
learn so many new things about web development and genuinely
50+
have a lot of fun.
51+
</p>
52+
</CardContent>
53+
<CardFooter>
54+
<span className="flex flex-wrap gap-2">
55+
<BadgeLink
56+
href="https://uoabadminton.co.nz/"
57+
label="Deployment"
58+
target="_blank"
59+
type="Deployment"
60+
/>
61+
<BadgeLink
62+
href="https://github.com/UoaWDCC/uabc-web"
63+
label="GitHub"
64+
target="_blank"
65+
type="GitHub"
66+
/>
67+
<BadgeLink
68+
className="bg-[#3a86fe]"
69+
href="https://wdcc.co.nz/"
70+
label="WDCC"
71+
startIcon={<PiCowFill />}
72+
target="_blank"
73+
/>
74+
</span>
75+
</CardFooter>
76+
</Card>
77+
<Card>
78+
<CardHeader>
79+
<CardTitle className="font-bold text-lg">
80+
Part III SOFTENG Class Representative
81+
</CardTitle>
82+
<CardDescription>
83+
<span className="font-bold">Mar 2025</span>
84+
&nbsp;-&nbsp;
85+
<span className="space-x-1 font-bold">present</span>
86+
</CardDescription>
87+
</CardHeader>
88+
<CardContent className="h-full whitespace-pre-line">
89+
<p>
90+
I'm one of two class reps for the Part III Software
91+
Engineering Cohort of 2025.
92+
<br />I was responsible for facilitating communication
93+
between students and staff, and helping to coordinate
94+
various department-wide events. This included collecting
95+
unbiased feedback from the cohort, reporting any significant
96+
concerns to the teaching staff, and working with staff and
97+
the cohort to address concerns and enhance the learning
98+
experience for all students.
99+
<br />
100+
Being a class rep this year was incredibly rewarding; I got
101+
to meet and talk to so many new people (staff and students
102+
alike) and I got to appreciate how awesome everyone in our
103+
cohort is!
104+
</p>
105+
</CardContent>
106+
<CardFooter>
107+
<span className="flex flex-wrap gap-2">
108+
<BadgeLink
109+
href="https://www.linkedin.com/in/alex-b-nz/"
110+
label="Alex Brown, my fellow class rep"
111+
target="_blank"
112+
type="LinkedIn"
113+
/>
114+
</span>
115+
</CardFooter>
116+
</Card>
117+
<Card>
118+
<CardHeader>
119+
<CardTitle className="font-bold text-lg">
120+
Open Source Contributor
121+
</CardTitle>
122+
</CardHeader>
123+
<CardContent className="h-full whitespace-pre-line">
124+
<p>
125+
I contribute to the Polytopia Damage Calculator, one of the
126+
most popular web apps for calculating damage in the
127+
turn-based strategy game The Battle of Polytopia.
128+
<br />
129+
My main contributions include fixing calculation bugs and
130+
updating the calculator to support new versions of the game
131+
as they are released.
132+
<br />
133+
Contributions welcome!
134+
</p>
135+
</CardContent>
136+
<CardFooter>
137+
<span className="flex flex-wrap gap-2">
138+
<BadgeLink
139+
className="bg-[#FD6CA4]"
140+
href="https://polytopia-damage-calculator.firebaseapp.com/"
141+
label="Polytopia Damage Calculator"
142+
startIcon={<PiSwordFill />}
143+
target="_blank"
144+
/>
145+
<BadgeLink
146+
href="https://github.com/amigobrewbrew/polytopiacalculatorfirebase-public"
147+
label="GitHub"
148+
target="_blank"
149+
type="GitHub"
150+
/>
151+
</span>
152+
</CardFooter>
153+
</Card>
154+
</div>
155+
);

‎src/routes/(home)/index.tsx‎

Lines changed: 13 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { createFileRoute } from "@tanstack/react-router";
22
import { useEffect } from "react";
3-
import { FaCar, FaGithub } from "react-icons/fa";
3+
import { FaCar } from "react-icons/fa";
44
import { FaBook, FaKeyboard, FaPenToSquare } from "react-icons/fa6";
5-
import { PiCowFill } from "react-icons/pi";
65
import {
76
Accordion,
87
AccordionContent,
@@ -23,6 +22,7 @@ import rawProjects from "@/data/projects.json";
2322
import type { Project } from "../cv/-components/types";
2423
import { Projects } from "./-components/Projects";
2524
import { TypingChart } from "./-components/TypingChart";
25+
import { VolunteerWork } from "./-components/VolunteerWork";
2626

2727
export const Route = createFileRoute("/(home)/")({
2828
component: App,
@@ -36,6 +36,12 @@ function App() {
3636
setStarColor("#f59e0b");
3737
}, []);
3838

39+
const onAccordionValueChange = (newOpenedItems: string[]) => {
40+
console.log(newOpenedItems);
41+
const color = newOpenedItems[newOpenedItems.length - 1];
42+
color && setStarColor(color);
43+
};
44+
3945
return (
4046
<section className="flex min-h-screen w-full flex-col justify-start gap-8 bg-white py-8 *:z-1 md:px-8 lg:px-16 xl:px-32">
4147
<h1 className="font-bold text-2xl">
@@ -57,12 +63,10 @@ function App() {
5763
</p>
5864
</div>
5965

60-
<Accordion type="multiple">
66+
<Accordion onValueChange={onAccordionValueChange} type="multiple">
6167
<AccordionItem
6268
className="border-0 bg-amber-300/30 md:rounded-t-2xl"
63-
onClick={() => setStarColor("#f59e0b")}
64-
// onMouseOver={() => setStarColor("#f59e0b")} // amber 500
65-
value="creating"
69+
value="#f59e0b" // amber 500
6670
>
6771
<AccordionTrigger
6872
className="bg-amber-400 font-sans hover:opacity-90 md:rounded-t-2xl"
@@ -102,9 +106,7 @@ function App() {
102106

103107
<AccordionItem
104108
className="border-0 bg-blue-400/30"
105-
onClick={() => setStarColor("#3b82f6")}
106-
// onMouseOver={() => setStarColor("#3b82f6")} // blue 500
107-
value="learning"
109+
value="#3b82f6" // blue 500
108110
>
109111
<AccordionTrigger
110112
className="bg-blue-500 font-sans hover:opacity-90"
@@ -154,9 +156,7 @@ function App() {
154156

155157
<AccordionItem
156158
className="border-0 bg-red-400/30 md:rounded-b-2xl"
157-
onClick={() => setStarColor("#ef4444")}
158-
// onMouseOver={() => setStarColor("#ef4444")} // red 500
159-
value="doing"
159+
value="#ef4444" // red 500
160160
>
161161
<AccordionTrigger
162162
className="bg-red-500 font-sans hover:opacity-90 md:rounded-b-2xl"
@@ -175,47 +175,7 @@ function App() {
175175
title="Volunteer Work"
176176
titleOutlineColor="#ad0c14"
177177
>
178-
<Card>
179-
<CardHeader>
180-
<CardTitle className="font-bold text-lg">
181-
WDCC
182-
</CardTitle>
183-
</CardHeader>
184-
<CardContent>
185-
<p>
186-
I'm a software developer in a software
187-
project at the Web Development and
188-
Consulting Club! We're developing a
189-
member management and court booking
190-
portal for the University of Auckland
191-
Badminton Club. I'm working full-stack,
192-
creating components for the frontend and
193-
working on backend services and
194-
endpoints, among other awesome stuff and
195-
a tiny bit of DevOps (which is
196-
particularly not awesome when things
197-
don't work) Come check out what we're up
198-
to.
199-
</p>
200-
</CardContent>
201-
<CardFooter>
202-
<span className="flex gap-2">
203-
<BadgeLink
204-
className="bg-[#3a86fe]"
205-
href="https://wdcc.co.nz/"
206-
label="WDCC"
207-
startIcon={<PiCowFill />}
208-
target="_blank"
209-
/>
210-
<BadgeLink
211-
href="https://github.com/UoaWDCC/uabc-web"
212-
label="uabc-web"
213-
startIcon={<FaGithub />}
214-
target="_blank"
215-
/>
216-
</span>
217-
</CardFooter>
218-
</Card>
178+
<VolunteerWork />
219179
</SubSection>
220180

221181
<SubSection

‎src/routes/todo/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,7 @@ function RouteComponent() {
4444
<CardContent>
4545
<ol>
4646
<li>- dark mode</li>
47-
<li>- Languages / tech subsection</li>
48-
<li>- Volunteering subsection</li>
47+
<li>- Languages / tech subsection and tags</li>
4948
<li>- the groceries</li>
5049
<li>- the rest of this todo list</li>
5150
</ol>

‎src/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ body {
3232
font-family: "Comic Mono", monospace;
3333
}
3434

35+
.font-normal-mono {
36+
font-family: "consolas", monospace;
37+
}
38+
3539
code {
3640
font-family:
3741
source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;

0 commit comments

Comments
 (0)