Paola Nails

Paola Nails is a nail studio in Szczecin — gel polish and gel manicures, extensions and nail art. The website has two jobs. It shows the work in the best possible light, and it leads to contact by phone, Messenger or Instagram.

The salon does not take online bookings, because appointments are arranged individually, in conversation. So the site doesn't pretend to be a booking system — every call to action leads to direct contact.

I designed the logo and carried its character across the whole site. The deep black and metallic gold come straight from the mark, and the button gradient echoes the gold ribbon bearing the words "Stylizacja paznokci". Light, ivory sections alternate with the dark ones, and pink is only an accent — the colour should come from the nails.

Headings are set in Fraunces, a serif with a gold italic, and body text and UI in the modern Manrope. Photos sit in arched frames with a gold line, and the arch recurs throughout the site.

Eight gold sparkles (five on mobile) fade in slowly around the logo and the photo, each on its own 7–11 second cycle. Roughly every eight seconds a gold shine sweeps across the main button.

Gallery tiles zoom by 3% on hover, and sections reveal with a 14 px shift and a 90 ms stagger. Only transforms and opacity are animated, so the motion stays light on the browser. With reduced motion enabled, every effect switches off.

The gallery shows 19 photos in five categories — nail art, colours, nude and pink, French and seasonal. Filters work without a page reload, and the enlarged view opens in a native dialog with a photo counter.

Images are generated in several widths as AVIF, WebP and JPEG, with dimensions that prevent layout shift. The import step strips EXIF data and GPS location.

Each service has its own page with a price, a description and FAQs. Instead of a form and a calendar, the site explains three simple steps — call or message, agree a date, come to the salon.

Contact buttons sit wherever a visitor might decide — in the header, on the first screen, next to services and at the end of every page.

On a phone the first screen shows the headline and two buttons straight away — Call and Messenger. The menu opens as a full-screen dark panel with large serif links.

While scrolling, a quick-contact bar stays at the bottom of the screen and hides when the menu, the gallery viewer or the consent banner is open. The gallery switches to two columns and the enlarged view supports swipe gestures.

Eleventy 3 generates pages from data — services, prices, FAQs and the gallery are JSON files, with no back end or database. Bootstrap 5.3 comes in through Sass with only the modules needed, and all the JavaScript is one small bundle (about 5 KB compressed). Fonts are self-hosted.

CSP and HSTS headers are in place, and GA4 with Consent Mode v2 loads nothing before consent. CI tests check HTML, links, structured data and accessibility (Playwright + axe) at four screen widths.

Each service has its own page with the price in the title and description, and the location appears in headings, titles and NailSalon structured data.