# [Full Name] — Personal Legacy Site

A plain HTML/CSS/JS site. No build step, no installs — open `index.html` in a browser to preview.

## Structure

- 10 pages at the top level: `index.html` (Home), `career.html`, `civic-engagement.html`, `affiliations.html`, `reflections.html`, `timeline.html`, `hobbies.html`, `day-in-life.html`, `gallery.html`, `contact.html`.
- `css/style.css` — all styling, shared across pages.
- `js/main.js` — mobile menu toggle + gallery filter buttons.
- `images/portraits/` — profile/hero photos.
- `images/gallery/` — photo gallery images.

## Replacing placeholder text

Every page has bracketed placeholders like `[Full Name]` or `[Role Title]` — find and replace these as real content comes in from the interview process (see the original project brief for the interview prompts, organized by section).

`[Full Name]` appears in every page's nav brand, title tag, and footer — a find-and-replace across all `.html` files is the fastest way to set it once a name is confirmed.

## Adding photos

1. Drop image files into `images/gallery/` (for the gallery page) or `images/portraits/` (for the homepage photo).
2. In `gallery.html`, replace a placeholder `<div class="gallery-item" data-category="...">...</div>` block with:
   ```html
   <div class="gallery-item" data-category="sail">
     <img src="images/gallery/your-photo.jpg" alt="Describe the photo here">
   </div>
   ```
   Keep `data-category` matching one of: `sail`, `lions`, `council`, `aima`, `hobbies`, `family` — these power the filter buttons.
3. For the homepage photo, replace the `<div class="hero-photo">[ Photo pending ]</div>` block in `index.html` with `<img src="images/portraits/your-photo.jpg" alt="...">` inside the same div.

## Contact form

The contact page currently uses a `mailto:` link — no backend required, but it opens the visitor's email app. Update `emailUser` and `emailDomain` near the bottom of `contact.html` to the real (masked) email address.

If you later host on **Netlify**, you can upgrade to a real form backend (messages land in the Netlify dashboard, no email app needed) by adding `data-netlify="true"` and a hidden `form-name` input to the `<form>` tag — Netlify's docs cover the two-line change.

## Hosting

Any static host works — no server-side code, no database. Easiest options:
- **GitHub Pages** — free, good if you're comfortable with git.
- **Netlify** — free, drag-and-drop deploy from a folder, and unlocks working contact forms (see above).

## Editing without touching code

Every page is a self-contained `.html` file with plain text inside `<p>`, `<h2>`, `<h3>` tags — safe to open in any text editor and edit the sentences directly without touching anything in `<...>` brackets.