Holokai

'Holokai' is a personal project, born from the desire to combine recently acquired skills within a single environment. In practice, this project uses a custom CMS created with Sanity, building fields, components, and a page architecture tailored to each project, which are then translated into components adhering to atomic design principles. This tool allows me to create web interfaces with absolute control over content, performance, and responsiveness, without hindering complete freedom in the creation of original and creative interfaces.

I created a database of atoms (texts, titles, images, videos, etc.) and custom molecules (navigation bars, headers, footers, etc.). With these elements, I can create any organism (or component) needed based on the project's design. This tool, still in its early stages, currently allows me to precisely combine a tailored CMS, developed with Sanity, with a rich and user-friendly interface. I strive daily to improve its functionality. Current improvements include integrating this engine with Shopify, creating more reusable atoms to accelerate the initial development process, and I am constantly working on improving performance and SEO.

The CMS, created with Sanity, automatically retrieves the desired information from Shopify (here, all products corresponding to a certain category), passes the necessary information (Title of the grid, and the information of each product individually) to the interface which can then generate a component to make it visible and interactive.

The CMS, created with Sanity, automatically retrieves the desired information from Shopify (here, all products corresponding to a certain category), passes the necessary information (Title of the grid, and the information of each product individually) to the interface which can then generate a component to make it visible and interactive.

Next, once the data is retrieved by the interface, the organization is created and generates a customized product list as desired. The design here is very generic because the focus of the exercise is data transfer, but the interface has complete control and could therefore be adapted to any type of design.

Next, once the data is retrieved by the interface, the organization is created and generates a customized product list as desired. The design here is very generic because the focus of the exercise is data transfer, but the interface has complete control and could therefore be adapted to any type of design.

from CMS to UI

To illustrate how it works, I first created a simple component type using Sanity: a custom image or video list. For each item in the list, this component accepts an image, a size (calculated in columns; you can press Ctrl + "g" to see them exceptionally on my portfolio), and a margin to separate them (also calculated in columns). The following images show how the custom CMS works to generate this same component.

Once this information is entered into the CMS, my components retrieve it to generate the interface as agreed upon by the client. This allows the client to generate their own pages as they wish on their website (ideal for a portfolio or a frequently updated showcase site), and it is my responsibility as the developer to render these components so that they are generated correctly and flawlessly, regardless of the content entered by the client (within reason, of course).