Expert Personal Site

Сайт эксперта

Сайт эксперта продаёт доверие к конкретному человеку. Красивую оболочку сегодня делает любой генератор, поэтому выигрывает тот, у кого на странице живой человек, понятное обещание и ощутимое качество исполнения.

Порядок работы

Иди по шагам. Не пропускай шаг 1, даже если просят «просто красиво».

1. Портрет человека. Собери из всех доступных источников (переписка, сайт, канал, документы): кто эксперт, для кого работает, какой результат даёт, 2-3 реальные истории, ценности, цели, свои фото и работы, слова, которыми он сам говорит. Ничего не выдумывай: нет факта, значит нет его на сайте. Выведи одну главную мысль сайта и одну фразу-обещание: кому, что получит, каким способом.
2. Бриф. Найди нишу в references/nishi.md (28 ниш: стартовая палитра, шрифты, что показать на фото, нужные блоки, сомнения клиента, чего избегать). Запиши в 5 строк: тип страницы (услуга людям, кабинет или студия, онлайн-продукт, автор), задача (записаться, купить, подписаться, перейти в бота), стиль (один, до конца), один незабываемый элемент (картина, предмет, фото с характером, живой интерфейс), чего избегать. Подбери 2-3 приёма и открой их живые образцы из references/obrazcy.md.
3. Композиция. Сетка на золотом сечении, плотность «журнал», не «пустыня». Прочитай references/kompozitsiya.md.
4. Шрифты и цвет. Начни с палитры и пары шрифтов ниши, затем подстрой под человека по references/shrifty.md и references/tsvet.md. Только шрифты с кириллицей, без кислотных и неоновых цветов, без полностью тёмного фона по умолчанию. Галерея всех ниш вживую: assets/nishi.html.
5. Фото, объём, свет. Прочитай references/foto-i-kartinki.md и references/obem-svet-ten.md. Живое демо всех приёмов объёма: assets/obem-demo.html.
6. Движение и видео. Только лёгкие приёмы: references/effekty.md, references/video.md.
7. Тексты. Пиши по references/teksty.md. Русский текст прогони по правилам humanizer-ru, английский по humanizer. Без длинных тире.
8. Проверка. Запусти python -I scripts/proverka_saita.py <папка сайта> и пройди чек-лист references/proverka.md. Если есть Node.js и Playwright, запусти node scripts/proverka_v_brauzere.mjs <index.html>: он откроет страницу на 375, 768, 1280 и 1440 px, найдёт ошибки консоли, вылезание за край, мелкие кнопки и сохранит скриншоты. Посмотри скриншоты глазами.

Главные правила

• Человек важнее эффекта. Фото эксперта, его работы, его предметы и его голос дают больше, чем любая анимация.
• Реализм и объём создавай светом, тенью, рамками, слоями и цветом, а не тяжёлым 3D. Один источник света на всю страницу: сверху слева, тени вниз вправо.
• Одно сильное движение на страницу. Всё остальное тихо: подъём карточки на 2 px, лёгкое приближение фото, нажатие кнопки.
• Лёгкость. Первый экран открывается быстро на слабом телефоне. Без WebGL-сцен, без прокрутки, которая «захватывает» колесо, без автозапуска видео со звуком.
• Асимметрия по золотому сечению вместо всего по центру: колонки 38,2 / 61,8, отступы и размеры по шкале 1,618.
• Плотность. Воздух нужен, но блок не должен выглядеть пустым. На экране всегда есть фото, предмет или живая деталь.
• Явные цветные блоки. Не красить весь сайт одним оттенком (один оттенок на весь сайт выглядит плоско). Секции чередуют фон: светлый, тёплый песочный, одна тёмная полоса-акцент, шалфейный. Больше блоков, текста, картинок и списков, чем «пустого журнала».
• Каждый факт отвечает на «и что?» Опыт эксперта подаётся как польза для клиента. Внутреннюю кухню (число отделов, результаты внутренних тестов) на сайт не выносить.
• Без признаков ИИ-шаблона: Inter, Roboto и Arial как голос сайта; фиолетово-розовые градиенты; неон и кислотные цвета; надзаголовок над каждым заголовком; номера секций 01/02/03; сетка одинаковых карточек «иконка, заголовок, текст»; эмодзи вместо иконок; стоковые рукопожатия и картинки от ИИ «с общим светом»; выдуманные отзывы, логотипы и цифры.
• Честность. Иллюстрацию, созданную ИИ, подписывай. Чужие фото только со свободной лицензией и подписью автора.
• Приватность. Адрес до района или улицы, без номера дома. Личные медицинские и семейные подробности не выносить на сайт.

Структура страницы эксперта

Порядок по умолчанию, меняй под бриф:

1. Первый экран: фраза-обещание, живое фото эксперта или его главный предмет, одна кнопка действия, рядом доказательство (цифра из реальной практики, «о нас писали», отзыв).
2. Кому помогаю и с чем (2-4 ситуации словами клиента).
3. Как работаю: метод или продукт, показанный вживую (фото, интерфейс, процесс).
4. Доказательства: отзывы с конкретным результатом, работы, кейсы.
5. Кто я: коротко и только то, что объясняет экспертность и ценности.
6. Подарок за подписку или пробный шаг (гайд, тест, первый урок, бот).
7. Финальная кнопка и контакты.

Справочники

• references/kompozitsiya.md: сетки, золотое сечение, плотность, ритм секций.
• references/shrifty.md: пары шрифтов с кириллицей, размеры, объёмный текст.
• references/tsvet.md: палитры, подкрашенные нейтральные, цвет как глубина.
• references/foto-i-kartinki.md: съёмка, обработка, вырезы, рамки, форматы, лицензии.
• references/obem-svet-ten.md: девять приёмов объёма с готовым CSS.
• references/effekty.md: какие эффекты брать, а какие нет, с весом.
• references/video.md: видео на сайте и монтаж коротких роликов.
• references/teksty.md: тексты эксперта, гуманайзеры, запреты.
• references/nishi.md: база 28 ниш: палитры, шрифты, фото, блоки, сомнения клиента, чего избегать.
• references/obrazcy.md: живые образцы к каждому приёму, «приём → где посмотреть».
• references/proverka.md: чек-лист перед показом.