Кейс: Сайт-портфоліо

Сайт-візитка Julia Satyr Art

Портфоліо української художниці на чистому HTML/CSS/JS — без фреймворків, без build-step, без e-commerce. Тільки картини, тиша і custom domain.

Julia Satyr Art — портфоліо української художниці олійного живопису ↗ Відкрити satyr.com.ua
15
робіт у галереї
5
JSON-LD схем
~2.5MB
сумарна вага
4000₴
бюджет проєкту

Задача

Юлія Сатир — сучасна українська художниця, олійний живопис, понад 120 робіт у портфоліо, виставки в Україні, Чехії та Італії. До цього її роботи жили лише у Facebook-альбомах і кількох публікаціях в арт-виданнях. Потрібен був власний сайт-візитка — щоб зібрати найкращі картини в одному місці, дати посилання у біо, і щоб про неї знали Google та AI-двигуни.

E-commerce не потрібен — продажі йдуть напряму через месенджери. Жодних кошиків, оплат, складських залишків. Тільки портфоліо, біографія, освіта, виставки, контакти.

Бюджет: 4000 грн фіксовано. Це означає — ніяких CMS, ніяких підписок, ніякого Webflow за $19/міс. Сайт має жити роками без правок і коштувати клієнту нуль на місяць.

Рішення

Чистий HTML5 + CSS3 + vanilla JavaScript. Без React, без Next.js, без Webpack. Один файл index.html, один style.css, один main.js. Деплой — GitHub Pages з custom domain. Хостинг безкоштовний, домен ~150 грн на рік.

Чому такий вибір: для сайту-візитки на 1 сторінку фреймворк — це overhead без вигоди. Чистий HTML віддається з CDN, індексується миттєво, відкривається на найслабшому смартфоні і не зламається ні через рік, ні через п'ять.

🖼️

Masonry-галерея

15 картин у CSS columns layout (1 → 2 → 3 колонки за viewport). Vertical flow зберігає природні пропорції — без crop'у вертикальних робіт під квадрат.

🔍

Lightbox

Картина у повний розмір, навігація стрілками + Escape, focus trap для клавіатури, mailto-CTA «Написати про цю роботу» з назвою у subject.

📱

Hamburger overlay

Повноекранне меню з backdrop-blur, 3-bar анімація → ✕, Escape для закриття, body-scroll lock. На десктопі — звичайна inline-навігація.

✍️

Authentic підпис

Витягнуто рукописний підпис «Satyr» прямо з картини «Берегиня України» (ImageMagick channel math → transparent PNG → recolor у cream). Реальний, не stock.

🎨

Canvas texture

Subtle grayscale noise tile на body-background (4% opacity, mix-blend-mode overlay) — фізичне відчуття полотна без декоративності.

♿

WCAG AA

Skip-link, semantic landmarks, focus trap у lightbox, prefers-reduced-motion, descriptive alt-тексти на 18 зображеннях, focus-visible outline.

SEO та AI-видимість

Найбільша частина роботи — не код, а schema markup. Сайт має 5 валідних JSON-LD блоків з cross-referencing через @id — щоб Google, ChatGPT, Perplexity і Claude бачили художницю як цілісну сутність, а не набір розрізнених фото.

  • Person (#artist) — Юлія Сатир, birthDate, email, телефони, sameAs (Facebook), knowsAbout, subjectOf → стаття в арт-виданні Оксамитове мистецтво (E-E-A-T сигнал)
  • WebSite (#website) — inLanguage uk, datePublished, author reference
  • BreadcrumbList — навігаційна ієрархія
  • ItemList (#gallery) — 15 окремих VisualArtwork з @id-якорями (#painting-berehynia), ImageObject з width/height/caption, dateCreated де відомо
  • Event — персональна виставка «Квіткова феєрія» 3–25 квітня 2026, Living Room, Київ

Окремо — robots.txt з explicit Allow для GPTBot, ClaudeBot, PerplexityBot, Google-Extended і anthropic-ai. Sitemap.xml з image:image для всіх 15 картин з titles і captions — Google Image розуміє кожен файл як іменовану роботу, а не безіменний JPEG.

Чому це важливо: у 2026 пошуком вже керують AI Overviews (Gemini 3) і ChatGPT Search. Без structured data сайт існує лише як набір пікселів. З 5 JSON-LD типів — як сутність, яку AI може процитувати.

Перформанс і LCP

LCP — це hero-портрет художниці. Щоб він з'являвся за <2.5s навіть на 3G:

  • <link rel="preload" as="image" fetchpriority="high"> у <head> для hero-зображення
  • fetchpriority="high" decoding="async" на самому LCP-тегу
  • loading="lazy" на 15 картинах галереї — вони нижче fold
  • Усі зображення WebP (крім OG JPG, бо Telegram ще не дружить з WebP-превью)
  • Шрифти — Google Fonts через preconnect, тільки 2 родини (Playfair Display + Inter)

Сумарна вага сторінки — ~2.5 MB разом з усіма 15 картинами і 3 портретами. Це менше за один Instagram-сторіс.

Бренд як деталі

Сайт-візитка для художника не може виглядати як шаблон. Ось що робить його її сайтом, а не просто темплейтом з ThemeForest:

1

Палітра з картин

#6a6a6a (тіньовий фон), #f3ede4 (теплий cream), #efe5d8 (акценти), #d9c8b8 (лейбли) — взято з найтемнішої та найсвітлішої точок реальних робіт.

2

Типографіка

Playfair Display (serif, italic) для H1/H2 — як підпис до картини в галереї. Inter — для body, бо читабельний на будь-якому device.

3

Орнамент-роздільник

Вишиванко-подібний SVG над кожним H2 — тонка лінія, але одразу позиціонує сайт як український, без банальних соняшників.

4

Glassmorphism cards

backdrop-filter: blur(12px) + border-radius 2rem на картках галереї. Сучасно, але не агресивно — картини залишаються головним героєм.

5

Логотип художниці

Клієнтка прислала JS-monogram з ліліями. Я конвертував його у cream-варіант для темного хедера через PIL inversion — пікселі стали кремовими, прозорий фон зберігся.

Технічний стек

  • Frontend: HTML5, CSS3 (CSS columns, backdrop-filter, focus-visible), vanilla JS
  • Шрифти: Google Fonts — Playfair Display + Inter
  • Зображення: WebP (картини, портрети, текстури), JPG (OG), SVG (favicon, орнамент)
  • Хостинг: GitHub Pages (безкоштовний CDN, automatic HTTPS через Let's Encrypt)
  • Домен: satyr.com.ua, apex з 4 A + 4 AAAA records на GitHub Pages IPs
  • Тести: node --test tests/ — мінімальний smoke-suite
  • Pre-release audit: 5/5 JSON-LD валідні, 24/24 image src існують, 7/7 anchors resolve, 16/16 sitemap-локацій збігаються

Чому не Tilda або Webflow

Це найчастіше питання від клієнтів-художників. Розбираю чесно:

  • Tilda — 750 грн/міс, lock-in на платформі, обмежений контроль над schema і robots.txt, повільніший LCP через fetched-блоки
  • Webflow — $19/міс, англомовний інтерфейс, теж lock-in, експорт коду — додатковий тариф
  • WordPress — безкоштовний движок, але хостинг ~$5/міс + теми + плагіни безпеки + апдейти, які регулярно щось ламають
  • Чистий HTML на GitHub Pages — 0 грн/міс, повний контроль, працюватиме за 5 років без жодних правок

Для бізнесу з товарами і динамічним контентом — фреймворк виправданий (див. кейс Atlas). Для сайту-візитки художника, де контент змінюється раз на рік — це overengineering.

Результат: сайт live на satyr.com.ua, нульовий monthly cost, 5 валідних schema-блоків, AI-боти проіндексували, клієнтка має посилання для біо у Facebook та Instagram. Бюджет 4000 грн закритий.