> Портфолио креаторов: как показать 3D и дизайн

Креаторы делают не только код: 3D, дизайн, музыку, видео. Для каждого формата нужен свой способ показа. И своё хранение. Это не «ещё одна сетка карточек».

Зачем отдельный раздел

Сейчас проекты — это код и игры. Они живут на GitHub, у них есть README и демо. Но у креаторов другой результат:

• 3D-модель;
• иллюстрация;
• анимация;
• музыкальный трек;
• видео;
• дизайн-макет.

Это не «проект с репозиторием». Это работа, которую надо показать. Иногда без кода вообще.

Поэтому портфолио — отдельная сущность. Не «ещё один проект», а работа.

Типы работ

Минимальный набор:

• 3D — модель, сцена, персонаж.
• Дизайн/арт — иллюстрация, плакат, UI-концепт.
• Музыка/аудио — трек, саундтрек, звук.
• Видео — ролик, анимация, тизер.

У каждого типа свой просмотрщик:

• 3D — <model-viewer> с .glb;
• арт — галерея изображений с лайтбоксом;
• музыка — HTML5-плеер;
• видео — встроенный плеер или внешняя ссылка.

Не пытайся сделать один универсальный шаблон. Лучше четыре честных.

Данные

Таблица works:

• id;
• user_id — автор;
• title;
• type — 3d, art, music, video;
• description;
• cover — обложка;
• gallery_json — дополнительные изображения;
• media_url — основной файл;
• embed_url — внешнее видео;
• tools — что использовалось;
• tags_json;
• link_url — внешняя ссылка;
• status — draft / published;
• sort_order;
• created_at, updated_at.

Публичная выгрузка — data/works.json. В sitemap — только опубликованные.

Хранение: самое сложное

Показывать 3D и видео — это не только вёрстка. Это файлы.

Предлагаю такую схему:

/uploads/works/<user_id>/<work_id>/
  cover.jpg
  gallery/01.jpg
  media/model.glb
  media/track.mp3

Правила:

• изображения — JPEG/PNG/WebP, до 8 МБ; сервер делает WebP и превью 800px;
• 3D — .glb до 25 МБ + обязательный постер;
• аудио — MP3/OGG до 20 МБ;
• видео — в MVP внешняя ссылка (YouTube/VK) + постер; локальное видео — позже, с лимитом 50 МБ;
• галерея — до 8 изображений;
• квота — 200–500 МБ на креатора, с проверкой свободного места;
• удаление — удаляет файлы, а не только запись;
• бэкап — uploads/works включается в архив, если не разрастётся.

Почему не GitHub:

• бинарники тяжёлые;
• Git LFS — отдельная история;
• не все креаторы умеют в git;
• превью и стриминг всё равно нужны.

Урок: портфолио — это медиа-продукт. Хранение — не «потом», а часть архитектуры.

Безопасность загрузок

Загрузка файлов — это классическая дыра. Минимальные меры:

• проверка MIME и расширения;
• случайные имена;
• запрет PHP в uploads/;
• лимит размера;
• отдельная папка на пользователя;
• проверка прав на удаление;
• никаких exec по загруженным файлам.

Caddy уже блокирует PHP в uploads, но это не отменяет проверки на стороне PHP.

Урок: файл от пользователя — это недоверенный ввод. Даже если это «просто картинка».

Публичная часть

/art/ — сетка работ с фильтром по типу. Не «блог», не «проекты». Фильтры:

• все;
• 3D;
• дизайн;
• музыка;
• видео.

Карточка: обложка, название, автор, тип. Клик — /work/?id=N.

Страница работы:

• большая обложка или просмотрщик;
• описание;
• галерея;
• инструменты;
• ссылка на автора;
• похожие работы;
• кнопка «Поделиться».

В профиле — блок «Работы». В sitemap — работы и /art/.

3D

<model-viewer> — простой способ показать .glb без Unity и WebGL-кода. Он умеет вращение, зум, автоповорот, AR на телефоне.

Но:

• не все .glb лёгкие;
• текстуры могут быть тяжёлыми;
• на слабом телефоне модель тормозит;
• нужен постер, пока модель грузится.

Поэтому — лимит 25 МБ, постер, loading="lazy", отключение автоповорота при prefers-reduced-motion.

Урок: 3D-просмотрщик — это не «вау», а производительность. Если модель грузится 20 секунд, никто не дождётся.

Музыка

HTML5 <audio> + обложка + кредиты. Ничего сложного.

Но:

• не запускать автоматически;
• показывать длительность;
• давать скачать, если автор разрешил;
• хранить жанр/настроение;
• не превращать страницу в плеер.

Урок: музыка на сайте — это не Spotify. Это витрина. Один трек, описание, кредиты.

Видео

В MVP — внешняя ссылка. YouTube/VK/личный хостинг. Сайт хранит постер и embed.

Почему не локально сразу:

• вес;
• кодеки;
• превью;
• нагрузка на VPS;
• бэкапы.

Локальное видео — отдельный этап, когда будет понятно, сколько его и как часто смотрят.

Урок: не тащи видео на свой сервер, пока не доказано, что оно нужно локально.

Модерация

Работа, как и статья, может быть:

• черновиком;
• на проверке;
• опубликованной.

Админ проверяет: авторство, качество, безопасность файлов, соответствие правилам. Если работа отклонена — причина.

Публично — только published.

Урок: портфолио — это не свалка. Модерация нужна, чтобы раздел не превратился в «кто что загрузил».

Что осталось решить

• Нужны ли «лайки» и комментарии? Скорее нет, на старте.
• Как показывать процессы, а не только результат? Галерея + описание.
• Нужен ли экспорт в PDF? Позже.
• Как считать квоту: по файлам или по диску? По диску.
• Что делать с исходниками (.blend, .psd)? Не хранить; только результат.
• Нужен ли watermark? По желанию автора.

Вместо вывода

Портфолио креаторов — это не «добавить ещё один тип карточек». Это отдельный продукт с медиа, правами, квотой и просмотрщиками.

Если сделать его как галерею без хранения, получится красивая сетка, в которой нечего открыть. Если сделать хранение без лимитов, VPS закончится.

Правильный путь: сначала типы и лимиты, потом загрузка, потом публичная часть. Иначе придётся переделывать.

Это пока план. Но план, который учитывает главное: 3D, музыка и видео — разные. И хранение — не «деталь реализации», а основа раздела.

🐺

SkilinPurучастник InIProject