Портфолио

Портфолио

React 19Next.js 16Tailwind CSSTypeScriptДизайн-системаЭкспериментальный

Цель проекта

Мой портфолио - это не просто демонстрация проектов. Это пространство, где я могу:

  • 🧭 Исследовать, развивать и оценивать различные подходы в реальной среде, без ограничений классического коммерческого продукта
  • 🧪 Работать с современными или экспериментальными технологиями
  • 🎯 Проверять решения в области архитектуры и UX
  • 🔬 Тестировать собственные библиотеки в реальных условиях

Я экспериментирую и оставляю только то, что действительно важно, а не просто новое.

Используемые технологии

View Transition API

Плавные переходы между элементами на разных страницах с использованием экспериментального компонента React <ViewTransition />

При смене темы - анимированный переход, реализованный напрямую через императивный API браузера.

Один API, два разных сценария использования, два разных контекста интеграции.

Server Actions

Форма обратной связи реализована с помощью типизированного Server Action, с валидацией на сервере через Zod. Цель - проверить ограничения этой модели: как обрабатывать ошибки, как обеспечить согласованную типизацию и как добиться масштабируемости.

App Router

Весь проект построен на App Router из Next.js 16. Это позволило чётко определить:

  • Преимущества: общие layout’ы, Server Components
  • Ограничения: особенности гидратации, управление глобальным состоянием
  • Их влияние на то, как структурировать проект

Продвинутый Subgrid

Реализация каскада subgrid’ов - всё ещё не слишком распространённого подхода - для идеального выравнивания контента карточек без костылей.

WebGL

Сетка, реагирующая на движение курсора.

Мои личные библиотеки

Это портфолио включает 2 библиотеки, которые я разработал и опубликовал:

Система тем

Я решил пойти дальше простого светлого/тёмного режима и построить мини дизайн-движок на основе трёх параметров:

  • Режим: светлый / тёмный 🌗
  • Glassmorphism (эффект стекла) ⿻
  • Тематические цвета 🎨

На практике это означает, что пользователь может исследовать десятки визуальных вариантов.

🎯 Небольшой технический вызов

Тема сохраняется в cookie, чтобы применяться сразу при загрузке страницы. 👉 При серверном рендеринге состояние должно уже существовать на сервере во время первого рендера, а затем продолжать жить на клиенте для взаимодействий. Это обеспечивает консистентное отображение с самого начала, без эффекта мерцания.

Примечание: визуальная стабильность (CLS) напрямую влияет на восприятие производительности.

Производительность и доступность

Оценка Lighthouse

Оценка Lighthouse: 100/100 по Performance, Accessibility, Best Practices и SEO.

Эти метрики отражают конкретные решения:

  • 📈 Максимальное снижение объёма клиентского JavaScript за счёт Server Components, оптимизация статических ресурсов и observer’ов, приостановка анимаций вне экрана и т.д.
  • 🧠 Семантический HTML, соответствие WCAG и настройка контраста для каждой темы.

Интернационализация

🌐 Портфолио доступно на 4 языках: французском, английском, нидерландском и русском.

Навигация структурирована по локалям, что позволяет поисковым системам корректно индексировать каждую версию.

Архитектура

Чёткая структура снижает когнитивную нагрузку и упрощает дальнейшее развитие проекта.

Этот портфолио позволил мне на практике проработать подход к организации фронтенд-проекта, включая разделение core/shared и подход feature-first.

Читать подробный разбор

Итеративный подход

Этот проект никогда не задумывался как «завершённый». История git это подтверждает:

  • ♻️ Постоянные рефакторинги
  • 🧩 Постепенные улучшения UX
  • 📝 Доработка деталей

Такой подход (постоянно улучшать, а не ждать идеала) лучше всего отражает то, как я работаю над реальными проектами.