Обо мне

Здравствуйте!

Владею следующими профессиональными навыками:

- семантически грамотная, кроссбраузерная, адаптивная/резиновая pixel perfect верстка, проходящая тест на переполнение контентом;
- оптимизация верстки и достижение высокой производительности;
- БЭМ;
- доступность (accessibility);
- работа с графикой, в т.ч. webp и графика под ретину, svg;
- pug;
- препроцессоры sass (scss) и less;
- Gulp;
- Babel;
- npm;
- git;
- понимание как работает php и база данных;
- знание JavaScript (стандарт ES5, ES6), модули, взаимодействие с сервером (ajax);
- jQuery
- bootstrap
- Photoshop, Figma;
- начальные навыки дизайна сайтов (занимался дизайном);
- знание Wordpress и Битрикс на уровне контент-менеджера.

Закончил интенсивные курсы от HTML-Академии. Приведу небольшое портфолио моих учебных работ:

- Проект Yoga (html, css, js, jquery)

В этом проекте использовал библиотеку jquery, в т.ч. запросы ajax также реализованы при помощи jquery. В данном проекте с сервера запрашиваются данные для карточек направлений, для абонементов, команды наставников и для отзывов. На основе полученных данных конструируются карточки и добавляются в соответствующий раздел. Так же отправка формы реализовано с помощью технологии ajax. Если отправка прошла успешно, появляется сообщение об успешной отправке заявки, если нет, появляется сообщение об ошибке.

Сайт адаптирован под три варианта экрана, вёрстку делал по принципу mobile first. Поддержка IE11.

Для реализации слайдера и валидации формы использовал плагины jquery.

Для изображений использован формат webp, а также имеется графика для ретиновых экранов, для IE вместо webp подгружается jpeg/png.

Демо-версия: https://b-612.github.io/yoga/
Ссылка на репозиторий: https://github.com/b-612/yoga

*****

- Проект keksobooking (js/es5)

В данном проекте я работал только над JS в рамках прохождения курса от HTML-Академии «Профессиональный онлайн‑курс JavaScript, уровень 1»
Нужно было реализовать поведение карты с пинами, пользовательских фильтров и формы размещения объявления.

Пины запрашиваются с сервера и отрисовываются на карте города. Форма отправляется на сервер без перезагрузки страницы, после чего страница переходит в начальное, неактивное состояние. Обо всех подробностях и задачах данного проекта лучше всего описано в ТЗ, которое реализовано в полной мере, ссылку на него прилагаю.
При написании кода использован стандарт ES5. Старался дробить код на множество небольших функций для того, чтоб не громоздить больших и сложных в поддержке конструкций, код разбит на модули. В конце курса проект прошел защиту по критериям качества, где получил оценку 100%.

- Демо версия: https://b-612.github.io/keksobooking/
- Ссылка на репозиторий: https://github.com/b-612/969413-keksobooking-18
- Ссылка на ТЗ: https://yadi.sk/i/vvoNhU_5Rj6AqA
- Ссылка на критерии: https://yadi.sk/i/c_yPBXzKY9qGNg

*****

- Проект cat-energy (html, css)

Данный проект также сделан в процессе прохождения интенсивного курса HTML-Академии «Профессиональный онлайн‑курс HTML и CSS, уровень 2». Здесь стояла задача адаптивной mobile first верстки по psd макетам с использованием одного из препроцессоров и сборщика gulp. Было предоставлено три psd макета (мобильная, планшет и десктоп версии) и графика.
Графику оптимизировал автоматически через gulp, используя формат webp, который здорово экономит место, сохраняя при этом хорошее качество. Webp использован для контентных изображений, там, где этот формат поддерживается браузером, а там где не поддерживается, используется оптимизированный jpeg, или png с прогрессивной отрисовкой. Всё это реализовано через тег picture, так же, как использование графики для ретиновых дисплеев и адаптивной графики, где для каждой версии (мобильный, планшет, десктоп) отображаются разные изображения в соответствии с медиазапросом. Для поддержки в IE11 подключен полифил. Все svg оптимизированы через таск в gulp. Также для инлайновых svg использован svg спрайт, из которого svg-шки подключаются с помощью тега <use>.
Кроме графики в проекте оптимизирована загрузка шрифтов и скриптов с помощью тега link с атрибутом preload. Для шрифтов использован font-display: swap, благодаря чему браузер не ждет пока шрифт загрузится, а сразу отображает его и, как только шрифт загрузится, он его рендерит заново.
Разметка и стилизация сделана с помощью методологии БЭМ и проверочный инструмент https://yoksel.github.io/html-tree/ подтверждает правильную структуру.
Верстка адаптивная, но статическая. Резину в переходных состояниях между версиями не делал.
Прилагаю ТЗ реализованное по данному проекту и критерии, которые выдвигались в требованиях к проекту и по которым проект оценивался на защите в %, где в итоге получил 100%.
Демо версия: https://b-612.github.io/cat-energy/
Ссылка на репозиторий: https://github.com/b-612/969413-cat-energy-17
Ссылка на ТЗ: https://yadi.sk/i/avBqvIJQnIc_Xw
Ссылка на критерии: https://yadi.sk/i/S2vMdFyBu7EyQw

*****

- Адаптивный слайдер на bootstap и jQuery

Демо: https://b-612.github.io/slider/
Проект: https://github.com/b-612/slider

***
Проект Техномарт
Демо версия: https://b-612.github.io/technomart/
Проект: https://github.com/b-612/969413-technomart-24


Мой профиль на сайте HTML-Академии: https://htmlacademy.ru/profile/b-612

Имею 4 месяца опыта участия в коммерческих проектах.

Хотел бы получить работу HTML-верстальщика, или Frontend-разработчика.

Приветствую ответственный подход к работе с упором на качество. Постоянно учусь и совершенствую навыки.

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