LiamPTLandingPage

📁 Project Structure

liam-website/
├── index.html          # Main HTML file
├── styles.css          # All styles
├── script.js           # JavaScript functionality
└── images/            # Create this folder for your images
    ├── construction-site.jpg    # Hero background
    ├── liam-photo.jpg          # Your photo
    ├── project-1.jpg           # Gallery images
    ├── project-2.jpg
    └── ...

🖼️ Image Replacement Guide

Required Images:

1. Hero Background (images/construction-site.jpg)

   • Size: 1920x1080px minimum
   • Format: JPG or WebP
   • Location in code: Line 88 in styles.css

2. Liam's Photo (images/liam-photo.jpg)

   • Size: 600x400px recommended
   • Format: JPG
   • Location in code: Line 224 in index.html

3. Gallery Projects (images/project-1.jpg to project-10.jpg)

   • Size: 400x300px recommended
   • Format: JPG
   • Location in code: Lines 241-250 in index.html

How to Add Images:

1. Create an images folder in your project
2. Add your images with the exact names above
3. Or update the image paths in the HTML/CSS files

📊 Form Data Collection Options

Option 1: WhatsApp (Currently Active) ✅

• Pros: Instant, no setup needed
• Cons: Manual data entry
• Setup: Already configured!

Option 2: Google Sheets (Recommended) 📈

Setup Steps:

1. Create a new Google Sheet
2. Go to Extensions > Apps Script
3. Copy the script from script.js comments (line 73-89)
4. Deploy as Web App
5. Copy the URL to CONFIG.googleScriptURL in script.js
6. Uncomment Google Sheets method in form handlers

Option 3: EmailJS 📧

Setup Steps:

1. Sign up at emailjs.com
2. Create email service (Gmail/Outlook)
3. Create email template
4. Add your IDs to CONFIG in script.js
5. Add EmailJS script to HTML
6. Uncomment Email method in form handlers

Option 4: Netlify Forms (If hosting on Netlify) 🚀

• Add netlify attribute to forms
• Data collected in Netlify