Клиент — дизайнер интерьера — обратилась с задачей создать персональный сайт-портфолио, который станет основным инструментом привлечения новых клиентов.
Главная цель — создать визуально эффектный сайт с акцентом на портфолио выполненных проектов (квартиры, рестораны, спа-зоны), который будет производить сильное первое впечатление и мотивировать посетителя оставить заявку. Сайт должен был транслировать атмосферу роскоши и вкуса, соответствуя уровню работ дизайнера.
Ключевые требования клиента:
— Галерея проектов с удобным просмотром на любых устройствах, включая свайпы и масштабирование на мобильных. Каждый проект должен раскрываться в полноэкранном режиме, чтобы потенциальный клиент мог детально рассмотреть интерьеры.
— Защита авторского контента. Фотографии интерьеров — результат съёмок, и клиент категорически не хотел, чтобы их можно было легко скачать или скопировать. Требовалось техническое решение, которое максимально затруднит несанкционированное использование изображений.
— Быстрая загрузка даже при слабом мобильном интернете. Целевая аудитория часто просматривает сайты со смартфонов, и тяжёлые фотографии не должны были тормозить работу сайта.
— Интеграция с социальными сетями (Telegram, ВКонтакте, Instagram) для удобной связи и перехода на каналы дизайнера.
— Блок с отзывами реальных клиентов для повышения доверия.
— SEO-оптимизация и подключение аналитики Яндекс. Метрики, чтобы сайт индексировался в поисковых системах и можно было отслеживать поведение посетителей.
— Простота дальнейшего сопровождения и возможность обновления контента без привлечения разработчика на каждое изменение.
Отдельным пожеланием было, чтобы сайт корректно работал на устройствах Apple — клиент и большинство её аудитории пользуются iPhone и iPad, где браузер Safari имеет ряд известных особенностей с отображением.
Для реализации проекта был выбран стек Next.js + React 19 + TypeScript как оптимальное сочетание производительности, типобезопасности и удобства разработки. Сайт реализован как статически генерируемое приложение (SSG) — это обеспечивает мгновенную загрузку страниц и упрощает хостинг.
Дизайн разработал с нуля в тёмной премиальной стилистике с оливково-бежевой палитрой акцентов.
На главном экране реализовал полноэкранный слайдер с ripple-эффектами при касании, кнопками быстрой связи через Telegram и ВКонтакте.
Для галереи портфолио разработал модальное окно с поддержкой свайп-навигации между фотографиями и pinch-to-zoom для детального рассмотрения интерьеров на мобильных устройствах. Каждый из пяти проектов открывается в лайтбоксе с плавными переходами.
Для решения задачи защиты контента реализовал многоуровневую систему: на этапе сборки изображения проходят обфускацию — разбиваются на тайлы, которые перемешиваются и получают непрозрачные идентификаторы. На клиенте заблокировано контекстное меню, перетаскивание изображений и открытие DevTools. Дополнительно реализована защита от экспорта через canvas. Это не даёт абсолютной гарантии, но значительно усложняет копирование для подавляющего большинства пользователей. Это быстро, эффективно, а главное решает задачу на 100%.
Для оптимизации загрузки на слабых сетях разработал адаптивную систему из трёх уровней качества изображений — lite, medium и full. При открытии сайта определяется скорость соединения, и пользователь получает оптимальный вариант с кэшированием для повторных визитов. Обработка изображений выполняется библиотекой Sharp на этапе сборки.
Настроил полный цикл CI/CD через GitHub Actions: автоматический прогон E2E-тестов на Playwright (включая тест на медленном 4G-соединении), сборка Docker-образа (multi-stage: Node 20 Alpine + Nginx Alpine) и автоматический деплой на staging и production окружения.
Для SEO внедрил структурированные данные JSON-LD, сгенерировал sitemap и robots.txt, подключил верификацию в Яндексе и Bing. Интегрировал Яндекс.Метрику с вебвизором, картой кликов и отслеживанием e-commerce событий для полной аналитики поведения посетителей.
Получился отличный, быстрый и лёгкий сайт с 100% защитой контента.
Пожаловаться
