Music Producer Portfolio

Build a visually striking, dark-themed portfolio website for a music producer and beatmaker called "KVOLT" — a hip-hop and R&B producer based in Atlanta who has worked with both major-label and independent artists. The site should feel premium, cinematic, and audio-forward, with a built-in beat player that lets visitors preview tracks without leaving the page.

1. NAVIGATION BAR
- Logo: "KVOLT" in bold, all-caps custom lettering, white on dark background
- Links: Beats, Discography, About, Clients, Contact
- Right side: social icons (Instagram, YouTube, SoundCloud, Spotify) in muted gray, glow on hover
- "License a Beat" CTA button (solid #8B5CF6 purple-500, white text, 8px radius)
- Background: transparent over hero, transitions to solid #0A0A0F on scroll
- Mobile: logo + hamburger (white lines)

2. HERO SECTION
- Full-viewport dark background with subtle animated audio waveform or equalizer bars across the bottom (low opacity, purple/cyan gradient pulses)
- Center content:
  - Small label above name: "PRODUCER · SONGWRITER · ENGINEER" in spaced-out small caps, #8B5CF6 purple
  - Name: "KVOLT" in massive display font (120px desktop, 64px mobile), white, slight letter-spacing
  - Tagline: "Crafting hits from Atlanta to the world" in light gray (#A1A1AA), 20px
  - Two CTA buttons side by side:
    - "Browse Beats" (solid #8B5CF6 purple, white text)
    - "Book a Session" (outline white, white text)
  - Below buttons: "50M+ streams · 200+ placements · 12 years in the game" — stats in muted text
- Subtle dark gradient overlay on background image (studio shot or silhouette at mixing console)
- Scroll indicator: small animated chevron at bottom center

3. FEATURED BEATS SECTION (Audio Player)
- Background: #0F0F1A (deep navy-black)
- Section headline: "Latest Beats" in white, with "View All →" link
- 6 beat cards in a 3x2 grid:
  - Card: dark surface (#1A1A2E), 12px radius, hover: purple border glow (#8B5CF6/30%)
  - Cover art thumbnail (square, 200px, rounded 8px) — abstract/geometric artwork per beat
  - Beat info:
    - Title: "Midnight Drive" (white, bold)
    - Genre tag: "Trap / R&B" in small purple pill badge
    - BPM + Key: "142 BPM · F# Minor" in gray
    - Price: "From $29.99" in white
  - Play button: circular, purple (#8B5CF6), play/pause icon, overlaid on cover art
  - On play: waveform visualization appears below the card, animating in real-time
  - Hover: cover art scales slightly, shadow increases

- PERSISTENT BOTTOM PLAYER (appears when any beat is playing):
  - Fixed bottom bar, #1A1A2E background, 64px height
  - Left: small cover art (48px) + beat title + producer tag
  - Center: play/pause, previous, next controls + progress bar (purple fill on gray track) + time display (1:23 / 3:45)
  - Right: volume slider + "License This Beat" button (small, purple)
  - Mobile: simplified — cover art + title + play/pause + "License" icon button

4. BEAT STORE / LICENSING SECTION
- Headline: "License a Beat"
- Subheading: "Choose a license that fits your project. All beats are exclusive-ready."
- 3 license tier cards side by side:
  - **Basic** ($29.99):
    - MP3 file (tagged)
    - 5,000 stream limit
    - Non-exclusive
    - 1 music video
    - Credit required (Prod. KVOLT)
  - **Premium** ($79.99) — "Most Popular" badge in purple:
    - WAV + MP3 (untagged)
    - 100,000 stream limit
    - Non-exclusive
    - 2 music videos
    - Radio broadcasting rights
    - Credit required
  - **Exclusive** ($499+) — "Full Ownership" badge:
    - WAV + Stems + MP3
    - Unlimited streams
    - Full exclusive rights
    - Unlimited music videos
    - Radio + TV + Film sync rights
    - Beat removed from store
  - Each card: dark surface (#1A1A2E), 16px radius, purple top border for "Most Popular"
  - "Select" button per card (purple solid for Popular, outline for others)
  - "Custom deal? Contact me" link below cards

5. DISCOGRAPHY / CREDITS SECTION
- Background: #0A0A0F with subtle grid pattern overlay
- Headline: "Discography & Placements"
- Scrollable horizontal row of album/single cover art cards:
  - Cover art (square, 240px, 8px radius)
  - Artist name (bold white): "Lil Baby", "SZA", "21 Savage", "Summer Walker", "Gunna", "6LACK"
  - Track/album name (gray): "Venom", "Late Nights", "Red Opps", "Session 33", "Top Floor", "Switch"
  - Year: "2025" (small, purple text)
  - Stream count: "24M streams" in small muted text
  - Hover: cover lifts with shadow, Spotify/Apple Music icons appear as overlay links
- Below row: "Full discography: 200+ official placements" with "View All" button
- Mobile: horizontal swipe carousel

6. ABOUT SECTION
- Two-column layout: photo left (40%), text right (60%)
- Photo: atmospheric black-and-white or moody color shot of KVOLT at a mixing console or in a studio
- Photo treatment: slight purple tint overlay, rounded corners (16px)
- Text content:
  - Headline: "About KVOLT"
  - Bio: "Born Kevin Volt in East Atlanta, I started making beats on a cracked copy of FL Studio at 14. Twelve years later, I've produced for Grammy-nominated artists, scored commercial campaigns, and built a catalog of over 500 original beats."
  - "My sound sits at the intersection of trap, R&B, and cinematic production — heavy 808s with melodic layers that give artists space to tell their stories. I've worked out of Tree Sound Studios, Patchwerk Recording, and my private studio in Midtown Atlanta."
  - "Whether you need a single beat for your next release or a full album's worth of production, I bring the same energy and attention to detail to every session."
  - Credentials row (icon + text, horizontal):
    - 🎵 500+ beats produced
    - 🏆 3x Grammy-nominated projects
    - 🌍 50M+ total streams
    - 🎓 Berklee-certified (Music Production)
- Background: #0F0F1A

7. CLIENT LOGOS / ARTISTS WORKED WITH
- Headline: "Trusted By"
- Row of artist/label logos in grayscale, subtle glow on hover:
  - Quality Control Music, 300 Entertainment, Capitol Records, Interscope, LVRN, Dreamville
- Below logos: "and 30+ independent artists worldwide"
- Separator: thin purple line (#8B5CF6/20%)

8. TESTIMONIALS
- Headline: "What Artists Say"
- 3 testimonial cards (dark surface, 12px radius):
  - "KVOLT's beats hit different. He understands the vibe before you even explain it. We knocked out 6 tracks in one session." — Artist name, verified with small avatar
  - "Best producer I've worked with. The mix quality on his beats is already 90% there before you even start recording." — Artist name + avatar
  - "He sent me a pack of 10 beats and I couldn't pick just one — ended up licensing 4 for the EP." — Artist name + avatar
- Subtle purple quote icon in background of each card

9. STUDIO & SERVICES
- Headline: "Services"
- 4 service cards (2x2 grid, dark surface, icon + title + description):
  - 🎹 **Beat Production**: "Custom beats tailored to your style. Send a reference track and a vibe description — I'll deliver 3-5 options within 48 hours."
  - 🎙️ **Recording Sessions**: "Book studio time at my private Midtown Atlanta studio. Pro Tools HDX, Neumann U87, Avalon preamp chain."
  - 🎛️ **Mixing & Mastering**: "Professional mix and master for your tracks. Industry-standard loudness, streaming-optimized."
  - 🎬 **Sync Licensing**: "Original compositions for film, TV, commercials, and games. Full stems and clearance documentation provided."
- Each card: hover lifts with purple glow, icon color #8B5CF6

10. CONTACT / BOOKING FORM
- Background: gradient from #0F0F1A to #1A1A2E
- Headline: "Let's Work"
- Subheading: "Whether it's a beat license, a custom production, or a studio session — let's make something great."
- Form fields (dark input backgrounds #1A1A2E, white text, purple focus border):
  - Name (text input)
  - Email (email input)
  - Service type (dropdown): Beat License, Custom Production, Studio Session, Mixing & Mastering, Sync Licensing, Other
  - Budget range (dropdown): Under $500, $500-$1,000, $1,000-$5,000, $5,000+, Let's Discuss
  - Project description (textarea, 4 rows)
  - Reference track URL (optional text input)
  - "Send Message" button (full-width, solid #8B5CF6, white text, 12px radius)
- Below form: "Typical response time: under 4 hours" + email and phone alternatives
- Social links row: Instagram, Twitter, YouTube, SoundCloud, Spotify

11. FOOTER
- Dark background (#0A0A0F)
- 3 columns:
  - Quick Links: Beats, Discography, About, Studio, Contact
  - Legal: Terms of Service, License Agreement, Privacy Policy, Refund Policy
  - Connect: social icons + "Subscribe to my newsletter for free beat drops" email input
- Bottom: "© 2026 KVOLT Productions. All rights reserved. All beats are original compositions."
- Small print: "Prices subject to change. Exclusive beats are first-come, first-served."

Design: Dark, cinematic, audio-forward. Primary: #8B5CF6 (purple-500 for CTAs, accents, and interactive elements). Background spectrum: #0A0A0F (darkest, base), #0F0F1A (sections), #1A1A2E (cards/surfaces). Text: white (#FFFFFF) for headings, #A1A1AA (zinc-400) for body text, #6B7280 (gray-500) for metadata. Accent glow: purple (#8B5CF6) at 20-30% opacity for hover states, borders, and background effects. Typography: Space Grotesk for headings (bold, modern, geometric), Inter for body text. Cards: 12-16px border-radius, no visible borders by default, purple glow on hover (box-shadow: 0 0 20px rgba(139,92,246,0.15)). Generous spacing between sections (80-120px). Album art and photos should feel cinematic — consider subtle Ken Burns (slow zoom) effects on hero images.

Responsive: Mobile-first. Hero text scales down (64px name, 16px tagline). Beat grid becomes 1-column. Persistent player simplifies to essential controls. License cards stack vertically with "Most Popular" on top. Discography becomes swipe carousel. About section stacks (photo on top, text below). Contact form goes full-width. All touch targets 44px minimum. Navigation becomes full-screen overlay menu with large text links and social icons at bottom.