История изменений

🎨 Новая страница навыков

Полностью переработана страница /skills. Добавлены структурированные данные, метрики (годы опыта, количество проектов) и логическое разделение по категориям: Frontend, Backend, Mobile, Design и Tools.

⚡ Оптимизация и гидратация

• Исправлены ошибки несоответствия SSR/CSR (Hydration Mismatch) в AnimationPlayer и Header за счет корректной инициализации состояний на клиенте.
• Добавлен фоновый компонент BackgroundAnimation для замены статичных изображений.

🕸️ Новые анимации

Зарегистрирована поддержка новых процедурных анимаций: TCatchScreenV009, SpidersV015, SpidersV014, SnakeV088, SnakeV031.

🧹 Очистка и рефакторинг

• Удалена неиспользуемая библиотека lottie-web и связанный с ней код.
• Поля title и description в интерфейсе Project сделаны опциональными для корректной работы с файлами переводов (i18n).
• Обновлены переводы и метаданные для всех анимационных проектов.

🔗 Чистые URL и динамические заголовки

Навигация по портфолио переведена с query-параметров на чистые сегменты URL. Теперь фильтры выглядят как /projects/websites/auto, а заголовок <h1> автоматически формируется как «Сайты: Авто и транспорт».

🎬 Управление анимациями

• Добавлена кнопка Fullscreen с использованием нативного Fullscreen API.
• Реализована настоящая пауза: при нажатии Pause состояние canvas сохраняется, анимация замирает, а не сбрасывается.
• Адаптивность: на мобильных устройствах анимация теперь занимает 100dvh, на десктопе сохраняется aspect-square.

🔍 SEO и мета-данные

• Обновлен sitemap.ts: добавлены маршруты категорий и подкатегорий с корректными hreflang тегами.
• Исправлена обработка HTML-тегов в заголовках: версии анимаций теперь корректно отображаются через <sup> (например, «Пауки ^v0.14»), при этом атрибуты alt и data-testid получают чистый текст без разметки.

🛠️ Рефакторинг и стабильность

• Исправлены ошибки ESLint: убраны impure-вызовы performance.now при рендере, устранены any типы в safeStorage.
• Улучшена поддержка тёмной темы в карточках проектов и контейнерах анимаций.

🔍 Улучшения для поисковых систем

Обновлены файлы robots.txt и sitemap.xml — теперь поисковики (Google, Яндекс) корректнее индексируют сайт.

robots.txt:

• Убраны некорректные паттерны /*_next/, /admin/, /*?*
• Добавлен host — явно указываем основной домен
• Добавлено правило /*.json$ — закрываем доступ к JSON-файлам
• Разрешены query-параметры — фильтры на странице /projects теперь индексируются

sitemap.xml:

• Удалены несуществующие страницы /about и /contacts
• Добавлена страница /updates (приоритет 0.8, еженедельно)
• Добавлена страница /skills (приоритет 0.7, ежемесячно)
• Понижен приоритет старых проектов с 0.6 до 0.5 — новые проекты теперь заметнее
• Код реорганизован в типизированный массив — легче добавлять новые страницы

Всего в sitemap теперь ~108 URL (4 статические страницы × 2 языка + ~50 проектов × 2 языка), все с корректными hreflang-тегами.

🎬 Настоящая пауза в анимациях

Процедурные анимации (Змейки и Пауки) теперь поддерживают настоящую паузу — при нажатии Pause кадры замирают на месте, а при Play продолжают движение с того же места, а не сбрасываются.

Как это работает:

• Состояние анимации (позиции змеек, пауков, еды) хранится в useRef и сохраняется между паузами
• На паузе отрисовывается последний кадр — видно, что всё замерло
• Цикл requestAnimationFrame останавливается — CPU не нагружается
• Клик по canvas на паузе добавляет новый объект и сразу показывает его

🌑 Полная поддержка тёмной темы

• Карточки проектов (ProjectCard) теперь корректно отображаются в тёмной теме
• Добавлен @custom-variant dark в globals.css — Tailwind-классы dark: реагируют на data-theme="dark"
• Фон карточек, текст заголовков, описаний, города и года — всё адаптировано

🛡️ Надёжное хранение состояния меню

• Создан safeStorage — гибрид sessionStorage и in-memory хранилища
• Меню остаётся открытым при смене языка даже в режиме инкогнито на мобильных
• LanguageSwitcher синхронно сохраняет состояние перед переходом

📐 Квадратные контейнеры анимаций

Все анимации теперь отображаются в квадратных контейнерах (aspect-square) — предсказуемо на любых экранах.

🎬 Контроль процедурных анимаций

Процедурные анимации (Змейка, Пауки) теперь не запускаются автоматически. Пользователь сам решает, хочет ли он их видеть — это экономит заряд батареи и ресурсы слабых устройств.

Что нового:

• Новый компонент AnimationPlayer с предупреждением о нагрузке
• Кнопки Play/Pause для контроля воспроизведения
• Сохранение выбора в localStorage
• Жёлтый индикатор «⚡ Высокая нагрузка» во время работы анимации

🛡️ Совместимость с мобильными устройствами

• Безопасная обёртка safeSessionStorage с try-catch — сайт работает даже в режиме инкогнито
• Исправлена ошибка SecurityError: Failed to read the 'sessionStorage'

⚡ Оптимизация React-кода

• Убраны useEffect с синхронным setState в ProjectsClient — заменены на derived state
• В ThemeSwitcher использован useSyncExternalStore вместо useEffect для безопасной гидратации
• Все ошибки ESLint исправлены: 5 errors → 0

🎨 UI и стили

• Адаптивная ширина main через clamp(70%, calc(...), 100%)
• Высота 100dvh вместо 100% — корректно работает на мобильных браузерах
• Новый утилитарный класс .lh-100
• Меню переименовано: «Изменения» → «Обновления»

🚀 Новая страница Changelog

Добавлена страница «Изменения» (/updates) — история всех обновлений сайта. Теперь посетители могут отслеживать, как развивается портфолио.

Что реализовано:

• Структура данных lib/updates.json с поддержкой локализации
• Теги для категоризации: Новая функция, Исправление, Улучшение
• Автоматическая сортировка по дате (новые сверху)
• Форматирование даты на русском и английском языках
• HTML-рендеринг контента обновлений

Эта страница сама по себе является первой записью в истории изменений — мета, но приятно.

🌐 Полная миграция на next-intl

Система переводов полностью переписана с использованием библиотеки next-intl — это стандарт индустрии для Next.js App Router.

Что изменилось:

• Все тексты вынесены из projects.json в messages/ru.json и messages/en.json
• Удалён хелпер getLocalizedString — теперь используются хуки useTranslations и getTranslations
• Создан конфиг i18n/navigation.ts с defineRouting и createNavigation
• Компоненты Link и usePathname из @/i18n/navigation автоматически работают с языковыми префиксами
• Middleware теперь использует встроенный createMiddleware от next-intl
• Исправлен порядок провайдеров: ThemeProvider обёртывает NextIntlClientProvider

Преимущества:

• Типобезопасность переводов
• Автоматическое определение языка по заголовку Accept-Language
• Сохранение выбора языка в cookie
• Легко добавить третий язык — просто создать messages/de.json

🎨 Рефакторинг UI-компонентов

Интерфейс разбит на независимые компоненты с сохранением состояния между переходами.

Новые компоненты:

• ThemeSwitcher — кнопка смены темы с SVG-иконками солнца/луны и плавной анимацией поворота
• LanguageSwitcher — переключатель языка с обновлением URL и cookie
• MainMenu — вынесенное выдвижное меню с навигацией, соцсетями и переключателями

Исправлено поведение меню:

• Меню больше не закрывается при смене языка (с /ru на /en)
• Состояние меню сохраняется в sessionStorage и переживает перемонтирование layout
• Меню корректно закрывается только при клике на ссылки навигации
• Добавлен обработчик pageshow для сброса состояния при возврате через кнопку «Назад» в браузере (bfcache)

Дизайн:

• SVG-иконки вместо эмодзи в переключателе темы
• Hover-эффекты с масштабированием
• Tooltip с названием текущей темы

🐛 Исправление критических багов

Серия исправлений, обеспечивающих стабильную работу сайта.

SEO и метаданные:

• Исправлены литералы {lang} и {slug} в canonical URL — теперь используются шаблонные строки ${lang} и ${slug}
• Добавлены корректные hreflang-ссылки для всех языковых версий
• Исправлены одинаковые URL в alternates для разных языков

Архитектура:

• Разделён lib/projects.ts на клиентскую часть (типы и утилиты) и серверную lib/projects-server.ts (работа с fs)
• Исправлена ошибка Module not found: Can't resolve 'fs' в клиентских компонентах
• Добавлены подкатегории для категории «Сайты» в projects.json: Услуги, Промышленность, Магазины, Мебель, Образование, Авто, Бизнес, Бани

Навигация:

• Исправлено сравнение активного пункта меню — теперь учитывается языковой префикс в URL
• Добавлено определение языка браузера через заголовок Accept-Language в middleware
• Реализовано сохранение выбранного языка в cookie на 1 год

Локализация данных:

• Интерфейс Project теперь поддерживает city?: string | LocalizedString
• В ProjectCard добавлена локализация поля city через getLocalizedString