Refinement of the Cyber Temple website

The main problem was the combination of a complex visual concept and a large number of requirements for the behavior of the site on different devices.

Animations and images should have looked the same, conceived by the designer, and not infinitely stretched to fit the width of the screen.

At the same time, the site had to work correctly on desktop, tablets, and mobile devices, including Retina displays.

Additionally, it was necessary to link frontend to the CMS so that the content could be changed without the intervention of developers: from images and videos to news, vacancies and site pages.

To refine the Cyber Temple website to the required visual and functional state, preserving its non-standard style and ensuring stable operation on modern devices.

As part of the project, it was necessary to:

• fix existing visual and functional errors;
• bring animations to behavior from layouts;
• correctly implement fixed visual compositions;
• add video support;
• improve your work with images;
• integrate content with Squidex CMS;
• implement the operation of pages via SLUG;
• add data caching;
• enable CDN support;
• add session statistics and KPIs;
• ensure that the website works in modern browsers.

It was

The site already had an expressive visual concept, but individual elements did not match the layouts and behaved incorrectly at different resolutions.

In particular:

• animations were re-triggered when scrolling back;
• visual compositions tried to stretch to fit the width of the screen;
• individual images were displayed incorrectly;
• there were problems with Retina displays;
• some of the elements did not match the layouts;
• working with content through CMS required improvements;
• the pages used CMS identifiers instead of human-readable URLs;
• the necessary caching system and CDN were missing.

Become

We have adapted the frontend to the design requirements and at the same time strengthened the technical part of the project.:

• redesigned animations;
• implemented the correct behavior of fixed visual compositions;
• added video support;
• fixed image display;
• we have adapted the interface for different devices;
• implemented the work of the content through Squidex CMS;
• added caching;
• provided CDN DigitalOcean;
• translated pages and posts to the URL from SLUG;
• added session statistics;
• fixed the operation of galleries, news, vacancies, and other dynamic blocks.

Animation was one of the key features of the site.

On the main page, the first screen was supposed to combine video and text animation. At the same time, the visual composition did not have to be infinitely adjusted to the width of the screen.

A different rule has been adopted for some elements.:

we keep the composition size fixed → if there is not enough space, we trim the edges.

This made it possible to preserve the appearance conceived by the designer.

This approach is especially important for sites with a large number of art objects, where the standard responsive approach of «stretching everything wide» can destroy the composition.

We also fixed the logic of running animations.

Previously, when scrolling up the page and then moving down, individual elements could be played repeatedly.

We have changed the behavior so that the animation of the appearance of text and buttons is triggered once when passing the corresponding point on the page.

Additionally, we have accelerated the animation of the main screen and made it smoother.

Videos instead of static images

For a game studio website, visual content is one of the main components of communication.

Therefore, the project provided for the possibility to use not only images, but also videos.

In particular, on the About Us page, a static image could be replaced with a video that opens in full-screen mode when clicked.

Video support has also been added at the CMS level for various types of content.

This made it possible to abandon the hard-wired scenario.:

one field → picture only

and switch to a more flexible one:

media content → image or video.

One of the most atypical tasks was the adaptation of the website.

For a regular corporate website, the standard responsive approach is quite simple: the blocks are reduced, rearranged and occupy the available width.

This approach has not always been suitable for Cyber Temple.

Some banners and animations had to preserve a certain composition regardless of the screen size.

Therefore, for individual visual blocks, we used a fixed maximum size with clipped edges instead of infinite scaling.

The problems were fixed separately:

on mobile devices;

on tablets;

on wide monitors;

on Retina displays.

As a result, the visual concept had to be preserved not only on a standard Full HD monitor, but also on screens with a different density and aspect ratio.

The Games section was one of the key elements of the site.

It was necessary to work with large-scale visual content, animations and interactive elements at the same time.

We have adjusted:

• page background;
• scaling of visual blocks;
• the position of the hero’s image;
• animation of headlines;
• scrolling behavior of elements;
• location of the subscription form;
• transitions between elements.

Separately, the behavior of the DarkSwitch poster was corrected: clicking on the image began to work the same way as the Read More button and lead the user to the game page.

This created a unified scenario for interacting with the card.

Separately, we have redesigned the logic of the page addresses.

Instead of URLs based on CMS object identifiers, pages and posts should have been opened by SLUG.

This made the addresses:

• clearer to the user;
• easier to navigate;
• It’s more natural for search engines;
• independent of the internal IDs of CMS objects.

For a dynamic website, it is important not only to get data from the CMS, but also to do it quickly.

Therefore, the project provided a caching system for data received from Squidex.

The cache extended not only to text content, but also to related media files — images and videos.

Additionally, DigitalOcean CDN support was provided.

Thus, the architecture was supposed to reduce the number of direct calls to the CMS and accelerate the return of frequently used content.

A separate block of work was related to media content.

We have corrected the display of images and brought the cards to a single logic.

For the preview, the available space was filled while maintaining the proportions of the image.

The news sorting has also been fixed: the last created publication should be displayed first by the Created Date field.

The PreviewImage and TitleImage display logic has been set up separately for news.

This allowed the CMS to flexibly manage how the same publication looks in the list and on a separate page.

The Career section also required more than just visual changes.

We have redesigned the structure of the job page:

• the extra top banner was removed;
• fixed the Project and Type filters;
• added a resume submission form;
• adjusted the display of the vacancy text;
• increased the description space;
• the Apply and Share buttons have been aligned;
• we have adjusted the distance between vacancies and the bottom banner.

As a result, the section had to work not only as a showcase for vacancies, but also as a full-fledged point of interaction between the candidate and the company.

We have turned a set of visual and technical requirements into a working frontend for a gaming brand with dynamic content, CMS integration, video, animations, adaptivity and infrastructure for further development.

The project well demonstrates our ability to work not only with classic corporate websites, but also with products where visual presentation is part of the product itself.

As part of the project, we have completed a comprehensive revision of the Cyber Temple website, from the visual behavior of individual animations to architectural changes in working with the CMS.

Main results:

• dynamic content integration;
• image and video support;
• caching CMS data;
• DigitalOcean CDN support;
• SLUG-based URL;
• session statistics and KPIs;
• desktop / tablet / mobile adaptation;
• fixing Retina issues;
• animation recycling;
• fixing galleries;
• revision of Games, About Us, Career, Media and Contacts;
• optimizing the work of news and media content.

The site has retained its original visual concept, but has become much more technically manageable: content can be changed through a CMS, media can be updated without changing the code, and pages can be scaled to new materials and sections.