# Kernel Folio

An original MRHTML software developer portfolio with a technical notebook layout. A charcoal sidebar, amber typography, a local-first architecture map, repository decisions, and readable code samples focus on the reasoning behind software.

## Open and publish

Keep all six files together and open `index.html` in a modern browser. No installation, build, dependency, account, external font, CDN, or internet connection is required. Upload the folder contents to your static host when ready.

The public sample includes `<meta name="robots" content="noindex,follow" />`. Remove it from your customized real site before publishing. Update the title and description and add a canonical URL only when your public URL is known. Removing noindex does not guarantee indexing.

## Customize the portfolio

1. Replace Jules Lin, the introduction, the profile initials, and the sidebar notes. This is a fictional person, not a client or endorsement.
2. Replace paperqueue, pathspec, patchwork, and their decisions with real repository work. Describe your actual role and boundaries. Add verified repository links where useful. No fake GitHub URLs, star counts, downloads, awards, or usage results are included.
3. Edit the architecture directly in the inline SVG. Its `<title>` and `<desc>` provide a complete text explanation. Update both, the visible labels, and the narrow-screen summary together. The diagram is original art, not a running system. Preserve its viewBox for responsive scaling.
4. Edit both code examples and their explanatory notes together. Escape HTML characters in code markup (`&lt;`, `&amp;`) and retain readable text. The highlighted `<span>` elements are only visual; copying reads the code element's exact text. The samples are illustrative JavaScript and are never evaluated by this page.
5. Adjust `:root` variables in `styles.css` for colors. Local Arial/Helvetica and monospace fallbacks require no font downloads. Verify text contrast after changes.
6. Replace the fictional change log with accurate notes or your own writing. The sample entries are neither package versions nor dated release claims.
7. Replace the contact setup paragraph with a verified destination. This template has no email recipient, submission form, backend, or repository connection.

## Code controls

The code selector progressively becomes an accessible tab list. Left and Right arrows select adjacent tabs, Home selects the first, End selects the last, and Tab moves out of the list. Each tab identifies its associated panel. Both examples remain visible if JavaScript is unavailable, with static headings and no inactive controls.

Copy uses the Clipboard API when available. If it fails or is absent, a temporary local textarea and `document.execCommand('copy')` are attempted. Success is only reported after a resolved clipboard operation or a true fallback result. If both are denied, the status tells the reader to select the displayed text and copy manually. The focused button is restored after fallback. Browser permission, file URL rules, and opaque iframe sandboxes can limit copying. No clipboard read occurs.

The code is copied as text, never run. `parseLink` recognizes an absolute HTTP(S) URL, but does not verify safety, availability, or ownership and never fetches it. `saveQueue` illustrates an adapter boundary; you must supply a real adapter before using it. Neither example claims to be a production library or complete application.

## What is included and what is not

Repository notes expand using native `<details>` and work without JavaScript. All navigation has local section targets. The desktop sidebar becomes a compact visible navigation bar on narrow screens. The architecture, repository glyphs, and initials are original SVG/CSS/typographic artwork.

There is no actual package, local database, storage adapter, remote repository service, synchronization, CI automation, contact submission, telemetry, analytics, cookies, or persistence. External network requests are unnecessary. The MRHTML creator link is visited only when clicked.

## Check after editing

Test 320px, 390px, 768px, and desktop viewports, 200% browser zoom, keyboard navigation, disclosure toggling, code tab arrow keys, manual selection, successful copying, and copy denial. The skip link and focus rings must remain visible. Reduced-motion preferences disable smooth scrolling. The code block is deliberately scrollable when a line exceeds the viewport; the page itself should not scroll horizontally.

The classic script avoids storage and same-origin APIs. It can run in an opaque `sandbox="allow-scripts"` preview without forms. Clipboard permissions can still restrict copying; the truthful failure message is part of the behavior. Recheck contrast and screen-reader announcements after customization. This template is not an accessibility certification.

## Files and licensing

- `index.html`: content, inline SVG architecture, and static code examples.
- `styles.css`: responsive layouts, palette, artwork, and code colors.
- `script.js`: accessible code tabs and guarded copying.
- `ASSETS.md`: original visual and font provenance.
- `LICENSE`: MIT terms for the original code, documentation, and art.

The **Designed by MRHTML** footer link points to `https://mrhtml.com/` and uses `rel="nofollow"`. The MIT license does not require that visible link. Keep the copyright and permission notice in copies or substantial portions of the code.