Freelancer Profile with Reviews

Freelancer profile screen with cover photo, rating, skills chips, portfolio thumbnails, reviews with rating breakdown and a sticky Hire button that opens a hire request form.

Also known as: freelancer profile page, service provider profile ui, hire me profile screen, user profile with reviews, marketplace seller profile

Bootstrap 5 Mobile Profile Screens Responsive #app #freelancer #mobile #profile #responsive #reviews

Freelancer Profile with Reviews live demo

Open in new tab

Bootstrap 5 code (HTML, CSS, JS)

Beautify

An HTML mobile template for a freelancer profile screen with a cover photo, rating, skills chips, portfolio thumbnails, reviews with a rating breakdown and a sticky Hire button. Use this service provider profile UI in freelance marketplaces, agency apps and booking PWAs, or package it with Capacitor. Built with Bootstrap 5, Bootstrap Icons and Figtree in white and deep green. The photos come from Unsplash; replace them with your own images.

How it works

The root .flp-app is a centred app column (max 430 px). The .flp-cover photo carries back, share and save buttons; in .flp-head the avatar overlaps it, next to the rate pill, name, role, rating and three .flp-stats. Below follow the .flp-skills chips, the horizontal .flp-work portfolio row, the About text and the reviews section. The .flp-cta bar with Message and "Hire Elena" sticks to the bottom of the column.

The About text is clamped to three lines until "Read more" toggles .is-open and aria-expanded. A portfolio thumbnail copies its data-title, data-img and data-text into the Bootstrap offcanvas #flp-work-sheet and opens it. "Show more reviews" reveals the reviews marked hidden and moves focus to the first new one.

Message opens #flp-message, which requires at least 10 characters. Hire opens #flp-hire, a form with project type, budget (segmented radio buttons), start, details (20+ characters) and email. Invalid fields get is-invalid and aria-invalid and focus moves to the first one; a valid request shows the .flp-done confirmation.

Customization

--flp-green, --flp-green-2 and --flp-green-soft on .flp-app: the primary colour, hover shade and chip background.
--flp-star on .flp-app: the colour of the rating stars.
height: calc(164px + env(safe-area-inset-top)) on .flp-cover: makes the header photo taller or shorter.
-webkit-line-clamp: 3 on .flp-about: how many lines of About are visible before "Read more".
data-title, data-img and data-text on each .flp-work__item: the content of the portfolio sheet.
.flp-bar__fill--92 and the other width classes: set the rating breakdown bars to your own percentages.
The window.setTimeout in the hire form submit handler: replace it with a fetch() to your backend.

Use cases

Freelance marketplaces: a designer, developer or writer profile with a direct hire request
Home service apps: show a cleaner's or electrician's rating, reviews and work photos
Coaching and tutoring platforms: present skills and reviews before booking a session

Accessibility

Each section is labelled by its heading. Icon-only buttons have aria-label values, the verified badge and star ratings use role="img" with text labels, and the rating bars include hidden "stars:" text. Read more and Show more reviews use real buttons with aria-expanded where it applies. Sheets are offcanvas dialogs that trap focus, close with Escape or the backdrop, and return focus to the button that opened them. Form errors are linked with aria-describedby, and toasts use role="status".

Usage notes

Requires Bootstrap 5 (offcanvas) and Bootstrap Icons; Figtree is loaded from Google Fonts. The back button has no action; connect it to your router.

Freelancer Profile with Reviews at a glance

Framework: Bootstrap 5
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 5, Bootstrap Icons, fonts.googleapis.com
Layout: Mobile-first app screen, centred on wider screens
Category: Mobile Profile Screens
License: Free for personal and commercial use

Questions about this template

Can I use the Freelancer Profile with Reviews code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 5 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap">

Freelancer Profile with Reviews · Bootstrap 5 Mobile Profile Screens