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

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

Чаще всего верстаю из исходников 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).
Небольшие личные проекты в свободном доступе на Github.


Навыки

• Создание шаблонов (от простых целевых страниц до сложных интерфейсов 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+. Из вышесказанного следует, что само собой верстка всех проектов в списке адаптируется/тянется/масштабируется.


Nemoloko
Описание: Была задача сделать анимацию при скролле на примере видео, которое было в качестве референса. На это ушло дней 5. Доработка анимаций заняла 2 недели. В этом проекте я наравне с арт-директором придумывал и реализовывал те или иные идеи. Дизайн и верстка адаптива фактически были на мне, так как финальный результат был далеко от дизайн-макета.

Срок (на текущий момент) около 2-3 рабочих недель (80-120 часов)
Стоимость (на текущий момент) около 40000-60000 руб


Spacemarathon
Описание: Был дан 1 дизайн-макет под десктоп и референсы-ссылки в качестве пожеланий к анимациям и интерактиву. Этот проект послужил основой для 7 других кейсов, поэтому пришлось хорошенько подумать, как максимально унифицировать всё что можно. Адаптив сделал сам от дизайна до верстки, половину анимаций и интерактива тоже придумал сам.

Срок (на текущий момент) около 1 рабочей недели (30-40 часов)
Стоимость (на текущий момент) около 15000-20000 руб


Варежкино
Описание: Довольно простой сайт. Адаптивность (без макетов) и анимации (пара референсов в ТЗ) делал от дизайна и до верстки только сам. Там еще есть много внутренних страниц, но смотреть на них смысла нет.

Срок (на текущий момент) около 1 рабочей недели (30-40 часов)
Стоимость (на текущий момент) около 15000-20000 руб