Frontend-резюме проигрывает, когда весь опыт сводится к «адаптивная вёрстка, кроссбраузерность, работал с React». Этого ожидают от любой вакансии интерфейсов. Рекрутер ищет кабинет, форму, состояние, доступность, живое демо и готовность разобрать компонент вслух. Лендинг агентства в шапке продуктового слота обычно молчит.

Ниже — как собрать резюме frontend-разработчика: заголовок, стек, ссылки, формулировки, что не класть в ATS-колонки, два заполненных блока пуль. Каркас страницы — в как составить резюме. Пули опыта — в как описать опыт. Если коммерческого стажа нет, те же правила на одном кабинете: резюме без опыта. После сборки прогоните файл через проверку резюме.

Коротко:

  • Заголовок = frontend + основной стек (часто React/TypeScript или Vue), не «HTML/CSS-ниндзя».
  • Одна живая ссылка: демо или репозиторий с README. Весь GitHub не открывают.
  • Пули про интерфейс: форма, список, фильтр, состояние ошибки, доступность, скорость — не «делал UI».
  • Колонки, иконки стека и PDF-картинка ломают ATS и чтение с телефона.
  • Не обещайте Next, GraphQL и анимации, если на созвоне разберёте только лендинг.

Что решают по первому экрану

На вакансиях frontend смотрят так:

  1. Это интерфейсы продукта или вёрстка промо?
  2. Совпадает ли библиотека с вакансией достаточно, чтобы звать на тестовое?
  3. Есть ли кабинет / сложная форма / таблица, а не только лендинг агентства?
  4. Открывается ли демо без пароля и без «сейчас подниму»?
  5. Не картинка ли резюме с логотипами React?

Если в шапке «веб-разработчик» и стена из десяти фреймворков, файл некуда положить. Карточка роли — в резюме IT-специалиста. Путь в профессию, если ещё входите, — в как стать frontend-разработчиком.

Уровень читают по самостоятельности: верстали по готовому макету или собирали состояния сами; чинили чужие баги вёрстки или вели компонент; был ли прод и реальные пользователи. Слово middle в заголовке без этого только ужесточает скрининг.

Структура и ссылки

Одна страница. Порядок: шапка → 4–6 строк summary → опыт или проект, если он сильнее должности → навыки группами → образование внизу.

Ссылки: один репозиторий и демо, если демо живое. Для NDA — описание кабинета без скринов внутренних данных. Не ведите на Behance с чужими макетами, которые вы «верстали, но не сохранили». Не ведите на Figma, если вы не дизайнер и вакансия про код.

README: что за экран, как запустить, ваш вклад, чего нет. «Интернет-магазин» без оговорок выглядит надутым. «Список заказов, фильтры, форма, mock API, без оплаты» — можно звать. Как упаковать проект — в как описать проекты.

Контакты текстом. Пояс и формат, если remote. Подробности remote-файла — в резюме для удалённой работы. Summary отдельно разбирается в как написать summary.

Заголовок и стек

Рыночные заголовки: «Frontend, React / TypeScript», «Frontend, Vue 3», «Frontend, кабинеты и формы». Не «Fullstack JS», если вакансия frontend и бэкенд у вас учебный Express на 50 строк.

Было. Frontend-разработчик. Адаптивная вёрстка. Кроссбраузерность. Работал с HTML, CSS, JavaScript, React, Vue, Angular, Next, Redux, GraphQL. Стремление к идеальному UI/UX.

Стало. Frontend, React / TypeScript, кабинеты. 2 года: списки, фильтры, формы, состояния ошибок. Демо кабинета заказов: [ссылка]. Санкт-Петербург / UTC+3, hybrid.

Стек группами: язык и UI-библиотека; состояние и формы; стили; сборка и тесты, если они были. Не дублируйте HTML/CSS, если уже указан React. Отбор слов — в как указать стек и в навыках frontend.

Next.js, SSR, микрофронты пишите только если это прод, который можете разобрать. Иначе на скрининге спросят гидратацию и вы замолкнете. Честный SPA кабинета сильнее чужого стека из вакансии.

Какие пули читают

Формула та же: сделал X, чтобы закрыть Y, стало Z. Для интерфейсов Z часто без процентов: форма перестала терять ввод, ошибка сервера видна, таблица не прыгает, регресс перед релизом короче.

Вытаскивайте из работы:

  • экран: список, канбан, мастер, календарь, таблица с фильтрами;
  • форма: валидация, черновик, повторная отправка, файл;
  • состояние: загрузка, пустой список, ошибка API, права;
  • доступность: клавиатура, фокус, подписи — если делали, не «знаю WCAG»;
  • скорость: тяжёлый список, мемоизация, нарезка — только с фактом;
  • согласование с бэкендом: контракт, моки, что ломалось на несовпадении полей.

«Верстал по макетам из Figma» — обязанность. «Собрал мастер из 4 шагов: черновик сохраняется, назад не затирает поля, ошибка 409 показана текстом» — опыт. Пустые глаголы — в ошибках в резюме.

Пример 1. Junior, пет-проект кабинета

Вакансия: junior frontend, React, TypeScript, кабинеты, Git, тестовое 2–4 часа.

Junior frontend, React / TypeScript. Алматы / UTC+6. Кабинет заказов: репозиторий и демо [ссылки].

Собрал список заказов с фильтрами по статусу и дате. Пустое состояние и ошибка загрузки — отдельные экраны, не белый фон.

Форма нового заказа: валидация на клиенте, повторная отправка не создаёт дубль в mock API. Состояния кнопки «сохранить» не зависают.

Стили — CSS-модули. Адаптив до 360px: таблица уезжает в карточки, не ломает горизонтальный скролл всей страницы.

В README указано, чего нет: авторизация и оплата. Коммерческого штата нет, тестовое готов сделать на этой неделе.

Кандидат сам ограничивает объём. Это снимает ощущение надутого магазина. Рекрутеру проще позвать человека, который не врёт про SSR и платёжный шлюз.

Пример 2. Продуктовый кабинет в штате

Вакансия: frontend, React, кабинеты B2B, формы, работа с API, не лендинги.

Frontend, React / TypeScript, B2B-кабинет заказов. 2,5 года. Remote, UTC+3.

Перевёл создание заказа с одной простыни на мастер из трёх шагов: менеджеры перестали терять заполненные поля при ошибке API.

Собрал таблицу отгрузок с фильтрами и сохранённым видом колонок. Повторный заход не сбрасывает фильтр смены.

Закрыл расхождение контракта с бэкендом: поле статуса приходило строкой и числом. Добавил нормализацию и тест на оба ответа — форма перестала «молчать».

Покрыл форму заказа тестами на ошибочные состояния. Перед релизом регресс этого экрана — не клик глазами по 20 полям.

Не верстал промо лендинга компании и не обещаю анимации на GSAP: в файле этого нет.

Последняя строка необязательна, но полезна, если в прошлом были агентские лендинги и вы не хотите, чтобы файл читали как «сайт под ключ». Старое агентство сожмите до одной строки домена, если цель — продукт.

ATS, колонки и визуальный шум

Двухколоночный шаблон с фото и шкалами «React 90%» в 2026-м на CIS-рынке часто не разбирается парсером и плохо читается с телефона. Нужен обычный документ: заголовок, текст, списки. Логотипы стека картинками не заменяют слово React.

PDF из Canva с текстом в картинке — частая причина «резюме не прочиталось». Если сомневаетесь, откройте файл как текст: копируется ли стек. Имя файла: роль и фамилия, не «резюме финал 3».

Не кладите в навыки Photoshop, потому что «открывал макет». Не кладите Angular, если последний раз это был курс 2021 года. Не пишите «pixel perfect» как достижение.

После чистки прогоните файл через проверку резюме. Типичный отсев — стена фреймворков и отсутствие экрана, который можно назвать.

Под вакансию и собеседование

Меняйте первую пулю под тип экрана из объявления: таблица, форма, виджет, админка. Не копируйте стек вакансии целиком, если половины нет. Лучше честный React-кабинет, чем «также GraphQL, Relay, WebGL».

Письмо указывает на демо, не пересказывает CSS. Короткий комментарий к отклику: роль, один экран, ссылка. Каркас письма — в сопроводительном письме, генератор — /cover-letter.

К созвону готовьте один компонент: форма или список. Вопросы по роли часто про состояние, ключи, эффекты, доступность — не про «что такое интернет». Разбор — в вопросах на собеседовании frontend и в interview-prep. Если отклики молчат — почему не отвечают, а не третья колонка в файле.

Чек-лист перед откликом

Прогоните файл глазами за минуту, как рекрутер:

  • В шапке есть frontend и один основной стек, не пять фреймворков.
  • Первая пуля называет экран: список, форма, таблица, мастер — не «делал UI».
  • Демо или репозиторий открывается без пароля. README говорит, чего нет.
  • Нет колонок, шкал «React 90%» и логотипов картинками.
  • TypeScript, Next, GraphQL есть только если готовы к вопросу на созвоне.
  • Старые лендинги агентства сжаты или убраны, если цель — кабинет.
  • Пояс указан, если remote. Контакты копируются текстом.

Если чек-лист не закрывается, не увеличивайте число откликов. Доделайте экран или ссылку. Универсальный файл «на React и на Tilda» обычно молчит в обеих пачках. Когда молчат уже отправленные — почему не отвечают на отклики, а не новый шаблон с градиентом. Один сильный кабинет в шапке важнее третьей страницы курсов.

Для входа без штата не копируйте middle-вакансию в summary. Напишите учебный кабинет и готовность к тестовому. Как выглядит такое письмо рядом с файлом — в сопроводительном без опыта. Базовый каркас страницы, если разъехалась структура, — снова как составить резюме.

Частые вопросы

Достаточно ли лендингов для junior frontend?

Для вакансии «сайты под ключ» — да. Для продуктового кабинета — нет. Соберите один список+форму, даже учебный. Лендинги оставьте внизу или уберите.

Нужен ли TypeScript в шапке, если писал на JS?

Пишите то, на чём готовы к тестовому. Если TypeScript только в курсе — в навыки «знаком», не в заголовок. Вакансии с TS всё равно будут спрашивать типы на созвоне.

Как показать работу, если репозиторий закрыт?

Опишите экраны и эффект. Сделайте учебный кабинет того же класса задач. Не прикладывайте скрины с данными клиентов.

Стоит ли писать, что верстал на Tilda / Webflow?

Если цель — конструкторы, да. Если цель React-продукт — одной строкой в прошлом, не в шапке. Иначе вас положат не в ту папку.

Нужно ли портфолио на отдельном сайте?

Нет, если есть одно живое демо и GitHub. Сайт-портфолио с анимациями без кода продукта не усиливает отклик на кабинет.

Можно ли одно резюме на React и Vue?

Два файла или один с явным основным стеком и второй строкой «могу сопровождать Vue». На тестовое позовут по основному. Не делайте шапку «React/Vue/Angular».

Что сделать сейчас

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

Возьмите одну вакансию frontend и поставьте первой пулю, которая стыкуется с её интерфейсом: таблица, мастер, форма, не «адаптив». Прогоните файл через разбор резюме и отправьте со ссылкой в письме. Если вакансия на Vue, а у вас React — либо не откликайтесь, либо честно напишите основной стек и готовность к тестовому, без шапки «React/Vue/Angular».