focal-point — HTML Portfolio Template

SHA-256: e6f9f26628751989f2360092845322563898c23c3dda41ff95a49017bfabf3fb

2026-10-01T15:36:43.034Z

# Focal Point

![Focal Point gallery preview](images/mooks.jpg)

A minimal photo gallery template. Drop in your images and deploy.

## Usage

1. Put your JPG/JPEG/PNG images in the `images/` folder
2. Run the setup script (or wire up images manually)
3. Deploy

## Setup script

Requires [ImageMagick](https://imagemagick.org) and Python 3.

**macOS**
```bash
brew install imagemagick
```

**Linux (Debian/Ubuntu)**
```bash
sudo apt install imagemagick python3
```

**Linux (Fedora/RHEL)**
```bash
sudo dnf install imagemagick python3
```

**Windows**
```powershell
winget install ImageMagick.ImageMagick Python.Python.3
```
The script requires Bash — run it via [WSL](https://learn.microsoft.com/windows/wsl) or [Git Bash](https://git-scm.com/downloads).

---

```bash
./lib/optimise.sh
```

This will:
- Compress and resize any images over 1920px wide (quality 80)
- Skip images already optimised
- Add new images to `index.html` automatically with alt text

## AI naming

### Wire up images with an LLM

Put your images in `images/` and give this prompt to any LLM with access to your project:

```
List all files in the images/ directory, then update index.html to display them.
Replace the existing <img> tags inside <div class="image-container"> with one <img> tag
per image file. Set src to the relative path (e.g. images/photo.jpg or images/photo.png) and write a
meaningful, descriptive alt attribute for each one that describes the image content,
not just the filename. For camera-generated names (DSC*, IMG*, etc.), describe what
the image likely depicts based on any context available.
```

### Better alt text for camera files (macOS)

For camera-generated filenames (DSC*, IMG*, etc.), install the macOS Vision framework to generate descriptive alt text automatically:

```bash
pip3 install pyobjc-framework-Vision
```

## View locally

Install Python from [python.org](https://www.python.org/downloads/) if you don't have it, then:

```bash
python3 -m http.server
```

Then open [http://localhost:8000](http://localhost:8000).

## Deploy

### Vercel

```bash
npm i -g vercel
vercel
```

Or drag the project folder into [vercel.com/new](https://vercel.com/new).

### Netlify

Drag the project folder into [app.netlify.com/drop](https://app.netlify.com/drop). Done.

## Accessibility

See [ACCESSIBILITY.md](ACCESSIBILITY.md) for our commitment, known limitations, and how to report issues.

## License

[MIT](LICENSE)