+371 20 212 368 Связаться
HSC Nordic

Разработка сайта · Строительство

Строительное портфолио со своей системой управления

Клиент — строительная компания HSC Nordic.

Разработали сайт, на котором большой каталог архитектурных и интерьерных работ остаётся удобным для просмотра. Вместе с публичной частью создали отдельную среду для управления проектами, описаниями и изображениями.

Открыть сайт Получить предложение
Сайт HSC Nordic на компьютере и телефоне
hscnordic.eu · responsive presentation

Задача

Показать большой объём работ без перегруженного каталога

Для строительной компании выполненные проекты — главное подтверждение опыта. Требовалось объединить десятки архитектурных и интерьерных работ и дать команде простой способ пополнять портфолио без участия разработчика в каждом обновлении.

75 проектов в портфолио
44 архитектурных проекта
31 интерьерный проект
9 проектов за этап загрузки

Управление контентом

Одна запись появляется во всех нужных местах

Команде не нужно вручную создавать страницу или обрабатывать каждый файл — проект проходит единый путь публикации.

01

Ввод

Название, категория, год, площадь, место, описание и изображения.

02

Обработка

Данные сохраняются, изображения уменьшаются и автоматически переводятся в WebP.

03

Портфолио

Работа появляется в общей сетке и в соответствующем фильтре.

04

Страница проекта

Из тех же данных формируется отдельная страница с информацией и галереей.

Что сделали

От визуальной системы до публикации проектов

Публичный сайт и управление контентом работают как одна система: информация из панели сразу занимает нужное место в портфолио.

A01

Визуальная система

Создали сдержанный архитектурный дизайн с полноэкранным первым блоком, свободной композицией и нейтральной палитрой.

A02

Фильтруемое портфолио

Разделили работы на архитектуру и интерьер. Фильтр меняет каталог без перезагрузки, категорию можно открыть прямой ссылкой.

A03

Страницы проектов

Для каждой работы предусмотрели отдельную страницу с обложкой, местом, площадью, годом, описанием и галереей.

A04

Собственная админ-панель

Разработали защищённый раздел для добавления, редактирования и удаления проектов, данных и галерей.

A05

Загрузка изображений

Обложку и несколько файлов галереи можно загрузить в браузере. Система сама готовит нужные версии изображений.

A06

Контакты и сообщения

Создали страницу с контактами, картой и формой. Сообщения приходят на почту, а простые проверки отсекают автоматические отправки.

Подготовка изображений

Одна загрузка, три способа использования

Изображения строительных проектов детальны и весят много. Чтобы сетка не загружала файлы для полноэкранной галереи, система готовит отдельные WebP-версии.

01 Оригинал

исходный файл сохраняется

02 900 px

обложка для сетки портфолио

03 1600 px

изображение для страницы проекта

Управление загрузкой

75 проектов не загружаются одновременно

Работы появляются постепенно. Первый контент доступен сразу, а следующие группы проектов и их изображения активируются, когда посетитель приближается к ним.

01

Загрузка группами

Сначала видны девять работ; следующие добавляются по девять при прокрутке.

02

Отложенные изображения

Браузер получает адреса скрытых изображений только перед их показом.

03

Приоритет обложки

Главное изображение первого блока и проекта загружается с высоким приоритетом.

04

WebP нужного размера

Для сетки и галереи используются разные файлы вместо одного тяжёлого оригинала.

Техническое решение

Технологии

Сайт и панель управления работают на PHP. Данные проектов хранятся в JSON, а изображения обрабатываются на сервере библиотекой GD.

PHP 8 JavaScript Tailwind CSS JSON GD / WebP SMTP

Нужно портфолио для большого объёма работ и изображений?

Создадим сайт и управление, где новые работы публикуются просто, а каталог остаётся быстрым и понятным.

Начать проект Открыть сайт

Вопросы и ответы

О разработке сайта HSC Nordic

01Нужен ли программист для добавления проекта?

Нет. Команда HSC Nordic сама добавляет данные, обложку и галерею, а затем может изменить или удалить запись.

02Как сайт работает с большим количеством изображений?

При загрузке создаются WebP-обложки и версии для галереи. Проекты появляются группами, а скрытые изображения не запрашиваются заранее.

03Что KVANTS разработал в этом проекте?

Дизайн и публичную часть сайта, каталог и страницы проектов, собственную админ-панель, обработку изображений и отправку контактной формы.

Другие проекты

Посмотрите также эти проекты.