A&B Projects — Website Editing Guide

This guide explains how to update the website without touching any code you don't need to.

---

Running the Site Locally

node serve.mjs

Then open http://localhost:3000 in your browser.

---

1. Changing Brand Colors

All colors are defined as CSS variables at the top of assets/css/styles.css. Edit the :root block — do not change any hex values elsewhere in the file.

:root {
  --color-accent:       #c9a84c;  /* ← Brand gold */
  --color-accent-hover: #e0c068;  /* ← Gold on hover */
  --color-bg:           #111111;  /* ← Page background */
  --color-surface:      #1a1a1a;  /* ← Card/section backgrounds */
  /* ... */
}

---

2. Replacing Placeholder Photos

All photos go in assets/images/ (gallery photos in assets/images/gallery/). See assets/images/README.md for a full list of photos needed.

Steps:

1. Add your photo to the correct folder
2. In index.html, find the <img> with placehold.co in the src
3. Replace the src with your file path, e.g. assets/images/gallery/kitchen-01.jpg
4. Update the alt attribute with a description of the photo

---

3. Adding a Gallery Item

Copy this block and paste it inside <div class="gallery-grid" id="gallery-grid"> in index.html:

<div class="gallery-item" data-category="CATEGORY" data-title="PROJECT TITLE HERE" data-index="27">
  <div class="gallery-thumb">
    <img src="assets/images/gallery/your-photo.jpg" alt="Brief description of photo" loading="lazy" width="800" height="600">
    <div class="gallery-overlay">
      <span class="gallery-cat">CATEGORY LABEL</span>
      <p class="gallery-title">PROJECT TITLE HERE</p>
    </div>
  </div>
</div>

Valid data-category values (must match exactly for filters to work):

• kitchen
• bathroom
• cabinetry
• carpentry
• shopfitting
• wardrobe

data-index: increment by 1 from the last item (currently 25, so next is 26, etc.)

---

4. Adding a Review

Copy this block and paste it inside <div class="reviews-grid"> in index.html:

<article class="review-card">
  <div class="review-stars" aria-label="5 stars" aria-hidden="true">
    <svg width="16" height="16" viewBox="0 0 22 22" fill="currentColor"><path d="M11 2L13.5 8H20L15 12L17 18L11 14L5 18L7 12L2 8H8.5Z"/></svg>
    <svg width="16" height="16" viewBox="0 0 22 22" fill="currentColor"><path d="M11 2L13.5 8H20L15 12L17 18L11 14L5 18L7 12L2 8H8.5Z"/></svg>
    <svg width="16" height="16" viewBox="0 0 22 22" fill="currentColor"><path d="M11 2L13.5 8H20L15 12L17 18L11 14L5 18L7 12L2 8H8.5Z"/></svg>
    <svg width="16" height="16" viewBox="0 0 22 22" fill="currentColor"><path d="M11 2L13.5 8H20L15 12L17 18L11 14L5 18L7 12L2 8H8.5Z"/></svg>
    <svg width="16" height="16" viewBox="0 0 22 22" fill="currentColor"><path d="M11 2L13.5 8H20L15 12L17 18L11 14L5 18L7 12L2 8H8.5Z"/></svg>
  </div>
  <blockquote class="review-quote">
    <p>"PASTE REVIEW TEXT HERE"</p>
  </blockquote>
  <footer class="review-author">
    <div class="review-avatar" aria-hidden="true">F</div>  <!-- First letter of reviewer name -->
    <div>
      <strong class="review-name">REVIEWER NAME</strong>
      <span class="review-location">SUBURB</span>
    </div>
  </footer>
</article>

---

5. Phone Numbers — All Locations

Anthony's number (0430 949 802 / tel:0430949802) appears in:

• Navigation bar: .nav-phone
• Mobile menu: .mobile-phone-link
• About section: Anthony's team card .team-phone
• Contact section: contact list
• Footer: footer contact column
• FAB buttons: .fab--phone-1
• WhatsApp FAB: wa.me/61430949802

Baden's number (0412 190 848 / tel:0412190848) appears in:

• About section: Baden's team card .team-phone
• Contact section: contact list
• Footer: footer contact column
• FAB buttons: .fab--phone-2

To update a number: use Find & Replace in your code editor (Ctrl+H / Cmd+H).

---

6. Email Address

info@abprojectsvic.com.au appears in:

• Contact section details
• Footer contact column

To update: Find & Replace info@abprojectsvic.com.au in index.html.

---

7. Service Area Suburbs

Suburbs are mentioned in:

• Contact section: .contact-suburbs-list
• Footer description
• Meta keywords in <head>

Edit these directly in index.html.

---

8. Updating Social Media Links

Find these in index.html:

• Instagram: https://www.instagram.com/abprojectsvic (appears twice)
• Facebook: https://www.facebook.com/abprojectsvic (appears twice)
• WhatsApp FAB: https://wa.me/61430949802

---

9. File Structure

A&BProjects/
├── index.html              ← Main website file
├── serve.mjs               ← Local dev server (node serve.mjs)
├── assets/
│   ├── css/
│   │   ├── styles.css      ← All styles & CSS variables
│   │   └── animations.css  ← Scroll animations & keyframes
│   ├── js/
│   │   ├── main.js         ← Nav, counters, form, smooth scroll
│   │   └── gallery.js      ← Gallery filters & lightbox
│   └── images/
│       ├── README.md       ← Photo assets guide
│       └── gallery/        ← Gallery photos go here
└── README.md               ← This file