42 lines
1.4 KiB
Markdown
42 lines
1.4 KiB
Markdown
|
---
|
||
|
|
title: "Musician Portfolio Website Design"
|
||
|
|
contributor: "@adnan.shahab490@gmail.com"
|
||
|
|
tags: #coding, #adnanshahab490gmailcom
|
||
|
|
---
|
||
|
|
|
||
|
|
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.
|