Интерактивная панель для отслеживания времени по категориям. Интерфейс отображает статистику за выбранный период — день, неделю или месяц — с обновлением данных и адаптивной версткой. Проект реализован с акцентом на чистую структуру, удобство использования и корректную работу на разных устройствах.
- HTML5 (семантическая разметка)
- CSS3 / SCSS (модульная архитектура, переменные, вложенность)
- БЭМ методология
- CSS Grid Layout – JavaScript(ES6+) (обновление данных при переключении периодов, взаимодействие с разметкой)
- Полностью адаптивный дизайн (mobile, tablet, desktop)
- Модульная структура SCSS с компонентами
- Использование БЭМ для именования классов
- Оптимизированная типографика с системой пресетов
- Использование CSS Grid для создания информационной панели – Плавное переключение статистики между дневным, недельным и месячным режимами – Реализация поведения без сторонних библиотек – только нативный JavaScript
- card – Карточки категорий – отдельные блоки с названием активности, временем за текущий период и сравнением с предыдущим
- profile – Панель пользователя – аватар, имя и блок переключения периодов, объединенные в единый элемент
- page – Сеточная раскладка – основная структура страницы, распределяющая карточки по адаптивной сетке
- script – триггеры для выбора режима отображения данных и сами данные
- base – переменные, цвета, типографика с системой пресетов
- Mobile – до 768px
- Tablet – до 1440px
- Desktop – 1440px+
Личный проект для портфолио
Telegram: @philcody
Email: [email protected]