================================================================================
PAUL AGONDA PR PORTFOLIO - COMPLETE SETUP INSTRUCTIONS
================================================================================

This file contains step-by-step instructions to get your portfolio live.

================================================================================
STEP 1: INITIAL SETUP (5 minutes)
================================================================================

1. Open terminal/command prompt in project directory

2. Create .env.local file:
   - Copy .env.example to .env.local
   - Update NEXT_PUBLIC_WORDPRESS_URL with your WordPress site URL
   
   Example:
   NEXT_PUBLIC_WORDPRESS_URL=https://paulagonda.wordpress.com

3. Install dependencies:
   npm install

4. Run development server:
   npm run dev

5. Visit http://localhost:3000
   - Should see home page load
   - Verify no errors in browser console

================================================================================
STEP 2: WORDPRESS SETUP (30 minutes)
================================================================================

IMPORTANT: You MUST set up WordPress before deploying to production

1. Choose WordPress hosting:
   - WordPress.com (Business plan or higher)
   - Kinsta
   - Bluehost
   - Any other managed WordPress hosting

2. Install required plugins:
   - Advanced Custom Fields (ACF) - Free version
   - Custom Post Type UI
   - WP CORS (for CORS headers)

3. Create custom post types via Custom Post Type UI:
   
   POST TYPE 1: Portfolio Items
   - Name: portfolio_item
   - Check "Show in REST"
   - Enable: title, content, excerpt, thumbnail
   
   POST TYPE 2: Press Releases
   - Name: press_release
   - Check "Show in REST"
   - Enable: title, content, excerpt, thumbnail

4. Create ACF fields for Portfolio Items:
   Go to ACF → Field Groups → Add New → Portfolio
   Fields:
   - client_name (Text)
   - challenge (Text Area)
   - results (Text Area)
   
   Assign to: Portfolio Item post type

5. Create ACF fields for Press Releases:
   Go to ACF → Field Groups → Add New → Press Release
   Fields:
   - publication_name (Text)
   - publication_date (Date)
   - pdf_link (URL)
   
   Assign to: Press Release post type

6. Add sample content:
   - 3+ Portfolio Items with featured images
   - 3+ Blog Posts with featured images
   - 1+ Press Release

7. Verify REST API works:
   Visit: https://your-wordpress-site.com/wp-json/wp/v2/posts
   Should see JSON data

================================================================================
STEP 3: TEST LOCALLY (10 minutes)
================================================================================

1. Make sure .env.local has correct WordPress URL

2. Stop and restart dev server:
   Ctrl+C to stop
   npm run dev to restart

3. Check if content loads:
   - Visit http://localhost:3000
   - Go to /portfolio - should show your portfolio items
   - Go to /articles - should show your blog posts
   - Check browser console for any errors

4. If no content shows:
   - Verify WordPress URL in .env.local is correct
   - Check WordPress REST API is accessible
   - Look for CORS errors in browser console
   - Verify WordPress posts are published

================================================================================
STEP 4: PREPARE FOR DEPLOYMENT (15 minutes)
================================================================================

1. Update client information:
   
   File: /app/layout.tsx
   - Update title and description
   
   File: /app/page.tsx
   - Update Paul Agonda name and bio
   
   File: /components/footer.tsx
   - Update email: paul@kenyamediarelations.com
   - Update phone: +254 (0) 700 000 000
   - Update LinkedIn URL
   
   File: /components/contact-form.tsx
   - Same contact information

2. Customize colors (optional):
   File: /app/globals.css
   - Edit :root section for light theme colors
   - Edit .dark section for dark theme colors
   
   Main colors:
   --primary: #001F3F (Navy)
   --accent: #D4AF37 (Gold)

3. Commit changes:
   git add .
   git commit -m "Update client information"
   git push origin main

================================================================================
STEP 5: DEPLOY TO VERCEL (10 minutes)
================================================================================

OPTION A: Deploy via Vercel Dashboard

1. Go to https://vercel.com/new

2. Connect GitHub/GitLab/Bitbucket account

3. Select your repository

4. Under "Environment Variables", add:
   Name: NEXT_PUBLIC_WORDPRESS_URL
   Value: https://your-wordpress-site.com

5. Click "Deploy"

6. Wait for deployment to complete (2-3 minutes)

7. Visit the deployment URL

OPTION B: Deploy via Vercel CLI

1. Install Vercel CLI:
   npm i -g vercel

2. Deploy:
   vercel

3. Follow prompts to link project

4. Add environment variable when asked

5. Deployment begins automatically

================================================================================
STEP 6: POST-DEPLOYMENT SETUP (15 minutes)
================================================================================

1. Enable CORS in WordPress:
   
   Add to wp-config.php:
   ```
   add_filter( 'rest_allowed_cors_origins', function( $origins ) {
       $origins[] = 'https://your-vercel-domain.vercel.app';
       return $origins;
   });
   ```
   
   OR install "Allow JSON CORS" plugin

2. Test your deployment:
   - Visit your Vercel URL
   - Verify portfolio items display
   - Verify blog posts display
   - Test contact form
   - Check mobile responsiveness

3. Set up custom domain (optional):
   - In Vercel: Project Settings → Domains
   - Add your custom domain
   - Follow DNS setup instructions
   - Update WordPress settings

4. Enable monitoring:
   - Vercel dashboard shows analytics
   - Check deployment logs for errors
   - Monitor performance metrics

================================================================================
STEP 7: CONTINUOUS CONTENT UPDATES
================================================================================

From now on, you manage content in WordPress:

TO ADD PORTFOLIO ITEM:
1. Log into WordPress Admin
2. Portfolio Items → Add New
3. Fill in title, content, featured image
4. Add custom fields (client name, challenge, results)
5. Publish
6. Appears on site automatically within minutes

TO ADD BLOG POST:
1. Log into WordPress Admin
2. Posts → Add New
3. Fill in title, content, featured image
4. Publish
5. Appears on site automatically

TO ADD PRESS RELEASE:
1. Log into WordPress Admin
2. Press Releases → Add New
3. Fill in title, content, featured image
4. Add custom fields (publication name, date, PDF)
5. Publish
6. Appears on site automatically

================================================================================
TROUBLESHOOTING
================================================================================

ISSUE: "Cannot find module" error
SOLUTION: 
- Run: npm install
- Clear cache: rm -rf .next
- Restart: npm run dev

ISSUE: Content not showing on portfolio page
SOLUTION:
1. Verify WordPress URL in .env.local
2. Check WordPress posts are PUBLISHED
3. Verify WordPress REST API works at:
   https://your-wordpress-site.com/wp-json/wp/v2/posts
4. Check browser console for network errors
5. Verify custom post types have "show_in_rest" enabled

ISSUE: Images not loading
SOLUTION:
1. Verify featured image is set in WordPress
2. Check image URL is publicly accessible
3. Look for CORS errors in browser console
4. Ensure WP CORS plugin is active

ISSUE: Build fails on Vercel
SOLUTION:
1. Check environment variables are set correctly
2. Test build locally: npm run build
3. Check Vercel build logs for specific error
4. Ensure all required dependencies in package.json

ISSUE: Deployment won't start
SOLUTION:
1. Push code to Git repository first
2. Verify GitHub account is connected to Vercel
3. Check branch is "main" or default branch
4. Verify environment variables are set

================================================================================
QUICK REFERENCE
================================================================================

IMPORTANT FILES:
- .env.local: WordPress configuration
- /app/layout.tsx: Global layout and metadata
- /app/page.tsx: Homepage
- /components/footer.tsx: Contact information
- /app/globals.css: Theme colors

IMPORTANT URLS:
- Local: http://localhost:3000
- Deployment: https://your-project.vercel.app
- WordPress REST API: https://your-wordpress-site.com/wp-json/wp/v2/posts

IMPORTANT COMMANDS:
- npm install: Install dependencies
- npm run dev: Start development server
- npm run build: Build for production
- vercel: Deploy to Vercel

DOCUMENTATION:
- QUICK_START.md: 3-step quick start
- WORDPRESS_SETUP.md: Detailed WordPress guide
- DEPLOYMENT_GUIDE.md: Advanced deployment
- README.md: Full documentation
- PROJECT_SUMMARY.md: Project overview

================================================================================
YOU'RE ALL SET!
================================================================================

Your PR portfolio is now ready to go live. Follow these steps and you'll have
a professional, fast, and SEO-optimized portfolio site running on Vercel
with content managed in WordPress.

For detailed information, see the .md files included in this project.

Questions? Check:
1. Browser console for error messages
2. Vercel deployment logs
3. WordPress REST API responses
4. Environment variables in .env.local

Good luck with your PR portfolio!