HackCanada Website
The 2024 website for HackCanada, one of Canada's largest student-run hackathons. I joined the organising team as a front-end developer and was the most active contributor on the site.
- Role
- Organiser and front-end developer
- Built
- August to November 2024
- Team
- HackCanada organising team
- Contribution
- Top contributor: 263 of the repo's 426 commits (October 2026)
The goal
A site that feels alive but stays fast and easy to maintain: one place for hackers, organisers and sponsors, modular enough to reuse for future events.
What I built
- The groundwork: a skeleton for every section, Lenis smooth scrolling, shared GSAP helpers, metadata and SEO, plus ESLint and Husky pre-commit hooks for the team.
- The winter hero: snowfall, a sledge animation, an aurora and SVG hills.
- The teams section: an infinite marquee that pauses on hover, flag and tooltip animations, and cards ported from Astro to React with GSAP.
- The sponsors section: an SVG path morph with anime.js, sponsor cards and a bee animation.
- An About section rendered from markdown in the site config, FAQ updates, the OG image and the newsletter sign-up.
Keeping it fast
- Astro's islands ship static HTML and only hydrate the interactive React parts.
- I swapped icon and 3D dependencies (Radix icons, Spline) for a small custom SVG icon set, removed unused files and packages, and made the animations cheaper to run.
- Images go through Astro's image pipeline with sharp, and fonts are preloaded.
Team and today
This was a team build: other organisers contributed sections, fixes and content. The live hackcanada.org has since been redesigned for later events, so it no longer shows the 2024 version described here.
Stack
Astro 4 · React · TypeScript · Tailwind CSS · GSAP · anime.js · Lenis · nanostores