Role:
Designer, Front-End Engineer
Timeline:
12 Weeks
Tools:
Figma, Photoshop, HTML, CSS, JavaScript, GSAP, Github
Introduction
Visit the app
Translating Subculture Through Code
This was an exploration of story-telling combined with developing coding skills, the end result turned out to be an approach of “digital zine” concept, where I explored basic concepts of the “secret society” that is the graffiti world, it’s policies, tools and showcased references in it’s hidden eastern eggs.
How do you translate the raw, subversive energy of graffiti into a digital medium? This project is an experimental deep dive into 'Secret Society' culture, reimagined as an interactive digital zine. By blending non-linear storytelling with creative coding, I developed a narrative experience that guides the user through the hierarchy, tools, and unspoken rules of the underground.
Using GSAP for high-performance motion choreography and Vanilla JS for custom interactions, I focused on creating a 'lo-fi' aesthetic that feels both nostalgic and technically modern. To mirror the "hidden in plain sight" nature of street art, I engineered the interface with layered easter eggs and interactive triggers. These hidden elements reward user curiosity, leading the most observant visitors to secret content and deeper narrative threads.
The result is a tactile, responsive, exploratory interface where the code doesn't just display the story, it challenges the user to find it.
Technical Highlights
Dynamic Motion Choreography: Leveraged GSAP ScrollTrigger to create a seamless parallax experience, ensuring heavy visual assets animate fluidly without compromising browser performance.
Discovery-Driven UX: Engineered a "Hidden Layer" logic using JavaScript event listeners. This rewards user exploration by revealing deeper content tiers only when specific 'Easter Egg' elements are interacted with.
Asset Optimization: Implemented a "Lo-fi" aesthetic using optimized image fragments and CSS blending modes to maintain a gritty, collage-style UI while keeping initial page load times low.
Non-Linear Navigation: Designed a custom navigation flow that mimics the act of "spotting" graffiti in the wild—moving away from traditional menu bars toward a more immersive, exploratory discovery path.
Conclusion
Building Underground Society was a rewarding opportunity to explore the technical possibilities of web development through the lens of my personal interests. By centring the project on the subversive world of graffiti, I was able to push beyond standard UI patterns and experiment with a truly custom design language.
This project served as a vital sandbox for solidifying my core competencies in HTML, CSS, and Vanilla JavaScript, while deeply expanding my mastery of GSAP for complex motion sequencing. More importantly, it allowed me to extend my creative vision. Proving that code is not just a utility, but a powerful medium for storytelling. I’m walking away from this build with a more robust technical toolkit and a refined aesthetic approach that I look forward to bringing into my future collaborative environments.