Veldmark Architectural Office

How it was made

The original is the portfolio site of a Russian architecture office. All 13 pages were carried over: home, work list, 8 project details, about, contact and legal.

The grid is the 15 columns measured from captures (79px columns, 15px gutters, 22.5px margins), scaled in vw. Type sizes run in five steps: 12, 30, 60, 88.5 and 131.25px.

In the people section, 14 photos travel an elliptical orbit (x ±506, y ±391px). Photos at the back shrink to 0.7 scale at 0.1 opacity.

The 8 radial labels sit at a 381.6px radius and turn with scroll. From this section the background switches to black over 300ms.

The preloader bar starts at 574ms while the counter runs from 0 to 100. The hero photo scales from 1.1 to 1 over 3.8s, and paragraph lines rise in 1.1s at 60ms intervals.

The secondary grey was raised from #929292 to #767676 (4.54:1 contrast), and the sketch became a 2D canvas. The company name, projects, people, phone numbers and 18 client names are fictional, and the 72 photos are stock.

Key features

• Preloader counter · word mask reveal
• Scroll light/dark switch · 8-spoke radial rotation
• 14 photos on an elliptical orbit · stat highlight
• 3 work views · floor plan slider · legal contents

Where and how to use it

Suits architecture firms with large project photos and little text. Home, work list, details, about, contact and legal share one grid.

Points to check

There is no filter, search, form or menu button, and all 8 project details share one layout. The home page runs about 20 screens, which is long for a firm with few photos.