Sound Designer Portfolio Website

A modern, responsive portfolio website for a sound designer built with React and Tailwind CSS.

Features

• Hero Section: Full-screen background with video/image support, prominent headline, and call-to-action button
• About Section: Two-column layout with portrait and biography, featuring circular skill icons
• Portfolio Section: Filterable project gallery (Film, Games, VR) with modal view for project details
• Audio Player: Horizontal slider showcasing demo tracks with play/pause functionality
• Testimonials & Clients: Client testimonials and logo grid
• Contact Form: Contact form with social media links and resume download
• Responsive Navigation: Sticky navbar with smooth scrolling and mobile menu
• Footer: Dark footer with navigation links and contact information

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser and navigate to http://localhost:5173

Customization

Adding Your Content

1. Hero Video/Image:

   • Replace the placeholder background in src/components/Hero.jsx
   • Uncomment the video element and add your video file to the public folder

2. Portrait Photo:

   • Add your portrait image to the public folder
   • Update the image path in src/components/About.jsx

3. Projects:

   • Update the projects array in src/components/Portfolio.jsx
   • Add project images/videos to the public folder

4. Audio Tracks:

   • Add audio files to public/audio/ folder
   • Update the audioUrl in the tracks array in src/components/AudioPlayer.jsx

5. Testimonials & Clients:

   • Update the testimonials and clients arrays in src/components/Testimonials.jsx

6. Social Links:

   • Update social media URLs in src/components/Contact.jsx

7. Resume:

   • Add your resume PDF to the public folder as resume.pdf

Styling

The project uses Tailwind CSS for styling. You can customize colors, fonts, and other design tokens in tailwind.config.js.

Building for Production

npm run build

The built files will be in the dist folder.

Technologies Used

• React 19
• Vite
• Tailwind CSS 3
• Modern JavaScript (ES6+)

License

This project is open source and available for personal and commercial use.