Some time ago I was contracted for a brief stint with a real estate marketing firm, during which a project came in which presented a welcome challenge.

The project was not intended for mobile or desktop devices; rather - as I recall, anyway - it was initially designed for a large-scale video installation. In any case the design clearly called for CSS grid (which I hadn't had much prior use for), and the site's functional requirements involved somewhat non-trivial javascript. I've had in mind for some time to condense this project into something appropriate for this space, so here we are.

Just to briefly explain 'condense': the original project featured:

  • several views with a grid of images which, when tapped, overlaid full-screen images; I have reduced this to a single gallery view
  • several views with irregular grids, variously comprising text & graphics showcasing the technical specs of the building; (also represented in one view)
  • an availabilities view, comprising abstract renderings of the two buildings, with floor data (.json) - desk/office counts, floorplans, etc. highlighted by click/tap on floor with available space (click: floors with availabilities have green background; fully available floors offer floorplan image links)

As always, comments are welcome here