Разработка персонального сайта-портфолио

История проекта

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

В июне 2025 года проект получил кардинальное обновление: был реализован переход от минимализма к брутализму — монохромный подход с грубой типографикой, табличным представлением данных и техническими кодами. Это решение позволило создать уникальную документальную эстетику, напоминающую программную документацию.

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

Клиент

Личный бренд — Ковтун Кирилл. Специализация: проектный менеджмент, анализ данных и разработка решений для малого и среднего бизнеса.

Этапы проекта

ЭТАП	ЦЕЛЬ
V1.0	СОЗДАТЬ ПЕРСОНАЛЬНЫЙ САЙТ ДЛЯ ПРЕДСТАВЛЕНИЯ КОМПЕТЕНЦИЙ И ПОРТФОЛИО
V1.1	ОБЕСПЕЧИТЬ ПОЛНУЮ АДАПТИВНОСТЬ И ВЫСОКУЮ ПРОИЗВОДИТЕЛЬНОСТЬ
V2.0	ПЕРЕХОД ОТ МИНИМАЛИЗМА К БРУТАЛИЗМУ С ТАБЛИЧНЫМ ПРЕДСТАВЛЕНИЕМ
SCALE	ПРОСТОТА ДОБАВЛЕНИЯ НОВЫХ КЕЙСОВ И РАЗДЕЛОВ
DEPLOY	РАЗМЕЩЕНИЕ НА GITHUB PAGES БЕЗ СЕРВЕРНОЙ ЧАСТИ

Особенности проекта

Проект прошел два этапа развития. Первоначальная версия была создана с современным минималистичным дизайном, а версия 2.0 получила переход к брутализму:

КОМПОНЕНТ	V1.0 (МАЙ 2025)	V2.0 (ИЮНЬ 2025)
ДИЗАЙН	МЯГКИЙ МИНИМАЛИЗМ С АКЦЕНТНЫМИ ЦВЕТАМИ	МОНОХРОМНЫЙ БРУТАЛИЗМ С ТЕХНИЧЕСКИМИ ЭЛЕМЕНТАМИ
ТИПОГРАФИКА	СОВРЕМЕННЫЕ ШРИФТЫ, МЯГКИЕ ФОРМЫ	МОНОШИРИННЫЕ ШРИФТЫ, ТЕХНИЧЕСКАЯ ЭСТЕТИКА
СТРУКТУРА ДАННЫХ	КАРТОЧКИ И БЛОКИ	ТАБЛИЦЫ С КОДАМИ И МЕТРИКАМИ
НАВИГАЦИЯ	ПОЛНОЭКРАННОЕ БУРГЕР-МЕНЮ	СОХРАНЕНО + ФИКСИРОВАННАЯ КНОПКА "НАЗАД"
КНОПКИ	ОБЪЕМНЫЕ С РАМКАМИ И ТЕНЯМИ	ПРОСТЫЕ ПОДЧЕРКНУТЫЕ ССЫЛКИ
ОТСТУПЫ	БОЛЬШИЕ СЕКЦИИ (80PX)	КОМПАКТНЫЕ СЕКЦИИ (40PX)

Технические особенности V2.0

КОМПОНЕНТ	ОПИСАНИЕ	ТЕХНОЛОГИЯ
NAV	НАВИГАЦИЯ С БУРГЕР-МЕНЮ, ОТКРЫВАЮЩИМСЯ НА ВЕСЬ ЭКРАН	BOOTSTRAP 5 + CUSTOM JS
ANIM	ПЛАВНЫЕ АНИМАЦИИ ПОЯВЛЕНИЯ БЛОКОВ, КНОПОК И КАРТОЧЕК	CSS3 TRANSITIONS
FILTER	ФИЛЬТРАЦИЯ КЕЙСОВ ПО КАТЕГОРИЯМ	VANILLA JAVASCRIPT
COUNTER	СЧЁТЧИКИ, АКТИВИРУЕМЫЕ ПРИ СКРОЛЛЕ ДО СЕКЦИИ	INTERSECTION OBSERVER API
HOVER	ЭФФЕКТЫ ПРИ НАВЕДЕНИИ НА КАРТОЧКИ И СТЕК ТЕХНОЛОГИЙ	CSS3 HOVER STATES
DESIGN	МОНОХРОМНАЯ ПАЛИТРА С ТЕХНИЧЕСКИМИ АКЦЕНТАМИ	CSS CUSTOM PROPERTIES
STYLE	МИНИМАЛИЗМ С СТРУКТУРИРОВАННЫМИ ТАБЛИЦАМИ	CSS GRID + FLEXBOX
SCALE	ВОЗМОЖНОСТЬ УДОБНО ДОБАВЛЯТЬ КЕЙСЫ ПО ШАБЛОНУ	МОДУЛЬНАЯ HTML СТРУКТУРА

Структура сайта

СЕКЦИЯ	НАЗНАЧЕНИЕ	СОДЕРЖИМОЕ
HERO	ПЕРВОЕ ВПЕЧАТЛЕНИЕ	АВАТАР, СПИСОК КОМПЕТЕНЦИЙ И СЛОГАН
ABOUT	ПРЕДСТАВЛЕНИЕ ОПЫТА	КРАТКОЕ ОПИСАНИЕ ОПЫТА, СТАТИСТИКА, СТЕК ТЕХНОЛОГИЙ
SERVICES	КОММЕРЧЕСКИЕ ПРЕДЛОЖЕНИЯ	КАРТОЧКИ С ОПИСАНИЕМ И ЦЕНАМИ
CASES	ПОРТФОЛИО РАБОТ	ИНТЕРАКТИВНАЯ СЕТКА, ФИЛЬТРАЦИЯ ПО КАТЕГОРИЯМ, ССЫЛКИ НА ОТДЕЛЬНЫЕ СТРАНИЦЫ
CONTACT	СВЯЗЬ И ПРИЗЫВ К ДЕЙСТВИЮ	ФОРМЫ СВЯЗИ, РЕКВИЗИТЫ, ФИКСИРОВАННАЯ КНОПКА TELEGRAM

Результаты

ДОСТИЖЕНИЕ	ОПИСАНИЕ	ВЛИЯНИЕ
BRAND-CHANNEL	САЙТ СТАЛ ОСНОВНЫМ КАНАЛОМ ПРЕЗЕНТАЦИИ ЛИЧНОГО БРЕНДА И КЕЙСОВ	ЦЕНТРАЛИЗОВАННОЕ ПРЕДСТАВЛЕНИЕ
CLIENT-ENTRY	СОЗДАНА ЕДИНАЯ ТОЧКА ВХОДА ДЛЯ КЛИЕНТОВ	УПРОЩЕНИЕ КОММУНИКАЦИИ
SCALABILITY	ОТДЕЛЬНЫЕ СТРАНИЦЫ КЕЙСОВ УДОБНО МАСШТАБИРУЮТСЯ И НАПОЛНЯЮТСЯ	ГИБКОСТЬ РАЗВИТИЯ
UNIQUENESS	КАСТОМНЫЙ ДИЗАЙН ВЫДЕЛЯЕТСЯ СРЕДИ ТИПОВЫХ ЛЕНДИНГОВ И ШАБЛОНОВ	КОНКУРЕНТНОЕ ПРЕИМУЩЕСТВО

Срок разработки

V1.0: 3 недели в свободное время (от концепции до деплоя на GitHub Pages)
V2.0: 1 неделя на переход от минимализма к брутализму

Процесс редизайна V2.0

В июне 2025 года портфолио прошло полную трансформацию от мягкого минимализма к техническому брутализму. Редизайн был направлен на создание грубой, документальной эстетики.

ЭТАП	ОПИСАНИЕ	РЕЗУЛЬТАТ
RESEARCH	АНАЛИЗ ТЕХНИЧЕСКИХ САЙТОВ И БРУТАЛЬНОЙ ЭСТЕТИКИ	ОПРЕДЕЛЕНЫ КЛЮЧЕВЫЕ ПРИНЦИПЫ БРУТАЛЬНОГО ДИЗАЙНА
TYPOGRAPHY	ПЕРЕХОД К МОНОШИРИННЫМ ШРИФТАМ ДЛЯ КОДОВОЙ ЭСТЕТИКИ	УНИФИЦИРОВАННАЯ ТЕХНИЧЕСКАЯ ТИПОГРАФИКА
COLOR	ПЕРЕХОД К МОНОХРОМНОЙ ПАЛИТРЕ	БРУТАЛЬНЫЙ ЧЕРНО-БЕЛЫЙ ВИЗУАЛЬНЫЙ ЯЗЫК
STRUCTURE	КОНВЕРСИЯ КАРТОЧЕК В ТАБЛИЦЫ С КОДАМИ	СТРУКТУРИРОВАННОЕ ПРЕДСТАВЛЕНИЕ ДАННЫХ
CONTENT	ПЕРЕВОД НА РУССКИЙ + ТЕХНИЧЕСКИЕ КОДЫ НА АНГЛИЙСКОМ	ЛОКАЛИЗАЦИЯ С СОХРАНЕНИЕМ ТЕХНИЧНОСТИ
UX	УПРОЩЕНИЕ КНОПОК, ДОБАВЛЕНИЕ ФИКСИРОВАННОЙ НАВИГАЦИИ	УЛУЧШЕННАЯ НАВИГАЦИЯ ПО КЕЙСАМ

Команда проекта

ФИО	РОЛЬ	ОТВЕТСТВЕННОСТЬ
КОВТУН КИРИЛЛ ЕВГЕНЬЕВИЧ	FULL-STACK DEVELOPER	ДИЗАЙН, ВЕРСТКА, СТРУКТУРА, РАЗРАБОТКА

Проект прошел две стадии развития: от современного минималистичного портфолио до технического брутального сайта с документальной эстетикой. Каждая версия отражает эволюцию подхода к веб-дизайну и демонстрирует способность адаптироваться к различным дизайн-философиям.