Plan & Section

About this template

Plan & Section is a calm portfolio for a small architecture or interior practice of one to ten people. Projects are listed as a schedule (No., Project, Place, Type, Status, Year, Area). Every project page has a slider that compares the drawing with the photo, and an m² / ft² switch converts every area on the site.

Pages

Home: a large statement, an availability line with local time, a drawing / photo compare, featured projects as a schedule and studio numbers

Projects: the full schedule. Hover a row and its cover follows the cursor; on phones each row shows its photo

Project page (Projects CMS, 8 examples): facts sheet, drawing / photo compare, brief, approach, materials, 4-image gallery and More projects

Practice, Contact (copy email, phone, address, enquiry form) and 404; desktop, tablet and phone; SEO set up

Components

CutCompare: drag, click or use the arrow keys to move the line. On phones a vertical swipe still scrolls. Labels, aspect, start, focal point, colours and an intro sweep are controls

UnitSwitch + Area: enter m² once; the switch shows ft² (× 10.7639, rounded) on every page and later pages remember it

Hover cover, LocalTime, CopyEmail and a status dot

Good to know

The line drawings in the demo were traced by script from the stock photos. They are placeholders: replace them with your own plans, sections or sketches.

The selects in the contact form open on a soft default ("Not sure yet" or "Just exploring"), so a visitor can send the form without picking one. The fields don't set autocomplete attributes.

More projects on a project page shows the first three projects in list order, without the one you're on. It doesn't pick related projects.

The phone link on /contact has a fixed width at each breakpoint. If you change the number or text, resize the link at each breakpoint.

Areas are entered in m² only. ft² is calculated from them.

The practice, people, clients and projects are made up. Photos are from Unsplash.