Agency and Portfolio Template

Show work, not adjectives

Agency visitors decide in seconds whether your work looks right for them. This template opens with a confident headline, a few numbers, and a grid of projects, then explains your services and process. Edit it so the first thing people see is your strongest project.

Make it yours

1. Identity. Replace "north/studio" in the header and footer. A short wordmark in plain text works well, or insert your logo as an inline SVG.
2. Headline. Describe who you help and what you do in one sentence. Specific beats clever.
3. Projects. Cards have an image, title, short description and category. Use screenshots or photos at the same aspect ratio so the grid stays tidy. Duplicate a card to add more.
4. Services. Keep four or fewer. Write what the client receives, not the tools you use.
5. Process. The four-step process reassures new clients. Make the steps match how you actually work.

Contact and enquiries

The form asks for a name, email, company, budget and project details. Connect it to your email service by setting the form action, and remove the onsubmit attribute that blocks submission in the template. Ask for a budget range; it saves time on both sides.

Colour and type

The lime accent and dark background are set by variables in src/input.css. Change them, then rebuild the stylesheet: npx @tailwindcss/cli -i src/input.css -o assets/tailwind.css --minify. Switching to a light look means changing the background and text classes on the body and sections.

Make it fast and findable

Compress project images, write a unique title and description for each page, and add alt text that describes the work. Add case study pages over time; they are the most persuasive content you can publish. For a custom portfolio with a content management system, DEV3 can extend this design.