ATLAS
Portfolio & Showcase

Contractor flow for managing portfolio projects, certifications, service areas, and public profile sharing

1 Portfolio Grid
2 Project Detail
3 Add Project (Step 1)
4 Add Project (Step 2)
5 Add Project (Step 3)
6 Before/After Editor
7 Public Profile Preview
8 Certifications & Badges
9 Service Area Map
10 Share & Promote
1 Portfolio & Detail
2 Create & Edit
3 Public Profile & Promotion
1 Portfolio Manager
2 Public Profile & Sharing
Section 1: Portfolio Management
Portfolio Grid
9:41
My Portfolio
12
Projects
8
B/A Pairs
47
Reviews
4.9
Rating
All
Kitchen
Bathroom
Roofing
Exterior
Plumbing
HVAC
12 projects Recent
B/A

Modern Kitchen Remodel

Kitchen

Master Bath Renovation

Bathroom
B/A

Roof Replacement 2024

Roofing

Deck & Patio Build

Exterior
Portfolio Score: 85%
Add 2 more projects with B/A photos to reach Elite status.

PortfolioGridScreen — KPI strip + category carousel above masonry grid. usePortfolio(contractorId) fetches all projects.

Project Detail
9:41
Project Details
Modern Kitchen Remodel
Kitchen
Akron, OH
Description

Complete gut renovation of a 1960s galley kitchen into a modern open-concept space. Custom shaker cabinets, quartz countertops, and a tile backsplash.

Before & After
Side by Side
Slider
Before
After
Materials Used
Quartz Countertop Shaker Cabinets Subway Tile LVP Flooring LED Recessed
$18K–$25K
Cost Range
3–4 Weeks
Duration
Client Review

They transformed our outdated kitchen into something we see in magazines. Professional, on time, and the quality is outstanding.

— Sarah M., Akron
Pro Tip
Adding a cost range helps homeowners compare bids more accurately.

ProjectDetailScreen — hero image, B/A carousel with toggle modes, detail-stats for cost/duration. useQuery(api.portfolio.getProject, { projectId })

Section 2: Project Creation
Add Project (Step 1 of 3)
9:41
Add Project
Project Info

Tell homeowners about this project. Include key details that showcase your work.

Kitchen
Bathroom
Roofing
Exterior
Plumbing
Electrical
HVAC
Flooring
Min 50 characters. Be specific about what you did.
Info
Detailed project descriptions help homeowners understand the scope and value of your work.
Next: Photos

AddProjectScreen — multi-step wizard (3 steps). Category chips use flexWrap. useMutation(api.portfolio.createProject)

Add Project (Step 2 of 3)
9:41
Add Project
Photos

Upload before and after photos to showcase your transformation.

Before Photos
After Photos
Upload at least 1 after photo. Up to 10 photos per set.
Cover Photo

Select which after photo appears as the project thumbnail.

Pro Tip
Take before and after photos from the same angle and in similar lighting.
Next: Details

AddProjectPhotosStep — before/after upload grids with removable thumbnails. Cover photo selector.

Add Project (Step 3 of 3)
9:41
Add Project
Materials & Cost

Add materials used and project cost range to help homeowners understand your work.

Quartz Shaker Cabinets Subway Tile
–
Approximate range. Helps homeowners set expectations.
1–3 Days
1 Week
2–4 Weeks
1–2 Months
3+ Months
Include the client's first name and city.
Testimonials increase trust by 35%
Publish Project
Save as Draft

AddProjectDetailsStep — materials tag input, cost range dual fields, duration chips. useMutation(api.portfolio.createProject)

Section 3: Before/After Editing
Before/After Editor
9:41
Edit Comparison
Side by Side
Slider
Before
After
Crop
Rotate
Adjust
Flip
Photo Order
Pair 1 — Kitchen Overview
Pair 2 — Countertop Detail
Pair 3 — Cabinet Closeup
Editing Tips
Crop to the same dimensions and use captions to tell the transformation story.

BeforeAfterEditor — side-by-side/slider toggle, crop & adjust tools, caption inputs, drag-to-reorder pairs. onSave callback to parent wizard

Section 4: Public Profile Preview
Public Profile Preview
9:41
JR

JR Construction LLC

Akron, OH • 15mi radius
4.9
47
Jobs Done
3yr
On 3bids
Verified
Insured
Top Rated
Background Checked
Identity & criminal verified Jan 2026
Verified
Licensed & Insured
OH-GC-2024-88412 • $1M liability
Verified
Fast Responder
Replies within 2 hours on average
Top 10%
Summit & Cuyahoga Counties
Top Projects
View All
Kitchen Remodel

$18K–$25K

Bath Reno

$8K–$12K

Roof Replace

$10K–$15K

Ready to Start Your Project?

Get a free estimate from JR Construction.

PublicProfileScreen — hero-stats trio, trust bar with response time, top 3 portfolio, CTA. useQuery(api.portfolio.getPublicProfile, { contractorId })

Certifications & Badges
9:41
Certifications
Earned Badges
Verified
Active
Insured
Active
Top Rated
Active
Fast Response
85% — Need 90%
Progress
3 of 4 badges earned — you're almost fully verified!
License & Documents
Add
General Contractor License

OH-GC-2024-88412 • Exp: Dec 2026

Verified
Liability Insurance

Policy #INS-334821 • Exp: Mar 2026

Verified
OSHA 30-Hour Cert

Uploaded Jan 15, 2026

Pending
EPA Lead-Safe Cert

Expired Nov 2025

Expired
Attention
EPA Lead-Safe Cert expired. Upload a renewed copy to restore your compliance score.
Upload Document
PDF, JPG, or PNG up to 10MB

CertificationsScreen — badge-grid tiles, cert rows with status, warning tipcard for expired. useQuery(api.portfolio.getCertifications) + useMutation(api.portfolio.uploadCert)

Section 5: Service Area & Sharing
Service Area Map
9:41
Service Area
Service radius overlay
Max Travel Distance 30 miles
Service Zip Codes
Add
44301
44302
44303
44304
44305
44306
44310
44311
44312
44313
44314
44320
Area Statistics
284K
Population
$4,200
Avg Job Value
12
Active Jobs
Info
Expanding your radius by 10 miles adds approximately 8 more active jobs to your pipeline.
Save Service Area

ServiceAreaScreen — map with radius overlay, zip code manager, stat-row area stats, info tipcard. useMutation(api.portfolio.updateServiceArea)

Share & Promote
9:41
Share Profile
Portfolio Link
QR Code
Scan to view
Download QR
Share On
Embed Code
<iframe src="app.3bids.io/embed/jr-construction" width="100%" height="600"></iframe>
Add this to your website to show your 3bids portfolio.
Business Card Preview
JR Construction LLC
Kitchen • Bath • Roofing
app.3bids.io/pro/jr-construction
Order Business Cards
Conversion Insight
Contractors who share on 2+ platforms get 60% more bid requests.

SharePromoteScreen — shareable link, QR code, social buttons, embed code, biz card mockup, conversion tipcard. useQuery(api.portfolio.getShareableProfile)

Portfolio & Detail
Portfolio & Detail
9:41
Portfolio & Detail
Items
Item Alpha
Updated 2h ago
Active
Item Beta
Updated 5h ago
Pending
Item Gamma
Updated 1d ago
Review
Preview
Project Preview
Detailed view with all project information, photos, and metadata.
Overview
247
Total
+18%
Growth
Preview
Project Preview
Detailed view with all project information, photos, and metadata.
Media
Drag & drop or tap to upload
Create & Edit
Create & Edit
9:41
Create & Edit
Details
Title
Sample entry
Description
Enter description...
Preview
Project Preview
Detailed view with all project information, photos, and metadata.
Media
Drag & drop or tap to upload
Details
Title
Sample entry
Description
Enter description...
Preview
Project Preview
Detailed view with all project information, photos, and metadata.
Media
Drag & drop or tap to upload
Public Profile & Promotion
Public Profile & Promotion
9:41
Public Profile & Promotion
Details
Title
Sample entry
Description
Enter description...
Preview
Project Preview
Detailed view with all project information, photos, and metadata.
Tools
Share your profile or scan to preview
Portfolio Manager
Portfolio Manager
https://app.3bids.io/contractor/portfolio
3Bids
Main
Portfolio ⌘1
Add Project ⌘2
Before/After ⌘3
Public View ⌘4
Certifications ⌘5
Service Area ⌘6
Share ⌘7
MK
Mike Kowalski
Contractor
Settings ⌘,

Portfolio Manager

1,247
Total
+23%
Growth
89%
Rate
$42K
Revenue
Recent Activity
Item updated
2 minutes ago
Task completed
15 minutes ago
New notification
1 hour ago
Performance
Public Profile & Sharing
Public Profile & Sharing
https://app.3bids.io/contractor/portfolio
3Bids
Main
Portfolio ⌘1
Add Project ⌘2
Before/After ⌘3
Public View ⌘4
Certifications ⌘5
Service Area ⌘6
Share ⌘7
MK
Mike Kowalski
Contractor
Settings ⌘,

Public Profile & Sharing

1,247
Total
+23%
Growth
89%
Rate
$42K
Revenue
Recent Activity
Item updated
2 minutes ago
Task completed
15 minutes ago
New notification
1 hour ago
Performance

Data Architecture

Schema Tables

  • contractorProfile — business name, avatar, bio, service area
  • portfolioProjects — title, category, description, photos, materials, cost range, duration, testimonial, coverPhotoId, status
  • portfolioPhotos — projectId, storageId, type (before/after/cover), caption, order
  • certifications — contractorId, type, licenseNumber, expirationDate, documentStorageId, verificationStatus (verified/pending/expired)
  • serviceAreas — contractorId, zipCodes[], maxTravelDistance, radiusCenter (lat/lng)
  • contractorBadges — contractorId, badgeType (verified/insured/topRated/fastResponse), earnedAt, active

Convex Functions

  • api.portfolio.listProjects — query by contractorId, optional category filter
  • api.portfolio.getProject — single project with photos & testimonial
  • api.portfolio.createProject — mutation, multi-step (info → photos → details)
  • api.portfolio.updateProject — mutation, partial update
  • api.portfolio.deleteProject — soft delete with archival
  • api.portfolio.getCertifications — query all certs for contractor
  • api.portfolio.uploadCert — mutation, file upload + verification trigger
  • api.portfolio.updateServiceArea — mutation, zip codes + travel distance
  • api.portfolio.getPublicProfile — public query for homeowner-facing view
  • api.portfolio.getShareableProfile — generates share link & QR payload

React Hooks

  • usePortfolio(contractorId) — portfolio grid data + filter state
  • useProjectDetail(projectId) — single project with B/A photo pairs
  • usePhotoUpload() — handles image picker, compression, Convex storage
  • useBeforeAfterEditor() — crop, rotate, caption state management
  • usePublicProfile(contractorId) — public-facing aggregated profile
  • useCertifications() — cert list + upload + verification polling
  • useServiceArea() — zip codes, radius, map region state
  • useShareProfile() — share link generation, QR code, social intents

Components

  • PortfolioGrid — masonry layout with KPI strip + category carousel
  • ProjectCard — cover photo, title, category badge, B/A indicator
  • BeforeAfterViewer — side-by-side + slider modes with captions
  • PhotoUploadGrid — grid with add/remove, max count limit
  • MaterialTag — tag input with auto-complete suggestions
  • CertificationCard — cert row with status badge (verified/pending/expired)
  • BadgeGrid — 2x2 badge tiles with earned/progress states
  • TrustBar — aggregated trust metrics (rating, jobs, response)
  • KPIStrip — horizontal stat row (projects, B/A pairs, reviews, rating)
  • ServiceAreaMap — Leaflet map with radius overlay (SSR-safe lazy load)
  • ShareLinkBox — copy-to-clipboard link display
  • QRCodeDisplay — generated QR with download option
  • SocialShareGrid — platform-specific share intents
  • BusinessCardPreview — mockup with QR + branding