Portfolio
An interactive horizontal portfolio with bold typography, distinct project cards, detailed fictional case studies, working principles and a simple contact path.
Best for
product designers, interaction designers, independent developers, creative technology portfolios
Start with this visual direction, then adapt the content to your business in the builder.
Use this templateOne HTML file that opens in any browser. No sign-up, no credits.
Page flow
A typographic introduction makes the designer's point of view immediate. Selected projects then move horizontally through distinct case-study entry points, followed by working principles, short notes and a deliberately simple contact path.
What it communicates
The portfolio puts judgement and interaction thinking ahead of decoration. It communicates a clear specialism, gives each project room to stand apart and makes it easy for a potential client or employer to continue the conversation.
How to adapt it
What to bring
The template sets the visual direction. Your own business details, brand, images and proof supply the content.
Reviewers look for how you reached a design as well as the finished screens. Show a small number of projects, each with the problem, your role, the constraints and what changed as a result. Add a short statement of your specialism and an easy way to contact you. This template gives each project its own card in a horizontal gallery, followed by principles and a simple contact path.
Three to five strong projects is usually enough. Hiring managers and clients tend to skim, so a few detailed case studies give a clearer picture of your judgement than many thumbnails. The horizontal gallery in this template works best with that range. If you have fewer than three client projects, add a self-initiated project and label it as one.
Yes, if your work benefits from being shown project by project. Developers can use the case-study cards for technical builds and link to repositories or live demos; illustrators can lean on larger images and shorter descriptions. Rewrite the typographic introduction and design principles in your own voice so the page reflects your practice rather than the sample designer's.
