Обо мне

Я занимаюсь версткой, front-end разработкой и веб-дизайном более 9 лет.

Верстать могу практически всё: фиксированные по ширине страницы, почтовые рассылки, адаптивные интерфейсы, динамические презентации, личные кабинеты и прочее.

Чаще всего верстаю из исходников Photoshop, дизайн делаю в Sketch (также есть опыт с AI, Avocode, Figma, Zeplin). Иногда приходится дорабатывать интерфейс прямо на ходу, вносить правки в готовую верстку, продумывать адаптивность макета или анимации самостоятельно.

Кроссбраузерность: Firefox, Opera, Chrome, Safari, Edge. При необходимости тестирую в IE.
Кроссплатформенность: macOS, Windows, Linux, Android, iOS.
Адаптивность/отзывчивость: от мобильных экранов в 4 дюйма до телевизоров.

Сборка
Проект собираю на Grunt (или Gulp, в зависимости от требований). При этом использую Pug как базовый шаблонизатор, собираю все SASS и JS файлы в один (production.css и production.js), запускаю сервер и обновляю страницу после сохранения изменений. Т.е. фактически автоматизирую простые рутинные операции.

Если требуется создать SPA использую Vue.js и сборку с помощью Webpack (работаю вот с этим стартовым проектом, разработка и поддержка ведется командой работающей над Vue.js).

Разметка
Разметку пишу применяя правила БЭМ методологии. Считаю подход наиболее правильным, так как БЭМ позволяет максимально упростить работу и сократить время на чтение проекта для разработчиков, которые работают с кодом после меня.

Стили
Знаю всё про самые современные стандарты и их поддержку браузерами.

Для стилей использую препроцессоры (SASS, Stylus и другие). Каждый SASS файл представляет из себя набор правил, которые объединены схожими требованиями (обычно это стили для конкретного блока и его элементов, например для шапки сайта). Базовые стили любого проекта разделены по назначению и состоят из правил для: сброса стилей, сетки, подключения шрифтов, переменных, миксинов, типографики, иконок, форм и анимаций.

Сценарии
Что касается знаний по JS. Чаще всего использую jQuery, как основной инструмент. В последнее время понравилась связка Vue.js + jQuery. На данный момент я могу оживить страницу анимациями (JS + CSS3), написать небольшой плагин на jQuery, реализовать SPA на простом уровне. Знания оцениваю на три с минусом.

Git
В работе также использую Git (Bitbucket, Github, Gitlab). Знания не глубокие, но их достаточно чтобы работать с базовым функционалом системы контроля версий (например по методологии Git-flow).

Работа в команде

Взаимодействовал с разными командами как в офисе, так и удаленно. Имею опыт командной разработки с нуля, командной разработки и поддержки единственного сервиса/проекта, создания сайтов на потоке etc.

Навыки

  • Создание шаблонов (от простых целевых страниц до сложных интерфейсов CRM)
  • Создание анимированных страниц и динамических презентаций
  • Создание фиксированных / адаптивных писем
  • Создание кросс-браузерных / кросс-платформенных / отзывчивых макетов
  • Создание плагинов jQuery
  • Написание интерфейсного JS
  • Отрисовка веб-дизайна


Инструменты/технологии

  • HTML, CSS, JS
  • Pug, SASS, jQuery, Vue.js (в основном)
  • BEM методология (в основном)
  • LESS, PostCSS, Stylus
  • Grunt (в основном)
  • Gulp, Webpack
  • Git (в основном)
  • Bitbucket, Github, Gitlab
  • Trello (в основном)
  • Redmine, Youtrack
  • macOS 
  • Firefox, Opera, Chrome, Safari (в основном)
  • IE 10-11, Edge
  • Photoshop, Sketch App, Figma, Zeplin
  • Scrum, Kanban


Условия для позитивного рабочего процесса:

  • наличие четкого технического задания и примеров для любого интерактива или динамики обеспечивает уверенность в позитивном результате (своим языком в письменном или устном виде);
  • понимание что любое увеличение объёмов работ сопровождается соответствующими изменениями в сроках разработки и величине бюджета;
  • соблюдение вот этого списка правил предъявляемых к .psd/.sketch/.figma/.ai дизайн-макетам.
  • быть в рабочее время по возможности на прямой связи (это касается дизайнеров, менеджеров, кодеров и других участников процесса).


Оплата услуг и формирование цены:

  • перевод на банковскую карту;
  • цена обговаривается индивидуально для каждого проекта;
  • срок на реализацию считается в часах поблочно в каждом из дизайн-макетов, затем часы суммируются по каждому дизайн макету, суммируются цифры всех макетов и обычно после этого умножается на часовую ставку (текущая составляет 500 руб). В ряде случаев (большой объем, меняющиеся требования, готовность только части дизайн-макетов и т.п.) приходится полагаться на интуицию (в этом случае я обычно прибавляю на правки 30% от общего времени на весь проект и если скажем нет макетов под адаптив, то еще 40% от общего времени). Получаем такой расчет: суммируем время всех блоков, прибавляем 40%, прибавляем 30%.
  • работаю как по предоплате 50% на 50%, так и поэтапно, по часам etc; часто разбиваю проект на этапы и беру вперед небольшими суммами за каждый этап, при этом оставляю небольшую сумму на оплату после сдачи проекта заказчику.


Сроки:

  • от 1 рабочего дня (8 часов);
  • до нескольких месяцев в случае больших объемов.


Для старта верстки требуются:

  • Описание адаптивности/отзывчивости;
  • Готовность исходников и возможность их предоставить (дизайн-макеты .psd/.sketch/etc, шрифты и прочее);
  • Список браузеров/устройств для поддержки;
  • Описание интерактива/анимаций/действий на каждой странице;
  • Доступ к нужным сервисам, наприме Trello или Google Документы;
  • Контакты (телефон, почта, Телеграм).

Портфолио
Ниже несколько хороших работ по верстке, которые делал за последние полгода.
Этого достаточно, чтобы показать уровень навыков.

Стэк стандартный: БЭМ, Grunt, Pug, SASS или Stylus, jQuery или jQuery+Vue.js, плюс сторонние проверенные jQuery скрипты для реализации разных сценариев (слайдер, анимация блоков/элементов при скролле, появление блоков/элементов при в определенных условиях, отслеживание и проверка форм и т.п.).

Проекты не являются SPA (даже если присутствует Vue.js).
Ни в одном из проектов использующих Vue.js не реализовано взаимодействие и обмен данными с сервером, так как заказчики вроде хотели делать, а потом передумывали. Уровень знаний нужных для разработки полноценного SPA на Vue.js на троечку.

Все работы поддерживают современные десктопные и мобильные браузеры, IE в этот список не входит, только Edge. Требования не мои. Я хоть и не люблю, но умею верстать от IE7+. Из вышесказанного следует, что само собой верстка всех проектов в списке адаптируется/тянется/масштабируется.

Ознакомиться с портфолио.

Участие в профессиональных сообществах