Оглавление статьи
- Описание проекта
- Базовый функционал проекта
- Функционал главной страницы
- Функционал внутренних страниц
- Итоги проекта
Описание проекта
Основная идея заключалась в создании личного презентационного сайта, с описанием своих работ и их отображением. А так же ведение блога по web тематике в виде написания статей, затрагивающих интересующие меня темы.
Базовый функционал проекта
Навигационное меню
Навигационное меню основа для любого сайта. При его реализации хотелось иметь поддержку многоуровневого меню, так как планировалось иметь для Блога различные категории. Многоуровневое меню прекрасно адаптируется под мобильные устройства.
Одной из особенностей навигации является, то что она не перестает функционировать при отключенном JavaScript в браузере, хоть и с урезанной функциональностью.
Темный режим
Позволяет переключаться между светлой и темной темой сайта. По умолчанию будет применяться тема операционной системы, если она темная то и на сайте будет темной и наоборот. После того как пользователь вручную переключит режим сайта этот режим станет предпочтительным перед темой операционной системы. При последующем переходе между ссылками сайта будет применяться необходимый режим светлый или темный, в зависимости от условий указанных выше.
Поиск по сайту
Позволяет искать статьи из раздела Блог по названию и краткому описанию. Поиск по сайту реализован средствами JavaScript, а так же Jekyll.
Мультиязычность
На сайте присутствует поддержка двух языков: русского (по умолчанию) и английского. Перевод на английский язык осуществляется посредством Google переводчика.
Кнопка вернуться назад
Так как предполагалось, что на сайте будут содержаться обширные статьи, то была добавлена поддержка прокрутки страницы на самый верх к началу. Которая осуществляется по нажатию на соответствующую кнопку. Кнопка вернуться наверх появляется в правом низу экрана после прокрутки определенного промежутка страницы.
Функционал главной страницы
На главной странице раздел Портфолио был реализован через слайдшоу. Интересность данной секции состоит в его внешнем виде. Здесь блок содержащий сладшоу должен выходить за пределы центрующего блока при этом сам центрующий блок должен быть на одном уровне с другими центрующими блоками. И при этом секция слайдшоу должна быть адаптивной, подстраиваясь под различные экраны.
Функционал внутренних страниц
Прогресс бар прочитанного на странице
При чтении статьи есть возможность отслеживать прогресс прочитанного в виде заполняющейся шкалы по мере прокрутки экрана. Что способствует визуально оценить сколько еще осталось прочитать до полного окончания статьи.
Пагинация
На страницах отображающих список статей будет выводиться пагинация если общее количество статей превышает девяти страниц.
Так же на страницах самих статей присутствует пагинация вида: Предыдущая статья и Следующая статья.
Время чтения
Средствами Jekyll для статей была добавлена возможность определять примерное время чтения для каждой статьи автоматически, в зависимости от количества символов статьи.
Поделиться статьей
На сайт был добавлен функционал, который позволяет поделиться статьей в социальных сетях. Доступные социальные сети: Telegram, Linkedin, Whatsapp, Вконтакте, Twitter и Facebook.
Итоги проекта
Работа была выполнена в рампах Пет проекта. Непосредственно читая эти строки вы находитесь на сайте этой работы.