Портфолио с фильтрами проектов
Портфолио, в котором посетитель быстро находит нужный тип работы и понимает роль автора.
Учебный пример, созданный с помощью ИИ. Названия, проекты и цены вымышлены.
Живой пример сайта
Отфильтруйте сайты или айдентику, затем откройте любую работу. Все названия и проекты в демо вымышлены.
Идеи обретают форму.
Сайты и визуальные системы. Три учебных концепта, три разных характера.
Проектов: 3
Демо показывает основную механику страницы. Его можно повторить и развить с помощью инструкции ниже; подключения форм, оплаты и публикации здесь нет.
Как это сделать с ИИ
Что подготовить
Подготовьте собственные работы, изображения, роль в проекте, ограничения и фактический результат. Для учебного портфолио явно подпишите, что это концепты.
Начните с любого удобного ИИ: ChatGPT, Claude, Gemini или DeepSeek. Работайте в одном диалоге и прикладывайте актуальный код при доработке.
- 01
Соберите карточки работ
Для каждой работы нужны название, категория, краткая задача и ваша роль. Отделите разработку сайта от дизайна или участия в команде.
Результат: Честный набор данных для портфолио.
- 02
Выберите выразительную сетку
Используйте единые пропорции превью и один ведущий акцент. Не задавайте всем карточкам разные формы: эффектнее работает ритм и свободное пространство.
Результат: Галерея, которую удобно просмотреть.
- 03
Добавьте фильтры и подробности
Фильтры должны менять состав списка. Открытая работа показывает задачу, подход и материал; закрытие возвращает к галерее без потери контекста.
Результат: Портфолио с работающими действиями.
- 04
Проверьте контент и права
Показывайте только материалы, которыми можно делиться. На телефоне убедитесь, что подписи и фильтры не обрезаны, а смысл работы понятен без анимации.
Результат: Готовые к показу собственные работы.
Создайте, доработайте, проверьте
Отправляйте промпты по порядку. Первый создаёт основу, второй добавляет нужное поведение, третий помогает найти ошибки. Ответы разных моделей могут отличаться; это учебный сценарий, а не сравнение их качества.
01 · Создать основу
Замените поля в [скобках] на свои данные.
02 · Доработать поведение
Замените поля в [скобках] на свои данные.
03 · Проверить результат
Замените поля в [скобках] на свои данные.
Как открыть полученный сайт
- Попросите полный файл
index.htmlи сохраните его с этим расширением. - Откройте файл в браузере. Для видео положите предоставленные материалы по путям из кода.
- Проверьте действия и мобильный экран. Если ИИ выбрал React или другой стек, используйте инструкцию запуска, которую он приложил.
- Перед публикацией замените учебные материалы своими и подключите необходимые сервисы.
Что проверить вручную
- Фильтр меняет количество работ
- Активная категория явно выделена
- Открывается описание нужного проекта
- Чужая роль и показатели не приписаны автору
- Все изображения имеют подписи
- Мобильная сетка остаётся читаемой
Если что-то пошло не так
Учебная работа выглядит как клиентский кейс
Подпишите «концепт» и не добавляйте выдуманный результат.
Фильтр меняет только цвет кнопки
Свяжите его с реальным массивом отображаемых работ.
Подробности теряются после фильтра
Согласуйте выбор проекта и текущую категорию.
Попробуйте идею сайта в VidLix бесплатно
Перенесите свой бриф в выбранный сценарий конструктора и сравните, как он подходит вашей задаче. Начать можно с примеров на сайте VidLix.
Открыть vidlix.ruДоступ к редактору — по заявке. Условия подключения и публикации смотрите в VidLix; перенос произвольного кода и эффектов нужно уточнять отдельно.
Сайт-история с анимацией при прокрутке
Открыть следующий разбор →