{"id":2272,"date":"2026-08-19T19:01:00","date_gmt":"2026-08-19T12:01:00","guid":{"rendered":"https:\/\/lazarewww.ru\/cases\/makeup-artists-portfolio-site\/"},"modified":"2026-08-19T19:01:00","modified_gmt":"2026-08-19T12:01:00","slug":"alesikalex","status":"publish","type":"isotope","link":"https:\/\/lazarewww.ru\/en\/cases\/alesikalex\/","title":{"rendered":"Makeup artist’s portfolio site"},"content":{"rendered":"
\n\t\n\n
\n\t\t\t\n\n

Introduction:<\/h2>\n\n\t<\/div>\n\n\n\n
\n\t\t\t
\n\t\t\t\n\n

A portfolio site for a makeup artist from Novosibirsk. I did all of it \u2014 from the structure to the markup.<\/p>\n\n\n\n

The task wasn’t about the texts but about showing the work: a visitor has to find the type of makeup they need quickly and look at the result up close.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n

\n\t\n\n
\n\t\t\t\n\n
\"The
The home page: the makeup artist’s showcase of work.<\/figcaption><\/figure>\n\n\t<\/div>\n\n<\/div>\n\n\n\n
\n\n\n
\n\t\n\n
\n\t\t\t\n\n

How it went:<\/h2>\n\n\t<\/div>\n\n\n\n
\n\t\t\t
\n\t\t\t\n\n

The showcase is built around a two-level filter<\/strong>. First you pick a category \u2014 makeup, brows and lashes, hairstyling. Once a category is picked, a second row of refining tags opens underneath it, holding only the tags that make sense for that category.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n

\n\t\n\n
\n\t\t\t\n\n
\"The
Two levels of filter: the category on top, the refining tags below it.<\/figcaption><\/figure>\n\n\t<\/div>\n\n<\/div>\n\n\n
\n\t\n\n
\n\t\t\t\n\n
\"The
The «brows and lashes» category is selected \u2014 the second row shows only the tags that fit.<\/figcaption><\/figure>\n\n\t<\/div>\n\n<\/div>\n\n\n
\n\t\n\n
\n\t\t\t\n\n

I laid the work out as tiles of different heights, with no cropping to a common format \u2014 the photos aren’t distorted. They load in batches, in both directions.<\/p>\n\n\t<\/div>\n\n\n\n

\n\t\t\t\n\n
\"The
The work is laid out as tiles of different heights, with no cropping to a common format.<\/figcaption><\/figure>\n\n\t<\/div>\n\n<\/div>\n\n\n
\n\t\n\n
\n\t\t\t\n\n
\"The
Viewing a piece of work: an enlarged frame on a blurred background, paging and a frame counter.<\/figcaption><\/figure>\n\n\t<\/div>\n\n\n\n
\n\t\t\t\n\n

I wrote the viewer myself: an enlarged photo or video on a blurred background, paging inside a single piece of work, a frame counter. Video in the cards loads only when it is needed, until then a preview sits in its place \u2014 a page with a hundred pieces stays light.<\/p>\n\n\t<\/div>\n\n<\/div>\n\n\n

\n\t\n\n
\n\t\t\t
\n\t\t\t\n\n

The site works in a light and a dark theme \u2014 the choice is remembered. There are Russian and English versions.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n

\n\t\n\n
\n\t\t\t\n\n
\"The
The dark theme: the choice is remembered.<\/figcaption><\/figure>\n\n\t<\/div>\n\n\n\n
\n\t\t\t\n\n
\"The
The English version of the site.<\/figcaption><\/figure>\n\n\t<\/div>\n\n<\/div>\n\n\n
\n\t\n\n
\n\t\t\t\n\n

Separately there is an about page with client feedback and a services page with prices and answers to frequent questions.<\/p>\n\n\t<\/div>\n\n\n\n

\n\t\t\t\n\n
\"The
The about page with client feedback.<\/figcaption><\/figure>\n\n\t<\/div>\n\n<\/div>\n\n\n
\n\t\n\n
\n\t\t\t\n\n
\"The
Services with prices, and answers to frequent questions below them.<\/figcaption><\/figure>\n\n\t<\/div>\n\n<\/div>\n\n\n
\n\t\n\n
\n\t\t\t\n\n
\"The
The buttons lead straight into messengers \u2014 there is no lead form on the site.<\/figcaption><\/figure>\n\n\t<\/div>\n\n\n\n
\n\t\t\t\n\n

There is no lead form, and that is a decision rather than an omission: every button leads straight into a messenger, which is where she talks to her clients anyway.<\/p>\n\n\t<\/div>\n\n<\/div>\n\n\n\n

\n\n\n
\n\t\n\n
\n\t\t\t\n\n

My role:<\/h2>\n\n\t<\/div>\n\n\n\n
\n\t\t\t
\n\t\t\t\n\n

The project is mine from start to finish: the structure, the design, the markup, the work viewer, two themes and two languages.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n\n

\n\n\n
\n\t\n\n
\n\t\t\t\n\n

Result:<\/h2>\n\n\t<\/div>\n\n\n\n
\n\t\t\t
\n\t\t\t\n\n

A showcase site where the work is sorted by type and opens in one click. Light on mobile, with a dark theme and two languages.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n

\n\t\n\n
\n\t\t\t\n\n
\"The
The home page on mobile.<\/figcaption><\/figure>\n\n\t<\/div>\n\n\n\n
\n\t\t\t\n\n
\"The
The work filter on mobile: categories and tags.<\/figcaption><\/figure>\n\n\t<\/div>\n\n\n\n
\n\t\t\t\n\n
\"The
Viewing a piece of work on mobile.<\/figcaption><\/figure>\n\n\t<\/div>\n\n<\/div>\n\n\n
\n\t\n\n
\n\t\t\t\n\nVisit the site!<\/a>\n\n\n\n

For anyone curious about the site or about Alyona’s work.<\/p>\n\n\t<\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"

A portfolio site for a makeup artist from Novosibirsk: a showcase of her work with a two-level filter, a custom lightbox, two themes and two languages.<\/p>\n","protected":false},"featured_media":2060,"template":"","isotope_tag":[106,105],"class_list":["post-2272","isotope","type-isotope","status-publish","has-post-thumbnail","hentry","isotope_category-other-sites-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/lazarewww.ru\/?rest_route=\/wp\/v2\/isotope\/2272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lazarewww.ru\/?rest_route=\/wp\/v2\/isotope"}],"about":[{"href":"https:\/\/lazarewww.ru\/?rest_route=\/wp\/v2\/types\/isotope"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lazarewww.ru\/?rest_route=\/wp\/v2\/media\/2060"}],"wp:attachment":[{"href":"https:\/\/lazarewww.ru\/?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2272"}],"wp:term":[{"taxonomy":"isotope_tag","embeddable":true,"href":"https:\/\/lazarewww.ru\/?rest_route=%2Fwp%2Fv2%2Fisotope_tag&post=2272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}