Agency Portfolio Template

An agency portfolio has one job: get the next client to reach out. Every design decision in this template — the case study format, the trust signals, the contact form placement — is chosen to convert a visitor who landed from a referral or search into someone who hits Send on an enquiry.

Pages Included

• Home — hero with positioning statement, services overview, selected work grid, client logos, and contact CTA
• Work — masonry project grid with category filtering; each card links to its own case study detail page
• Case Study — structured narrative template: challenge, approach, outcome, metrics; duplicatable per project
• Services — individual service pages with description, deliverables list, process overview, and relevant project links
• About — team section with individual bios, agency story, values block, and press/awards logos
• Contact — enquiry form with project type, budget range, and timeline selectors; direct email fallback

What Makes It Convert

Most agency portfolios are beautiful and unconvincing. This template is structured around the questions a prospective client actually asks: Can you do my type of work? Have you done it before? Can I afford you? Who will I be working with? The layout sequence answers each in order.

• The hero headline is framed around client outcomes, not agency capabilities — "We build websites that win clients" beats "Full-service digital agency"
• Case studies lead with metrics first — the result before the story. Clients scan for proof before they read the narrative
• A client logo strip appears in the hero and again before the contact form — trust signals placed at both the top and the bottom of the decision journey
• The contact form asks for project type and budget range, not just a message — it pre-qualifies enquiries and signals that the agency values its time
• Services link to relevant case studies inline — a prospective client reading about branding should see your best branding work without having to navigate

Technical Setup

• React with Vite — fast development build, simple deployment to any static host or Vercel
• CSS custom properties for the full design token set — swap accent colour and typeface in one file
• All project data in /src/data/projects.js — add a new project by adding an object; the grid, filters, and case study page update automatically
• Framer Motion for entrance animations — all animations respect prefers-reduced-motion
• Contact form uses EmailJS by default — configure your public key and template ID in .env; no backend required

“We relaunched our agency site with this template in a single sprint. The case study structure forced us to write outcome-led narratives rather than project descriptions. Three of our last five enquiries mentioned a specific case study as the reason they reached out.”

— Founder, Independent Design Studio