Сайт студии: как прототип стал проверяемым

С чего началось

Нужен был сайт собственной компании — и одновременно место, где можно учиться: пробовать разное, ломать, переделывать. Отсюда три ограничения, которые определили всё остальное.

• Без сборки и зависимостей. Открыл файл — увидел результат. Каждая строка понятна без документации фреймворка.
• Сайт настоящий, а не учебный. Значит: домен, HTTPS, 404, метаданные, формы, понятные тексты.
• Решения переиспользуемые. Всё, что сработало, описывается и уходит в библиотеку для клиентских проектов.

Четыре итерации

• Каркас и дизайн-система. Палитра и типографика на CSS-переменных, семь блоков страницы, адаптив, мобильное меню, появление блоков при прокрутке.
• Публикационная обвязка. 404, robots.txt, sitemap.xml, OG-картинка 1200×630 (генерируется скриптом, а не рисуется руками), микроразметка Organization.
• Приём заявок. Мини-сервис: проверка полей, honeypot, лимит по IP, лог, отправка в Telegram. Если сервис недоступен — форма сама предлагает письмо.
• Аудит и приёмка. Контраст по WCAG, работа без JavaScript, ARIA для ошибок формы — и скрипт, который проверяет 24 пункта перед публикацией.

Три решения, которые определили результат

1. Статика вместо конструктора

Конструктор дал бы сайт за час, но забрал бы понимание того, что внутри. Статика даёт полный контроль, нулевую абонплату и файлы, которые можно перенести куда угодно. Цена — правки через код, и это честно записано в ограничениях.

2. Заглушки помечены, а не спрятаны

Название, домен, почта и Telegram — пока placeholder'ы. Они перечислены в README и находятся одной командой. Это лучше, чем «забыть поменять»: проверка перед публикацией не пропустит их молча.

3. Приёмка скриптом, а не на глаз

Глазами не отличить контраст 4.26 от нормативных 4.5. Поэтому появился скрипт: считает контраст, ищет битые ссылки, второй h1, поля без подписи, битый JSON-LD. Он уже поймал два реальных огреха в метаданных страницы 404.

Результат в числах

Как это выглядит на телефоне

Отдельная проверка — поведение без JavaScript: меню остаётся видимым блоком, а форма предлагает почту и Telegram вместо мёртвой кнопки.

Что дальше

• Реальный домен и контакты. Заменить заглушки, включить живого бота, пройти строгую проверку без предупреждений.
• Кейсы клиентов. Эта страница — шаблон: задача, что сделали, решение, результат в числах.
• Отдельные страницы услуг. Когда появится больше пяти страниц — переход на Astro без потери скорости.
• Аналитика и ИИ. Заявки в CRM, бот-ассистент, автоматические отчёты.