Sheaf Construction Ltd

Sheaf Construction Ltd of Handsworth, Sheffield, fits out and refurbishes pubs, bars, restaurants and hotels as principal contractor: building and joinery, mechanical and electrical, decorations and fixed furniture. A pub owner or a restaurant's project manager comes with one question: can you take the whole job, or just the part I need?

What I found

The site has three pages: Home, Projects and Contact. I checked them on 14 November 2026, on a laptop and a phone:

• The first screen is a photograph of a bar with a circle reading "Bar & restaurant fit out contractors" and a "Contact us" button that opens an email. The phone numbers appear only on the Contact page.
• Their strongest point, that as principal contractor they cover every trade and can run the whole job or only the site, sits below the first screen, after two photographs on a phone.
• The Projects page lists ten venues with 158 photographs between them, and no word on what was done at each.
• The form asks for a name, email, phone and message. Venue type, scope, floor area and opening date are left for the client to remember.
• The footer of all three pages says "Copyright © 2019".

Decisions

A first screen that says what they do

I kept their headline, "Bar and restaurant fit-out contractors", because it says exactly what they are. Below it come the trades, the phone number, an enquiry button and the Constructionline Gold and SSIP marks from their site. On the right, a technical drawing of the counter and back bar draws itself once over their photograph of Banana Tree in Salford, then dims and stays still.

Four trades as a drawing that builds up

I wanted to show their list of trades rather than repeat it, so I traced the bar at The Greyhound in Nottingham from one of their photographs. As you scroll, the frame holds still and the drawing builds up trade by trade: joinery, then lighting and services in red, then boarding and brick slips, then shelving and the banquette. Finally the photograph of the same bar opens over it. A note says it is a sketch, not their project drawing. Red, from their logo, is the only colour.

Projects with a place on the map

The ten venues get a pubs and restaurants filter and a gallery each, plus a map of their base, rings every 25 miles and a table of straight-line distances, Meadowhall to Durham. Hovering over a row picks out the town on the map.

An enquiry planner instead of a message box

The message form became a four-step planner: venue, work, size and timing, contact. The client picks the venue type and state, the trades, how much to hand over and whether drawings exist. Alongside, an enquiry sheet fills in, counts six key details and switches to "Ready to send". The documents worth attaching follow the answers: the landlord's requirements for a shopping centre unit, an asbestos survey for an existing venue. The button opens one filled-in email to info@sheafconstruction.co.uk.

The phone

On a phone the drawing stays at the top with only the current step below. In the planner, a bar at the bottom shows how many details are in and leads to the sheet.

How it's built

Static HTML, CSS and JavaScript, no framework. GSAP and ScrollTrigger run the trades story: the frame is pinned and the SVG draws through stroke-dashoffset as you scroll. The rest is CSS transitions and IntersectionObserver. The planner has no server: the email is built in the browser and leaves through mailto when the client presses send. The page is noindex (meta tag, robots.txt, response header) and the JSON-LD holds only details from their website. Without JavaScript, or with reduced motion, the drawing appears complete with the photograph below. Photographs below the first screen load only when needed.

What I would do next

With the company I would first check that Constructionline Gold and SSIP are current, who the ten venues were for and what was done at each. A real project would add a page per project with its scope, and a form that takes drawings as attachments and sends without the client's email program.