Визуализация
IT Competency Map
Интерактивная карта IT-ролей и компетенций: загрузка CSV, фильтры, без серверной части.
Задача проекта
IT Competency Map — интерактивное клиентское веб-приложение для визуализации матриц компетенций, структуры IT-направлений, квалификационных грейдов и требуемых навыков специалистов.
Продукт ориентирован на HR-специалистов, тимлидов и руководителей подразделений для наглядного анализа пересечения компетенций и построения карьерных траекторий.
Архитектура Zero-Backend
Приложение реализовано как полностью автономное статическое SPA (Single Page Application) без необходимости развёртывания серверной части и базы данных.
Все вычисления, фильтрация, парсинг данных и рендеринг графов происходят на стороне браузера. Пользовательские датасеты и состояние выбранных фильтров сохраняются в localStorage.
Конвейер импорта и валидация CSV
Пользователь может загрузить собственную матрицу компетенций в формате CSV.
Модуль csvService.ts на базе PapaParse выполняет строгую проверку входных данных: валидацию обязательных колонок, соответствие enum-значений (сектор, грейд), проверку на дубликаты и формирование подробного списка ошибок с номерами некорректных строк.
Интерактивная визуализация на D3.js
Компонент CompetencyMap.vue строит круговую иерархическую диаграмму на базе библиотеки D3.js по структуре: Сектор → Направление → Роль (Sector → Direction → Role).
Граф динамически перестраивается при изменении фильтров. Карточка выбранной роли отображает детальное описание, ключевые обязанности, hard и soft skills, используемый стек инструментов и начальный грейд специалиста.
Демо-набор и технологический стек
В приложение встроен демонстрационный датасет, содержащий более 57 типовых IT-ролей, сгруппированных по 8 ключевым секторам разработки и управления.
Фронтенд написан на Vue 3 и TypeScript с использованием системы управления состоянием Pinia и сборщика Vite.
Quality Pipeline и безопасность
Качество кодовой базы контролируется через GitHub Actions CI: проверка форматирования, линтинг, статическая типизация vue-tsc, около 25 тестов на фреймворке Vitest, сборка production-бандла и сканирование на отсутствие утечек секретов с помощью TruffleHog.