Ábris was once again honored with his trust. The result of our last cooperation was sublab.pro, which was an introductory website of a dance project. Now I have to create the contemporary dancer Jessica Simet’s own website using a custom webdesign.
I also received the designs in Adobe Illustrator. The website is basically a portfolio page with some unique CSS solutions. Ábris came up with the idea that, in addition to the primary colors, the website show with a different, secondary color combo every day. Because of the colors, the logo on the featured image on the homepage is made with a screen lens effect, which is also in SVG. However, thanks to CSS3, I was able to solve it with the mix-blend-mode parameter. There is also a separate mix-blend-mode effect above the image, which saturates the image with the base color that changes every day. I solved the main color display with 3 lines of CSS code, which get the day with the PHP date function and always overwrites it with the corresponding 3 lines of CSS code.
The layout is not usual, I like very much. Ábris made up with three different layouts:
- On the left side of the 40% width of the screen, the menu items and an image are fixed, and on the right side of the 60% width, the scrollable content is at 100% height. These are the Works, Info and Calendar pages.
- The detailed pages of the project are divided into three parts, the menu is fixed at 150 pixels wide, the text content and the photo and video gallery next to it, the remaining screen width (100% – 150 pixels) is divided into 30% left and 70% right page.
- The Showreel page is similar to the previous one, with the difference that in addition to the 150 pixel wide fixed menu on the left, there is a video with an automatic aspect ratio of 16:9 on the remaining screen width
It is a fun fact in the mobile version: on the detailed pages of the project, I used shortcodes to solve the location of the insertable photo gallery and videos, which is not automatic, but can be specified by the user, since it is not arranged dynamically below the text (as in most mobile versions), but the user can give the location.
I used ACF Pro for the admin interface, I didn’t use any other plugins, just a Contact Form 7 with captcha protection and a firewall set up with the usual protection.
