Frontend-резюме проигрывает, когда весь опыт сводится к «адаптивная вёрстка, кроссбраузерность, работал с React». Этого ожидают от любой вакансии интерфейсов. Рекрутер ищет кабинет, форму, состояние, доступность, живое демо и готовность разобрать компонент вслух. Лендинг агентства в шапке продуктового слота обычно молчит.
Ниже — как собрать резюме frontend-разработчика: заголовок, стек, ссылки, формулировки, что не класть в ATS-колонки, два заполненных блока пуль. Каркас страницы — в как составить резюме. Пули опыта — в как описать опыт. Если коммерческого стажа нет, те же правила на одном кабинете: резюме без опыта. После сборки прогоните файл через проверку резюме.
Коротко:
- Заголовок = frontend + основной стек (часто React/TypeScript или Vue), не «HTML/CSS-ниндзя».
- Одна живая ссылка: демо или репозиторий с README. Весь GitHub не открывают.
- Пули про интерфейс: форма, список, фильтр, состояние ошибки, доступность, скорость — не «делал UI».
- Колонки, иконки стека и PDF-картинка ломают ATS и чтение с телефона.
- Не обещайте Next, GraphQL и анимации, если на созвоне разберёте только лендинг.
Что решают по первому экрану
На вакансиях frontend смотрят так:
- Это интерфейсы продукта или вёрстка промо?
- Совпадает ли библиотека с вакансией достаточно, чтобы звать на тестовое?
- Есть ли кабинет / сложная форма / таблица, а не только лендинг агентства?
- Открывается ли демо без пароля и без «сейчас подниму»?
- Не картинка ли резюме с логотипами 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: в файле этого нет.
Последняя строка необязательна, но полезна, если в прошлом были агентские лендинги и вы не хотите, чтобы файл читали как «сайт под ключ». Старое агентство сожмите до одной строки домена, если цель — продукт.