Retro pixels, Dev Community precision
Binary Hackathon Frontend Lead
React Server Components, Tailwind tokens, and tightly profiled Framer Motion sequences kept the arcade aesthetic intact while guaranteeing Binary's site loaded instantly for every student.
Design sprint
Dec 1–10
Moodboards, motion prototypes, content IA
Implementation
Dec 11–30
Next.js app, CMS, mini-games
Launch window
Jan 16
Zero-downtime release
Tech focus
Project gallery
Visual highlights
A quick look at the states, flows, and artifacts that made this launch feel polished.
Project features
Crafted to feel human, performant, and scalable
Binary is KGEC's flagship hackathon, and as frontend lead for Dev Community KGEC I directed a 10-person pod through design, build, and launch. I owned the retro art direction, codified the component library, and kept every animation performant on low-end student devices so registration never felt slow.
Arcade theming system
Outlined typography, CRT textures, and pixel iconography packaged as tokens so the team could ship new sections quickly.
Animated hero stack
Space-Invader inspired hero built with Framer Motion timelines, parallax layers, and reduced-motion fallbacks.
Mobile-first grids
Content grids collapse elegantly with CSS clamp + container queries so participants can browse on-site.
Services & deliverables
End-to-end partnership
Strategy, engineering, and activation workstreams stayed tightly aligned so the launch felt intentional.
Service
Design direction
Created mood boards, component spec sheets, and animation storyboards that drove the retro aesthetic.
- Figma kit
- Animation scripts
- Color system
Service
Frontend engineering
Implemented the full site in Next.js with shared layout primitives, MDX-powered content, and SSR-friendly motion.
- Component library
- Layout engine
- Motion presets
Service
Performance & accessibility
Instrumented Lighthouse budgets, prefers-reduced-motion support, and semantic navigation for screen readers.
- Perf budget
- Accessibility report
- Testing matrix
Accomplishments
Business impact & program achievements
We measure success with data, ceremonies, and the teams who keep the experience running.
Launch traffic
500+ visits
Peak day traffic held steady without throttling thanks to edge caching and optimized media.
Performance budget
LCP < 1.9s
Strict bundle budgets, image compression, and motion fallbacks kept metrics green even on 3G.
Team leadership
Led 10 devs
Directed Dev Community KGEC's frontend squad across design, build, QA, and launch sprints.
Landmarks
Milestones that shaped the roadmap
From discovery to public launch we ran fixed-length pulses with clear artifacts at every turn.
Design phase
Paired with the design guild to lock art direction, motion language, and content architecture.
Implementation sprint
Shipped the Next.js experience, MDX-driven agenda, and interactive retro mini-games.
Deployment runway
Containerized the app, configured analytics, and rehearsed blue/green cuts.
Stabilization
Squashed accessibility bugs, hardened content tooling, and rehearsed the launch script.
Launch
Opened registrations with the full retro experience and instant load times.