Дизайн сайта-портфолио музыканта
Описание промпта
Создание современного сайта-портфолио для музыканта с анимациями, календарем событий и системой бронирования.
- Генерирует структуру и код для сайта-портфолио музыканта, включая анимированный герой-блок, календарь и форму бронирования.
- Помогает музыкантам представить свои работы, управлять расписанием и принимать заказы через единый профессиональный интерфейс.
- Веб-разработчики, фрилансеры, музыканты, нуждающиеся в цифровом присутствии.
Следуй шагам в промпте: сначала определи макет, затем реализуй компоненты, добавь анимации. Убедись, что код чистый и документированный.
Знание HTML/CSS/JS, опыт работы с WebGL, Framer Motion и FullCalendar. Понимание принципов аутентификации.
Полный код веб-сайта и инструкция по развертыванию, готовые к использованию в качестве шаблона портфолио.
Можно адаптировать под другие творческие профессии, изменив контент и цветовую схему. Убедись, что API ключи для аутентификации защищены.
Не включает бэкенд-логику для обработки платежей или email-уведомлений без дополнительной интеграции. Требует настройки окружения для WebGL.
LAYOUTFRAMEWORK
LAYOUTFRAMEWORK
Фреймворк для макета, по умолчанию CSS Grid.
Default: CSS Grid
CALENDARLIBRARY
CALENDARLIBRARY
Библиотека для календаря, по умолчанию FullCalendar.
Default: FullCalendar
Промпт открыт для всех. Зарегистрируйтесь, чтобы копировать одним кликом, сохранять промпты, оценивать их и подписываться на авторов.
Текст промпта
ChatGPT / Claude / Llama
Войти для копирования
Выступи в роли эксперта по веб-разработке, специализирующегося на создании сайтов-портфолио для музыкантов.
Твоя задача — создать визуально привлекательный и функциональный сайт, включающий следующие ключевые элементы:
- Возможность бронирования
- Календарь событий
- Героический блок с WebGL-анимациями
- Интерактивные компоненты с использованием Framer Motion
**Подход к реализации:**
1. **Определение макета:**
- Продумай расположение основных секций (Герой, События, Бронирование).
- Используй {{LAYOUTFRAMEWORK}} для обеспечения отзывчивого дизайна.
2. **Разработка компонентов:**
- **Героический блок:** Реализуй динамические фоновые анимации с помощью WebGL.
- **Календарь событий:** Внедри функционал, используя {{CALENDARLIBRARY}}.
- **Система бронирования:** Создай форму бронирования с интеграцией аутентификации пользователей.
3. **Добавление анимаций:**
- Используй Framer Motion для плавных переходов между секциями.
**Формат вывода:**
- Предоставь код сайта в виде структуры GitHub-репозитория.
- Напиши README-файл с подробными инструкциями по настройке и запуску.
**Инструкции:**
- Используй цепочку рассуждений (chain-of-thought), чтобы обеспечить бесшовную интеграцию каждого компонента.
- Следуй принципам современного дизайна для улучшения пользовательского опыта.
- Обеспечь кроссбраузерную совместимость и мобильную адаптивность.
- Документируй каждый шаг процесса разработки для ясности.Поделитесь в социальных сетях
Комментарии
Войдите, чтобы комментировать.
Комментариев пока нет.