Денис

• При сужении окна браузера появляется бургер-иконка, при клике на которую появляется мобильное меню навигации и overlay, запрещается scroll
• При появлении мобильного меню навигации добавляется возможность закрыть это меню, кликнув на крестик или кликнув вне мобильного меню (при этом кликая на само меню, окно не закрывается)
• При открытии мобильного окна навигации, меняя размер окна в большую сторону, мобильное меню закрывается и появляется стандартное меню (поэтому при переключении ориентации экрана из портретной в ландшафтную, например, у планшета, меню примет более удобный вид)
• Сайт защищен от переполнения контентом, при увеличении контента в блоках, все отображается корректно

При работе над проектом были использованы следующие технологии, инструменты и плагины:

• Flexible Box Layout Module
• Препроцессор Less
• Редактор кода Sumlime Text 3
• Плагины Sublime Text 3: Emmet, LiveReload, AutoFileName и другие
• Сайт адаптирован под все размеры экрана. Для этого использовались медиа-запросы и Flexible Box Layout Module
• При адаптировании сайта под другие устройства использовался метод Desktop First (сначала был сделан сайт под ПК, а затем под планшеты и мобильные устройства)
• СSS / HTML

• Редактор кода Visual Studio Code
• Плагины Visual Studio Code: Emmet, Live Server, Path AutoComplete, AutoClose Tag и др.
• Подключение всплывающего окна для отображения видео, используя jQuery-библиотеку FancyBox
• Flexible Box Layout Module
• CSS / HTML / JavaScript
• Адаптив под все возможные экраны устройств
• Наиболее подробная информация об этом проекте находится здесь

Возможность выбирать площадь квартиры, требуемой для ремонта, с помощью ползунка или стрелочек(около значения площади, щелкнув в текстовое поле), зная исходное значение цены за 1 квадратный метр - 6000 рублей. После этого произойдет автоматический расчет стоимости ремонта, исходя из следующих параметров:

• Тип ремонта (косметический, капитальный или под ключ), выбрав один из пунктов, произойдет расчет ремонта соответственно: без увеличения цены, + 30% к стоимости ремонта и + 50% к стоимости ремонта
• Тип дома (новострой или вторичка), выбрав один из пунктов, произойдет расчет ремонта соответственно: без изменения цены, + 10% к стоимости ремонта
• Дополнительные опции (натяжные потолки, покраска стен, теплый пол), выбрав один из пунктов, произойдет расчет ремонта следующим образом: + 900 рублей за каждый квадратный метр при выборе опции "Натяжные потолки", + 10% к стоимости при выборе опции "Покраска стен" и + 10% к стоимости ремонта при выборе опции "Теплый пол"
• Количество комнат (С, 1, 2, 3, 4 или 5, где С - это более экономичный вариант ремонта комнат), выбрав один из пунктов, произойдет следующий расчет ремонта: C (-20% от стоимости ремонта), от 1 до 2 комнат (без изменения цены), от 3 до 5 (+ 5% к стоимости ремонта)

Работая над данным проектом, были использованы следующие инструменты, технологии:

• Редактор кода: Visual Studio Code
• JavaScript
• Css / HTML

• При наводе на элемент навигации, появляется плавное подчеркивание. Через JavaScript реализовано так, чтобы при наведении на любую из ссылок меню, все подчеркивания убирались, а у нужной это подчеркивание оставалось, а при отводе мыши, подчеркивание оставалось у самой первой ссылки
• При наведении (отведении) мыши на логотип происходит эффект смены цвета у заголовка и подзаголовка главного экрана лэндинга (также происходит при клике на иконку мышки или при клике на сам заголовок)
• При скролле вниз реализовано через JavaScript, чтобы меню всегда отображалось сверху, добавляя к блоку навигации тень и меняя цвет фона
• При наведении на заголовки второго уровня у них появляется плавное подчеркивание. Также реализовано, что если текст будет располагаться в несколько строк, подчеркивание отображалось корректно
• Реализована адаптивная верстка. На любых экранах контент отображается корректно
• Когда экран устройства достигает определенной ширины, происходит замена меню навигации главного экрана на меню - бургер (для этого используется JavaScript)
• При клике на меню-бургер высвечивается модальное окно с меню на всю область экрана (кликая на нужный пункт навигации в нем, окно закрывается и происходит плавный переход к контенту), также при клике на крестик, модальное окно закрывается
• При сужении окна блок портфолио, состоящий из грид-элементов, превращается в слайдер (slick slider), реализовано с помощью медиа-запросов (переключение слайдов осуществляется через свайп)
• При клике на 'Play' в блоке видео, происходит проигрывание ролика. При этом добавляются элементы управления и скрывается иконка 'Play'
• Ниже блока видео реализован адаптивный слайдер, полностью сделанный на JavaScript(на экранах для смартфонов стрелки навигации пропадают, переключение слайдов происходит через точки, на экранах планшетов и компьютеров переключение слайдов осуществляется через стрелки)
• В блоке Pricing отображается желтым цветом стандартный тариф, при наведении или при клике (на экранах смартфонов) на другие карточки происходит плавный выбор нужной карточки, при этом через JavaScript происходит удаление класса active у всех карточек и добавление этого класса выбранной

Работая над данным проектом, были использованы следующие инструменты, технологии:

• Редактор кода: Visual Studio Code
• JavaScript
• Css / HTML
• Slider Slick
• Flex-box Layout
• Grid Layout
• Svg-спрайты
• BEM-naming

• При скролле вниз навигационное меню отбрасывает тень (сделано через javascript) и остается всегда в видимости пользователя
• При сужении экрана появляется меню-бургер, кликнув на который отображается модальное окно с навигацией
• В секции с видео при нажатии на 'Play' кнопка 'Play' превращается в кнопку 'Pause', видео воспроизводится, а при наведении курсора у видео появляется затемняющая подложка, при отведении она пропадает
• Реализована плавная прокрутка через javascript

Работая над данным проектом, были использованы следующие инструменты, технологии:

• Редактор кода: Visual Studio Code
• JavaScript
• Css / HTML
• Flex-box Layout
• Css Grid Layout
• Адаптивная верстка под смартфоны, планшеты и ноутбуки

На марафоне проводились онлайн-встречи, где мы обсуждали блоки кода, что нужно было сверстать. К следующей живой трансляции наставник объяснял непонятные моменты, после этого вносились некоторые правки в проект, чтобы его улучшить, сохраняя при этом свои варианты наработок.

Таким образом марафон был успешно пройден, где я получил новый опыт работы, используя современные подходы при разработке сайтов.

В проекте используется компонентный подход: scss разбит на отдельные блоки, что позволяет лучше ориентироваться в коде, модифицировать его и поддерживать в дальнейшем.

Для удобства используются миксины в scss. Это отдельные мини-функции, позволяющие сокращать код и работать быстрее.

Работая над данным проектом, были использованы следующие инструменты, технологии и плагины:

• Препроцессор SCSS
• Менеджер проектов gulp
• Git & GitHub
• Плагин Chrome Pixel Perfect
• Слайдер Swiper.js
• Favicon
• Редактор кода Visual Studio Code
• Плагины Visual Studio Code: Emmet, Live Server, Path AutoComplete, AutoClose Tag и др.
• Flexible Box Layout Module
• CSS / HTML / JavaScript
• Адаптирование сайта под все экраны устройств
• Наиболее подробная информация об этом проекте находится здесь

• Функция переключения темы (две цветовых схемы: светлая и темная)
• Плавная смена цвета при переключении слайдов в проекте Theme's Switcher
• Добавлена функция переключения языков (более подробно о том как это было реализовано можно посмотреть перейдя по ссылке)

Работая над данным проектом, были использованы следующие инструменты, технологии:

• Редактор кода: Visual Studio Code
• JavaScript
• SCSS / HTML
• Gulp
• Local Storage
• Slick Slider
• Flex Box Layout Module
• Адаптив под планшеты и мобильные устройства
• Дизайн карточек проектов был самостоятельно реализован в программе Photoshop
• Наиболее подробная информация об этом проекте находится здесь

Проект был сначала создан, используя более упрощенную структуру, работа с препроцессором осуществлялась через стороннюю программу - компилятор WinLess. Далее проект был полностью переделан, используя gulp. Работая над данным проектом, были использованы следующие инструменты, технологии:

• Редактор кода: Visual Studio Code
• JQuery (слайдер slick.js)
• LESS / HTML
• Gulp / Webpack
• Flex Box Layout Module
• Используется SVG-спрайт, чтобы обеспечить лучшую скорость загрузки сайта, отправляя меньше запросов на сервер
• Адаптив под планшеты и мобильные устройства
• Дизайн сайта был полностью переделан. После этого сайт стал живым и ярким
• Весь контент, включая текст для сайта был придуман самостоятельно

Работая с gulp были использованы следующие плагины:

• gulp-svg-sprite - плагин для работы с svg-спрайтами
• gulp-plumber - плагин для обработки ошибок
• gulp-sourcemaps - плагин для навигации в коде в режиме разработки
• gulp-imagemin - плагин для минификации изображений
• gulp-babel- плагин для перевода JavaScript-скриптов в код, который станет поддерживаться устаревшими браузерами, тем самым повышая кроссбраузерность
• gulp-strips-comments - плагин для удаления лишних комментариев, использовался в задаче при подключении сторонних библиотек и в отдельной задаче, подключающей JQuery
• gulp-uglify - плагин, помогающий минифицировать JavaScript-код
• gulp-less - плагин для компиляции LESS в CSS
• webpack, webpack-stream - npm-пакеты для работы с webpack в gulp, были включены в проект для использования модулей в JavaScript

Визитные карточки, которые были созданы в учебных целях, состоят из двух сторон: лицевая сторона содержит логотип компании, имя сотрудника, его должность, телефон, адрес офиса. И оборотная сторона визитки содержит логотип компании.

Работая над данным проектом, были использованы следующие инструменты, технологии и плагины:

• Adobe Photoshop

Данная работа была создана в рамках тренировки, в программе Figma, после прохождения марафона от школы дизайна Yudaev School. Марафон прошел успешно, где я смог закрепить навыки в сфере UX / UI дизайна.

Работая над данным проектом, были использованы следующие инструменты, технологии и плагины:

• Figma
• Adobe Illustrator