Задача: создать тему для корпоративного сайта на OctoberCMS, по дизайн макету.
Тема сделана в адаптивном дизайне с использованием шаблонизатора Twig, за основу css частично взят Bootstrap4, из JavaScript использован Jquery 3.4.1, Slick, anime.js 3.2, часть Bootstrap4.
Демонстрация:
Задача: создать тему для интернет-магазина, на OctoberCMS по дизайн макету.
Тема сделана в адаптивном дизайне с использованием шаблонизатора Twig, написан свой css микрофреймворк на SCSS, из JavaScript использован Jquery 3.4.1, Select2, Fancybox3, Flickity.
Демонстрация:
Задача: создание целевой страницы автосервиса по дизайн-макету.
Целевая страница автосервиса сделана в адаптивном дизайне, на OctoberCMS (Bootstrap 4, jquery-3.3.1). Реализован Telegram бот оповещения, о заявках через форму сайта и динамическая галерея, которая получает фото через Instagram API, из аккаунта автосервиса с кешированием на 2 часа.
Демонстрация сайта:
Задача: создание целевой страницы партнерской программы для Instagram сервиса по дизайн-макету.
Верстка сайта партнерской программы выполнена в адаптивном дизайне, на Bootstrap 4, jquery-3.3.1, слайдер slick, она отлично работает на всех платформах, реализована анимация.
Демонстрация сайта:
Задача: верстка веб-приложения HTML/CSS(SASS)/JS.
Верстка веб-приложения выполнена на основе частично взятого Bootstrap 4, из JS jquery и другие библиотеки. Заказчиком был выбран довольно странный постраничный способ реализации, вместо написания css/js фреймворка и разработка интерфейса на его основе. Часть веб-приложения была выполнена полностью с разработкой скриптов JS(ES6).
Демонстрация сайта:
Задача: создание целевой страницы вебинара для Instagram сервиса по дизайн-макету.
Целевая страница вебинара выполнена в адаптивном дизайне, на Bootstrap 4, jquery-3.3.1, прекрасно работает на всех платформах, реализован таймер обратного отсчета на JS и анимация.
Демонстрация сайта:
Задача: создание целевой страницы для Instagram сервиса по дизайн-макету.
Целевая страница выполнена в адаптивном дизайне, на Bootstrap 4.1, слайдере Slick, jquery-3.3.1 и прекрасно работает на всех платформах. Слайды меняются путем замены контента, во время смены проигрывается анимация.
Демонстрация сайта:
Задача: создание целевой страницы вебинара для Instagram сервиса по дизайн-макету.
Целевая страница вебинара выполнена в адаптивном дизайне, на Bootstrap 4, jquery-3.3.1, прекрасно работает на всех платформах, реализован таймер обратного отсчета на JS.
Демонстрация сайта:
Задача: перенести сайт (целевая страница), с uCoz конструктора сайтов на чистый HTML5/CSS3/JS, попутно оптимизировать, для перехода на нормальный хостинг.
Сайт пришлось переверстать с ноля. В качестве базы CSS взят Bootstrap 4.0, при помощи SASS, из него было вырезано все лишнее и оставлен только Flex, Modal и несколько других компонентов. Конечный CSS в несжатом виде имеет размер 22,4кб (после gzip 3,6кб). Основа JavaScript jQuery v3.3.1 и bootstrap.js с удалением лишних компонентов, минимизированный файл имеет размер 108,1кб (после gzip 35,6кб). Изображения были оптимизированы, основной background и favicon также были нарезаны под разные устройства, общий размер изображений удалось сократить с 1.3мб до 55,4кб. Также это коснулось шрифтов и иконок. Убраны неиспользуемые шрифты GoogleFont, а несколько векторных картинок используемых из FontAwesome, были заменены на библиотеку svg, общий размер шрифтов и иконок удалось сократить с 156кб до 26,6кб, а запросы с 8 до 3.
Итог удалось сократить время загрузки целевой страницы на более чем 90%. Для тестов использовался хостинг beget.com.
Демонстрация сайта: