Шестеров На главную Контакт
Кейс о себе · открытая внутрянка

Этот сайт —
с открытой внутрянкой

Клиентские системы я показать изнутри не могу — там живые данные: гости, ученицы, платежи, переписка. А этот сайт мой, и его можно разобрать целиком: что снаружи, что внутри, из чего собрано и почему именно так. Заодно видно, что тем же самым я пользуюсь сам, а не только продаю.

1человек: дизайн, фронтенд, бэкенд, тексты
0конструкторов и внешних CMS
~4дня от пустой папки до боевого домена
01
Что видит посетитель
  • Главная. Первый экран во всю высоту, список работ, блок обо мне с честными цифрами, отзывы и форма заявки. Светлая тема по умолчанию, тёмная — по выбору посетителя.
  • Страницы кейсов. Задача, что сделано, стек, результат — по одному шаблону, но собираются из данных, а не лежат отдельными файлами.
  • Страница услуги. Отдельная посадочная под CRM: боль, состав системы, интеграции, стоимость владения.
  • Правовая часть. Оферта, политика обработки данных, согласие, страница о cookie. Формы не отправляются без отметки о согласии, и проверяет это сервер, а не только галочка в вёрстке.
  • Приём заявок. Заявка уходит в панель и приходит уведомлением на телефон. Форма защищена ловушкой для ботов, ограничением частоты и reCAPTCHA v3.
02
Панель управления

Ровно та панель, которую я ставлю клиентам. Ниже — настоящие экраны, не макеты.

Редактор главной страницы в панели управления: поля заголовков, подписей и фонового фото
Тексты сайта правятся полями, а не в коде. Пустое поле возвращает то, что записано в файле страницы, — сломать вёрстку правкой нельзя.
Раздел «Кейсы»: список проектов с порядком, кнопками скрытия и удаления
Кейсы — не файлы, а данные. Один источник питает три представления: список на главной, страницу-хаб и саму страницу кейса. Новый проект заводится скрытым, публикуется одной кнопкой.
Медиатека: загруженные фото с описаниями alt и списком страниц, где они используются
Медиатека: загруженное фото само становится WebP, описание alt живёт вместе с файлом и подставляется везде, где фото стоит. Занятый кадр не даст себя удалить — видно, на каких страницах он используется.
Панель управления на телефоне: карточки медиатеки в одну колонку
С телефона панель работает целиком, а не «просмотром»: меню уезжает в выдвижной ящик, подписи кнопок заменяются иконками, поля не мельчат — iOS не зумит форму при вводе.
  • Заявки. Статусы «новая → в работе → закрыта», заметка для себя, телефон и Telegram ссылками — со смартфона звонок в одно касание.
  • Отзывы. Приходят с сайта на модерацию: сами на страницу не попадают, текст можно поправить перед публикацией.
  • Уведомления. Push на телефон о новой заявке и отзыве — без своего приложения в сторах.
03
Как это устроено
  • Дизайн живёт в файлах, правки — в базе. Панель хранит только изменённые поля и накладывает их при отдаче страницы. Пустая база — сайт выглядит ровно как в исходниках. Это значит, что правка из панели не может «увести» дизайн.
  • Свой код, без конструкторов. Node.js и обычный HTML с CSS, без сборщиков и фреймворков. Страница весит килобайты, а не мегабайты, и открывается быстро на слабом телефоне.
  • SEO — часть системы, а не «потом». robots и карта сайта генерируются из тех же данных, что и страницы: добавили проект — он сам появился в карте. Пока не задан боевой домен, сайт закрыт от индексации, чтобы в поиск не попал временный адрес.
  • Данные не теряются. Копии контента снимаются при старте и раз в сутки, старые чистятся сами — бэкапы не должны однажды забить диск, я это уже проходил.
  • Запуск. Systemd поднимает сервис и перезапускает при сбое, nginx отдаёт HTTPS, сертификат продлевается сам. Обновление — одна команда, контент при этом не трогается.
04
Что это значит для вас
  • Вы видите товар до покупки. Не «сделаем панель управления», а вот она — со всеми экранами, включая телефон.
  • Правки без разработчика. Поменять текст, заменить фото, добавить проект, снять отзыв с публикации — это работа на минуту, без письма мне и без ожидания.
  • Сайт принадлежит вам. Никакой абонплаты за панель и лимитов на страницы. Код после оплаты ваш, вести систему может кто угодно.
  • Так же собирается ваш проект. Разница только в наборе разделов: у отеля добавляются брони и загрузка, у школы — курсы и оплаты, у мастера — запись и напоминания.
Понравилось, как устроено
Расскажите о задаче — посчитаю состав и стоимость
Обсудить проект