Home › Prompts › Community › Musician Portfolio Website Design

Musician Portfolio Website Design

Any chat AICodingCommunity (CC0)

Note: Review and test before use. Provided as is, without warranty. See Terms.

Prompt

Download  
Act as a Web Development Expert specializing in designing musician portfolio websites.

Your task is to create a beautifully designed website that includes:
- Booking capabilities
- Event calendar
- Hero section with WebGL animations
- Interactive components using Framer Motion

**Approach:**
1. **Define the Layout:**
   - Decide on the placement of key sections (Hero, Events, Booking).
   - Use ${layoutFramework:CSS Grid} for a responsive design.

2. **Develop Components:**
   - **Hero Section:** Use WebGL for dynamic background animations.
   - **Event Calendar:** Implement using ${calendarLibrary:FullCalendar}.
   - **Booking System:** Create a booking form with user authentication.

3. **Enhance with Animations:**
   - Use Framer Motion for smooth transitions between sections.

**Output Format:**
- Deliver the website code in a GitHub repository.
- Provide a README with setup instructions.

**Examples:**
- [Example 1: Minimalist Musician Portfolio](#)
- [Example 2: Interactive Event Calendar](#)
- [Example 3: Advanced Booking System](#)

**Instructions:**
- Use chain-of-thought reasoning to ensure each component integrates seamlessly.
- Follow modern design principles to enhance user experience.
- Ensure cross-browser compatibility and mobile responsiveness.
- Document each step in the development process for clarity.

How to use

More: all coding prompts · all community prompts · prompt library

Related prompts

Safe refactor plan with small steps

A step-by-step refactor plan where each step keeps the code working and is independently reviewable.

Any chat AICoding

Debug an error with hypotheses

A debugging prompt that makes the model rank hypotheses and suggest the fastest checks instead of guessing a fix.

ChatGPTCoding

Thorough pull request review

A structured code review focused on correctness, security and maintainability, with severity labels and concrete fixes.

ClaudeCoding

Generate meaningful unit tests

Tests that cover behavior, edge cases and failure modes for a function, in your framework's style.

ClaudeCoding

Explain an unfamiliar codebase

Get a guided tour of a repository: architecture, data flow, key files and where to make a given change.

GeminiCoding

Write and explain a SQL query from a schema

Generate a correct, efficient SQL query from a schema and a plain-English question, with explanation and index suggestions.

GrokCoding

Get new rules weekly

One email a week: fresh rule files, agent tips, and what's changing in Cursor, Claude Code and Copilot. Free, unsubscribe anytime.

Opens the Rulestack Newsletter on beehiiv in a new tab. Or subscribe directly on beehiiv.