My photo
My photo

РАДЬКО ПЕТР CMTV

Возраст 22
Откуда Россия
Сфера интересов: программирование (web, android, unity), создание и развитие сетевых сообществ. Мое кредо — реальные проекты и самообразование. В этом мне помогает свободное владение английским. Люблю делиться тем, что узнал. Излагаю материал просто и наглядно в своих онлайн-учебниках. Мои проекты (на сейчас 47) описаны ниже.

Иконка

Мое онлайн-портфолио

Работает
Февраль 2019

Архив моих проектов с удобной системой фильтрации по категориям и тегам. Каждый проект имеет краткое описание в виде блока в общем списке и подробное описание на отдельной странице. Работает на движке Wordpress. Тему разработал самостоятельно. Админ-панель доработана для удобного добавления новых проектов. Сайт доступен на двух языках: русском и английском.

Структура

На всех страницах (кроме 404) наверху находится блок с моими основными данными и кнопкой для связи.

Картинки увеличиваются по клику

На главной странице сайта перечислены все категории, которые содержат как минимум один проект. У каждой категории есть своя Font Awesome иконка и уникальный цвет. В категориях отображаются не все проекты, а только ключевые.

Есть возможность отобразить все проекты категории или тега. Для этого достаточно кликнуть по их названию. В случае тега иконка будет в виде решетки.

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

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

Адаптивная верстка

Сайт полностью адаптирован и красиво выглядит на любых устройствах: от больших мониторов до небольших экранов смартфонов. Дизайн сайта меняется в зависимости от текущей ширины страницы. Есть три основных состояния:

Для мониторов

Стандартный вид сайта. Активное использование выровненных по правому краю элементов.

Главная страница
Шапка проекта
Подвал проекта

Для планшетов

Уменьшение размера текста у больших элементов. Сноска потенциально широких элементов с правого края на левый. Если это невозможно, минимализация занимаемого ими размера. Например, ссылка «Все проекты» справа от категории превращается в небольшой блок с стрелкой.

Главная страница
Шапка проекта
Подвал проекта

Для смартфонов

Небольшое уменьшение размера основного текста на страницах. Почти полное отсутствие выровненных справа элементов. Сокрытие изображений проектов и иконок категорий.

Главная страница
Шапка проекта

Доработанная админ-панель

Проекты представляют собой обычные посты WordPress. Но есть и особенности, например: статус, дата закрытия (если есть), иконки-ссылки и так далее. Для удобного добавления собственных мета-полей используется плагин Advanced Custom Fields.

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

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

При создании категории можно указать ее уникальный цвет, Font Awesome иконку и порядок отображения. Последний влияет на положение категории на главной странице.

Для удобства порядок отображения выводится справа в таблице всех категорий.

Разработка

Передо мной стояли две основные задачи:

  1. Необходимость хранить полную и подробную историю реализованных проектов в одном месте
  2. Возможность одной ссылкой дать другим исчерпывающую информацию о моей деятельности

Изначально хотел использовать модифицированную версию темы Twenty Nineteen. От этой идеи пришлось отказался. Слишком она специфическая. Пришло понимание, что надо разрабатывать собственную тему.

За основу взял сайт создателя ACF и мое собственное резюме 2016 года, созданное в Word.

Идею блоков и их дизайн взял с GitHub.

Разработка началась 5 февраля и продлилась неделю — 12 февраля сайт стал доступен в сети. Используемые технологии:

  • Node JS
  • Gulp 4 для автоматизации сборки темы
  • Среда разработки JetBrains PhpStorm

Ниже расположены несколько набросков макета сайта.

Изначально планировалось выводить все проекты длинным списком. Под блоком информации обо мне должна была находиться панель с категориями. Уже в процессе разработки стало ясно, что удобнее и красивее будет отталкиваться от категорий (как в моем резюме) — список категорий с парой-тройкой ключевых проектах в них.