Валерия Емельянова - персональный сайт актрисы, кандидата наук и преподавателя актёрских и бизнес-практик

Стек: Next.js 16 (App Router) · TypeScript (strict) · Tailwind v4 · nodemailer (SMTP) · next/og · Schema.org JSON-LD Хостинг: VPS (Node, systemd, nginx, Let's Encrypt) Домен: emelianova.pro

О проекте

Валерия Емельянова - актриса театра и кино, кандидат философских наук, тренер актёрских и бизнес-практик из Владимира. На сцене с 2003 года, около ста сыгранных ролей, награды международных фестивалей монодрамы. Сайт нужен не как имиджевая визитка, а как рабочий инструмент: посетитель должен либо записаться на бесплатное собеседование, либо получить пользу и вернуться позже. Под это и собиралась вся структура.

Задача

На входе был привычный многим, кто работает с непрофессиональными заказчиками, дизайн-прототип, выполненный обычной ручкой на обычных бумажных черновиках. Его требовалось перенести в полноценную вёрстку, разложить контент по реальным маршрутам, прикрутить отправку заявок, SEO и аналитику. И отдельная, не менее важная часть - увести визуал от типового каркаса лендинга, который встречается у каждого второго коуча.

Дизайн-концепция

Отправная точка - театральная драматургия с философской глубиной: сцена в полусвете, луч прожектора, дымка, тёплые лампы вдалеке. Палитра построена на глубоком графитово-чёрном фоне и кремовом тексте вместо чисто-белого. Тёплый амбер работает как сценический свет - на кнопках, акцентах и цифрах; винный и изумрудный заходят редко, как искра. Типографика держит характер: Garamond на заголовках и цитатах, гротескный Inter в основном тексте и рукописный Caveat для автографа.

Главная идея дизайна была проста: театр это сцена, а не сетка карточек. Поэтому ключевые блоки были выведены так, чтобы макет читался как театральная программка, а не как стартап-лендинг.

Первый экран - «сцена и бегущая строка». Журнальный разворот: слева имя крупно и блок базовой информации не иконками, а цифрами-фактами (23 года на сцене, ~100 ролей, 8 стран фестивалей), справа портрет с прожектором, внизу - бегущая строка сыгранных ролей. Никаких «четырёх иконок в ряд» и «фото плюс две кнопки».
Направления работы - как акты спектакля. Три аудитории (бизнес, публичные лица, абитуриенты) поданы не карточками-коробками, а нумерованными актами с крупными римскими цифрами и тонкими линиями. Открытый акт подсвечивается мягким спотом.
Свет как механика, а не картинка. По тёмной сцене за курсором ходит тёплый прожектор - лёгкое пятно света, которое оживляет страницу. На сенсорных экранах он отключается.
Паузы и авторские детали. Между секциями - полноэкранная цитата, которая раскрывается «занавесом» от центра к краям, орнамент-разделитель и рукописный автограф «В. Емельянова». Мелочи, которые важны.

Техническая реализация и функционал

Next.js 16 (App Router) + TypeScript strict. Контент рендерится на сервере (важно для SEO), а интерактив - аккордеоны, лайтбоксы, прожектор - живёт отдельными клиентскими «островами». Tailwind v4 с вынесенной в токены палитрой, поэтому бренд легко поддерживать.
Три сегментированные воронки. Раскрывающаяся «программа» с единым призывом «записаться на бесплатное собеседование». Снизу - плавающая панель с тремя сегментами; клик не просто скроллит, а раскрывает нужный акт и доводит его до начала блока после анимации.
Отзывы видео-кружками. Реальные отзывы открываются вертикальными роликами RuTube в лайтбоксе 9:16, со стилизованными обложками в едином ключе. Приватные видео подключены через токен доступа.
Биография и проекты. Раздел «обо мне» собран на вкладках (биография, образование, работы, награды, кейсы). Под каждый моноспектакль и творческий проект - своя страница со своим акцентным цветом, галереей, видео и прессой, общими шапкой и подвалом - чтобы сайт не распадался на отдельные микро-странички.
Форма заявок на почту. Отправка прямо с сайта на электронную почту актрисы, в случае сбоя почтовой функции форма показывает запасной контакт.

SEO, превью и аналитика

Сайт я собирал не как «страницу в вебе», а как узел в экосистеме поиска и соцсетей - чтобы он одинаково хорошо читался поиском, мессенджерами и новым поколением ИИ-ответов.

Семантика и разметка. Метаданные, canonical, Open Graph, sitemap и robots; JSON-LD Person с привязкой к Владимиру на главной и TheaterEvent / CreativeWorkSeries на страницах проектов.
OG-обложки, которые генерируются сами. Через next/og собирается брендовый баннер 1200×630 для каждой страницы - тёмная сцена, серифное имя, амбер-акцент. Шрифт и фон зашиты в проект, поэтому сборка не зависит от внешней сети. Фавиконка и иконка для iOS - тоже генерируемый монограммный знак «В·Е».
Яндекс.Метрика и верификация. Счётчик с вебвизором и картой кликов, мета-тег подтверждения прав - подключены штатно.

Результат

Театральный авторский сайт, который не выглядит шаблоном - редакторская типографика, движущийся свет, нумерованные «акты» и живые детали.
Серверный рендер под поиск, JSON-LD по сущностям, генерируемые OG-превью и брендовая атмосфера.
Рабочая форма заявок на почту с защитой от спама и запасным контактом.
Страницы моноспектаклей и проектов с собственным характером, но в единой рамке сайта.
Все ассеты - шрифты, фото, иконки - со своего хостинга, без зависимости от внешних CDN.