Modern Photographer Portfolio Template

1. Replace Placeholder Content

Personal Information

• Name: Replace [Your Name] throughout the template
• Contact Info: Update email, phone, and address
• Social Media: Replace the social media links with your actual profiles

Images

Replace all placeholder images in the images/ folder:

• hero-bg.jpg - Your main hero/background image
• profile-photo.jpg - Your professional headshot
• portfolio-*.jpg - Your actual portfolio images
• testimonial-client-*.jpg - Client photos (if available)
• blog-post-*.jpg - Blog post featured images

2. Customize Sections

Hero Section

html

<!-- Update the hero section text -->

<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-4 drop-shadow-lg">

    Your Custom Headline Here

</h1>

<p class="text-lg md:text-xl mb-8 drop-shadow-md max-w-2xl mx-auto">

    Your unique photography style and specialty

</p>

About Section

Update the about text to reflect your actual experience, specialties, and personal story.

Portfolio Categories

Modify the filter buttons and portfolio items to match your specialties:

html

<!-- Change categories as needed -->

<button class="portfolio-filter-btn" data-filter="weddings">Weddings</button>

<button class="portfolio-filter-btn" data-filter="portraits">Portraits</button>

<!-- Add your own categories -->

Services

Update the services to match what you actually offer:

• Change service titles and descriptions
• Update icons if needed (using Font Awesome classes)

3. Color Scheme Customization

To change the color scheme (currently amber/orange), replace all instances of:

• amber-600 with your preferred color (e.g., blue-600, green-600, purple-600)
• amber-700 with the darker variant
• amber-500 with the lighter variant

Example for blue theme:

html

<!-- Change from: -->

class="bg-amber-600 hover:bg-amber-700"

<!-- To: -->

class="bg-blue-600 hover:bg-blue-700"

4. Add Your Actual Content

Testimonials

Replace the placeholder testimonials with real client feedback:

html

<div class="testimonial-item">

    <p class="text-xl italic text-gray-800 mb-6">

        "Real client testimonial here..."

    </p>

    <p class="font-semibold text-amber-600 text-lg">

        - Real Client Name

    </p>

</div>

Blog Posts

Update with your actual blog content:

• Change titles, dates, and excerpts
• Add real blog post images
• Update the "Read More" links to point to your actual blog posts

5. Functional Updates

Contact Form

Update the form action to point to your actual form processor:

html

<form action="your-form-processor.php" method="POST">

Map Integration

Replace the map placeholder with an actual Google Maps embed:

html

<div class="bg-gray-200 h-48 w-full rounded-md">

    <!-- Add your Google Maps embed code here -->

    <iframe src="your-google-maps-embed-url" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

</div>

6. File Structure Setup

Create an images folder with these files:

text

images/

├── hero-bg.jpg

├── profile-photo.jpg

├── portfolio-wedding-1.jpg

├── portfolio-wedding-2.jpg

├── portfolio-portrait-1.jpg

├── portfolio-portrait-2.jpg

├── portfolio-landscape-1.jpg

├── portfolio-landscape-2.jpg

├── portfolio-event-1.jpg

├── portfolio-event-2.jpg

├── testimonial-client-1.jpg

├── testimonial-client-2.jpg

├── testimonial-client-3.jpg

├── blog-post-1.jpg

├── blog-post-2.jpg

└── blog-post-3.jpg

7. JavaScript Functionality

The template includes interactive elements that should work automatically, but you may want to customize:

• Portfolio filtering
• Testimonial slider
• Mobile menu
• Smooth scrolling

8. SEO Optimization

Don't forget to update:

• Page title in <title> tag
• Meta description (add if missing)
• Alt text for all images
• Semantic HTML structure

Quick Start Steps:

1. Replace all [Your Name] instances with your actual name
2. Update contact information (email, phone, address)
3. Add your portfolio images to the images folder
4. Customize the about section with your bio
5. Update services to match what you offer
6. Add real testimonials from clients
7. Change the color scheme if desired
8. Test all links and forms