# Syntax Folio

An original MRHTML frontend developer portfolio. Warm paper, cobalt typography, an asymmetric project grid, and original interface artwork make room for the decisions behind the work.

## Open and publish

Keep the six files together and open `index.html` in a current browser. No installation, build process, account, web font, CDN, or network connection is required. Upload the same folder contents to a static host when ready.

The supplied page includes `<meta name="robots" content="noindex,follow" />` because it is an uncustomized public demo. Remove that element from your customized real site before publishing. Set an accurate title and description and add a canonical URL only when your actual public URL is known. Search visibility is not guaranteed.

## Make the portfolio yours

1. Replace Rowan Ellis, the introduction, and the fictional Index, Loop UI, and Daypath projects. State your actual role, constraints, implementation decisions, and evidence. Do not present sample projects as completed client work.
2. Edit each native `<details>` case study in `index.html`. Explain the problem, a meaningful tradeoff, the boundary of the implementation, and what you would test next. Remove any claim you cannot support.
3. Change colors in the `:root` custom properties in `styles.css`. System Arial/Helvetica and local monospace fallbacks avoid font downloads. Recheck contrast after changing colors.
4. The Index bookshop, Loop state map, and Daypath itinerary are original HTML/CSS illustrations. Edit their labeled markup and CSS classes. They are static graphics, not working applications. Keep their `role="img"` text alternatives synchronized with visual changes. If replacing them with images, use your own licensed local files, useful alt text, and explicit dimensions.
5. Each project has `data-category="interface"` or `data-category="system"`. Match those values to each button's `data-filter`. The `all` value shows all projects. Filtering preserves the full source document and announces the visible count.
6. Replace the about section and its contact setup note with your accurate profile and a verified email or booking link. There is no recipient, form, submission service, or pretend success flow in this sample.
7. Update the footer sample label and check every link, small viewport, disclosure, and filter before publishing.

## Behavior and limitations

Navigation targets real page sections. Filters appear only after their event handlers are ready. They are native buttons usable with Tab, Enter, and Space, with `aria-pressed` and a live count. They only filter the three articles already in the document; they do not provide full-text search, URL state, pagination, or remote content. Native case-study disclosures work without JavaScript. With JavaScript disabled, all projects remain visible and inactive filter controls remain hidden.

No store, map, geolocation, booking flow, component package, CMS, account, analytics, cookies, storage, or backend is included. The illustrative work makes no client, testimonial, award, or performance claim. The author credit is an external link visited only when clicked.

## Accessibility and responsive checks

The page includes a skip link, semantic headings, clear focus styles, readable document order, and reduced-motion support. Layouts adapt down to 320 CSS pixels. On narrow screens, artwork simplifies decorative detail and projects stack in source order. The native navigation remains usable without JavaScript.

After customization, check 320px, 390px, 768px, and desktop widths; browser zoom; long titles; all filters; every disclosure; keyboard focus; and new palette contrast. Embedded previews with `sandbox="allow-scripts"` work without forms, storage, module loading, or same-origin access. This starting point does not certify the accessibility of customized content.

## Included files and rights

- `index.html`: semantic portfolio content and original art markup.
- `styles.css`: layout, responsive behavior, palette, and original CSS artwork.
- `script.js`: small classic-script filter enhancement.
- `ASSETS.md`: original-art and font provenance.
- `LICENSE`: MIT license for the original code, documentation, and artwork.

The footer includes **Designed by MRHTML**, linking to `https://mrhtml.com/` with `rel="nofollow"`. The MIT license does not require keeping a visible footer credit. Retain the copyright and permission notice in copies or substantial portions of the code.