The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
For this Wonder challenge, I wanted to see how far I could push the idea of designing and building as one continuous creative process.
I created an interactive portfolio that feels more like an immersive digital experience than a traditional website. It features expressive typography, custom animations, geometric layouts, smooth transitions, and a 3D project showcase that responds to scrolling and interaction.
My workflow:
✨ Started with ideas and visual exploration in Wonder
💬 Used Wonder Chat to refine layouts, motion, and interactions
🎨 Built the complete interface inside Wonder
⚡ Used MCP to transform the design into a production-ready website
🚀 Finished by polishing animations, responsiveness, and performance
The biggest takeaway was how seamlessly I could move from concept to implementation. Instead of redesigning everything during development, I stayed in a single creative flow from the first idea to the final product.
Huge thanks to the Wonder team for hosting this challenge. It was a fun opportunity to experiment with a new workflow and build something I'm genuinely proud of.
wonder file :wonder file
Link : https://portfolio-five-pearl-qr6a7aufdo.vercel.app/
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Challenges
View all
Related posts
Do you ever try breaking the site you're interacting with?
I'm always thinking "what will people try to do" and then coming up with a solution for it. If I saw a card like this I'd try to pick it up. Then once I discovered it was draggable, I'd try seeing what happens if I throw it outside the browser.
What do you think?
Hot design
Exploring geometry beyond familiar dimensions.
Procedural motion, transformation and structure.
Wireframe only and it still reads as motion, that says the structure itself is the story here. Procedural geometry that breathes like this is way harder than it looks.
i’ve spent years designing websites with whatever tools were available
now i’m slowly getting used to the fact that i can also make the tool
for this project i wanted to explore more directions for the brand
collecting references or creating each direction from scratch would already become a project of its own
so i built a small generator and started playing with it
each output gives me something to react to
keep this
change that
try one more
and then one combination suddenly feels like a direction worth following
it’s still rough and i keep finding small things to fix
but honestly this is the part i’m enjoying most
doing the design and building the tool that helps me explore different visual languages at the same time
Making the tool instead of just using it is such an underrated superpower for designers. Once you can generate directions to react to, exploration stops feeling precious and starts being fun. This is the good kind of lazy.