Creative Artist Portfolio Template

1. Basic Information

Replace all [Your Name] placeholders with your actual name:

In the header/navigation:

html

<a href="#" class="text-2xl font-heading font-bold text-primary-art dark:text-secondary-art">

    Your Actual Name

</a>

In the hero section:

html

<h1 class="text-5xl md:text-7xl font-heading font-bold mb-4">

    Your Actual Name

</h1>

<p class="text-2xl md:text-3xl font-body mb-6 text-secondary-art">

    Your Actual Title (e.g., "Digital Artist & Illustrator")

</p>

2. Contact Information

Update social media links and email:

In the contact section:

html

<a href="https://twitter.com/yourprofile" target="_blank">

<a href="https://linkedin.com/in/yourprofile" target="_blank">

<a href="https://instagram.com/yourprofile" target="_blank">

<a href="mailto:your.email@example.com">

3. Content Customization

About Section:

html

<p class="text-lg mb-6 leading-relaxed">

    Hello! I'm [Your Name], a passionate visual artist...

    <!-- Replace with your actual bio -->

</p>

Services Section:

Update the service descriptions to match what you actually offer.

Testimonials:

Replace with real client testimonials and names.

Portfolio:

You'll need to replace the portfolio items with your actual work.

4. Image Replacement

You need to replace these image files in the images/ folder:

• hero-background.jpg - Your hero background image
• about-me-profile.jpg - Your profile picture
• portfolio-digital-art-1.jpg - Your portfolio pieces
• portfolio-illustration-1.jpg - Your portfolio pieces
• portfolio-branding-1.jpg - Your portfolio pieces
• portfolio-photography-1.jpg - Your portfolio pieces
• testimonial-client-1.jpg - Client photos (if available)
• blog-post-1.jpg - Blog post images

5. Color Scheme (Optional)

If you want to change the colors, edit this section in the Tailwind config:

javascript

colors: {

    'primary-art': '#7C3AED',    // Main purple

    'secondary-art': '#EC4899',  // Pink accent

    'bg-light-art': '#F8FAFC',   // Light background

    'bg-dark-art': '#111827',    // Dark background

    'text-light-art': '#E2E8F0', // Light text

    'text-dark-art': '#1F2937',  // Dark text

    'accent-art': '#10B981'      // Green accent

}

6. Quick Setup Checklist:

1. Replace all [Your Name] occurrences
2. Update social media links
3. Change email address
4. Write your actual bio in About section
5. Customize services you offer
6. Add real testimonials
7. Replace portfolio images with your work
8. Update blog post titles and content
9. Add your achievements/awards
10. Upload your images to an images/ folder

7. File Structure:

Make sure your project folder looks like this:

text

your-portfolio/

├── index.html

├── script.js

└── images/

    ├── hero-background.jpg

    ├── about-me-profile.jpg

    ├── portfolio-digital-art-1.jpg

    ├── portfolio-illustration-1.jpg

    └── ... (other images)

8. Important Notes:

• The template uses Tailwind CSS - no separate CSS files needed
• Dark/light mode toggle is built-in
• Mobile-responsive design works automatically
• Portfolio filtering is included (you'll need to implement the JavaScript)
• Smooth scrolling between sections