# Signal

An original MRHTML portfolio for a designer who codes. Dark ink, chartreuse accents, oversized typography and original CSS product concepts create a graphic, single-page introduction to your work.

## Open it

Unzip the complete folder and open `index.html` in a modern browser. Keep `styles.css` and `script.js` next to it. No installation, build process, account, web font, image service or network dependency is needed. To publish, upload the folder contents to your static host.

All art is HTML and CSS. The MRHTML creator link is only visited when clicked. There are no analytics, cookies or tracking scripts.

## Make it yours

1. Edit the page title, description, introduction and profile in `index.html`. Alex Morgan, Forma, Fieldnote and Orbital are fictional sample identities and concepts, not real clients, endorsements or verified results. Replace them with your own accurate work and story.
2. Change the palette using the `:root` custom properties at the start of `styles.css`. The template uses local Arial/Helvetica and Courier New fonts; no font download is required.
3. Replace or adapt the `.project-visual` elements. Their original CSS illustrations can remain as concept art or be swapped for your own images. If you add an image, include useful alt text, explicit dimensions and a local optimized file.
4. Edit each `.project` and its inline native `<details>` description. The current filters use `data-category="product"` and `data-category="web"`. To change categories, keep the corresponding button's `data-filter` value and project values consistent. The “all” filter always shows every project. No JavaScript build step is necessary.
5. Replace the visibly marked contact setup note with your own verified email, booking link or contact information. If you add a `mailto:` link, it opens a local mail app; it is not a form submission backend.
6. **Before publishing your customized real site, remove `<meta name="robots" content="noindex,follow" />`.** It prevents indexing of the uncustomized MRHTML demo. Set an accurate title and description, and add a canonical URL only once your actual public URL is known. Search visibility is not guaranteed.

## What works and what is illustrative

The navigation scrolls to real sections. The project filters show matching articles, report the result count and reflect their current state with `aria-pressed`. Project notes expand with native keyboard-operable disclosures. Without JavaScript, all projects remain visible and the inactive filter controls stay hidden.

The embedded dashboard, mobile cards and Orbital poster are original static illustrations. They are not working apps. Any illustrated chart or interface value is fictional, not a real metric. There is no form, contact submission, account login, backend, paid service or fake success message. Add and test a real contact destination before publishing.

## Responsive and keyboard behavior

A skip link, semantic headings, visible focus rings, keyboard-operable controls and reduced-motion styles are included. Navigation remains directly visible on small screens. The layout adapts to 320px widths.

After customizing, test the filters, keyboard navigation, browser zoom and small screens. Check new colors for contrast and provide appropriate text alternatives for replacement visuals. This starting point does not certify the accessibility of a modified site.

## Files and licensing

- `index.html`: content, projects and original art markup.
- `styles.css`: palette, layouts, responsive rules and CSS artwork.
- `script.js`: lightweight project filtering.
- `ASSETS.md`: the provenance of the original code artwork and local font choices.
- `LICENSE`: MIT license for the original MRHTML code and documentation.

The footer's **Designed by MRHTML** link uses `https://mrhtml.com/` and `rel="nofollow"` as creator credit. The MIT license does not require a followed SEO link or a visible footer link. Retain the MIT copyright and permission notice in copies or substantial portions of the code.