Sparklingman — творчий псевдонім Анатолія Куралова: глухого українського художника-абстракціоніста, вебдизайнера, засновника QD і волонтера. Його персональний сайт sparklingman.com поєднує все, чим він живе: картини й виставки, магазин полотен, власні застосунки, портфоліо, блог і волонтерство з фондом «Чую Серцем». Це водночас сайт художника і сайт портфоліо вебдизайнера. Ми в QD зробили логотип і сайт на власній CMS — з адмінкою, яку писали під себе, без чужого движка.
Задача
Сайт жив роками на MODX Revolution: понад 400 сторінок, десятки шаблонів, сніпетів і плагінів, майже 1 700 файлів медіа. Движок обріс доповненнями, і підтримувати його ставало дедалі важче. Потрібно було:
- перейти на свій движок, де немає нічого зайвого;
- зберегти всі адреси сторінок і шляхи до зображень, щоб не втратити позиції в Google і Bing;
- зробити адмінку, у якій зручно щодня додавати картини, статті й проєкти;
- оновити дизайн сайту і зібрати його в одну дизайн-систему.
Логотип: їжак
Знак Sparklingman — їжак, зібраний із гострих рожевих голок, що розходяться з одного центру, як спалах. У ньому і характер автора, і «sparkling» з назви. Їжак живе на сайті в шапці й у декоративних SVG, а фірмовий рожевий проходить через увесь сайт і адмінку.
Персональний сайт на власній CMS
Перенесення сайту з MODX без втрат для SEO
Головна вимога — жодна адреса не мала зламатися. Ми склали інвентар усіх живих URL — 384 сторінки — і переносили сайт так, щоб кожна відкривалася за тим самим шляхом: слеш у кінці збережено так, як був, а 22 старі редиректи працюють і далі. Шаблони, змінні й вміст перенесли зі старої бази скриптом, а старі теги MODX автоматично перетворили на новий синтаксис {{ поле }} і {% блок %}. У коді нової CMS немає жодного сліду старого движка.
Що на сайті
- Головна — «Тривога в тиші»: цифри (69+ полотен, 8 виставок, 4 країни, 100+ проєктів), картини, застосунки, виставки, блог і волонтерство.
- Магазин картин — полотна з розміром, технікою і ціною.
- Застосунки — сторінки iOS-проєктів: Текстор, Мрій, Лексіс та інші.
- Портфоліо за розділами: мистецтво, веброзробка, логотипи, HTML/CSS/JS, постери, UX/UI.
- Блог, сторінки «Про мене», «Послуги», «Контакти» і карта сайту.
Власна адмінка для сайту
Адмінка — темний сайдбар, білий контент, фірмовий рожевий і моноширинний шрифт. Усе працює через AJAX, без перезавантаження сторінок.
- Сторінки з колекціями (блог, роботи, магазин), пошуком наживо, фільтрами і пагінацією; створення, дублювання, приховування.
- Редактор Markdown і HTML з підсвіткою, кнопками і переглядом сторінки тим самим кодом, що й на сайті.
- Розклад публікацій — «Опублікувати» і «Зняти з публікації» за датою, без cron.
- Чернетки, які адмін бачить на сайті з позначкою «Чернетка», і історія змін сторінок.
- Медіатека: теки, завантаження, транслітерація назв, захист від видалення файлів, які використовуються на сторінках.
- Галереї, шаблони, чанки, змінні й налаштування сайту — режим обслуговування, коди Google і Bing.
SEO вбудоване в CMS
Сайт сам будує robots.txt і sitemap.xml з фото сторінок, ставить canonical на кожну сторінку, закриває від індексації чернетки й технічні сторінки, а неправильний слеш в адресі веде 301-редиректом на правильну. Є IndexNow, вкладка SEO з перевіркою сторінки і підказки текстів від Gemini, а картинка для соцмереж генерується автоматично, якщо в сторінки немає своєї.
Дизайн-система
Усі кнопки, картки, кольори й типографіку ми зібрали в дизайн-систему на окремій сторінці сайту. Нові сторінки збираються з готових блоків, тож сайт виглядає цілісно — від головної до найстарішої статті в блозі.
Технології
Розробка CMS на PHP 8 з MySQL і Tailwind CSS — без фреймворків і без Node на сервері. Безпеку закладено з першого дня: адмінка закрита від сторонніх і захищена від типових атак, а оновлення виходять автоматично. Логіку цієї CMS ми взяли за основу QAdmin CMS, на якій працює й сайт qd.ua.
Результат
- логотип-їжак і фірмовий рожевий стиль;
- свій движок замість MODX — з усіма старими адресами;
- своя адмінка з редактором, медіатекою, розкладом і чернетками;
- вбудоване SEO: sitemap, robots, canonical, IndexNow, перевірка сторінок;
- дизайн-система для всього сайту.
Хочете сайт, у якому зручно працювати щодня, без зайвого движка? Розкажіть про ідею або подивіться, як ми робимо сайти.
