Saydam Construction

Saydam Construction is a fictional brand: a family company founded in 1986 that works in six countries and has handed over 140 buildings. Its name, identity, copy and data were all written for this demo. Contractor sites usually open with drone footage, counters and rows of certificate logos. Saydam shows its handover dates instead, and its tagline is "On the promised date."

Delivery record#

The delivery record page is the centre of the site. For each of the 140 projects a table lists the contract date, the provisional acceptance date and the difference in days, including the 12 late ones. The table sorts by any column and filters by type, country, year range and result. A chart above it draws one bar per project, early handovers below the zero line and late ones above it. Totals and chart update together when the filter changes.

Monthly site report#

Each ongoing project has a progress report. Visitors step through the months, and each month changes the planned and actual percentages of six work packages, the photos, the milestones and the forecast handover date. On the home page the report follows the scroll: the months advance and the bars fill to their measured values as the page moves down.

Projects and map#

The portfolio filters by status, type, country and year and switches between grid, list and map. Filters live in the address bar, so a filtered list can be shared as a link. The map is a drawn SVG of the six countries, with no map provider, key or cookie.

Quotes and careers#

• A five-step quote form covering project type, location, scale, schedule and contact. Each step validates on its own and a side column summarises the answers live.

• A careers section with positions filtered by department, location and type, and a three-step application. The chosen CV file never leaves the browser.

• A contact page with seven offices and a map that shows the selected one.

The demo has no database. Every module runs in the browser on sample data, and submitted forms end in a confirmation that says nothing was sent.

Motion and performance#

The home page opens on a muted construction video; the headline rises line by line and the handover digits settle into place. Scroll-driven scenes run on GSAP, which loads after the first paint. Visitors who prefer reduced motion get a still image instead of the video and every scene in its final state. In Lighthouse mobile runs every page scores 100 for accessibility and best practices, with zero layout shift.