Я — веб-разработчик с уклоном в чистый frontend. Делаю адаптивную pixel-perfect вёрстку по макетам, использую для работы свою сборку на Gulp+Webpack, создаю интерфейсы с нуля — без фреймворков, но с любовью к деталям.
Умею мыслить как верстальщик, дизайнер и интегратор сразу. Для меня важно, чтобы всё было не просто красиво, но и удобно поддерживать.
Gulp/Webpack Starter — мощная и гибкая сборка для профессиональной фронтенд-разработки. Эта система идеально подходит для pixel-perfect вёрстки и создания сложных адаптивных интерфейсов на чистом HTML, SCSS и JavaScript без использования фреймворков.
Сборка включает все необходимое для комфортной работы: автоматическую оптимизацию кода и изображений, поддержку современных стандартов JavaScript через Babel, удобную организацию SCSS-модулей по методологии БЭМ, а также встроенный сервер с горячей перезагрузкой через BrowserSync.
Отдельного внимания заслуживает экосистема готовых JavaScript-решений, расположенных в директории src/js/libs — здесь вы найдете кастомные реализации слайдеров, модальных окон, форм с валидацией, анимаций при скролле, ленивой загрузки изображений и множества других часто востребованных компонентов. Эти решения легко интегрируются в любые проекты и экономят часы рутинной работы.
Сборка полностью готова к использованию — просто клонируйте репозиторий, установите зависимости командой npm install и запустите разработку через npm run dev. Этот инструмент отлично подойдет как фрилансерам, так и веб-студиям, которые ценят чистый код, высокую производительность и возможность быстрого старта новых проектов без необходимости каждый раз настраивать сборку с нуля.
Достаточно сложная адаптивная вёрстка, по макету, pixel-perfect. Сетка — Flexbox/Grid, анимации, hover-эффекты, css переменные, оптимизированные изображения. В проекте используется swiper.js, в разной конфигурации. Реализована карта с использованием yandex api 3.0. Разработана интересная реализация для мобильного меню, в виде слайдера по категориям, вперед-назад. Реализована контактная форма, в модальном окне. Применены такие внешние решения, как fancybox, inputmask, noscroll, enquire.js, swiped-events. Активно используются кастомные решения на js из библиотеки сборки.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, BEM
Адаптивная верстка по макету, pixel-perfect. Сетка — Flexbox/Grid, анимации, hover-эффекты, css переменные, оптимизированные изображения. Используется swiper.js, в разной конфигурации. Реализована карта с использованием yandex api 2.1. Разработана реализация «прилипающего» на прокрутке, сайдбара каталога. Применено оригинальное компоновочное решение для сайдбара каталога, на мобильных размерах. Применены такие внешние решения, как fancybox, scroll-lock, enquire.js, swiped-events. Активно используются кастомные решения на js из библиотеки сборки.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, BEM
Адаптивная верстка по макету, pixel-perfect. Сетка — Flexbox/Grid, анимации, hover-эффекты, css переменные, оптимизированные изображения. Используется swiper.js, в разной конфигурации. Применены такие внешние решения, как swiped-events, scroll-lock. Активно используются кастомные решения на js из библиотеки сборки.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, BEM
Адаптивная верстка по макету, pixel-perfect. Сетка — Flexbox/Grid, анимации, hover-эффекты. Применены такие внешние решения, как animate-scss, gsap, inputmask, jquery, js-cookie, scroll-lock. кастомные решения на JS и JQ
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, JQuery, GSAP, BEM
Адаптивная верстка по макету, pixel-perfect. Сетка — Flexbox/Grid, анимации, hover-эффекты, css переменные. Применены такие внешние решения, как swiper.js, swiped-events, scroll-lock. Реализован, блокирующий прелоудер, дожидающийся загрузки всех изображений. Активно используются кастомные решения на js из библиотеки сборки.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, BEM
Адаптивная верстка по макету, pixel-perfect. Сетка — Flexbox/Grid, анимации, hover-эффекты, css переменные, оптимизированные изображения. Используется swiper.js, в разной конфигурации. Реализована карта с использованием yandex api 2.1. Разработана реализация «прилипающего» на прокрутке, сайдбара каталога. Применено оригинальное компоновочное решение для сайдбара каталога, на мобильных размерах. Применены такие внешние решения, как fancybox, scroll-lock, enquire.js, swiped-events. Активно используются кастомные решения на js из библиотеки сборки.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, BEM
Адаптивная верстка по макету, pixel-perfect. Сетка — Flexbox/Grid, анимации, hover-эффекты. Используется swiper.js, в разной конфигурации. Применены такие внешние решения, как animate-scss, enquire.js, swiped-events, jquery, scroll-lock. Активно использовались кастомные решения на JS и JQ.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, JQuery, BEM
Адаптивная верстка по макету, pixel-perfect. Сетка — Flexbox/Grid, анимации, hover-эффекты. Используется swiper.js, в разной конфигурации. Применены такие внешние решения, как animate-scss, air-datepicker, jquery, scroll-lock.Активно использовались кастомные решения на JS и JQ.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, JQuery, BEM
Адаптивная верстка по макету, pixel-perfect. Сетка — Flexbox/Grid, анимации, hover-эффекты. Используется swiper.js, в разной конфигурации. Применены такие внешние решения, как jquery, scroll-lock.Активно использовались кастомные решения на JS и JQ.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, JQuery, BEM
Адаптивная верстка по макету, pixel-perfect. Главная страничка — адаптивный полноэкранник. Сетка — Flexbox/Grid, анимации, hover-эффекты. Используется swiper.js, в разной конфигурации. Применены такие внешние решения, как animate-scss, jquery, scroll-lock.Активно использовались кастомные решения на JS и JQ.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, JQuery, BEM
Адаптивная верстка по макету, pixel-perfect. Предпросмотр видео, в карточках. Контактная форма. Сетка — Flexbox/Grid, анимации, hover-эффекты, css переменные. Применены такие внешние решения, как swiper.js, swiped-events, scroll-lock, fancybox. Разработано решение для подстановки телефонных префиксов разных стран, на страничке контактов. Активно используются кастомные решения на js из библиотеки сборки.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, BEM
Адаптивная верстка по макету, pixel-perfect. Полноэкранный лендинг. Контактная форма. Сетка — Flexbox/Grid, анимации, hover-эффекты. Используется swiper.js, в разной конфигурации. Применены такие внешние решения, как lightgallery, jquery, scroll-lock, enquire.js, swiped-events.Активно использовались кастомные решения на JS и JQ.
Технологический стек: Gulp/Webpack/Babel, CSS3, SCSS, HTML5, JavaScript, JQuery, BEM