Mohammad Imtiaj Hossen's Work | ContraWork by Mohammad Imtiaj Hossen
Mohammad Imtiaj Hossen

Mohammad Imtiaj Hossen

I don't build apps, I build solutions to your problems.

New to Contra

Mohammad Imtiaj is ready for their next project!

Cover image for ๐Ÿ“ฐ Introducing Breaking: You
What if
๐Ÿ“ฐ Introducing Breaking: You What if your biggest achievement became tomorrow's headline? Breaking: You transforms your personal stories into professionally designed newspaper front pages. Simply: ๐Ÿ“ธ Upload your photo โœ๏ธ Write a short achievement or milestone ๐Ÿค– Let AI generate a unique newspaper article ๐Ÿ“ฐ Receive your own personalized front page Whether you graduated, launched a startup, won a competition, landed your dream job, or achieved a personal goal, Breaking: You turns your moment into a newspaper-worthy story. โœจ Features โ€ข Upload your own image โ€ข AI-generated headlines and articles โ€ข Multiple premium newspaper themes โ€ข Personalized front page layouts โ€ข Download and share your newspaper โ€ข No design skills required Every generation is unique, making your story feel like it belongs on the front page of a real publication. Because some achievements deserve more than a social media post. They deserve a headline. Try it - https://revise-chroma-23374184.figma.site ๐Ÿ”— Breaking: You "Become Tomorrow's Headline." #BuildInPublic #AI #WebDesign #FigmaMake #Newspaper #Storytelling #ProductDesign #Startup #SideProject
0
92
Cover image for Silent Bridge โ€” Communicate Beyond
Silent Bridge โ€” Communicate Beyond Words Silent Bridge is an accessibility-focused web application that helps people communicate using custom visual gestures and a camera.The idea is simple: instead of forcing people to learn a communication system, the system learns how people already communicate.Users can record a gesture, assign it a phrase, save it, and later perform the same gesture to instantly display and speak the saved message. Features โ€ข Real-time gesture recognition โ€ข Custom gesture teaching โ€ข Voice playback โ€ข Community gesture library โ€ข Responsive and accessible design Built With โ€ข Figma Make โ€ข MediaPipe Hands โ€ข Supabase Silent Bridge explores how thoughtful technology can remove communication barriers and create more inclusive experiences. ๐Ÿ”— Live Demo: https://brim-time-58435449.figma.site/
0
90
๐Ÿš€ ๐—•๐˜‚๐—ถ๐—น๐˜ ๐—ฆ๐—ถ๐—น๐—ฒ๐—ป๐˜ ๐—•๐—ฟ๐—ถ๐—ฑ๐—ด๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐˜๐—ต๐—ฒ #๐—–๐—ผ๐—ป๐—ณ๐—ถ๐—ด๐— ๐—ฎ๐—ธ๐—ฒ๐—ฎ๐˜๐—ต๐—ผ๐—ป What started as a simple idea became an experiment in accessibility and human-centered design. ๐—ง๐—ต๐—ฒ ๐—ฃ๐—ฟ๐—ผ๐—ฏ๐—น๐—ฒ๐—บ: Millions of people communicate through gestures every day, but most technology is built for voices, keyboards, and touchscreens. I wanted to explore a different question: "What if technology could learn how people already communicate?" That's how Silent Bridge was born. ๐Ÿ”— ๐—Ÿ๐—ถ๐˜ƒ๐—ฒ ๐——๐—ฒ๐—บ๐—ผ: https://brim-time-58435449.figma.site/ ๐Ÿ”— ๐—ฃ๐—ฟ๐—ผ๐—ท๐—ฒ๐—ฐ๐˜ ๐—™๐—ถ๐—ด๐—บ๐—ฎ: https://www.figma.com/make/iM1qFLT9aCnsIMZ1O3yGs2/Create-Prompt-Implementation?t=Z8cGLiYettIQWytm-1 ๐— ๐˜† ๐—ช๐—ผ๐—ฟ๐—ธ๐—ณ๐—น๐—ผ๐˜„ 1๏ธโƒฃ ๐—ฆ๐˜๐—ฎ๐—ฟ๐˜๐—ฒ๐—ฑ ๐—ถ๐—ป ๐—™๐—ถ๐—ด๐—บ๐—ฎ ๐— ๐—ฎ๐—ธ๐—ฒ I designed and generated the entire experience directly in Figma Make, focusing on accessibility, simplicity, and a premium user experience. 2๏ธโƒฃ ๐—•๐˜‚๐—ถ๐—น๐˜ ๐—ฎ ๐—–๐—ฎ๐—บ๐—ฒ๐—ฟ๐—ฎ-๐—•๐—ฎ๐˜€๐—ฒ๐—ฑ ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ Instead of traditional inputs, I wanted users to communicate through gestures using real-time camera tracking. 3๏ธโƒฃ ๐—œ๐—ป๐˜๐—ฒ๐—ด๐—ฟ๐—ฎ๐˜๐—ฒ๐—ฑ ๐— ๐—ฒ๐—ฑ๐—ถ๐—ฎ๐—ฃ๐—ถ๐—ฝ๐—ฒ ๐—›๐—ฎ๐—ป๐—ฑ๐˜€ MediaPipe tracks hand landmarks and understands gesture positions and movement patterns. 4๏ธโƒฃ ๐—–๐˜‚๐˜€๐˜๐—ผ๐—บ ๐—ฆ๐—ถ๐—ด๐—ป ๐—ง๐—ฒ๐—ฎ๐—ฐ๐—ต๐—ถ๐—ป๐—ด Users can: โ€ข Record a gesture โ€ข Assign a meaning โ€ข Save it The system learns and recognizes custom gestures. 5๏ธโƒฃ ๐—œ๐—ป๐˜๐—ฒ๐—ด๐—ฟ๐—ฎ๐˜๐—ฒ๐—ฑ ๐—ฆ๐˜‚๐—ฝ๐—ฎ๐—ฏ๐—ฎ๐˜€๐—ฒ Supabase stores: โ€ข Gesture recordings โ€ข Saved phrases โ€ข Recognition history 6๏ธโƒฃ ๐—–๐—ผ๐—บ๐—บ๐˜‚๐—ป๐—ถ๐˜๐˜† ๐—ฆ๐—ถ๐—ด๐—ป ๐—Ÿ๐—ถ๐—ฏ๐—ฟ๐—ฎ๐—ฟ๐˜† Users can build and share their own visual language instead of relying only on predefined gestures. ๐—œ๐—บ๐—ฝ๐—ผ๐—ฟ๐˜๐—ฎ๐—ป๐˜ ๐—ง๐—ฒ๐˜€๐˜๐—ถ๐—ป๐—ด ๐—ก๐—ผ๐˜๐—ฒ Before testing, clear existing custom gestures from the Teach page. For best results: โ€ข Open Teach Sign โ€ข Remove all test gestures โ€ข Record gesture โ€ข Assign phrase โ€ข Test recognition ๐—•๐˜‚๐—ถ๐—น๐˜ ๐—ช๐—ถ๐˜๐—ต โ€ข Figma Make - [ ๐—˜๐˜ƒ๐—ฒ๐—ป ๐— ๐—ฒ๐—ฑ๐—ถ๐—ฎ๐—ฃ๐—ถ๐—ฝ๐—ฒ ๐—ฎ๐—ป๐—ฑ ๐—ฆ๐˜‚๐—ฝ๐—ฎ๐—ฏ๐—ฎ๐˜€๐—ฒ ๐—ต๐—ฎ๐˜ƒ๐—ฒ ๐—ฏ๐—ฒ๐—ฒ๐—ป ๐—ฐ๐—ผ๐—ป๐—ป๐—ฒ๐—ฐ๐˜๐—ฒ๐—ฑ ๐˜‚๐˜€๐—ถ๐—ป๐—ด ๐—™๐—ถ๐—ด๐—บ๐—ฎ ๐— ๐—ฎ๐—ธ๐—ฒ ] โ€ข MediaPipe Hands โ€ข Supabase This project is not about AI. It's about accessibility. It's about allowing technology to adapt to people instead of forcing people to adapt to technology. Because every gesture has meaning. ๐—ฆ๐—ถ๐—น๐—ฒ๐—ป๐˜ ๐—•๐—ฟ๐—ถ๐—ฑ๐—ด๐—ฒ โ€” ๐—–๐—ผ๐—บ๐—บ๐˜‚๐—ป๐—ถ๐—ฐ๐—ฎ๐˜๐—ฒ ๐—•๐—ฒ๐˜†๐—ผ๐—ป๐—ฑ ๐—ช๐—ผ๐—ฟ๐—ฑ๐˜€. #๐—–๐—ผ๐—ป๐—ณ๐—ถ๐—ด๐— ๐—ฎ๐—ธ๐—ฒ๐—ฎ๐˜๐—ต๐—ผ๐—ป #๐—™๐—ถ๐—ด๐—บ๐—ฎ๐— ๐—ฎ๐—ธ๐—ฒ #๐—”๐—ฐ๐—ฐ๐—ฒ๐˜€๐˜€๐—ถ๐—ฏ๐—ถ๐—น๐—ถ๐˜๐˜† #๐— ๐—ฒ๐—ฑ๐—ถ๐—ฎ๐—ฃ๐—ถ๐—ฝ๐—ฒ #๐—ฆ๐˜‚๐—ฝ๐—ฎ๐—ฏ๐—ฎ๐˜€๐—ฒ #๐—•๐˜‚๐—ถ๐—น๐—ฑ๐—œ๐—ป๐—ฃ๐˜‚๐—ฏ๐—น๐—ถ๐—ฐ #๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐—™๐—ผ๐—ฟ๐—š๐—ผ๐—ผ๐—ฑ #๐—œ๐—ป๐—ป๐—ผ๐˜ƒ๐—ฎ๐˜๐—ถ๐—ผ๐—ป
40
88
4.2K
The Last Signal Live Links ๐ŸŒŒ Final Experience https://error-imtiaj.github.io/the-last-message/ (https://error-imtiaj.github.io/the-last-message/)๐Ÿ“‚ General Prototype / Stitch Project https://stitch.withgoogle.com/projects/14494830618225359 Project Overview The Last Signal is an immersive cinematic storytelling experience that imagines humanity's final transmission to the universe.Instead of building a traditional website with menus, dashboards, or complex navigation, I wanted to create an emotional journey that feels more like an interactive sci-fi film.The project combines cinematic transitions, motion systems, particle effects, immersive interactions, and narrative storytelling to create an experience that feels alive rather than static. What attracted me to The Last Signal was its emotional and visual potential. The concept immediately sparked my imagination because it combines mystery, hope, exploration, and humanity's desire to leave something meaningful behind. Workflow and How I Used Stitch Google Stitch was the core tool used throughout the project workflow. Step 1: Concept Development I started by designing a detailed creative prompt that described the complete storytelling experience, including: Six cinematic scenes Visual direction Motion design requirements Interactive behavior Navigation structure Transition effects The goal was to create a premium interactive experience that felt like a science-fiction movie. Step 2: Iteration with Stitch Using Stitch, I generated multiple design variations of the project. Instead of settling for the first result, I generated three different versions of the experience and compared their layouts, visual quality, animation concepts, and storytelling flow. This rapid iteration process allowed me to explore different creative directions within minutes. Step 3: Selecting the Best Version After reviewing the generated concepts, I selected the strongest version based on: Visual impact Storytelling flow Motion potential Overall user experience Consistency across all scenes The chosen version became the foundation for the final prototype. Step 4: Exporting to Google AI Studio To further refine the project, I used Stitch's export functionality and exported the selected design to Google AI Studio. This allowed me to move from a visual prototype into a fully realized implementation. Step 5: Building the Final Experience Inside Google AI Studio, the project was transformed into a complete Vite-based web application. This stage was used to: Refine animations Improve transitions Enhance visual polish Fine-tune interactions Create a production-quality experience The result was a much more immersive and polished version of the original Stitch concept. Step 6: Deployment After finalizing the Vite application, I deployed the project using GitHub Pages. The deployment process involved: Building the production version of the application Configuring GitHub Pages Publishing the final experience online This made the project publicly accessible and easy to share. The most impressive aspect of Stitch was the speed of exploration.Instead of spending hours creating multiple design concepts manually, I could rapidly generate, compare, and iterate on different directions. The ability to quickly move from idea to interactive prototype made the workflow significantly faster and more enjoyable. Final Thoughts The Last Signal demonstrates how Stitch can be used not only for product interfaces but also for storytelling experiences, interactive narratives, and experimental web design. The project showcases an end-to-end workflow, from concept generation and rapid iteration in Stitch to implementation in Google AI Studio and deployment as a live web experience. ๐ŸŒŒ โ€œThe Signal Continuesโ€
2
2
177