How to Create a Clickable Portfolio with Whimsical & Bubble

Whimsical bubble clickable portfolio

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:

  1. Create a Whimsical account – you can sign up with Google.

    Whimsical
  2. Once you’re logged in, go to “My Files” and create a new Board.

    Whimsical interface
  3. Add a new Mind Map to the board.

    Whimsical board
  4. 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.

    Whimsical mind map
  5. 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.

    Whimsical mindmap example
  6. Create a new Bubble app with a blank page.
  7. Add an HTML element to the page.
  8. Return to your Whimsical mindmap and lick on the “Share, Export & Print” button.

    Share button whimsical
  9. Click on “Embed”, enable the “Get Public Access” toggle and copy the code.
  10. Paste code into your HTML element in Bubble and click “Preview”.
  11. If everything’s gone right, you should see your interactive mind map in Bubble with working links.
whimsical bubble

Enjoyed this tutorial?

Subscribe to my channel and buy me a coffee!

Previous Bubble tutorials:

One thought on “How to Create a Clickable Portfolio with Whimsical & Bubble

Leave a Reply

Your email address will not be published. Required fields are marked *