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.
Prerequisites
- A Bubble account
- Project images and descriptions ready
- Basic understanding of the Design tab and Data Types
Step-by-step guide
Create the portfolio data model
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.
Build the hero and about sections
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.
Create the project showcase grid
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.
Build the project detail page
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.
Add a contact form with email
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 working example
1PORTFOLIO SITE — ARCHITECTURE2===============================34DATA TYPES:5 Project: title, description, short_description, cover_image,6 images (list), tags (list), url, order7 ContactMessage: name, email, message, date89OPTION SET: Skill10 Options: Design (90), Development (85), Strategy (75)11 Attribute: level (number)1213PAGES:14 index — Hero, About, Skills, Project Grid, Contact15 project — Individual project detail with gallery1617WORKFLOWS:18 Submit Contact: Send email + Create ContactMessage19 View Project: Navigate to project page with IDCommon mistakes when designing a portfolio site in Bubble
Why it's a problem: Not optimizing images before uploading
How to avoid: Compress all images to under 300KB before uploading. Use JPEG for photos and PNG for graphics with transparency.
Why it's a problem: Hardcoding project content instead of using the database
How to avoid: Store all projects in a Project data type and display dynamically using Repeating Groups.
Why it's a problem: Not making the portfolio responsive
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a professional portfolio website in Bubble.io with a project showcase, about section, skills visualization, and contact form. Can you design the page layout and data model?
Build a portfolio website with a hero section, about me with skills bars, a project showcase grid with hover effects, project detail pages, and a contact form that sends emails.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation