Timeframe: 2025 – 2026
Context: Bracken is a community for hands-on learning in programming, networking, AI and cybersecurity. It runs events like the ZUCTF capture-the-flag competition.
Problem / Goal: The site had to do two jobs. It presents the community to students and partners, and it is also where teams sign up for events. Since the audience is mostly security people, it also had to reward the ones who poke around.
My Contribution
- Built the whole site: home, about, FAQ, contact, the ZUCTF v3 event page with team registration, and a Hall of Fame
- A particle hero that morphs between shapes, glass surfaces and page transitions
- A seven-flag hunt hidden across the site: in view-source, the console, a hidden terminal (press the backtick key),
robots.txt, the Konami code and the hero particles - Flags are stored only as SHA-256 hashes, so the repo never contains a plaintext answer
- A Hall of Fame where finishers submit all seven flags; the server re-checks them and rate-limits submissions
- A Redis data layer with rate limits on registration and submissions, plus a one-time migration script from Postgres
- Registration export to Excel for event organizers
- About 20 Playwright end-to-end specs covering the flags, the terminal, performance and accessibility
Approach & Tech: Next.js, React, TypeScript, GSAP (ScrollTrigger, SplitText) with Lenis, three.js and React Three Fiber (loaded only on the pages that need them), Upstash Redis, Vitest and Playwright.
A walk through the site
Screenshots from a local run. The Hall of Fame names are sample data.
Home
The first thing you see. The particles slowly change from one shape to another, and each shape matches a topic Bracken teaches.
Press the backtick key anywhere and a terminal opens. It has its own commands, and a few of the flags are found through it.
The numbers count up when you scroll to them, followed by the four things Bracken does.
Competitions the team placed in, with filters by year.
A banner for the next event, so it is never more than one click away.
The three founders.
Partners, then a last push toward the academy before the footer.
ZUCTF v3
The event page has its own look. The key details are visible right away: date, team size and categories.
All twelve categories. Hovering a row shows what it covers.
Signing up is a short step-by-step form that opens in place, with no new page.
About
What Bracken is, in a few lines.
Founders, managers and members, each with their role.
The mission statement.
FAQ, contact and the flag hunt
Common questions, open one at a time.
The contact form sends straight to the team's inbox. Email and community links are on the side.
Everyone who found all seven flags, in the order they finished.
Outcome / Impact: bracken.sh is the community's home and the registration hub for ZUCTF, and the flag hunt gives curious visitors a reason to dig into the site.
What I Learned:
- For a security community, the website itself can be the first challenge
- Hashing secrets before they reach the repo is simple and removes a whole class of leaks