How to Create a Clickable Portfolio with Whimsical & Bubble

Disclaimer: This article contains affiliate links. I may earn a small commission if you purchase something through my website.

In this Bubble tutorial, I’ll look at how you can use Bubble with Whimsical design tool to create a clickable portfolio.

Watch the tutorial below or scroll down to the text version!

Whimsical is a great tool for content and projects like whiteboards, mindmaps, flipcharts, and the like.

If your project made in Whimsical has clickable content, you can incorporate it into a Bubble app. With Whimsical, you can create a clickable social media card, a content map, or a personal portfolio, as I did in this tutorial.

This is how you can use Whimsical and Bubble to create a clickable portfolio to showcase your projects:

Create a Whimsical account – you can sign up with Google.
Once you’re logged in, go to “My Files” and create a new Board.
Add a new Mind Map to the board.
In the central node of the Mind Map, type in the name of your portfolio or website. Then click “Add Link” on the menu next to the node and type in the URL.
Add as many additional nodes as you like by clicking on the little round buttons around the nodes and add links and icons. For example, I added links to my Twitter and other social media profiles. You can add as many links as you want, ,- to your GitHub, to your LinkedIn newsletter, you name it.
Create a new Bubble app with a blank page.
Add an HTML element to the page.
Return to your Whimsical mindmap and lick on the “Share, Export & Print” button.
Click on “Embed”, enable the “Get Public Access” toggle and copy the code.
Paste code into your HTML element in Bubble and click “Preview”.
If everything’s gone right, you should see your interactive mind map in Bubble with working links.