Portfolio

https://joyscript.github.io/Portfolio/

Учебный проект по фронтенд-разработке

Выполнен по заданиям Rolling Scopes School

Использованы технологии:

• Figma
• HTML5
• CSS3, препроцессор SCSS
• Методология БЭМ
• PerfectPixel
• Javascript (ES6)
• JS Модули
• Webpack

---

Технические требования:

HTML, CSS:

• Вёрстка валидная - нет ошибок и предупреждений в валидаторе.
• Вёрстка семантическая - используются семантические теги <header>, <main>, <footer>, <nav> и другие.
• Вёрстка соответствует дизайн-макетам. (Макеты в формате .jpg расположены в папке mockups.)
• Для построения сетки используются флексы или гриды; иконки добавлены в формате .svg; есть favicon.
• Реализована плавная интерактивность кнопок, ссылок, полей ввода, а также плавная прокрутка по якорям.
• Верстка адаптивная и отзывчивая, соответствует макетам на брейкпойнтах.
• Ни на одном из разрешений до 320px включительно не появляется горизонтальная полоса прокрутки, весь контент страницы при этом сохраняется.

JavaScript:

• Бургер-меню. На ширине экрана 1024рх и меньше реализовано адаптивное бургер-меню. Появление и скрытие меню плавное, происходит при нажатии на иконку бургер/крестик. Бургер-иконка при клике превращается в крестик при помощи css-анимаций, без использования изображений. Ссылки в адаптивном меню работают, обеспечивая плавную прокрутку по якорям. При клике по ссылке адаптивное меню плавно скрывается, происходит переход на нужный раздел. На ширине 768-1024px за пределами меню есть overlay, по клику на который меню закрывается.

• Смена изображений в секции portfolio. При кликах по кнопкам Winter, Spring, Summer, Autumn в секции portfolio отображаются изображения из папки с соответствующим названием. Кнопка, по которой кликнули, становится активной, т.е. выделяется стилем.

• Перевод страницы на два языка. При клике по надписи ru англоязычная страница переводится на русский язык, при клике по надписи en русскоязычная страница переводится на английский язык. Надписи en или ru, соответствующие текущему языку страницы, становятся активными т.е. выделяются стилем

• Переключение светлой и тёмной темы. На страницу добавлен переключатель, при клике по которому тёмная тема приложения сменяется светлой и наоборот, после смены темы интерактивные элементы по-прежнему изменяют внешний вид при наведении и клике и при этом остаются видимыми на странице.

• Выбранный пользователем язык, тема, время года сохраняются при перезагрузке страницы.

• Анимация для кнопок при клике.

• Кастомный видеоплеер.

  • Адаптивная верстка: есть само видео, в панели управления есть кнопка Play/Pause, прогресс-бар, кнопка Volume/Mute, регулятор громкости звука.
  • При клике по кнопке Play/Pause запускается или останавливается проигрывание видео, внешний вид и функционал кнопки изменяется в зависимости от того, проигрывается ли видео в данный момент.
  • Прогресс-бар отображает прогресс проигрывания видео. При перемещении ползунка прогресс-бара вручную меняется текущее время проигрывания видео. Разный цвет прогресс-бара до и после ползунка.
  • При перемещении ползунка регулятора громкости звука можно сделать звук громче или тише. Разный цвет регулятора громкости звука до и после ползунка.
  • При клике по кнопке Volume/Mute можно включить или отключить звук. Одновременно с включением/выключением звука меняется внешний вид кнопки. Также внешний вид кнопки меняется, если звук включают или выключают перетягиванием регулятора громкости звука от нуля или до нуля.
  • Есть кнопка Play/Pause в центре видео при клике по которой запускается видео и отображается панель управления. Когда видео проигрывается, кнопка Play/Pause в центре видео скрывается, когда видео останавливается, кнопка снова отображается.

---

Все технические требования выполнены.

Дополнительный функционал и особенности:

• Отправка данных из формы на сервер jsonplaceholder (данные можно увидеть в консоли).
• Модальное окно благодарности после отправки формы.
• Фиксированный header, изменяющийся при скролле.
• Полноэкранные фоны в секции hero и contacts.
• Имеются незначительные отклонения от макета с целью улучшения проекта.
• Изображения добавлены в формате webp, также добавлена функция для проверки поддержки webp.
• Проверена оптимизация с помощью PageSpeed Insights, выполнены рекомендации для улучшения производительности. Производительность для ПК 99%, для мобильных устройств - выше 90%.