Portfolios

What is a portfolio page?

A portfolio page presents a person's or an agency's work: selected projects, a short introduction, skills or services and a way to get in touch. Designers, developers, photographers, writers and studios use portfolio templates to show case studies and images in a way that reflects their own style. Common layouts include a project grid, a masonry gallery, a list of case studies and a one-page personal portfolio with about and contact sections.

Best practices for portfolio pages

• Lead with a clear statement of who you are and what you do, then show your best work immediately.
• Show fewer, stronger projects; each one should have a title, a short description, your role and the result.
• Use consistent thumbnail ratios so the project grid looks calm and organised.
• Add filters by category only if you have enough projects to make them useful.
• Make the contact section easy to find, with an email address, a form or links to profiles.
• Optimise images: modern formats, correct sizes and lazy loading keep an image-heavy page fast.

Accessibility

Every project image needs meaningful alt text or an empty alt if a caption already describes it. Hover-only effects must also work on focus and on touch screens, so do not hide project titles until hover. Lightboxes should trap focus, close with Escape and return focus to the trigger. Respect prefers-reduced-motion for scroll and reveal animations.

Framework versions

Each portfolio template includes a live preview, code tabs, a copy button and a download. Bootstrap 6 versions use the new alpha with theme-* colour roles and <dialog>-based components where a modal is used, Bootstrap 5 versions use the grid and cards, and Tailwind CSS and pure CSS versions offer a minimal base for custom styling. Filter by framework, copy the HTML and CSS and replace the sample projects with your own work.