Этот лендинг
Малый бизнес видит работы с цифрами и сроками и оставляет заявку в одной форме
- разборов кейсов на отдельных страницах
- 7
- e2e-тестов на сценарии, телефон и планшет
- 49
- unit-тестов: кейсы, заявка, защита формы
- 30
- файл, чтобы добавить кейс
- 1
Задача
Сайт-портфолио должен сам быть доказательством: показать работы с цифрами, объяснить, как устроен процесс, и принять заявку без потерь.
Решение
Спека и дизайн-система до кода, кейсы из markdown-коллекции с разбором на отдельных страницах, форма с защитой от спама и резервной копией заявки, e2e-тесты на сценарии и телефон.
По страницам
-
Услуги и кейсы
Услуги раскрываются по клику, кейсы открываются отдельными страницами с разбором. Заказчик проверяет работы, а не верит на слово.
-
Обо мне
Опыт цифрами и стек. Заказчик понимает, с кем будет работать.
-
Форма заявки
Выбор задачи из пяти вариантов, имя и контакт. Заявка уходит письмом и дублируется в файл, поэтому не теряется, даже если почта не ответила.
Что проработано
-
Кейс — один markdown-файл
Витрина, страница разбора и связанные кейсы собираются из коллекции. Новый кейс — новый файл, код не трогается.
-
Заявка не теряется
Письмо уходит через Resend, копия пишется в файл на сервере. Если письмо не ушло, посетитель видит понятное сообщение.
-
Защита формы от спама
Скрытое поле-ловушка и лимит: не больше пяти заявок за десять минут с одного адреса. Оба правила закрыты тестами.
-
Проверки на телефоне
Тесты на ширине 360 px проверяют, что страница не прокручивается вбок, а кнопки и ссылки не меньше 44 px.
-
Два сайта на одном деплое
Тот же сервер отдаёт лендинг Медиахаба на своём поддомене: адрес различается по заголовку Host.
Как шла работа и что проверял
Этапы
-
Спека, дизайн-система, структура
часы 0–6
-
Секции, анимации с «уменьшить движение», форма с валидацией
часы 6–24
-
Витрина кейсов, разборы на отдельных страницах, скрины
часы 24–40
-
E2E-тесты на форму и мобильную раскладку, публикация
часы 40–48
Проверки
-
49 e2e-тестов Playwright
Главная, витрина и разборы кейсов, форма заявки, меню и раскладка на телефоне 360 px и планшете 768 px.
-
Форма под тестом
Успешная отправка, ошибки у полей, сообщение при превышении лимита.
-
30 unit-тестов
Логика витрины и разборов, валидация заявки, доставка письма с копией в файл, лимит частоты.
-
«Уменьшить движение»
Анимации появления выключаются по системной настройке, содержимое остаётся полным.
Обсудим вашу задачу?
30 минут созвона. Срок и цену называю в тот же день.
Другие кейсы
все кейсы
Медиахаб
Автор канала утверждает готовые посты, карточки и рилсы, а не делает их сам
80 идей для рилсов, к каждой хук и сценарий
Лендинг Медиахаба
Автор канала за один экран понимает, что делает платформа, и оставляет заявку
4 шага конвейера: стратегия, посты, карточки, рилсы
Статистика для трейдеров
Трейдеры видят, какой сетап приносит деньги, а какой сливает счёт
34 метрики по каждой сделке