Портфолио

Кваст - сайт про квас

Кваст

Самый первый landing page, который мне пришлось сверстать самостоятельно, обучаясь в HTML Academy. Сделан на float'ах и margin'ах без каких-либо дополнительных библиотек, сборщиков и препроцессоров. Только мануфактура, только хардкор. Пожалуй каждый фронтенд разработчик помнит свой первый работающий продукт, который вышел из под его пера. Такое же чувство удовлетворения я переживал, когда смотрел на первый завершенный проект. Да, здесь нет адаптива –– это статичный сайт, но он первый и все с чего-то начинали. Мой первый –– был таким.

Кексби - сайт для кошек

Кексби

Так же как и Кваст, собран на Float, поэтому ни разу не адаптивен, но это был тренировочный макет, который я собрал под руководством HTML Academy. Помню, как было сложно уловить, что делает свойство clear:both и как делать кастомные инпуты, но именно терпение, труд и усидчивость сделали из меня Фронтендера.

Первая версия HR13

HR13 v1

Первая версия сайта, создавалась в рамках отбора на курс по Frontend от Napoleon IT. ТЗ было предельно простым –– фото, кнопка показать телефон на JS, краткое инфо о себе. Сверстан на флексах, поэтому адаптивен, появились интерактивные элементы. Так как других условий не было и полет фантазии был неограничен, дизайн был выбран Neumorphism –– изобретенный заново Skeuomorphism, как дань тому приятному UX в iOS вплоть до 7 версии. Вы можете заметить как новая версия сайта унаследовала основные киллерфичи первой версии –– тени, создающие ощущение парения блоков, ярко-алый как акцентный цвет на ховерах и маленьких элементах.

Landie

Landie

Здесь пришел опыт полноразмерного проекта. Я впервые использовал gulpfile, конфигом которого пользуюсь в процессе разработки(минификация JS и CSS; папка app/ для разработки и dist/ для конечного билда; локальный сервер; gulp-sass-watch; автопрефиксер и т.д.). Помимо этого, верстал с помощью Bootstrap v4.5, поэтому лендинг адаптивный. Так же заадптивил шапку, которая на малых девайсах схлапывается в бургер-меню, сверстал поп-ап по клику на кнопку.

Видеосервис

Адаптивно, красиво, функционально. Less, gulp, vanillaJS, на флексах.
Реализовано:
1. Переключение по табам(Фильмы/Телеканалы) на чистом JS;
2. Модальное окно по кнопке Войти, когда открыто - запрещен скролл бэкграунда, нажав на Войти можно залогиниться(Логин: Константин К./Пароль: 777) и пользователь сохранится в sessionStorage, нажав "Запомнить" пользователь сохранится в localStorage - в обоих случаях юзер не слетает при перезагрузке страницы.
3. Кастомный скроллбар в разделе Телеканалы.
4. Всплывающий текст-описание по наведению на карточку фильма.

Десктоп: https://hr13.ru/projects/htc-test

Afrianska

Несложный, но очень красивый лендинг, особенно в десктоп версии. Sass, gulp, flexbox.
Реализовано:
1. Модальное окно по кнопке Let's talk в футере, когда открыто - запрещен скролл бэкграунда, инпутам заданы паттерны и подсказки по наведению, простая валидация.
2. Переплетение последнего блока и футера создаёт очень интересный эффект.
3. Карточки в среднем блоке необычно расположены в десктоп версии.

Десктоп: https://hr13.ru/projects/d-element