Клиент — практикующий архитектор. Нужен был не «сайт визитка», а цифровая витрина бюро: место, куда можно отправить заказчика, партнёра или коллегу и сразу показать характер работы.
Задача звучала так: собрать избранные проекты 2018–2026 годов — жилые дома и виллы, реконструкции квартир, интерьеры, общественное пространство и работу с наследием — и подать их так, как архитектор думает на бумаге. Не галерея картинок в сетке, а ощущение листа, чертежа и слоя.
Цель — чтобы сайт работал на международную аудиторию. Архитектор ведёт проекты в разных странах, поэтому портфолио должно одинаково читаться на английском, русском, испанском и иврите, включая нормальную вёрстку справа налево для иврита. Контакты и биография на старте ещё уточнялись, поэтому сайт нужно было собрать так, чтобы тексты и форму заявки можно было дописать без переделки всей структуры.
Отдельное требование к тону: спокойный, бумажный, без «креативного агентства». Первое впечатление должно совпадать с тем, как архитектор показывает работу за столом — план, вид, разрез, до и после.
Собрал статический сайт на Next.js: главная с героем, блоком об архитекторе, сеткой из семи проектов и формой связи, плюс отдельная страница на каждый объект.
Главный экран — 3D-сцена на Three.js: три объёма вилл и лист плана, камера слегка уходит при скролле. Если WebGL недоступен или у человека включено уменьшение анимации, вместо сцены показывается спокойная картинка — сайт не ломается.
На странице проекта чертежи лежат стопкой листов. По клику лист выходит наверх — вид, план, масса, до/после. Так можно сравнивать материалы, не открывая отдельную галерею.
Сделал четыре языка: английский, русский, испанский и иврит. Для иврита — полноценный RTL, отдельные шрифты с кириллицей и ивритом. Переключатель языка сохраняет текущую страницу и якорь в меню.
Типографика и сетка завязаны на «чертёжный» тон: бумага, тонкая линия, серриф для заголовков. Плавный скролл и аккуратные появления блоков, без цирка. Форма заявки готова и ждёт рабочий адрес почты.
Сборку выложил как статический сайт на хостинг клиента, без серверной части — быстрее, дешевле в поддержке, проще обновлять тексты и проекты.
Стек: Next.js, React, TypeScript, next-intl, Three.js / React Three Fiber, GSAP, Lenis, Motion, Tailwind CSS.
Сайт живёт и работает как основная витрина архитектора.
Заказчик получает ссылку и за минуту видит, чем бюро занимается: семь проектов с годами, типами и чертежами, без лишней навигации. Международные контакты открывают нужный язык — EN, RU, ES или HE — и читают те же проекты в привычной вёрстке.
Страницы объектов используют как презентацию на встрече: поверх лежит вид, под ним план и разрез, листы можно перекладывать. Это ближе к разговору за столом, чем к обычной ленте фотографий.
Сайт статический, открывается быстро, не зависит от базы и админки. Новые проекты и контакты добавляются в контент и выкладываются повторным деплоем. Когда появится подтверждённая почта, форма начнёт отправлять заявки без доработки интерфейса.
По сути это рабочий инструмент привлечения: портфолио, которое можно давать в переписке, в тендере и на созвоне и которое выглядит как продолжение архитектурной практики, а не как шаблонный лендинг.