Skip to content

Commit cd11546

Browse files
cate-21cate-21
committed
feat: workshop page
1 parent 7d7f73c commit cd11546

File tree

8 files changed

+259
-48
lines changed

8 files changed

+259
-48
lines changed

‎index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<link href="/src/globals.css" rel="stylesheet">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>Codebrew 2025</title>
9+
<meta name="description" content="Join CISSA's flagship 72-hour student hackathon.">
10+
<link rel="canonical" href="https://codebrew.cissa.org.au/"/>
911
</head>
1012
<body>
1113
<div id="root"></div>

‎package-lock.json

Lines changed: 54 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/images/blue-track.svg

Lines changed: 29 additions & 0 deletions
Loading

‎src/assets/images/green-track.svg

Lines changed: 29 additions & 0 deletions
Loading

‎src/assets/images/red-track.svg

Lines changed: 29 additions & 0 deletions
Loading

‎src/assets/images/window-bar.svg

Lines changed: 7 additions & 0 deletions
Loading

‎src/panels/themes.tsx

Lines changed: 108 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,115 @@
1-
import Countdown, { CountdownRenderProps } from 'react-countdown';
21

3-
const TARGET = new Date('2025-04-24T03:30:00Z');
2+
import { useState } from 'react';
3+
4+
import UpButton from "@/assets/icons/up.svg?react"
5+
6+
import RedTrack from "@/assets/images/red-track.svg"
7+
import GreenTrack from "@/assets/images/green-track.svg"
8+
import BlueTrack from "@/assets/images/blue-track.svg"
9+
import WindowBar from "@/assets/images/window-bar.svg"
10+
11+
const themes = [
12+
{
13+
key: 'wheel',
14+
name: 'Reinventing the Wheel',
15+
bgColour: "bg-red",
16+
textColour: "text-red",
17+
textClass: "text-white",
18+
text: "For the first track in this year’s series, we want to emphasize a beginner-friendly, user-focused design. As the name suggests, your goal is not to come up with a new, ground-breaking application/website that will blow people’s mind. Rather, the objective is to recreate ideas that have already been tried and tested throughout the years. Think to the apps and websites you yourself use everyday: instead of on creativity, your submission will be assessed based on your ability to understand why those applications are so successful and whether or not you’re able to recreate that desirability. We recommend this track for beginner coders.",
19+
card: RedTrack,
20+
background: "assets/red-flask.png",
21+
22+
},
23+
{
24+
key: 'ground',
25+
name: 'Ground Zero',
26+
bgColour: "bg-blue",
27+
textColour: "text-blue",
28+
textClass: "text-white",
29+
text: "In direct contrast to track #1, ‘Ground Zero’ is all about hard skills. In an era of abstracted tools, vibe coding, and all kinds of GPT wrappers, we wanted to give contestants a chance to return to basics and really focus on showing off pure skill and knowledge. The tl;dr of this track is ‘for coders, by coders’: contestants will be asked to create something that is either a tool for the use of other developers, or a tool that would impress other developers. Whether it be with a deep understanding of network protocols, compilers, OS, anything that shows you know your stuff! Recommended for experienced coders.",
30+
card: BlueTrack,
31+
background: "assets/blue-flask.png",
32+
},
33+
{
34+
key: 'blight',
35+
name: 'Farmer’s Blight',
36+
bgColour: "bg-green",
37+
textColour: "text-green",
38+
textClass: "text-black",
39+
text: "For the hackathon purists: our final track fits the standard experience you’re used to: a simple prompt that narrows downs the scope for your creativity. In this case: agriculture! Your goal is to research and understand issues faced by stakeholders in agriculture and then to design an application that helps address said issue. Contestants will be expected to show the ability to properly research and explain their topic of focus. Recommended for those with a good grasp of UI/UX principles.",
40+
card: GreenTrack,
41+
background: "assets/green-flask.png",
42+
},
43+
];
444

545
export default function ThemesPanel() {
6-
const renderer = ({
7-
days,
8-
hours,
9-
minutes,
10-
seconds,
11-
}: CountdownRenderProps) => {
12-
13-
const Slot = ({
14-
value,
15-
label,
16-
}: {
17-
value: number | string;
18-
label: string;
19-
}) => (
20-
<div className="flex flex-col items-center">
21-
<span className="font-abduction text-white text-4xl">
22-
{String(value).padStart(2, '0')}
23-
</span>
24-
<span className="mt-1 font-code text-base sm:text-lg uppercase text-white">
25-
{label}
26-
</span>
27-
</div>
28-
);
29-
30-
return (
31-
<div className="flex justify-center gap-6 sm:gap-10">
32-
<Slot value={days} label="Days" />
33-
<Slot value={hours} label="Hours" />
34-
<Slot value={minutes} label="Minutes" />
35-
<Slot value={seconds} label="Seconds" />
36-
</div>
37-
);
38-
};
46+
const [index, setIndex] = useState<number | null>(null);
47+
const open = index !== null;
48+
const current = index !== null ? themes[index] : null;
49+
50+
const prevDisabled = index === 0
51+
const nextDisabled = index === themes.length - 1
52+
53+
const prev = () => setIndex(i => (i! + themes.length - 1) % themes.length);
54+
const next = () => setIndex(i => (i! + 1) % themes.length);
55+
const close = () => setIndex(null);
56+
57+
const bg = current?.background ?? "";
3958

4059
return (
41-
<div className="flex flex-col gap-8 items-center justify-center bg-offblack py-12 px-4">
42-
<div className="text-center space-y-2">
43-
<h3 className="font-code text-white italic">CODEBREW THEME 2025:</h3>
44-
<h1 className="font-abduction text-3xl sm:text-4xl text-green">
45-
"REVISITING THE PAST"
46-
</h1>
60+
<section className="relative bg-offblack flex flex-col items-center px-6 py-16 overflow-hidden"
61+
style={bg ? { backgroundImage: `url(${bg})`, backgroundSize: "cover", backgroundPosition: "center" } : { backgroundImage: `url("assets/green-flask.png")`, backgroundSize: "contain", backgroundPosition: "right" , backgroundRepeat: "no-repeat"}}>
62+
<h1 className="font-abduction text-5xl text-green mb-10">THEMES</h1>
63+
64+
{!open && (
65+
<div className="flex flex-col sm:flex-row gap-8">
66+
{themes.map((t, i) => (
67+
<button
68+
key={t.key}
69+
onClick={() => setIndex(i)}
70+
className="relative flex flex-col items-center"
71+
>
72+
<img src={t.card} alt={t.name}></img>
73+
</button>
74+
))}
4775
</div>
48-
<div className="space-y-2">
49-
<h3 className="font-code text-white italic text-center">TRACKS 2025:</h3>
50-
<Countdown date={TARGET} renderer={renderer} />
51-
</div>
52-
</div>
76+
)}
77+
78+
{open && current && (
79+
<div className="max-w-2xl w-full flex flex-col items-center gap-6">
80+
<div className="relative w-full">
81+
<img src={WindowBar}></img>
82+
<div
83+
className={`w-full rounded-b-md font-code text-sm p-4 text-white ${current.bgColour}`}>
84+
<p className={`p-4 ${current.textClass}`}>{current.text}</p>
85+
<button onClick={close} className="bg-black rounded-2xl font-code text-white px-6 mt-2">Back</button>
86+
</div>
87+
</div>
88+
89+
<div className="w-full flex items-center justify-between text-white">
90+
<button
91+
onClick={prev}
92+
disabled={prevDisabled}
93+
className={prevDisabled ? "opacity-50 pointer-events-none" : ""}
94+
>
95+
<UpButton className={`w-8 h-8 sm:w-12 sm:h-12 stroke-current -rotate-90 ${current.textColour}`} />
96+
</button>
97+
98+
<div className="font-abduction text-3xl text-center">
99+
{current.name}
100+
</div>
101+
102+
<button
103+
onClick={next}
104+
disabled={nextDisabled}
105+
className={nextDisabled ? "opacity-50 pointer-events-none" : ""}
106+
>
107+
<UpButton className={`w-8 h-8 sm:w-12 sm:h-12 stroke-current rotate-90 ${current.textColour}`} />
108+
</button>
109+
</div>
110+
</div>
111+
)}
112+
</section>
53113
);
54-
}
114+
}
115+

‎src/panels/workshop.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function WorkshopCarousel() {
6060
return (
6161
<div
6262
className="w-full bg-offblack bg-center py-10"
63-
style={{ backgroundImage: `url(${background})` }}
63+
style={{ backgroundImage: `url(${background})`, backgroundSize: "cover", backgroundPosition: "center" }}
6464
>
6565
<h2 className={`font-abduction text-xl sm:text-4xl text-center ${text}`}>C:\Codebrew_Workshops_Series\</h2>
6666

0 commit comments

Comments
 (0)