#Тестовое задание на позицию фронтенд-разработчика

###Задача: Используя фреймворк Vue.js и API https://swapi.co/ создать сервис, предоставляющий информацию о героях фильмов Star Wars.

####Макет: https://www.figma.com/file/PXdYrz28ltpuv3bsbosmEz/%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5?node-id=8%3A2

####Общие технические требования:

• Сетка: определена в макете.
• Адаптивность сетки: мобильная (320px-767px) и десктопная (768px +) резиновые версии.
• Методология: БЭМ.
• CSS препроцессор: на выбор Less или Sass (Scss).
• Сборка и автоматизация: Webpack, Gulp.
• Используемый фреймворк: Vue.js.
• Кроссбраузерность: последняя версия Google Chrome, остальное на усмотрение кандидата.
• Типографика: определена в макете.
• Используемые шрифты: Roboto.

###Описание блоков:

####Header. Просто статическая шапка с фоновым изображением и надписью.

####Поле поиска и карточки.

• Пока данные загружаются из API необходимо на месте данного блока показывать preloader (анимация находится в видео файле). После загрузки данных preloader плавно исчезает (fadeOut анимация с помощью изменения opacity), а на его месте появляются карточки и поле поиска.
• Ввод в поле поиска приводит к загрузке новых данных с соответствующими параметрами. Реализовать debounce для поиска.
• Аватар в карточке — первая буква имени персонажа. Фоновый цвет аватара выбирается либо случайным образом, либо из словаря цветов на усмотрение кандидата.
• Нажатие на карточку ведёт к открытию модального окна (на десктопе размер окна согласно макету, на мобильных устройствах - на весь экран) с дополнительной информацией. Получение новой информации происходит с помощью дополнительных XHR запросов.
• В поле Films в модальном окне выводится список всех фильмов, где присутствовал данный персонаж. В одной строке один фильм.
• Все необходимые состояния (hover, active) представлены в макете.

####Footer. Просто полоска с текстом, всегда прижатая к нижней части страницы.

###Дополнительно:

• На десктопе шапка всегда занимает ⅓ экрана, блок с карточками ⅔. Позиционирование шапки — static, фиксированным делать не нужно.
• Минимальное время показа предзагрузчика, вне зависимости от статуса запроса — 2 секунды.
• Анимация появления карточек персонажей — fadeIn с небольшим перемещением снизу на своё место. Привязывать анимацию к скроллу не нужно.
• Preloader на момент загрузки дополнительной информации, необходимой для открытой карточки. Видео с анимацией: https://drive.google.com/open?id=1nw0HsV4oELVmxgARwVuzqowIsv882qQD
• Анимация модального окна - на усмотрение кандидата.
• Реализовать Infinite scrolling по 10 карточек (всё необходимое для этого есть в api).
• Для хранения данных использовать Vuex.
• Любые другие улучшения UX приветствуются.

npm install

npm run serve

npm run build

npm run test