[----» Online Demo «----]

Deadline	Project name
20.10.2019 23:59	portfolio

Homework: Portfolio

Это одностраничный макет, который будет иметь ссылки на 2 предыдущих ваших проекта. И это творческое по дизайну задание. Значит, что оцениваться внешний вид не будет. Будет оцениваться только функциональная часть приложения.

Техническое задание

1. В папку projects в корне текущего проекта положить файлы html и css проектов theyalow и repair-design-project, в соотвествующие по имени папки. В дальнейшем, реализовать переходы на страницы html этих проектов через ссылки, и обратно.
2. Допускается использование стилистических бибилиотек, наподобие bootstrap, material design.
3. Допускается любое синтаксически правильное наименование классов. Рекомендуется БЭМ-нотация.
4. Допускается использование специализированных библиотек для создания слайдера / свайпера. Однако
5. Запрещается пользоваться фреймворками, а также библиотеками типа jquery, lodash. Используем "ванильный" JavaScript.

Сделать страницу, представленного ниже вида:

1. Сделать в заголовке Аватар, Имя Фамилию, добавить ссылки на соц сети.
2. Далее сделать выпадающую панель (expansion panel), где указать места и года обучения в виде списка.
3. Далее сделать слайдер для десткопа, и свайпер для мобильного разрешения.

Релизовать слайдер проектов, на каждом элементе которого будет описание и картинка проекта:

1. На элементе слайдера будет располагаться описание проекта (какие ключевые моменты разработки, на ваш взгляд, в них затронуты). А также картинки, при нажатии на которые, будет совершен переход на страницу проекта.
2. На разрешении для десктопа - безграничный слайдер, который будет совершать переходы по нажатию на стрелки "вправо", "влево".
3. На разрешении для мобильных - безграничный свайпер, который будет совершать переходы по пролистыванию пальцем вправо и влево. При этом сам проект будет представлять из себя картинку и кнопку сверху, при нажатии на которую будет показываться описание проекта.

После перехода на страницу, помимо самой верстки, будут добавлены 2 фиксированные кнопки для десктоп-версии:

1. Когда открываем страницу, она находится в режиме десктопа.
2. При нажатии на кнопку "Mobile" - вид меняется на мобильный. Например, макет оборочивается в контейнер шириной 375px, и центрируется, а по бокам появляются затемненные полосы. Имя кнопки меняется на "Desktop".
3. При нажатии на кнопку "Desktop" - вид меняется на десктопный. Макет начинает занимать прежнюю область экрана. Имя кнопки меняется на "Mobile".
4. ! Если разрешение экрана меньше мобильного вида (например, открыто с мобильного телефона), то кнопка переключения вида Destop - Mobile должна отсутствовать!
5. При нажатии на кнопку "Back" - возвращаемся на основную страницу Portfolio.

ТЗ будет дорабатываться на предмет критериев оценки для менторов и учета замечаний.

Успехов!