Changelog

🎨 New Skills Page

Completely revamped the /skills page. Added structured data, metrics (years of experience, number of projects), and logical categorization: Frontend, Backend, Mobile, Design, and Tools.

⚡ Optimization & Hydration

• Fixed SSR/CSR hydration mismatch errors in AnimationPlayer and Header by correctly initializing states on the client side.
• Added BackgroundAnimation component to replace static images.

🕸️ New Animations

Registered support for new procedural animations: TCatchScreenV009, SpidersV015, SpidersV014, SnakeV088, SnakeV031.

🧹 Cleanup & Refactoring

• Removed unused lottie-web library and associated code.
• Made title and description optional in the Project interface for better compatibility with i18n translation files.
• Updated translations and metadata for all animation projects.

🔗 Clean URLs and Dynamic Headings

Portfolio navigation migrated from query parameters to clean URL segments. Filters now look like /projects/websites/auto, and the <h1> heading is dynamically generated (e.g., «Websites: Auto & Transport»).

🎬 Animation Controls

• Added Fullscreen button using the native Fullscreen API.
• Implemented real pause: pressing Pause preserves the canvas state, freezing the animation instead of resetting it.
• Responsiveness: animations now take 100dvh on mobile devices, while maintaining aspect-square on desktop.

🔍 SEO and Metadata

• Updated sitemap.ts: added routes for categories and subcategories with correct hreflang tags.
• Fixed HTML tag handling in titles: animation versions now render correctly via <sup> (e.g., «Spiders ^v0.14»), while alt and data-testid attributes receive clean text without markup.

🛠️ Refactoring and Stability

• Fixed ESLint errors: removed impure performance.now calls during render, eliminated any types in safeStorage.
• Improved dark mode support in project cards and animation containers.

🔍 SEO Improvements

Updated robots.txt and sitemap.xml — search engines (Google, Yandex) now index the site more accurately.

robots.txt:

• Removed incorrect patterns /*_next/, /admin/, /*?*
• Added host directive — explicitly specifies the main domain
• Added /*.json$ rule — blocks access to JSON files
• Allowed query parameters — filters on /projects page are now indexed

sitemap.xml:

• Removed non-existent pages /about and /contacts
• Added /updates page (priority 0.8, weekly)
• Added /skills page (priority 0.7, monthly)
• Lowered priority for old projects from 0.6 to 0.5 — new projects are now more visible
• Code refactored into typed array — easier to add new pages

The sitemap now contains ~108 URLs (4 static pages × 2 languages + ~50 projects × 2 languages), all with correct hreflang tags.

🎬 Real Pause in Animations

Procedural animations (Snakes and Spiders) now support real pause — when you press Pause, frames freeze in place, and when you press Play, they continue from the same position instead of resetting.

How it works:

• Animation state (snake/spider/food positions) is stored in useRef and preserved between pauses
• On pause, the last frame is rendered — you can see everything frozen
• requestAnimationFrame loop stops — no CPU load
• Clicking canvas on pause adds a new object and shows it immediately

🌑 Full Dark Mode Support

• Project cards (ProjectCard) now render correctly in dark theme
• Added @custom-variant dark in globals.css — Tailwind dark: classes react to data-theme="dark"
• Card background, headings, descriptions, city and year — all adapted

🛡️ Reliable Menu State Storage

• Created safeStorage — a hybrid of sessionStorage and in-memory storage
• Menu stays open when switching languages even in mobile incognito mode
• LanguageSwitcher synchronously saves state before navigation

📐 Square Animation Containers

All animations now render in square containers (aspect-square) — predictable on any screen.

🎬 Procedural Animations Control

Procedural animations (Snake, Spiders) now don't start automatically. The user decides whether to see them — this saves battery and resources on low-end devices.

What's new:

• New AnimationPlayer component with performance warning
• Play/Pause buttons for playback control
• Choice saved in localStorage
• Yellow «⚡ High CPU usage» indicator during animation

🛡️ Mobile Device Compatibility

• Safe safeSessionStorage wrapper with try-catch — site works even in incognito mode
• Fixed SecurityError: Failed to read the 'sessionStorage' error

⚡ React Code Optimization

• Removed useEffect with synchronous setState in ProjectsClient — replaced with derived state
• In ThemeSwitcher used useSyncExternalStore instead of useEffect for safe hydration
• All ESLint errors fixed: 5 errors → 0

🎨 UI and Styles

• Responsive main width via clamp(70%, calc(...), 100%)
• Height 100dvh instead of 100% — works correctly on mobile browsers
• New utility class .lh-100
• Menu renamed: «Changes» → «Updates»

🚀 New Changelog Page

Added the «Updates» page (/updates) — a history of all site updates. Now visitors can track how the portfolio evolves.

What's implemented:

• Data structure lib/updates.json with localization support
• Tags for categorization: Feature, Fix, Improvement
• Automatic sorting by date (newest first)
• Date formatting in Russian and English
• HTML rendering of update content

This page is itself the first entry in the changelog — meta, but nice.

🌐 Full Migration to next-intl

The translation system has been completely rewritten using the next-intl library — the industry standard for Next.js App Router.

What changed:

• All texts moved from projects.json to messages/ru.json and messages/en.json
• Removed the getLocalizedString helper — now using useTranslations and getTranslations hooks
• Created i18n/navigation.ts config with defineRouting and createNavigation
• Link and usePathname from @/i18n/navigation automatically work with language prefixes
• Middleware now uses built-in createMiddleware from next-intl
• Fixed provider order: ThemeProvider wraps NextIntlClientProvider

Benefits:

• Type-safe translations
• Automatic language detection via Accept-Language header
• Language choice saved in cookies
• Easy to add a third language — just create messages/de.json

🎨 UI Components Refactoring

The interface has been split into independent components with state preservation between transitions.

New components:

• ThemeSwitcher — theme toggle button with SVG sun/moon icons and smooth rotation animation
• LanguageSwitcher — language switcher with URL and cookie updates
• MainMenu — extracted slide-out menu with navigation, social links, and toggles

Fixed menu behavior:

• Menu no longer closes when switching languages (from /ru to /en)
• Menu state is saved in sessionStorage and survives layout remounting
• Menu closes correctly only when clicking navigation links
• Added pageshow handler to reset state when returning via browser «Back» button (bfcache)

Design:

• SVG icons instead of emojis in theme switcher
• Hover effects with scaling
• Tooltip with current theme name

🐛 Critical Bug Fixes

A series of fixes ensuring stable site operation.

SEO and metadata:

• Fixed literal {lang} and {slug} in canonical URL — now using template strings ${lang} and ${slug}
• Added correct hreflang links for all language versions
• Fixed identical URLs in alternates for different languages

Architecture:

• Split lib/projects.ts into client part (types and utilities) and server lib/projects-server.ts (working with fs)
• Fixed Module not found: Can't resolve 'fs' error in client components
• Added subcategories for «Websites» category in projects.json: Services, Industry, Shops, Furniture, Education, Auto, Business, Saunas

Navigation:

• Fixed active menu item comparison — now accounts for language prefix in URL
• Added browser language detection via Accept-Language header in middleware
• Implemented saving selected language in cookie for 1 year

Data localization:

• Project interface now supports city?: string | LocalizedString
• Added city field localization in ProjectCard via getLocalizedString