Patiss Portal

next
Next.js 14
TypeScript
GSAP
Tailwind
JWT
ССЫЛКА НА САЙТССЫЛКА НА САЙТ

Корпоративный портал и портфолио для Digital-студии, реализованное как Fullstack-решение на базе Next.js 14 (App Router). Проект отличается высокой степенью интерактивности, сложной работой с медиа-контентом и встроенной системой администрирования.

Слайд 1
Слайд 2

Интерактив и Video Scroll Scrubbing

Одной из самых сложных инженерных задач была реализация управления видео через скролл. Я разработал кастомный механизм синхронизации:

  • Video Scrubbing: Плавное управление currentTime видео-тега в зависимости от позиции скролла пользователя.
  • GSAP Timeline: Использование GSAP для создания точных таймлайнов анимации, синхронизированных с кадрами видео.
  • Оптимизация: Реализована логика "блоков" видео (start/end time) для навигации между смысловыми секциями без прерываний.

Архитектура приложения

Проект построен на современной архитектуре Next.js 14 с использованием App Router.

  • Hybrid Styling: Сочетание Tailwind CSS для утилитарных классов и SCSS Modules для сложной компонентной верстки.
  • i18n: Встроенная поддержка мультиязычности (next-intl) с роутингом /[locale]/....
  • State Management: Отказ от тяжелых глобальных сторов (Redux) в пользу React Context (AuthContext, BriefContext) для соответствия философии Next.js.

Безопасность и API

Реализована надежная система аутентификации для Dashboard-панели:

  • JWT Auth: Используется связка accessToken (в памяти/интерцепторах) и refreshToken (в httpOnly cookies).
  • Axios Interceptors: Написан слой перехватчиков запросов (axiosInstance.ts), который автоматически обновляет токен при ошибке 401 и повторяет упавший запрос. Это обеспечивает бесшовный UX для администратора.
  • API Wrappers: Вся логика общения с бэкендом инкапсулирована в кастомные хуки, отделяя слой данных от UI.

Dashboard и Админка

Разработана внутренняя панель управления контентом:

  • Управление кейсами портфолио;
  • Просмотр заявок (Contacts/Services);
  • Защищенные роуты, доступные только авторизованным пользователям.

Проект разрабатывался в команде, где я отвечал за Frontend-архитектуру, реализацию сложных анимаций и интеграцию с бэкендом.