Team Jetpack: SUPERHERO BUILDER

Built through ARfected in collaboration with Gramafilm and Google's Android team for Android Dev Summit 2021. I was involved from the pitch, helping shape what was actually buildable, then owned the full technical development from start to finish. The concept: Android developers unite as Team Jetpack to fight the bugs of chaos. Users built a personalised superhero avatar by selecting body type, face features, hairstyle, skin, eye and hair colour, accessories, and toggling between full-body or close-up views, then exported it as a digital trading card to share on Twitter with #AndroidDevSummit. The visual customisation ran across 100+ SVG assets, built from the ground up for range and diversity across the developer community. Gramafilm handled creative direction and visual identity. My role was creative technology: I defined the technical architecture, led the full build, and recruited and oversaw an additional developer during the final delivery stage to polish the UI and ensure full responsiveness.

Google promoted the experience through a YouTube promo video and the official Android Developers Twitter account and LinkedIn, calling all members of Team Jetpack to build their superhero and help fight the bugs of chaos. The community responded immediately. Developers started sharing their cards before the summit even started, with the official tweet hitting 159 likes, 24 quote tweets, and 20 retweets. The avatar builder became one of the highlights of Android Dev Summit 2021, praised specifically for the depth of customisation and the diversity of options. It turned a developer conference into something people actually wanted to participate in, post about, and share.

Built with vanilla JavaScript and SVG. The core technical challenge was the SVG system: managing 100+ layered assets across body type, face features, hairstyle, skin/eye/hair colour, accessories, and view modes (full-body and close-up), handling state across every combination and keeping rendering performance clean. For the social sharing layer, I implemented html2canvas to convert the assembled SVG avatar and HTML trading card into a shareable JPG, then integrated Twitter OAuth 2.0 for client-side authentication so users could log in and tweet directly from the experience. A download option was included for users who preferred to save locally. Deployment ran on a continuous delivery pipeline I set up from GitHub, pushing to both staging and production environments on Heroku. Fully responsive across mobile and desktop.

Pitch & Scope: Involved from the pitch stage, helping define what was technically buildable and shaping the experience's scope before development started. Technical Lead: Owned the full build end-to-end, covering frontend development, SVG system architecture, interaction logic, social integration, and deployment. SVG Architecture: Designed and built the layered SVG customisation system across 100+ assets, managing state, rendering, and export for the trading card format. Social Integration: Implemented html2canvas for JPG export from the assembled SVG and HTML card. Integrated Twitter OAuth 2.0 for client-side authentication and direct tweet sharing, plus a download option. CD Pipeline: Set up continuous deployment from GitHub to staging and production environments on Heroku. Team Lead: Recruited and directed an additional developer during final delivery to polish the UI and ensure full responsiveness across devices.