Countries
SPA
React + Typescript
Моя верстка:
Быстрое время загрузки и взаимодействие без задержек — мой главный приоритет. Оптимизация всех media:
90+ на PageSpeed для мобильных версий и 95+ для desktop.
Мои макеты будут работать на любом устройстве: большом или маленьком.
На всех видах гаджетах:
Ipad, Iphone, Android.
Сильное предпочтение простому в использовании, интуитивно понятному UX/UI.
Все самые современные и последние разработки.
Веб-сайты не должны быть статичными, мне нравится оживлять страницы.
Без анимации в наше время не обходиться ни один сайт.
SPA
React + Typescript
Landing
HTML, CSS, JS
Корпоративный сайт
HTML, CSS, JS
Интернет магазин
HTML, CSS, JS
Рекламные баннеры
HTML, CSS
интернет магазин
HTML, CSS, JS
Корпоративный сайт
HTML, CSS, JS
Landing
HTML, CSS, JS
Интернет магазин
HTML, CSS, JS
Интернет магазин автотюнинга
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Интернет магазин
HTML, CSS, JS
Интернет магазин
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Интернет магазин
HTML, CSS, JS
Интернет магазин
HTML, CSS, JS
Интернет магазин
HTML, CSS, JS
Интернет магазин
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Test (Тестовое задание)
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Landing
HTML, CSS, JS
Есть вопросы или хотите работать вместе?
Напишите мне письмо:
makona79@yandex.ruНапишите мне в Telegram:
TelegramНапишите мне в WhatsApp:
WhatsAppПосмотрите мои работы в Github:
GithubLanding
Сложность проекта: средняя
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализовано модальное окно вызова обратного звонка, содержащего форму с валидацией телефонного номера и имени.
Реализован слайдер свайпер с навигацией и пагинацией.
Реализована форма подписки с валидацией e-mail.
Бургер-меню в мобильной версии сайта.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Бургер-меню в мобильной версии сайта.
Реализована анимация по наведению мышкой.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Интернет магазин
Сложность проекта: средняя
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализован слайдер свайпер с навигацией и пагинацией.
Основная трудность была в реализации смены цветов в слайдах (картинки, шрифты, кнопки), в зависимости от пунктов меню.
Бургер-меню в мобильной версии сайта.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Интерент магазин
Сложность проекта: сложный
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализовано сложное меню-шапка, которое меняется и движется за продвижением по сайту.
Бургер-меню в мобильной версии сайта.
Реализован слайдер свайпер с навигацией и пагинацией на главном экране.
Реализована форма бронирования с валидацией имени.
Реализована форма подписки с валидацией e-mail.
Реализовано 5 разных слайдеров свайпер с навигацией и пагинацией различной сложности с выводом по несколько слайдов.
Реализована форма обратной связи с валидацией e-mail и имени.
Реализована карта.
Реализована видео презентация ресторана.
Реализовано меню с выбором различных блюд, в зависимости от разных предпочтений. (табы)
Реализована выпадающий текст при нажатии на пункт описания. (спойлеры)
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing (Свадебный сайт)
Сложность проекта: сложный
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализовано меню-шапка, которое движется за продвижением по сайту.
Бургер-меню в мобильной версии сайта.
Реализован таймер: обратный отсчет до дня свадьбы.
Реализован слайдер свайпер с навигацией и пагинацией и с выводом по несколько слайдов.
Реализовано 3 разных слайдера свайпер с навигацией и пагинацией различной сложности с выводом по несколько слайдов и выводом мини-картинок в навигацию.
Реализована мини-карта.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Бургер-меню в мобильной версии сайта.
Реализована модальное окно с видеопрезентацией открывается по клику на кнопку play.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Интернет магазин по продаже кошек
Сложность проекта: легкий
Используемые технологии: HTML, CSS, JS.
Заказ интернет магазина кошек с фриланса
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Бургер-меню в мобильной версии сайта.
Реализовано добавление в категорию Favorite с выделение иконки и сообщением
Реализована форма подписки.
Реализована кнопка «вернутся вверх».
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Интернет магазин
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализовано сложное меню-шапка, в котором есть поиск с выбором категорий (Select) и выпадающие подкатегории меню.
Бургер-меню в мобильной версии сайта.
Реализован слайдер свайпер с навигацией и пагинацией и с выводом по несколько слайдов.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Интернет магазин
Сложность проекта: сложный
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализовано меню-шапка, которое движется за продвижением по сайту.
Бургер-меню в мобильной версии сайта.
Реализовано боковое меню с выпадающими категориями
Реализован слайдер свайпер с навигацией и пагинацией и с выводом минислайдов в навигацию.
Реализовано 3 слайдера свайпер с навигацией и пагинацией с выводом по несколько слайдов.
Очень много мелких элементов.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing (заказ строительных работ)
Сложность проекта: средняя
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализовано меню-шапка, которое движется за продвижением по сайту.
Бургер-меню в оснвной и мобильной версии сайта с видами строительных работ.
Реализован выбор работ с помощью кнопок (чекбоксы) и кнопка с формой отправки заказа с расширенным списком работ.
Реализован слайдер свайпер с навигацией и пагинацией и с выводом по несколько слайдов.
Реализовано модальное окно с видеопрезентацией которое открывается при нажатии на кнопку play.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: легкий
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой на кнопки, пункты меню и карточки.
Бургер-меню в мобильной версии сайта.
Реализована кнопка «вернутся на верх»
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: легкий
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализовано выпадающее окошко по клику поиск (popup).
Бургер-меню в мобильной версии сайта.
Реализовано вывод постов с помощью grid сетки.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: легкий
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализовано меню-шапка, которое движется за продвижением по сайту.
Бургер-меню в мобильной версии сайта.
Реализован слайдер свайпер с навигацией и пагинацией на главном экране.
Реализована галерея которая октрывается в отдельном окне.
Реализована форма обратной связи с валидацией имени и e-mail.
Реализована карта.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Интернет магазин
замороженных продуктов
Сложность проекта: сложный (много JS кода)
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
— анимация по наведению мышкой.
— Отображение иконки корзины в мобильной версии сайта.
— Отображение на иконке корзины количества товаров в корзине.
— Открывающаяся корзина, с работающим списком товаров в мобильной версии сайта.
— Бургер-меню в мобильной версии сайта.
— Добавление товаров, с выбором количества продуктов, в корзину.
— Сброс счетчика количества товаров, после нажатия кнопки добавления в корзину.
— Проверка наличия товара в корзине и прибавление количества товаров.
— Подсчет итоговой стоимости товаров в корзине.
— Удаление товаров из корзины и пересчет итоговой стоимости покупки.
— Меню выбора продуктов по разным категориями (табы).
— Закрытие меню при открытии корзины и наоборот в мобильной версии.
— Загрузка карточек товара с сервера.
— Проверка наличия скидки (новая цена) и отображения перечеркнутой старой цены.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: легкий
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Бургер-меню в мобильной версии сайта.
Реализован слайдер свайпер с навигацией и пагинацией.
Реализована галерея которая октрывается в отдельном окне.
Реализована форма подписки с валидацией e-mail.
Макет был предоставлен в Figma.
Landing
Сложность проекта: легкий
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Бургер-меню в мобильной версии сайта.
Реализован слайдер свайпер с навигацией и пагинацией на главном экране.
Реализовано видеопрезентация.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: легкий
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Бургер-меню в мобильной версии сайта.
Реализована форма обратной связи с валидацией имени и e-mail.
Реализована карта.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: легкий
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Бургер-меню в мобильной версии сайта.
Реализовано меню с выбором категорий на основе табов.
Реализована карта.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: легкий
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализована анимация при загрузке блоков.
Реализована форма обратной связи.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Бургер-меню в мобильной версии сайта.
Реализовано выбор размера в виде выпадающего меню (Select)
Реализовано выбор количество товара и добавление в корзину.
Реализован слайдер свайпер с навигацией и пагинацией на главном экране, с выводом миникартинок в навигацию.
Реализована галерея которая октрывается в отдельном окне.
Реализована добавление в категорию Favorite с сообщением.
Реализована форма подписки с валидацией e-mail.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Landing
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализована анимация текстов и картинок при загрузке блоков.
Фиксированный Бургер-меню в основной и мобильной версии сайта, которое движется за продвижением по сайту.
Реализовано движение к блоку при клике на пункт меню с названием блока.
Реализована галерея работ которые октрывается в отдельном окне.
В верстке использовался Gulp.
Дизайн макета создал в Figma.
Landing
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализована анимация текстов и картинок при загрузке блоков.
Бургер-меню в мобильной версии сайта.
Реализовано движение к блоку при клике на пункт меню с названием блока.
Реализована галерея работ которые октрывается в отдельном окне (модальное окно).
Реализован модальное окно с описанием работы и ссылкой на сайт, которое вызывается при клике на кнопку в галере работ.
Реализована кнопка «добавить еще», которая при загрузке максимального количества работ исчезает
В верстке использовался Gulp.
Дизайн макета создал в Figma.
Интернет магазин
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS +React
На React реализованы подключение данных с сервера
Сортировка подгружаемых данных в зависимости от категории товара
Разбивка страниц и и переход по ним без перезагрузки страницы
Добавление в корзину и загрузка данных на удаленный сервер в процессе разработки
Реализована пагинация
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализовано меню выбора с разными категориями (табы).
Бургер-меню в мобильной версии сайта.
Реализовано добавление карточек в корзину с выбором количества продуктов.
Реализован декор в меню бегущий за мышкой.
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Интернет магазин автотюнинга
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS
Полностью адаптивная верстка под все размеры экрана и гаджеты.
Реализована анимация по наведению мышкой.
Реализовано меню выбора с разными категориями (табы).
Бургер-меню в мобильной версии сайта.
Реализован нестандартный кастомный слайдер.
Реализован выбор по категориям (селект)
Реализована форма с полями телефон и email с валидацией.
Реализована кнопка «добавить еще», которая при загрузке максимального количества новостей исчезает
В верстке использовался Pixel perfect, Gulp.
Макет был предоставлен в Figma.
Интернет магазин
Спортивных товаров
Сложность проекта: средний-сложный (много мелких деталей, нестандартные блоки)
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана и гаджеты.
— Анимация по наведению мышкой.
— Бургер-меню в мобильной версии сайта.
— Перемещение блоков в разные части меню, в засисимости от экрана.
— Несколько разных слайдеров.
— Автовоспроизведение слайдера через определенное время.
— Кнопка, с функцией 'показать все', написанная на JS.
— Сложная конфигурация flex блоков в каталоге
— Оптимизированная верстка, картинки — для ускорения загрузки сайта.
В верстке использовался Pixel perfect, Gulp, Webpack.
Макет был предоставлен в Figma.
Корпоративный сайт
Аренда спецтехники
Сложность проекта: сложный (много мелких деталей, много нестандартных блоков и решений)
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана (в том числе и очень большие) и гаджеты.
— Оптимизированная верстка (скорость загрузки на pagespeed 80+).
— Оптимизация картинок и карты — для ускорения загрузки сайта.
— Анимация по наведению мышкой.
— Бургер-меню в мобильной версии сайта.
— Перемещение блоков в разные части меню, в засисимости от экрана.
— Несколько разных нестандартных слайдеров.
— Автовоспроизведение слайдера через определенное время.
— Кастомная навигация у слайдеров: кнопки, скроллбар, прогрессбар, пагинация отсчет кадров.
— Декоративные элементы в ввиде текста с использованием специальных свойств css.
— Декоративные элементы в ввиде градиентов фона с использованием специальных свойств css.
— Мини превью одного из слайдеров
— Форма заказ звонка с валидацией имени, телефона и согласия.
— Подключение видео.
— Форма расширенная с полной валидацией имени, телефона, email, согласие.
— Подключение карты с адресом компании.
В верстке использовался Pixel perfect, Gulp, Webpack.
Макет был предоставлен в Figma.
Landing
Ресторан
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана (в том числе и очень большие) и гаджеты.
— Оптимизированная верстка (скорость загрузки на pagespeed 95+).
— Оптимизация картинок и карты — для ускорения загрузки сайта.
— Анимация по наведению мышкой.
— Бургер-меню в мобильной версии сайта.
— Перемещение блоков в разные части меню, в засисимости от экрана.
— Несколько разных нестандартных слайдеров.
— Автовоспроизведение слайдера через определенное время.
— При клике на кнопку открывается модульное окно с формой.
— Форма заказ звонка с валидацией имени, телефона и согласия.
— Форма расширенная с полной валидацией имени, телефона, email, согласие.
— Подключение карты с адресом компании.
В верстке использовался Pixel perfect, Gulp, Webpack.
Макет был предоставлен в Figma.
Test (Тестовое задание)
карточки для интернет магазина
Сложность проекта: легкий
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана (в том числе и очень большие) и гаджеты.
— Оптимизированная верстка (скорость загрузки на pagespeed 95+).
— Оптимизация картинок и карты — для ускорения загрузки сайта.
— Анимация по наведению мышкой.
— Фон занимает всю площадь экрана, блок находится по центру вертикально и горизонтально.
— На планшетах упаковки располагаются треугольником, на смартфонах друг под другом.
— Информация о продукте может меняться.
— Каждая из упаковок может быть выбрана или недоступна для выбора.
— Выбор осуществляется нажатием на упаковку или на текст «купи» в описании.
— Можно выбрать одновременно несколько упаковок, а также отменить свой выбор повторным нажатием на упаковку.
— Состояние наведения применяется к выбранной упаковке не сразу, а после того, как курсор ушел с нее после первоначального выбора.
— Декор — сложная форма карточки, специальное решение.
В верстке использовался Pixel perfect, Gulp, Webpack.
Макет был предоставлен в Figma.
Корпоративный сайт
Корм для животных
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана (в том числе и очень большие) и гаджеты.
— Оптимизированная верстка (скорость загрузки на pagespeed 95+).
— Оптимизация картинок и карты — для ускорения загрузки сайта.
— Анимация по наведению мышкой.
— Бургер-меню в мобильной версии сайта.
— Перемещение блоков в разные части меню, в засисимости от экрана.
— Несколько разных нестандартных слайдеров.
— Автовоспроизведение слайдера через определенное время.
— Сложная анимация svg-blob вырезающий область с картинки фона.
В верстке использовался Pixel perfect, Gulp, Webpack.
Макет был предоставлен в Figma.
Лендинг
сайт клуба игры ГО
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана (в том числе и очень большие) и гаджеты.
— Оптимизированная верстка (скорость загрузки на pagespeed 95+).
— Оптимизация картинок и карты — для ускорения загрузки сайта.
— Анимация по наведению мышкой.
— Бургер-меню в мобильной версии сайта.
— Перемещение блоков в разные части меню, в засисимости от экрана.
— Табы.
— Модальное окно.
— Сложная анимация svg-blob вырезающий область с картинки фона.
В верстке использовался Pixel perfect, Gulp, Webpack.
Разработал макет.
интернет магазин
магазин ювелирных изделий
Сложность проекта: средний
Используемые технологии: HTML, CSS, JS.
Полностью адаптивная верстка под все размеры экрана (в том числе и очень большие) и гаджеты.
— Оптимизированная верстка (скорость загрузки на pagespeed 95+).
— Оптимизация картинок и карты — для ускорения загрузки сайта.
— Анимация по наведению мышкой.
— Бургер-меню в мобильной версии сайта.
— Перемещение блоков в разные части меню, в засисимости от экрана.
— Табы.
— Слайдер в табах.
— Модальное окно выбора города.
— Несколько разных нестандартных слайдеров.
— Автовоспроизведение слайдера через определенное время.
— Всплывающие подсказки (tooltip).
В верстке использовался Pixel perfect, Gulp, Webpack.
Макет был предоставлен в Figma.
Рекламные баннеры
анимированный
Сложность проекта: легкий
Используемые технологии: HTML, CSS.
Полностью адаптивная верстка под все размеры экрана (в том числе и очень большие) и гаджеты.
— Оптимизированная верстка (скорость загрузки на pagespeed 100).
— Оптимизация картинок — для ускорения загрузки сайта.
— Перемещение блоков в разные части меню, в засисимости от экрана.
— Анимация нескольких слайдов.
— Строгий минимальный код, вес каждого баннера < 40кб.
В верстке использовался Pixel perfect.
Макет был предоставлен в Figma.
Single Page Aplication
получение списка стран запросом с внешнего API с детализацией
Сложность проекта: средний
Используемые технологии: React + Typescript.
Полностью адаптивная верстка под все размеры экрана (в том числе и очень большие) и гаджеты.
— Оптимизированная верстка (скорость загрузки на pagespeed 100).
— Оптимизация картинок — для ускорения загрузки сайта.
— Получение списка стран запросом с внешнего API с детализацией.
— Фильтрация по регионам.
— Поиск по списку стран.
— Отдельный запрос на внешний API для детализации выбранной страны.
— Переход по клику на теги соседей выбранной страны.
— Кастомный выпадающий список.
Макет был предоставлен в Figma.