# Adding your project photos and videos

The site is already built with deliberately empty media spaces. A grey technical placeholder appears until you add the matching file; when the file is present, it automatically replaces the placeholder. You do not need to edit the website layout or JavaScript.

## Before you upload anything

Only use photos or videos that you own or have clear permission to publish. For airport-related work, do **not** use media that shows security processes, restricted areas, identity/access material, live layouts, screens, detailed routes, confidential documents, vehicle registrations, or identifiable people without permission.

If you are unsure, leave it out. A strong portfolio needs fewer, better, safer images—not every site photo.

## The simple method

1. Choose a project folder name from the list below.
2. Create that folder inside `assets/media/`.
3. Add a landscape JPEG photo named `hero.jpg`. It will appear on the project card and at the top of its case study.
4. Optionally add up to three supporting JPEGs named `gallery-1.jpg`, `gallery-2.jpg`, and `gallery-3.jpg`.
5. Optionally add one short MP4 video named `site-video.mp4`. It will appear below the gallery.
6. Publish the changed files using your normal Cloudflare/GitHub update process. The site updates after the new deployment is live.

Use the file names exactly as shown. Do not use spaces, brackets, or extra versions such as `hero final.jpg`.

## Project folder names

```text
assets/media/
├── mmia-rehabilitation-upgrade/
├── t1-security-screening-relocation/
├── satellite-antenna-relocation/
├── nama-alternative-fibre/
├── t1-structural-investigation/
├── cybernetics-bitumen-tank/
├── cybernetics-loading-gantry/
├── heyden-petroleum-storage-tank/
└── epe-vocational-training-centre/
```

For example, the first image for the Epe project goes here:

```text
assets/media/epe-vocational-training-centre/hero.jpg
```

## Recommended media preparation

- **Hero photo:** landscape, at least 1600 px wide, JPEG, ideally under 1.5 MB.
- **Gallery photo:** landscape or square, at least 1200 px wide, JPEG, ideally under 1 MB.
- **Video:** 20–60 seconds, landscape MP4 (H.264), ideally under 25 MB. Prefer before/after, a construction stage, inspection, movement, or completed work.
- **Caption:** update the project description in `assets/js/site-data.js` only if the image needs a precise context caption. Do not reveal sensitive technical details in a caption.

## Adding files through GitHub—no coding required

After the site is connected to a GitHub repository:

1. Open the repository in your web browser.
2. Open `assets` → `media` → the relevant project folder.
3. Select **Add file** → **Upload files**.
4. Upload the image with the exact file name above, then select **Commit changes**.
5. Cloudflare will redeploy the site automatically. Open the project page and confirm the image has replaced the placeholder.

To replace a photograph later, upload a new file with the same name and commit it. The layout will not change.

## Updating text or adding a new project

All project text, numbers and folder names are in `assets/js/site-data.js`. Duplicate one project object, give it a unique `slug` and `mediaFolder`, then use that folder name under `assets/media/`. Keep all claims verified and all airport content public-safe.