Template guide — Emil Voss Portfolio

Version 1.0 / 2026

Make it yours.

in an afternoon.

Everything in this template is editable: the copy, the projects, the palette, the type. This guide covers the shortest path from the file you opened to a site you are happy to send to a client.

Read time — 6 minutes

01 — Quick start

Three steps to launch.

Do these in order

Open the project

Duplicate or remix the project into your workspace. Everything lives on the canvas — no code, no external assets. Fonts and icons are already installed.

Replace the content

Swap the copy page by page, then update the Projects collection in the CMS. The detail pages and work index rebuild themselves from those items.

Publish

Connect a domain, run the quick pre-flight checklist at the end of this guide, then publish. The form starts collecting enquiries immediately.

02 — Pages

What lives where.

Six routes, one layout

Home

Hero, marquee, selected work, approach, about preview, testimonial, recognition, contact call to action.

Work

/work

Project index with category tags, hover previews, client ticker, and a three-step process section.

About

/about

Studio story, biography, dark philosophy block, experience timeline, capabilities, recognition.

Contact

/contact

Working enquiry form with five fields, a submit component, studio details, socials, and FAQ.

Project detail

/work/:slug

CMS-driven case study: hero, summary, facts, brief, two-image gallery, quote, next project.

Guide

/guide

This page. Update it for your own template, or remove it from navigation before publishing.

03 — Content

The Projects collection.

14 fields, 6 items

Every case study is a row in the Projects collection. Open Content → Projects, duplicate an item, and fill in the fields. The Work index, the home page grid, and the detail page all read from the same place — update once and it appears everywhere.

The detail page uses the collection’s built-in Next and Previous variables, so the “Next project” block always points at the following item. Reorder items in the CMS panel to change the sequence.

Images are 1600 × 1200 px, JPG or WebP under 500 KB. Keep titles under 24 characters so the large serif headings stay on one or two lines.

Title

Text

Slug

Colour, type, rhythm.

Edit tokens once

Paper

#F4F1EA

Cream

#FBF9F4

Sand

#E7E1D3

Line

#D9D3C5

Muted

#6B655B

Ink

#15130F

Ink soft

#211E18

Ember

#C2492A

Display — Instrument Serif

The quick brown fox jumps over the lazy dog

Body — Inter

BRAND STRATEGY · IDENTITY · WEB DESIGN

Labels — Geist Mono

Body text runs at 16–18 px with 1.6–1.7 line height. Section padding is 112 px on desktop, 88 px on tablet, 64 px on phone. Every heading is a real H1–H3 for search and accessibility.

05 — Structure

One layout, three breakpoints.

1200 / 810 / 390

Nav & footer

Both live in one Layout Template, so a change to the menu or footer updates all five pages at once. Edit them once, not five times.

Breakpoints

Desktop starts at 1200 px, tablet from 810 px, phone below 810 px. Replica breakpoints only override what needs to change.

Components

The submit button is a component with five states — Default, Incomplete, Pending, Success and Error — so missing fields are flagged and a sent message shows a thank-you. Edit the labels inside the component.

06 — Before publishing

The pre-flight list.

Ten minutes

Replace the six CMS projects with your own

Required

Update the contact email, address, and social links

Required

Send a test enquiry through the contact form

Required

Swap the portrait and studio photography

Recommended

Add your legal pages and cookie notice

Recommended

Set the site title, description, and social image in Site settings

Recommended

Still stuck?

Write to the studio.

thethemex@gmail.com