Открой город — React

OpenCity React — экспериментальная React-версия сайта-гида по Санкт-Петербургу.

Проект развивает визуальную концепцию статического сайта «Открой город»: интерфейс перенесён на компонентную архитектуру, а главная страница дополнена параллаксом, плавной прокруткой и интерактивной галереей.

Текущая версия является UI-прототипом. Главная страница реализована, а маршруты, галерея, поиск и информационные разделы пока обозначены в навигации, но не подключены как отдельные React-страницы.

---

Назначение проекта

Будущий сервис должен помогать жителям и туристам:

• находить интересные места Санкт-Петербурга;
• знакомиться с городскими достопримечательностями;
• выбирать тематические маршруты;
• планировать короткие прогулки;
• открывать менее известные локации.

В этой версии основной акцент сделан на визуальной подаче и анимации интерфейса.

---

Реализованные возможности

• React-интерфейс главной страницы;
• полноэкранный параллакс-экран;
• многослойная композиция фоновых изображений;
• плавная прокрутка;
• привязка анимаций к положению страницы;
• переходы между секциями;
• интерактивная галерея из четырёх городских локаций;
• изменение положения изображений при наведении;
• компактная панель навигации;
• переиспользуемые компоненты;
• стилизация через CSS Modules;
• базовая маршрутизация React Router.

---

Технологический стек

• React 18
• JavaScript
• React Router 6
• GSAP 3
• ScrollTrigger
• ScrollSmoother
• CSS Modules
• Create React App
• classnames
• Web Vitals
• React Testing Library

---

Архитектура интерфейса

Приложение разделено на компоненты по их назначению:

1. Layout — крупные блоки страницы, навигация, шапка и подвал.
2. Shared — переиспользуемые элементы, например интерактивное изображение.
3. UI — базовые элементы управления.
4. Utils — подключение анимационных библиотек.
5. Data — изображения, шрифты и другие локальные ресурсы.

Главная страница состоит из трёх секций:

• ParalaxedHero — первый экран с многослойным параллаксом;
• Slider — интерактивная подборка городских мест;
• InfoSection — завершающий информационный блок.

Анимации создаются при монтировании страницы и удаляются при размонтировании, чтобы не оставлять активные обработчики и ScrollTrigger-экземпляры.

---

Работа анимаций

При прокрутке приложение:

• сохраняет текущее смещение страницы в CSS-переменной;
• сглаживает движение содержимого через ScrollSmoother;
• создаёт ScrollTrigger для каждой секции;
• привязывает положение прокрутки к границам секций;
• очищает обработчики и анимации при закрытии компонента.

Интерактивная галерея хранит индекс активного изображения в React-состоянии и меняет расположение соседних изображений при наведении.

---

Структура проекта

openCity_react/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── components/
│   │   ├── layout/
│   │   │   ├── homePage/
│   │   │   │   ├── ParalaxedHero/
│   │   │   │   └── InfoSection/
│   │   │   ├── Slider/
│   │   │   ├── navbar/
│   │   │   ├── navbarCompact/
│   │   │   ├── header/
│   │   │   └── footer/
│   │   ├── shared/
│   │   │   └── Image/
│   │   └── UI/
│   ├── data/                   # Изображения и шрифты
│   ├── utils/gsap/             # Анимационные модули
│   ├── App.js                  # Корневой компонент
│   └── index.js                # Точка входа
└── package.json

---

Локальный запуск

Требования

• Node.js 18 или новее;
• npm.

Установка

git clone https://github.com/Gonerr/openCity_react.git
cd openCity_react
npm install
npm start

После запуска приложение будет доступно по адресу:

http://localhost:3000

Production-сборка

npm run build

---

Реализованные технические решения

• перенос статического макета на React;
• декомпозиция интерфейса на компоненты;
• изоляция стилей через CSS Modules;
• управление интерактивным состоянием через React Hooks;
• интеграция GSAP с жизненным циклом React;
• очистка событий и анимаций в useEffect;
• параллакс на основе слоёв;
• интерактивное позиционирование изображений;
• подготовка структуры маршрутизации;
• организация локальных медиа-ресурсов.

---

Текущее состояние и развитие

Сейчас проект демонстрирует визуальную концепцию главной страницы. Часть навигации ведёт на маршруты, для которых ещё не созданы компоненты и Route.

Возможные направления развития:

• реализовать страницы маршрутов, галереи, проекта и контактов;
• убрать демонстрационный текст из финальной секции;
• добавить данные о местах в JSON;
• подключить карточки к подробным страницам;
• добавить поиск и фильтрацию;
• подключить интерактивную карту;
• отключить отладочные маркеры GSAP;
• улучшить мобильную адаптацию;
• добавить тесты для компонентов и маршрутов;
• настроить публикацию production-сборки.

---

Связанный проект

• OpenCity — первая статическая многостраничная версия сайта с опубликованным GitHub Pages-прототипом.

---

Автор

Анастасия Лихачева

React-версия разработана для практики компонентного подхода, анимаций и развития интерфейса командного проекта «Открой город».