Skip to content
Sami Bentaleb Independent software engineerContact

Architecture Portfolio n., a portfolio site

An architect’s portfolio where each building keeps its own proportions.

I designed and built the portfolio of an independent architect. Every photograph keeps the shape it was taken at, on a wide screen and on a phone.

My part
Design and build
Built with
Vite, React
For
An independent architect

The problem

what the site had to do

An architect is hired on photographs. The portfolio had to show every project at its true shape, a tall cabin and a wide street front alike, and let a visitor go from the whole body of work to one building without losing the thread.

The portfolio’s project index: four columns of building photographs, each at its own height.
Plate I. The project index at 1440 pixels. Photographs hang in columns at their own proportions, and none is cropped.

Constraints

what it had to work within

One index has to carry many large photographs and keep each at its own shape, on a wide screen and on a phone.

The same index on a phone: one column, with a house, a street front and a drawing set stacked at full width.
Plate II. The same index on a phone, 390 pixels wide. The columns fold to one, and each photograph keeps its ratio.

What I built

the decisions, in order

One index of every project, a page for each one, and a grid that folds from four columns to one.

  1. Masonry columns

    Each photograph sits in a column at its own ratio, so a cabin stays tall and a warehouse stays wide.

    See Plate I and Plate III.

  2. A page for each project

    A photograph leads to its project: the name, a large view, a short text and the credits beside it.

    See Plate IV.

  3. One column on a phone

    Below tablet width the grid becomes a single column of full-width photographs, still uncropped.

    See Plate II.

Further down the index: a page of hand drawings and a night render of a tower block among the photographs.
Plate III. Further down the index. The drawing set and the night render sit among the photographs at their own shapes.
A project page: a wide photograph of a brick street front with a glass extension, with the title and text greyed out.
Plate IV. A project page, with its title and text greyed out.
IC Personal Training n., the next entry
Tell me what you’re building
All work