# How to design a portfolio site in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans (custom domain requires paid plan)
- Last updated: March 2026

## TL;DR

Design a professional portfolio website in Bubble with a project showcase, about section, skills display, contact form, and custom domain. This tutorial covers building an impressive portfolio using Bubble's visual editor with database-driven project cards, smooth animations, and a responsive layout that works on all devices.

## Overview: Portfolio Websites in Bubble

A portfolio website showcases your work, skills, and experience. Bubble makes it easy to build a dynamic, database-driven portfolio that you can update without touching code. This tutorial builds a complete portfolio site suitable for designers, developers, freelancers, and founders.

## Before you start

- A Bubble account
- Project images and descriptions ready
- Basic understanding of the Design tab and Data Types

## Step-by-step guide

### 1. Create the portfolio data model

Create a 'Project' Data Type with fields: title (text), description (text), short_description (text), cover_image (image), images (list of image), tags (list of text), url (text — link to live project), order (number). Create a 'Skill' Option Set with options representing your skills (e.g., Design, Development, Strategy) with a 'level' attribute (1-100).

**Expected result:** Project data type and Skill option set are created.

### 2. Build the hero and about sections

On your index page, create a hero section with your name, title, and a brief tagline in large text. Below, add an about section with your photo, bio text, and a skills bar chart. For skills, use a Repeating Group of your Skill options. In each cell, display the skill name and a Group styled as a progress bar with width set to the skill's level percentage.

**Expected result:** A hero section and about section with visual skill bars are displayed.

### 3. Create the project showcase grid

Add a section with a Repeating Group (3-column grid) showing all Projects sorted by order. Each card displays cover_image, title, short_description, and tags as badges. Add a hover effect using conditional formatting: When This Group is hovered → show an overlay with 'View Project' text. Clicking navigates to the project detail page.

**Expected result:** A responsive grid of project cards with hover effects.

### 4. Build the project detail page

Create a 'project' page that receives a Project ID via URL parameter. Display the full title, description, all images in a gallery or slideshow, tags, and a link to the live project URL. Add Previous/Next navigation to browse between projects.

**Expected result:** Individual project pages show full details with image galleries.

### 5. Add a contact form with email

Add a contact section with inputs for name, email, and message. The Submit button workflow: Send email → To: your email, Subject: 'Portfolio Contact from ' + name input, Body: message input + sender email. Show a success message and clear the form. Add reCAPTCHA to prevent spam.

> Pro tip: Store contact submissions in a ContactMessage data type as a backup in case emails fail.

**Expected result:** Visitors can send you messages through a contact form.

## Complete code example

File: `Workflow summary`

```text
PORTFOLIO SITE — ARCHITECTURE
===============================

DATA TYPES:
  Project: title, description, short_description, cover_image,
           images (list), tags (list), url, order
  ContactMessage: name, email, message, date

OPTION SET: Skill
  Options: Design (90), Development (85), Strategy (75)
  Attribute: level (number)

PAGES:
  index — Hero, About, Skills, Project Grid, Contact
  project — Individual project detail with gallery

WORKFLOWS:
  Submit Contact: Send email + Create ContactMessage
  View Project: Navigate to project page with ID
```

## Common mistakes

- **Not optimizing images before uploading** — Large images slow page load significantly on portfolio sites Fix: Compress all images to under 300KB before uploading. Use JPEG for photos and PNG for graphics with transparency.
- **Hardcoding project content instead of using the database** — Every update requires editing the page instead of just updating a record Fix: Store all projects in a Project data type and display dynamically using Repeating Groups.
- **Not making the portfolio responsive** — Many portfolio viewers are on mobile devices Fix: Test at all breakpoints and ensure the grid collapses to 1-2 columns on mobile

## Best practices

- Store projects in a database for easy updates without editing the page
- Compress all images before uploading for fast page loads
- Make the site fully responsive for mobile portfolio viewing
- Add SEO meta tags on every page for search visibility
- Use a custom domain for professional credibility
- Keep the design clean with consistent typography and spacing

## Frequently asked questions

### Can I use a custom domain?

Yes. Custom domains are available on paid Bubble plans. Go to Settings → Domain/email to configure your domain with DNS records.

### How do I add project filtering by category?

Add category buttons above the grid. Use a custom state for selected category and filter the Repeating Group search with a category constraint.

### Can I add animations to the portfolio?

Yes. Use Bubble's built-in transitions or add CSS animations via an HTML element for scroll-triggered effects.

### How do I make the portfolio SEO-friendly?

Set custom meta titles and descriptions in Settings. Use descriptive slugs for project pages. Add alt text to all images.

### Can I password-protect certain projects?

Yes. Add a 'is_private' field to Project and require a password or login before showing private project details.

### Can RapidDev build a custom portfolio site?

Yes. RapidDev designs and builds polished portfolio websites with custom animations, CMS integration, and advanced interactive features.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/design-a-professional-portfolio-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/design-a-professional-portfolio-in-bubble