Project: de Linde
Main Challenges
- Create an ellegant and polished experience, making sure to communicate de Linde’s service
- Create intuitive and seamless CMS
- Develop a really powerful PDF generator
- Seamlessly plug into Limbo's work flow
The cover page. 3 versions of this page were created for more flexibility on the editor's side.
The Property page. Here the user has a clear view of what they have at their disposal in this rather long page. It counts on scroll spies, modal gallery, floor plan carousel, conditional rendering according to what is available for this specific property and more.
This is the Property Search page. The filters are synced with the Wordpress custo taxonomies and each property has a carousel gallery.
The Portfolio page. It takes information from a custom type in Wordpress and neatly organizes the grid using a pure CSS masonry effect.
An example of the modular components in this site. My custom Gutenberg superblock makes sure all pages can composed in the way that makes more sense for that context. In the detail, an automatically inverted column makes this process even easier.
Another example of a part composed with my Gutenberg superblock.
The menu, sliding from the right. In the detail it's possible to see how the upper menu, which seems to be part of the page below actually pops up over this hidden side menu, giving more functionality and life to the site.
Another Gutenberg superblock example, this time it's the carousel, to which I made sure to add an option (in the CMS) to make it small or very large, in order to acommodate the design.
The team component, constructed from a custom type in Wordpress, also making use of custom taxonomies to organize the teams. In the CMS, I created a dedicated block to make the content creation seamless, by using a similar interface to this component.
The Article page shows how much control the user has. A standard format was never set, being the editor in charge of choosing which parts from the Gutenberg superblock they want to show in this specific article.
Backstory
Mogens de Linde is a Danish company that renews buildings with great care, taking in account their historical background and peculiarities that make them unique, since 1975.
In 2020, a collaboration with Limbo gave me the honor of coding their new website in order to make their work pop out of the screen and give them the life they deserve. The design, by Romain Gorisse, highlights the great picture collection (both historical and contemporary), which made it look absolutely beautiful, along with its minimal aesthetics.
This project is made of 3 parts: Content Management System, Website and PDF Generator.
Content Management System
This was the most technically challenging part of this project. Romain designed a modular system, where pages could be assembled with a combination of the available modules, for the most part.
To meet this requirement, I leveraged Gutenberg, Wordpress’ newest editor to create my own Gutenberg Block, which has a custom interface that allows the administrator to select whatever module and compose any given page.
I proceeded to “lock” pages of certain types to certain Gutenberg Blocks templates. The result is that the CMS is very easy to use, and at the same time very powerful. If you are interested in knowing more about it, just write me a line, I’ll be glad to share my process with you.
Website
The website allows the user to navigate through the content with ease of an app (despite the large number of pages). The large images posed a challenge since they could easily make the navigation glitchy while they loaded, but thanks to intensive coding work they are loaded as small as possible for each device and only appear when the user is close to revealing them via scrolling.
The content is sourced via custom REST routes which serve Gutenberg’s information as JSON strings that are simple to consume.
The application itself is a NextJS implementation, which allows us to generate static pages with ease and at the same time refresh the generated content every time we have new entries or changes. Also it made it possible to create “cloud Node functions” in a straightforward manner, which came in handy.
Needless to say, the React environment NextJS makes available was very valuable when implementing the equivalents to the Modules created inside Gutenberg.
PDF Generator
The third part of this solution was a PDF generator. It is a Node app that uses Puppeteer to visit a specific page on the NextJS site, which has a layout that’s made for this purpose, and generate a PDF file out of it. Then, it sends the file back to the user. It has a custom caching and refreshing system that allows for faster downloads.
This feature was core to the solution since PDFs are very valuable in de Linde’s industry and what they had before was not as polished or flexible. With my code they are now able to throw whatever contents at the CMS and have a nice PDF file be generated.