portfolio-template (nicolascadet-ops) — Astro 作品集模板

SHA-256: 9589cb9e2b63004c5ca21b572f5deeb2dfb9b40155cb56e0a0b64c4b525acb3f

2026-10-03T19:41:49.645Z

# Mara Ellis: Photography Portfolio Template

A dark, image-first portfolio for photographers, designers, illustrators and studios. Built with [Astro](https://astro.build): projects are Markdown files, images are optimised automatically, and the output is a fast static site.

![Portfolio home page](docs/screenshot.png)

> **Mara Ellis is a fictional photographer.** The photographs are free sample images from Unsplash by many different photographers, credited on every project page and listed in each project's Markdown file. Clients, exhibitions and awards are fictional.

## Features

- **Project index with live preview**: hover or focus a project title and the large preview changes.
- **Project pages** with year, location and client, a short story, and an editorial image sequence that mixes full-width and half-width images.
- **Lightbox**: click any image to view it full screen; arrow keys to move, Esc to close.
- **Content in Markdown**: add a project by adding one `.md` file and a folder of images.
- **Automatic image optimisation**: responsive WebP sizes generated at build time.
- **Accessible**: semantic HTML, keyboard-friendly navigation and lightbox, visible focus, alt text for every image, reduced-motion support.
- **Fast**: static HTML, one self-hosted font, almost no JavaScript.

## Run it locally

Requires Node.js 22.12 or later.

```bash
npm install
npm run dev
```

Then open http://localhost:4321.

## Customise

| What | Where |
|---|---|
| Name, email, city, Instagram | `src/site.ts` |
| Projects | `src/content/work/*.md` (one file per project) |
| Project images | `src/assets/<project-name>/` |
| Your portrait and bio | `src/assets/mara.jpg` and `src/pages/about.astro` |
| Colours and font | CSS variables at the top of `src/styles/global.css` |

### Add a project

1. Create a folder of images in `src/assets/my-project/`.
2. Copy one of the files in `src/content/work/` to `my-project.md` and edit the title, year, `order`, text and image list.
3. Run `npm run dev`. The project appears on the home page and gets its own page at `/work/my-project/`.

## Deploy to Cloudflare Pages

- **Dashboard:** Workers & Pages → Create → Pages → Connect to Git → pick this repo. Framework preset: **Astro**. Build command: `npm run build`. Output directory: `dist`.
- **CLI:**
  ```bash
  npm run build
  npx wrangler pages deploy dist --project-name mara-ellis
  ```

The site only rebuilds when you push changes.

## Credits

- Typeface: [Schibsted Grotesk](https://fonts.google.com/specimen/Schibsted+Grotesk), SIL Open Font License.
- Photographs: [Unsplash](https://unsplash.com) contributors under the [Unsplash License](https://unsplash.com/license). Each image's photographer and source link is in the `credit` and `source` fields of its project's Markdown file and is shown at the bottom of each project page. The About page photo (hands holding a camera, no face shown) is by Patrick Fore.
- Built by **NC Atelier**.

---

### Want a site like this for your business?

NC Atelier designs and builds fast, accessible websites for businesses in the UK, US and Canada.

**Get in touch:** [ncatelier.com](https://ncatelier.com) · [LinkedIn](https://www.linkedin.com/in/cadetnicolas)