02 / Пространство / PORTFOLIO CONCEPT

FORMAПространство становится решением.

Помочь изучить архитектурную концепцию, сравнить два пространственных решения и собрать бриф без потери введённых данных.

forma.interaction

ЗАПИСЬ СЦЕНАРИЯ / БЕЗ ЗВУКА

Запись работающего интерфейса. Видео загружается только после нажатия кнопки; сценарий описан ниже текстом.

РОЛЬ И КОНТЕКСТ

От структуры
до взаимодействия.

Учебный проект, созданный совместно с AI-ассистентом. Работа включала визуальное направление, адаптивную вёрстку, клиентскую логику, автоматические проверки и публикацию. Это не коммерческий заказ; клиенты и бизнес-результаты не заявляются.

Архитектура

Next.js App Router и статические страницы, React для интерактивных сценариев, SCSS Modules и Framer Motion. Контент и чистые расчёты отделены от компонентов.

01Контент проектов
02Статические страницы
03Галерея и сравнение
04Бриф и локальный TXT

Решения и компромиссы

От списка к самостоятельной странице

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

Доступная галерея

Нативный dialog поддерживает стрелки и Escape. После закрытия фокус возвращается к исходной кнопке; на сенсорном экране есть свайп.

Фокус как часть формы

Смена шага и показ итогового брифа переводят фокус после фиксации DOM. Это устраняет ситуацию, когда отложенный фокус мог перехватить быстрый ввод имени.

ПРОВЕРЬ САМ

Один конкретный сценарий

Открой «Дом среди сосен» и переключи «Единый объём / Два крыла». Сравни схему, свет и маршруты. Затем пройди два шага брифа, вернись назад и проверь сохранность ответов.

Повторить в демо

Ключевые части кода

app/projects/[slug]/page.jsx
components/project/ConceptCompare.jsx
components/project/Gallery.jsx
components/sections/ContactForm.jsx

Репозиторий закрыт. Публичный инженерный разбор доступен по ссылке ниже.

Полный разбор в демо

Границы реализации

Архитектурные проекты вымышлены. AI-визуализации и референсы не являются фотографиями реализованных объектов; схемы не являются строительной документацией. Бриф скачивается локально и не отправляется на сервер.

Браузерные проверки выполняются в CI. Реальные устройства и скринридеры требуют отдельного ручного прохода.