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

Требуется разработать дизайн персонального сайта для backend-разработчика. Сайт будет выполнять функции портфолио, блога и платформы с онлайн-инструментами. Основной стек технологий проекта: Go, PostgreSQL, Docker, REST API, JWT, Nginx, CI/CD. Фронтенд планируется построить на современном SSR-фреймворке (например, Next.js или Nuxt.js). Дизайн должен быть современным, минималистичным и технологичным, без излишней графики. Акцент сделан на чистой типографике, удобстве чтения и аккуратном отображении кода.

Структура страниц

Главная страница

• Краткая информация о разработчике
• Блок с технологическим стеком
• Контактные данные и ссылки на социальные сети/GitHub
• Блок последних статей из блога (3-4 превью)
• Превью нескольких онлайн-инструментов с описанием функционала

Страница "Обо мне"

• Подробное описание опыта работы
• Список навыков и технологий с индикаторами уровня владения (без излишней визуализации)
• Блок с реализованными проектами с изображениями и ссылками

Блог со списком статей

• Отображение списка статей с заголовками, анонсами, датами и количеством просмотров
• Фильтрация по тегам/категориям
• Пагинация страниц
• Поиск по статьям

Страница отдельной статьи

• Четкая верстка структуры статьи (оглавление при необходимости)
• Красивое оформление блоков с кодом (line numbers, цветовая подсветка синтаксиса, параграфы)
• Поддержка вложенных цитат, изображений, списков
• Кастомные буллиты и вертикальный ритм текста

Страница с каталогом инструментов

• Предполагаемые инструменты: генератор структур, тестировка регулярных выражений, декодер JWT/BASE64 токенов, генератор паролей и т.д.
• Каждая карточка инструмента содержит название, краткое описание и кнопку запуска
• Удобный интерфейс форм (поля ввода, кнопки копирования результата, встроенная справка)
• Адаптивный интерфейс для мобильных устройств

Админ-панель

• Авторизация по JWT-токенам
• Страница управления статьями (CRUD-список с фильтрацией, редактирование через текстовый редактор, загрузка изображений)
• Страница управления проектами (список, редактирование, публикация)
• Система быстрых действий через модальные окна
• Простой дизайн без излишеств, максимально функциональный

Требования к дизайну

• Современный минимализм с акцентом на типографику
• Темная и светлая цветовые схемы (переключение без перезагрузки страницы)
• Mobile-first подход: обязательные макеты для мобильной и десктопной версий
• UI-kit с перечнем состояний всех элементов (кнопки, поля ввода, кнопки выбора, чекбоксы, нативные тоглы, ссылки, заголовки, таблицы)
• Дизайн должен быть легко реализуем на TypeScript/React/Next.js (Vue/Nuxt)
• Атомарные компоненты, смело используем повторение элементов

Требования к предусмотренным файлам

Необходимы векторные макеты в Figma:

• Главная экран десктоп & мобилка
• Статья блога с блоком кода
• Каталог инструментов
• Экран формы конкретного инструмента
• Страница админ-панели
• UI-Kit с цветовыми палитрами и градиентами, шрифтами, кнопками в разных состояниях (normal, hover, pressed, disabled, disabled+hover)

Критерии реализации

• Z-индекс и адаптивность на разные ширины (Breakpoints около 480px, 768px, 1200px)
• Кастомные иконки в SVGO или Linear
• Минимальные анимации для сортировки или отображения локаль состояний без перегрузки