Русский и английский
Язык меняется без потери текущего раздела или открытого проекта.
Сайт и портфолио архитектурной студии
PLANESarchitects
Двуязычный сайт архитектурной студии с проектными галереями, услугами и образовательными программами.
[ Открыть продукт ]landing.webp2880×1800
// 01Сайт в цифрах
- RU/EN
- языка
- 3
- темы оформления
- 5
- фильтров портфолио
// 02Контекст
На сайте PLANES architects работы студии находятся на первом плане. Посетитель может посмотреть архитектурные и интерьерные проекты, узнать об услугах и подходе команды, записаться на образовательную программу или отправить заявку.
Сайт помогает будущим заказчикам познакомиться со студией, а архитекторам и дизайнерам — узнать о программе Bootcamp by PLANES.
02about.studio
about.webp2880×1800
// 03Задача
Дать архитектуре больше пространства и не усложнить управление сайтом
Нужно было перенести спокойный редакционный стиль студии в браузер и не потерять главное — фотографии проектов. При этом команде нужен был удобный способ добавлять новые работы, переводить тексты и обновлять большие галереи без участия разработчика.
Интерфейс построен вокруг изображений и простой типографики. На странице нет лишних декоративных слоёв: навигация остаётся компактной, подписи не спорят с фотографиями, а переходы помогают спокойно двигаться между разделами и проектами.
Главные ограничения были связаны с весом проектных галерей, разной длиной русских и английских текстов и необходимостью сохранить аккуратную композицию на телефонах, планшетах и широких экранах.
ИЗОБРАЖЕНИЯ / ТИПОГРАФИКА / КОНТЕНТ / СКОРОСТЬ
// 04Портфолио
Нужный проект можно найти без долгого поиска
Работы разделены на частные, коммерческие, культурные и конкурсные. Фильтры быстро сужают список, а внутри проекта фотографии дополняются понятными характеристиками объекта.
- Все
- Частные
- Коммерческие
- Культурные
- Конкурсы
projects.webp2880×2000
// 05Контент
Одна CMS для проектов, текстов и фотографий
Редакторы заполняют проект один раз: добавляют описание, характеристики и галерею, затем связывают русскую и английскую версии. Nuxt получает готовые данные и собирает из них нужную страницу.
Nuxt формирует страницы, маршруты и языковые версии сайта. Студия управляет проектами, текстами и фотографиями через Strapi, а PostgreSQL хранит структуру контента. Изображения загружаются отдельно и отдаются в подходящем размере для каждого экрана.
Strapi→PostgreSQL→Nuxt→RU / EN
Три темы
Можно оставить системное оформление или вручную выбрать светлую либо тёмную тему.
Удобное обновление
Новые проекты и материалы появляются через Strapi, без пересборки интерфейса вручную.
Крупные галереи
Фотографии остаются главным содержанием страницы и загружаются в размере, подходящем устройству.
// 06Оформление
Сайт подстраивается под свет вокруг
Системная тема следует настройкам устройства. Светлая сохраняет ощущение печатного архитектурного журнала, а тёмная делает просмотр фотографий комфортнее вечером.
- Системная
- Светлая
- Тёмная
// 07Мобильная версия
На телефоне изображения остаются такими же важными
Навигация становится короче, действия остаются под рукой, а крупные фотографии перестраиваются под вертикальный экран без мелкого текста и горизонтальной прокрутки.
mobile.webp780×1688
// 08Результат
У студии появился сайт, который можно развивать вместе с портфолио
PLANES architects получил работающий двуязычный сайт с проектами, услугами, Bootcamp и формой связи. Команда может самостоятельно обновлять материалы через CMS, а посетители — смотреть работы на любом устройстве и в удобной теме.
// Моя роль
Я отвечал за frontend-архитектуру и адаптивную верстку, подключил Strapi, локализацию, фильтры, галереи и темы оформления, а затем подготовил сайт к запуску.
- Frontend
- Интеграция с CMS
- Локализация
- Запуск
Стек[]
- 'Vue'
- 'Nuxt'
- 'Strapi'
- 'PostgreSQL'
root@portfolio:~/contact$ ./start-conversation // Можно написать напрямую
console.log(Есть идея или задача?);
/* Напишите в двух словах, что хотите сделать и чем я могу помочь. Для начала этого вполне достаточно. */