Responses by Félix Péault, designer, concept and developer; and Shelby Kay, front-end developer.

Background: Houses Of is a side project that showcases beautiful homes across the globe. It reflects a desire to capture special properties found throughout traveling and living in different cities, as well as representing the particular essence of each place.

Design core: The key feature of the project is its call to curiosity and exploration. This feeling is achieved by letting the photos speak for themselves through nice typography and a clean site design, which strikes a balance between bold and minimal.

Favorite details: Interactivity is a significant element in the concept of Houses Of. This is predominantly attained with the carousel of photos and the 3-D globe, made by Nicolas Riciotti from WebGL. Along with microinteractions, transitions and animations throughout the site, these elements are responsible for adding layers of interactivity to the global experience.

Challenges: As a personal project, it was sometimes overwhelming to tackle such a large amount of work from start to finish (searching for houses, taking and retouching photos, drawing inspiration from architectural styles to illustrate each location page, website development, and writing content—among other things). Even being free of boundaries and pressure, we invested a lot of time refining these steps. It’s satisfying to work on and finish your own project, but it’s also frustrating to work on and finish your own project!

New lessons: “Being a designer who’s always had a big interest in web development, I learned a lot of cool new things about modern JavaScript,” says Péault. “This included finding out how to manage transitions and define the logic behind it, working with promises and asynchronous code with a goal to deliver a high performance–driven browsing experience.”

Navigation structure: We wanted to offer different options to explore the different locations. From the homepage, you can navigate within the globe or through a dynamic list that can be filtered by continents. Although there is not a conventional menu system, you still have the ability to change the location through a switcher module that returns you to the globe and the list. This breaks some “rules” of a standard menu and provides more fluidity in the navigation.

Technology: “The website is based on Svelte and Sapper, which I recently discovered from the conference ‘Rethinking Reactivity’ by Rich Harris,” says Péault. “I really like the concepts and philosophy—and will definitely keep using it in the future. Animations and transitions are mostly managed with anime.js. As for the back-end CMS, Directus (an API-driven and open-source headless CMS) allows us to easily add countries, locations and photos to the site.”

Anything else? “The deployment process was something very new to me,” says Péault. “I discovered continuous development and integration. and I really think it is the future in terms of the development and deployment process.”

Continuous integration and continuous delivery (CI/CD) have been put in place with Git and Drone, which automatically deploys a new version of the site from a specific branch. It’s convenient and stress free with lots of customization and tasks available to fit all the project needs (Docker image build, restart container, etc.)