About Plan & Section
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.
