Олег Богдан: сайт-портфолио архитектора, где портрет становится макетом
Архитектору небоскрёбов не нужен сайт с формами и тарифами — нужен такой, чтобы девелопер зашёл, ахнул и написал в Telegram. Мы показали путь от идеи до здания на самом Олеге: его портрет под курсором становится макетом из пенокартона, голова поворачивается и вырастает в группу его башен, а ОНЕ 81 оживает в городе и раскрывается в портфолио.
Олег Богдан проектирует небоскрёбы, жилые комплексы, частные дома и интерьеры, на рынке с 2010 года, работал в семи странах. Аудитория его сайта — девелоперы и владельцы бизнеса, «тяжёлый люкс». Задача из брифа звучала коротко: зайти, ахнуть, написать в Telegram. Без форм, без прайса, без «оставьте заявку».
Главное ограничение — в центре сайта сам архитектор. Его портрет — это первый экран, и он же должен рассказать, чем человек занимается. Поэтому мы не стали ставить фото рядом с проектами, а превратили одно в другое: человек под курсором становится макетом, а макет — зданиями, которые он построил.
Второе условие — Олег сам ведёт портфолио. Проекты, фото, тексты и даже новый раздел «Де-люкс», который он попросил по ходу работы, должны пополняться без разработчика, а анимации при этом не ломаться.
27
проектов в четырёх разделах — у каждого своё окно с фото и характеристиками
79
кадров в переходе: голова → группа башен → ОНЕ 81
0,3
МБ грузится при открытии — всё тяжёлое догружается после
0
форм на сайте: только «Написать» в Telegram
Как шла работа
15 рабочих дней
по договору — от брифа до запуска на домене клиента
Концепция и сценарий
Разбор референсов, сценарий «портрет → макет → здания», структура разделов
Портрет и макет
Пара кадров по фотографиям Олега: портрет и тот же кадр макетом из пенокартона, совмещённые до пикселя
Переход и ролики
Ролики Kling от кадра к кадру, нарезка в секвенции, фон кадров ровно в цвет страницы
Разделы и мобильная версия
Ленты проектов, окно проекта, «Обо мне», награды, меню, телефон
Админка и SEO
Тексты, проекты и фото, SEO и счётчики — параллельно со сборкой
Запуск
Сервер и домен клиента, SSL, скорость, передача доступов
Срок в рабочих днях
Первый экран: секущая под курсором
На первом экране — портрет Олега, имя и «Креативный директор ГЕНПРО» бронзой. Стоит повести мышью — за курсором идёт горизонтальная линия, как секущая плоскость на архитектурном разрезе: выше неё человек, ниже — тот же кадр макетом из слоёв белого пенокартона. Ушёл курсор — линия уезжает вниз, и портрет снова целый.
Это один WebGL-шейдер, а не две картинки со шторкой: портрет, макет и маска фигуры лежат текстурами, и шейдер смешивает их по линии в каждом кадре. Поэтому разрез идёт только по фигуре, а фон остаётся чистым. Справа — девять премий с настоящими логотипами, слева — «Высотки»: пять его башен в масштабе, по клику открывается проект.
Голова поворачивается и вырастает в его небоскрёбы
С первой прокруткой секущая поднимается до макушки, и портрет целиком становится макетом. Дальше голова поворачивается, слои разлетаются, и из них вырастает группа его башен — среди них ОНЕ 81, С 201, Начало 104 и Золотые крылья. Группа сходится в одну ОНЕ 81, белый макет проявляется настоящим рендером в городе, камера отъезжает — и кадр сворачивается в первую карточку портфолио.
Под этим — два ролика Kling 3.0, снятые от кадра к кадру: от головы-макета к группе и от группы к одной башне. Финальный кадр второго ролика совпадает с рендером ОНЕ 81, поэтому стык с городом не виден. Ролики нарезаны на кадры, и прокрутка листает их в обе стороны.
45 кадров: голова → группа башен
34 кадра: группа → одна ОНЕ 81
Фон каждого кадра — ровно цвет страницы, без масок и рамок
Последний кадр города становится первой карточкой без шва
Разделы — ленты, которые едут вбок от прокрутки
Портфолио разбито на четыре раздела: Большая архитектура, Де-люкс, Частные дома и Интерьеры. Каждый — горизонтальная лента по две крупные карточки на экран: на компьютере её двигает обычная вертикальная прокрутка, а бронзовая линия под заголовком показывает, сколько осталось.
На телефоне лента к прокрутке не привязана — листается пальцем. Смотреть все работы подряд никого не заставляем: кому интересны дома, пролистает башни одним движением вниз.
Окно проекта: характеристики слева, фото справа
Клик по карточке открывает окно проекта. Слева — раздел, название и таблица: статус, роль Олега, площадь, высота, команда. Справа — фотографии в две колонки со своей прокруткой, по клику любое открывается на весь экран, листается стрелками и закрывается Esc.
У каждого проекта есть своя ссылка вида bogdanarch.ru/#p-…: её можно отправить девелоперу, и у него сразу откроется нужный объект, а не главная.
Меню с фото разделов и числом работ
Меню открывается на весь экран. Пункты набраны крупно, рядом с каждым — бронзовая цифра: сколько в разделе проектов. Цифры не вписаны руками, а считаются из админки: добавил Олег дом — у «Частных домов» стало на один больше.
При наведении остальные пункты гаснут, а справа шторкой проявляется фото раздела.
Материал искали дольше всего
Самым трудным оказался не код, а материал, из которого «сделан» Олег. Мы пробовали жидкий металл, гладкое зеркальное золото и чертёж — и вернулись к первому варианту, белому пенокартону, как у настоящих архитектурных макетов. Он оказался самым дорогим на вид и самым честным для архитектора.
Каждый кадр-опору для роликов генерировали сразу на фоне цвета страницы. Видео дорисовывало серый студийный фон, и вокруг головы проступал прямоугольник — поэтому фон кадров выровнен до одного тона с сайтом, без прозрачности и наложений.
4
материала макета: пенокартон, металл, золото, чертёж
2
ролика Kling — от кадра к кадру, без склеек
1
цвет фона у страницы и у каждого кадра перехода
«Обо мне» и награды
В блоке «Обо мне» Олег стоит на нижнем крае экрана, а вокруг вразброс — цифры с разной глубиной: 2 млн м² спроектировано, 30 небоскрёбов, 14 в стадии строительства, 9 наград. По прокрутке он поднимается снизу, цифры расходятся.
Следом — список премий по годам: IADA, Архитектурная премия Москвы, ГУД Инновации, Global Future Design Awards, IDA Design Awards и четыре European Property Awards. Строка заливается при наведении, а за курсором едет карточка с логотипом премии. Финал — «Обсудим ваш проект» и кнопка в Telegram.
Телефон: те же кадры, своя раскладка
Мобильная версия собрана из тех же кадров, без отдельных генераций. Портрет стоит крупно у нижнего края, имя и текст — сверху, награды едут бегущей лентой. Переход идёт так же по прокрутке: группа башен на узком экране крупнее и уходит за края, а к ОНЕ 81 возвращается в кадр.
Админка: проекты, фото и тексты без разработчика
Анимация не мешает скорости
Первый экран — WebGL-шейдер, переход — 79 кадров, и всё же при открытии грузится 0,3 МБ: кадры роликов, город и фото меню подтягиваются уже после. Красный LCP — это прелоадер: заголовок ждёт, пока соберётся портрет.
0
Производительность
0
Доступность
0
Практики
0
SEO
- First Contentful Paint
- 2,7 с
- Largest Contentful Paint
- 4,9 с
- Total Blocking Time
- 0 мс
- Cumulative Layout Shift
- 0,001
- Speed Index
- 2,7 с
HTML, CSS, JavaScript
WebGL-шейдер на первом экране
Canvas-секвенции из роликов
Kling 3.0 (ролики)
Nano Banana (кадры-опоры)
Node.js и sharp (админка)
nginx, HTTP/2 на сервере клиента
Спрашивают чаще всего
Можно ли сделать такой сайт, если у архитектора нет готовых визуализаций себя?
Да. Портрет и макет здесь — пара кадров, собранная по обычным фотографиям Олега с разных сторон, а ролики перехода сгенерированы от кадра к кадру. Проекты на сайте — его настоящие рендеры и фото, которые он загружает в админку сам.
Не тормозит ли сайт с WebGL и роликами?
При открытии грузится только первый экран — около 0,3 МБ. Кадры роликов, город, фото меню и обложки догружаются после, пока человек смотрит на портрет. Страница отдаётся сжатой, картинки — по HTTP/2 с долгим кешем. Lighthouse даёт 78 на телефоне и 82 на компьютере.
Как архитектор добавляет новые проекты?
В админке: «Добавить проект», название, подпись, характеристики и фото. Карточка сразу появляется в ленте раздела, у неё своё окно и своя ссылка, а цифра в меню увеличивается сама. Порядок меняется перетаскиванием.
Сколько стоит сайт-портфолио с такой анимацией?
Зависит от того, сколько сцен и генераций нужно: портрет, переходы, ролики, мобильная версия. Портфолио с одной сквозной историей и админкой — понятный объём, мы считаем его по сценарию. Напишите — разберём вашу задачу.
Живые сайты, а не картинки в презентации
Команда Reut
сегодня
Здравствуйте! Нужен сайт для компании
есть примеры, что нравится
с чего начнём?
Здравствуйте! Пришлём бриф под вашу нишу
а по ответам — КП со сроками и сметой
Начнем обсуждение вашего лучшего проекта?
Подписаться на рассылку
Согласен получать письма о новых работах и статьях и на обработку персональных данных
Reut Art
© 2026 Reut · reut.art
ИП Реут Артём Юрьевич · ИНН 910402081314 · ОГРНИП 320911200026247