How to design a portfolio site in Bubble

The simplest way to design a portfolio site in Bubble is to create a clean single-page layout with reusable components (like a header and footer), store your projects in the database as a Project data type, and display them using a Repeating Group. You design visually using Groups and Text elements, then make everything responsive using the Responsive editor.

Core Structure

A solid portfolio in Bubble is usually a single page with sections: Hero, About, Projects, and Contact. Each section is just a Group stacked vertically. The header can be a Reusable Element so you don’t rebuild it later.

• Use a Column layout on the main page container so sections align naturally.
• Create a Shared Header reusable element for navigation links (scroll to section actions).
• Set the page width to a reasonable max (like 1200px) inside the Layout tab.

Database Setup

You only need one data type for the projects:

• Project with fields: title (text), description (text), image (image), url (text).

This lets you add new portfolio items without touching the design.

Displaying Projects

Use a Repeating Group to auto-load your projects.

• Set the Repeating Group’s Type of content to Project.
• Set Data source to “Do a search for Projects”.
• Inside each cell, place an Image element and Text elements bound to Current cell's Project.

// Example Bubble expression inside a text element
Current cell's Project.title

Responsive Setup

In the Responsive tab, make each section’s Group width “Align to parent” so it stretches across the page. Set images to “Keep element ratio” so they resize cleanly. Test at mobile width and adjust spacing with gap values instead of manual margins.

Polish and Interactions

• Add a scroll-to action on nav buttons (Workflow → Element → Scroll to).
• Add a Contact form using standard Input elements and a workflow that creates a new “Message” thing.
• Use conditional formatting to change colors on hover for a professional feel.