Батырларға тағзым: мемориальный портал о героях войны
Государственный портал памяти о казахстанцах — участниках Великой Отечественной войны. Около двух лет мы сопровождали старую версию, а затем собрали портал заново на Next.js: с быстрым поиском, досье каждого героя, картой памяти и ИИ-помощником.
01 · Задача
Сайт, который ищут семьи
На портале собраны карточки казахстанцев, ушедших на фронт: ветеранов, погибших, пропавших без вести, военнопленных. Его открывают родственники, школьники и исследователи. Обычно ищут одно: фамилию деда или прадеда.
Старая версия работала на типовой PHP-CMS с плагинами. Мы поддерживали её около двух лет и упёрлись в пределы платформы: база росла, поиск замедлялся, а новые разделы плохо ложились на нишевую CMS. Заказчик решил пересобрать портал на современном стеке.
Что нужно было сделать
- Перенести базу героев без потерь и со старыми номерами карточек
- Найти человека по фамилии за секунды, даже с опечаткой
- Показать судьбу, награды, фото и документы в одной карточке
- Добавить карту памяти, боевые части и ИИ-помощника
Ограничения
- Три языка: казахский, русский и английский
- Только архивные данные, ничего не дописывать от себя
- Правки и фото от семей — только через модерацию
- ИИ-модели работают на сервере портала, а не во внешнем сервисе
02 · Исходники
От старого сайта к досье
У старого сайта был один сервер без резервной копии. Даты рождения хранились строкой, звания — то числом, то текстом, а поиск шёл по полям без индексов. По аудиту в базе было больше 602 тысяч записей, и с ростом каждый поиск становился медленнее.
Дизайн искали в два захода. Первый концепт — архивная бумага, бордовые заголовки и фотокарточки героев. Второй — досье: стена фронтовых портретов, карточка героя с сургучной печатью и папки с делами. Из него вырос первый экран нового портала.
Новый портал — монорепозиторий в Docker. Сайт на Next.js 15, API на Fastify с REST и GraphQL. Данные лежат в PostgreSQL 17, поиск по именам — в Meilisearch, фото и сканы — в хранилище MinIO. Для ИИ-помощника биографии превращены в векторы (pgvector, модель multilingual-e5), а отвечает локальная модель через Ollama.
03 · Цвет
Бордовые чернила на старой бумаге
Палитра взята с архивных документов: кремовая бумага, коричневые края, бордовые чернила и печати. Фон страниц — текстуры состаренной бумаги, поверх них полупрозрачные кремовые панели. Бордовый — единственный яркий цвет: заголовки разделов, кнопки, точки на карте и цифры.
- Бордовый
#8B2818Заголовки разделов, кнопки, точки на карте, цифры - Крем
#F5EFE0Фон страниц - Бумага
#FBF8F1Карточки и панели - Сепия
#967A50Рамки и линии - Чернила
#33332FОсновной текст - Стальной
#3D5666Военнопленные в данных о судьбах
Без яркого красного
Приглушённый бордовый похож на чернила и печати из архива. Он выделяет главное и не превращает память в плакат.
Бумага вместо белого
Текстуры старой бумаги и кремовые панели связывают сайт с документами, которые семьи хранят дома.
У каждой судьбы свой цвет
Погиб, пропал без вести, попал в плен, вернулся — у каждого исхода свой токен. Так диаграмма судеб читается без подписей.
04 · Типографика
Антиква для имён, гротеск для интерфейса
Заголовки и имена набраны Noto Serif: строгая антиква с полной кириллицей, включая казахские ә, ғ, қ, ң, ө, ұ, ү, һ, і. На первом экране она идёт обычным начертанием, в разделах — жирным.
Пояснения и подписи разделов — курсив IBM Plex Serif, он звучит как запись от руки в деле. Кнопки, фильтры, подписи к цифрам и меню набраны Rubik: в мелких размерах он читается лучше антиквы.
Заголовки · Noto Serif 400–700
Аа Бб
Вечная память. Досье каждого героя.
Пояснения · IBM Plex Serif 400 и курсив
Аа Бб
Мы собираем биографии, фронтовые фотографии, наградные документы и судьбы казахстанцев — участников Великой Отечественной войны.
Вечная память
Боевой путь
Награды · 3
Семантический поиск по 605 936 биографиям.
получили звание Героя
05 · Компоненты
Детали архивного дела
Фотокарточки в рамках, скрепки, штампы и сургуч собирают образ папки с делом. Под ними — обычная система токенов: отступы по шагу 4 px (от 4 до 128), скругления 2, 4, 6, 8, 12 и 16 px, тени коричневого, а не серого оттенка. Цвета судеб, фон шапки и полупрозрачность карточек тоже заданы токенами.
- Заголовок, поиск и счётчики первого экрана
- Досье героя со скрепкой и штампом
- Карточки боевых частей
- Боевой путь по годам
- Награды в карточке героя
- Диаграмма судеб
06 · Экраны
Почему страница устроена именно так
Незабываемые герои
Досье вместо витрины
Под первым экраном лежат папки с делами: фото в рамке, скрепка, штамп, место рождения, часть и место захоронения. Здесь Әлия Молдағұлова, Мәншүк Маметова, Сергей Луганский и рядовые солдаты — Сейтхан Темірбаев, Сембай Қалиев. Карточки листаются лентой и ведут в каталог.
Каталог
1 189 251 карточка и фильтры с цифрами
Поиск по фамилии прощает опечатки. Слева — фильтры по признакам, типу, судьбе, региону, званию, награде и годам. Рядом с каждым фильтром видно, сколько записей он оставит: например, 1 978 карточек с фотографией.
Карточка героя
Всё о человеке на одной странице
Биография, военная служба, награды с изображениями орденов, рассказ семьи, фотогалерея и архивные документы. Карточку можно сохранить в избранное, отправить ссылкой или скачать в PDF.
У каждой записи сохранён номер со старого сайта, поэтому прежние ссылки и обращения семей не теряются. Если родные знают больше, они предлагают правку или добавляют фото, и правка уходит модератору.
Карта памяти
География судеб
Карта на MapLibre собирает 605 936 батыров по областям: места рождения, призыва, гибели и захоронения, всего 3 023 точки. Крупные круги сразу показывают, откуда уходили на фронт больше всего людей.
Боевые части
Дивизии, сформированные в Казахстане
Пять крупнейших дивизий объединяют 15 084 героев: от Акмолинска и Алма-Аты до Берлина и Вены. Ниже — боевой путь по годам: в каких сражениях участвовали части с 1941 по 1945 год. На странице части — её путь на карте и список героев, так семья находит однополчан своего деда.
ИИ-помощник
Спросить архив обычными словами
Помощник ищет по смыслу в 605 936 биографиях: «найди героев из Жамбылской области», «опиши боевой путь 387-й дивизии». Каждый ответ опирается на конкретные карточки со ссылками. Если данных нет, помощник так и говорит, а не придумывает.
07 · Телефон
Телефон в руках у родственника
Многие ищут деда с телефона, поэтому снизу всегда есть панель: Главная, Герои, Карта, Новости, Меню. Под первым экраном — быстрые входы в ИИ-помощника, «Бессмертный полк», поиск и боевые части. Досье листаются пальцем, а карточка героя начинается с крупного портрета и имени.
08 · Итог
Что получил клиент
- 1 189 251
- карточек в каталоге
- 605 936
- героев на карте памяти
- 5 934
- архивных документа
- 3
- языка
Обсудим ваш проект?
Расскажите о задаче — предложим решение, срок и точную цену.
Астана, Казахстан · +7 700 100 08 55