A UX and product designer portfolio HTML template for freelance and job-seeking UX, UI and product designers. It is built with HTML5, Bootstrap 5 and plain JavaScript, and shows the work the way hiring teams judge a designer: the same screen from wireframe to shipped, a measured result on every case study, the process behind it and a full case study page.

Wirelo opens straight from the folder with no build step. Its signature is the before / after wipe: drag a line across a screen to see it go from grey wireframe to the final design. It runs in the hero, on a phone redesign and on the case study, and the case cards wipe from wireframe to shipped on hover.

Key Features

• HTML5 + Bootstrap 5: semantic markup with Bootstrap utility classes for layout
• 4 Pages: the portfolio home plus a full case study, an article and a 404 page
• 12 Home Sections: header, hero, selected work, before / after, process, about, services, tools, experience, testimonials, writing and contact
• Before / After Wipe: drag, touch or use the arrow keys to compare two versions of a screen
• Wireframe to Final Hero: a booking screen drawn in HTML, wiped from wireframe to shipped
• Case Studies with Results: client, role, team, time and one result figure on every card
• Full Case Study Page: problem, research notes, insight, wireframe to final and results with baselines
• Services with Prices: three ways to work together, each with a starting price and length
• Résumé Download: a PDF résumé linked from About
• Contact Form: seven fields, inline validation and a confirmation, no layout shift
• Section Highlight: the menu marks the section in view while scrolling
• Original Case-Study Artwork: product screens made for this template, included in the download
• CSS Design Tokens: colors, type scale, spacing and radius set once
• Local Fonts: Hanken Grotesk and Azeret Mono, no CDN requests
• Works Offline: opens from the file system, no build tools or server
• W3C Valid HTML: every page checked with the Nu HTML Checker
• No jQuery: plain, unminified JavaScript
• Documentation Included: installation, structure, colors, images, the wipe, the artwork and the form

Ideal For

• UX designers and UI designers
• Product designers and design leads
• Freelance and independent designers
• Designers looking for a new role
• Interaction and app designers

Pages Included

Credits

• Framework: Bootstrap 5 (https://getbootstrap.com)
• Fonts: Hanken Grotesk and Azeret Mono, OFL licensed, served locally
• Icons and graphics: inline SVG and CSS
• Case-study artwork: original illustrations made for this template, included
• Photographs: placeholder images only. Photos are not included in the download.

Images Notice

The portraits, testimonial faces and article photos shown in the live preview and screenshots are preview content only and are not included in the download. The package ships placeholder images in their place, each with the same filename and size, so you can drop your own photos in with no code changes.

Requirements and Limitations

• A static HTML template, not a WordPress product. Basic knowledge of HTML and CSS is enough to customize it.
• The contact form validates in the browser but does not send email. Connect it to your own form handler before going live.