Imagination Portfolio
Project Links
Live Website: Website (https://imagination-portofolio.vercel.app/)
Project Workflow / Development Process: Google Stitch (https://stitch.withgoogle.com/projects/4880178036417087086)
X Post: X/Twitter (https://x.com/GhanesaPermana/status/2061761200250335491?s=20)
Short Description
Imagination Portfolio is an interactive portfolio website designed to showcase creativity through visual storytelling, motion, and immersive design.
The project consists of four main pages:
Home
About Me
Social
Gallery
Rather than creating a traditional portfolio, I wanted the website itself to become part of the creative experience. Each page uses custom visuals, animations, motion effects, and interactive elements to make the portfolio feel alive while maintaining a consistent visual identity throughout the project.
How I Used Stitch
I started by connecting to the Stitch MCP feature and creating the four core pages of the portfolio: Home, About Me, Social, and Gallery.
Using MCP, I imported a custom design.md (http://design.md) file into each page to establish the overall structure, visual direction, and content requirements. From there, I iterated directly within Stitch Canvas, using both Stitch and MCP together throughout the development process.
The workflow included:
Importing design specifications through MCP
Generating layouts and page structures
Creating and refining visual assets
Adding custom backgrounds and environmental elements
Iterating through prompt-based edits
Refining page layouts and visual consistency
Implementing animations and motion effects
Enhancing interactions directly inside the canvas
Everything was built and refined through Stitch Canvas and MCP until the final experience was complete.
Advanced Motion & Interactive Features
To make the portfolio feel alive, I incorporated:
Animated page transitions
Motion-based visual effects
Interactive hover behaviors
Dynamic visual elements
Custom animated backgrounds
Smooth scrolling and section reveals
These features helped transform the portfolio from a static website into a more engaging and immersive experience.
Feedback on Stitch
My overall experience with Stitch was very positive.
The combination of Stitch Canvas and MCP creates a powerful workflow that makes it possible to move from an idea to a polished interactive experience much faster than traditional methods. The ability to generate, edit, iterate, and refine directly within the canvas significantly improves the creative process.
The only challenge I encountered was during the export and deployment stage. For more complex projects, it can be difficult to ensure that everything generated within the canvas works exactly the same once the project is made live.
One improvement I would love to see is the ability for Stitch to automatically generate and organize a complete project structure during export, such as creating separate HTML files and a more organized folder structure. This would make deployment smoother and help ensure that all generated features continue working correctly after going live.
Overall, Stitch combined with MCP feels incredibly close to a complete end-to-end creative workflow and has been one of the most enjoyable AI-assisted design experiences I have used.
1
4
198