Back to Projects
Acing Your First Hackathon: Advice I'd Give My Younger Self
A 45-minute talk for 600 first-year students on the night of their first hackathon, built as a website instead of a slide file.
Overview
Every slide fills the viewport and has its own URL, so reloading mid-talk lands on the same slide and you can send someone a link to slide 17. All 29 slides live in one typed file, rendered by a discriminated union of ten layout types, so a one-line statement and a nine-row table are different compositions rather than one template with the text swapped out. Driven from a keyboard while presenting, but it also had to hold up when a student opened it on their phone the next morning. The overview grid, fullscreen toggle and shortcut dialog stay invisible until you reach for them.
Key Achievements
Presented to 600 first-year students on the night of their first hackathon
Slide state lives in the URL through useSyncExternalStore instead of React state, which makes deep links and mid-talk reloads free
Navigation works from arrow keys, a presentation clicker, a tap on either half of the screen, or a swipe
The animated background composites on the GPU and has a kill switch, since constant motion softens text over a Zoom screenshare
Tech Stack
Next.jsTypeScriptTailwind CSSVercelStatic Export