Installation & Customization Guide

📋 Quick Overview

This is a Base44 React application, not a traditional WordPress theme. Your portfolio is hosted on Base44's platform and can be connected to your custom domain from Namecheap.

🌐 Publishing Your Site

Step 1: Publish on Base44

1. Click the "Publish" button in your Base44 dashboard
2. Your site will be live at: yourappname.base44.com
3. Test everything works correctly before connecting your domain

Step 2: Connect Your Namecheap Domain

1. In Base44 dashboard, go to Settings → Custom Domain
2. Enter your domain name (e.g., yourname.com)
3. Base44 will provide DNS records to configure
4. Log into your Namecheap account
5. Go to Domain List → Manage → Advanced DNS
6. Add the DNS records provided by Base44:
   • Type: A Record
   • Host: @
   • Value: [IP provided by Base44]
7. Wait 5-30 minutes for DNS propagation
8. Your site will be live at your custom domain!

✏️ How to Edit Your Portfolio

Option 1: Use Base44 AI Assistant (Easiest)

Simply chat with the AI assistant and request changes:

• "Change the title to [Your Name]"
• "Update the contact email to myemail@example.com"
• "Add more portfolio items"
• "Change the accent color to blue"

Option 2: Edit Files Directly

Navigate to the file you want to edit in the Base44 file browser:

• Click on any file in the left sidebar
• Edit the code directly in the editor
• Changes save automatically and preview updates live

🎨 Customization Guide

1. Change Background (Video/Image)

File: components/portfolio/HeroSection.js

Find these lines at the top of the file:

const backgroundType = 'gradient'; // Change to: 'video', 'image', or 'gradient'
const backgroundVideo = 'your-video-url.mp4';
const backgroundImage = 'your-image-url.jpg';

Replace the URLs with your own video or image, then change backgroundType to your choice.

2. Update Personal Information

File: components/portfolio/HeroSection.js

• Line ~40: Change "Visual Storyteller" to your name/title
• Line ~52: Update the tagline

3. Update Contact Information

File: components/portfolio/ContactSection.js

Find the contactInfo array (around line 20):

const contactInfo = [
  { icon: Mail, label: 'your-email@example.com' },
  { icon: Phone, label: '+1 (555) 123-4567' },
  { icon: MapPin, label: 'Your City, State' },
];

4. Add Your Own Videos

File: components/portfolio/VideoShowcase.js

Find the videos array (around line 6):

const videos = [
  {
    id: 1,
    title: 'Your Video Title',
    category: 'Commercial',
    thumbnail: 'https://your-image-url.jpg',
  },
  // Add more videos here
];

5. Add Your Own Photos

File: components/portfolio/PhotoGallery.js

Find the photos array (around line 6):

const photos = [
  {
    id: 1,
    url: 'https://your-photo-url.jpg',
    title: 'Photo Title',
    category: 'Landscape',
  },
  // Add more photos here
];

6. Update About Section

File: components/portfolio/AboutSection.js

• Lines ~30-40: Update your bio text
• Line 10: Update statistics (videos produced, photoshoots, awards)

7. Change Accent Color

Current accent color is #aeff00 (neon green).

To change it, use Find & Replace in Base44:

• Press Ctrl+F (or Cmd+F on Mac) in the editor
• Search for: #aeff00
• Replace with your color (e.g., #ff6b6b for red)
• Click "Replace All" to update throughout the site

8. Update Logo/Brand Name

File: components/portfolio/Navigation.js

Find line ~30:

<span className="text-[#aeff00]">•</span> Portfolio

Change "Portfolio" to your name or brand.

📁 File Structure Overview

components/portfolio/
├── Navigation.js       → Top menu bar
├── HeroSection.js      → Main landing section with background
├── VideoShowcase.js    → Video portfolio grid
├── PhotoGallery.js     → Photo portfolio grid
├── AboutSection.js     → About section with bio
└── ContactSection.js   → Contact form and info

pages/
└── Home.js            → Main page that combines all sections

💡 Pro Tips

• Upload Files: Use Base44's file upload to add your images/videos, then copy the URLs to use in your code
• Preview Changes: The preview updates live as you edit - no need to refresh
• Mobile Testing: Use browser DevTools (F12) to test mobile responsiveness
• Backup: Base44 keeps version history - you can revert changes if needed
• Ask AI: If you're stuck, just ask the Base44 AI assistant for help!

🆘 Common Questions