# Atrium

An original architecture portfolio template by MRHTML. Atrium uses a broad landscape introduction, a compact filter index, and alternating landscape and portrait project spreads. Bone, ink, and clay colors pair with installed Georgia and Arial fonts.

## Open and edit

Open `index.html` directly in a current browser. No installation, build command, server, account, or network connection is needed. Keep `index.html`, `styles.css`, `script.js`, and `assets/` together. Upload the complete folder to a static host when your customized site is ready.

- `index.html`: page metadata, practice identity, project content, native design notes, inquiry link, and photo descriptions.
- `styles.css`: palette variables at the top, typography, spread layouts, breakpoints, and reduced-motion rules.
- `script.js`: project filtering and local anchor focus/scroll behavior. It is a classic script so it works from a local file and inside an opaque-origin preview.
- `assets/`: three optimized local WebP reference photographs. Credits, source links, retrieval details, and separate licenses are in `ASSETS.md`.

## Make it your own

1. Replace the title, description, Atrium name, studio philosophy, and all fictional study copy with accurate practice information. Do not present sample concepts or stock photographs as completed commissions.
2. Replace each reference photograph with work you have permission to publish. Update its `alt`, caption, `width`, and `height`. The first image loads eagerly; later images use lazy loading.
3. Edit `--bone`, `--ink`, `--clay`, and related tokens in `styles.css`. Recheck contrast after changing colors.
4. Edit project articles with matching `data-category` values. Update filter button values and labels, and the initial visible count in `.filter-status`. JavaScript calculates filtered counts from the actual articles.
5. Replace `.inquiry-link`'s `href="#inquiry-note"` with your verified email link or inquiry-page URL. Replace the setup note with useful instructions. No recipient is included intentionally. Do not label an inquiry as submitted unless you implement and verify a real contact service.
6. Review phone, tablet, keyboard, and no-JavaScript behavior after customizing. Keep the skip link, accessible filter state, focus outlines, image descriptions, and reduced-motion rule.
7. The downloaded demo includes `<meta name="robots" content="noindex,follow">`. Remove or change it only when publishing your own finished content. Add your own canonical URL and social metadata as appropriate.

## Behavior and limits

All three studies remain visible without JavaScript; filter controls appear only after enhancement. Native `details` disclosures work without scripting. Filter buttons use normal Tab and Enter/Space keyboard operation, `aria-pressed`, and a live result count. The filter only considers articles present in this file; there is no content system, routing, search service, persistence, or backend.

Inquiry links initially focus an honest setup note. The template never collects personal information or sends a message. No analytics, cookies, external fonts, runtime fetches, CDN code, or third-party JavaScript are included. Photo-credit and creator links request other sites only when deliberately followed.

The sample plans are descriptions, not construction documents, architectural advice, or claims of built work. The studio is fictional. Reference images do not imply that Atrium designed, owns, or represents the depicted properties.

## License and credit

Original code and copy are provided under the included MIT `LICENSE`. Photographs retain their separate Unsplash license and creator copyrights; see `ASSETS.md`. Keep the unobtrusive `Designed by MRHTML` footer link with `rel="nofollow"` when using this branded template. No attribution condition is added to the MIT license.