A modern, pixel-art portfolio website that both humans and AI agents can understand. It looks great to a visitor — and it also exposes clean, structured tools that an AI agent can call directly using the emerging WebMCP standard, instead of scraping the page and guessing.

Built with plain HTML, CSS, and JavaScript. No frameworks, no build step, no backend. Open index.html and it just works.

Made for the Codédex monthly project challenge — so it's beginner-friendly, fun, and styled to feel right at home in the Codédex world. 🟡

This repo has one lesson and one reference — not two tutorials:

• 🎓 Learning how it's built? → Read the step-by-step tutorial (also published as a live web page, tutorial.html). That's the teaching doc — start there.
• 📋 Just want the overview, setup, and a quick reference? → You're reading it. This README does not teach the build; it points you to the tutorial and lists the facts.

Add a screenshot here once you've opened the site. Save it as screenshot.png in this folder and it'll show below:

![WebMCP-Ready Portfolio screenshot](screenshot.png)

• Dual-audience design — a polished site for humans, plus callable tools for AI agents.
• 7 structured agent tools (get_profile, list_skills, list_projects, filter_projects_by_stack, get_featured_project, get_contact_info, explain_why_agent_ready).
• Real WebMCP integration — loads the @mcp-b/global polyfill so navigator.modelContext actually exists, then registers all 7 tools on it and verifies them via the API. Falls back gracefully offline / on file://.
• Live "AI Agent Tools" demo panel — click a button and see the exact JSON an agent would receive.
• Project filtering — filter by stack using the same logic the agent tool uses.
• One source of truth — the visible cards and the agent tools read from the same data, so they never disagree.
• Copy-email button, dark/light theme toggle (saved to localStorage), and Schema.org JSON-LD for extra machine-readability.
• Responsive and keyboard-friendly, with prefers-reduced-motion support.

AI agents are starting to use the web, not just read it. Instead of making them scrape your HTML and guess, a WebMCP-ready site hands them a clean menu of named tools — same site, two front doors: a visual one for people, a structured one for agents.

→ The full "why" (and the deep "how") lives in the tutorial (see "The hook" and "WebMCP, in depth").

• MCP (Model Context Protocol) — the open standard for giving AI models tools & data; tools usually live on a server.
• WebMCP — the browser standard: a page registers tools on navigator.modelContext, so tools live in client-side JS (a W3C Web Machine Learning Community Group proposal).
• MCP-B — "MCP for the Browser": the runtime, transports, and extension that implement WebMCP today and bridge page tools to real MCP clients. This project uses its @mcp-b/global polyfill.

One-liner: WebMCP + MCP = MCP-B. The full deep-dive — complete API surface, tool lifecycle, security model, how agents connect end-to-end, common pitfalls, and a cheat sheet — is in tutorial.md (sections 15–16) and on the live tutorial page.

No npm install. No bundler. No backend.

webmcp-ready-portfolio/
├── index.html      # THE SITE — page structure + sections
├── style.css       # THE SITE — Codédex pixel theme (dark + light)
├── app.js          # THE SITE — data, UI, 7 agent tools + WebMCP adapter
├── tutorial.md     # 🎓 THE LESSON — full step-by-step tutorial (source)
├── tutorial.html   # 🎓 THE LESSON — same tutorial as a styled web page
├── README.md       # 📋 Overview & quick reference (this file)
└── vercel.json     # Static-host config (clean URLs)

The three roles, plainly: the index/style/app files are the website; tutorial.md / tutorial.html teach you how to build it; this README is the map that sends you to the right place.

Option A — just open it. Double-click index.html. The site and the demo panel work immediately.

Option B — run a local server (recommended). WebMCP requires a secure context (HTTPS or localhost), so a local server is the best way to test real tool registration:

# Python 3
python -m http.server 8000
# then open http://localhost:8000

Either way, open your browser's DevTools console and try:

agentTools.get_featured_project()
agentTools.filter_projects_by_stack({ stack: "Python" })

All tools are read-only and return clean, JSON-serializable data.

They're exposed three ways: registered via WebMCP for agents, available on window.agentTools for scripts/console, and wired to the on-page demo panel for humans.

If you point a WebMCP-capable agent at this page (or just imagine one), these are the kinds of requests it can now answer by calling tools instead of scraping:

• "Show me Himanshu's AI projects."
• "Which project is best for a recruiter to look at first?"
• "List projects that use Python."
• "Summarize this portfolio for a hiring manager."
• "Find the strongest browser-based AI project."

The tools register on navigator.modelContext for real (via the polyfill). To actually call them from an agent:

1. WebMCP / MCP-B browser extension — install it, open the (hosted, HTTPS) page, and it bridges your registered tools to an MCP client like Claude Desktop. It auto-detects pages that loaded @mcp-b/global.
2. Chrome native — enable the webmcp flag in a recent Chrome/Canary; the built-in agent sees your tools directly.

Verify it yourself: open the hosted page, open DevTools, and run:

await navigator.modelContextTesting.listTools(); // → the 7 registered tools

You'll also see [WebMCP] Live tools verified via the API: … logged automatically on load.

This project intentionally ships read-only tools only. Each one is tagged with annotations: { readOnlyHint: true } so an agent knows it's always safe to call. There are no tools that send messages, spend money, or change data. If you add write-style tools later, gate them behind explicit user confirmation and keep private data out of tool responses.

Everything you'd want to change lives near the top of app.js:

• Your details → edit the PROFILE and CONTACT objects.
• Your skills → edit the SKILLS object (add/rename groups freely).
• Your projects → add an object to the PROJECTS array:

  {
    id: "my-project",
    title: "My Project",
    description: "What it does and why it's cool.",
    highlight: "One-line standout fact",
    stack: ["JavaScript", "CSS"],
    tags: ["Web"],
    links: { demo: "https://...", github: "https://..." },
    featured: false
  }

• Filter chips → edit the FILTERS array.
• Colors & fonts → tweak the CSS custom properties at the top of style.css (--gold, --periwinkle, --bg, etc.). A light theme is already defined under [data-theme="light"].

Update the data once and the cards, the filters, and the agent tools all update together.

1. Push this folder to a GitHub repo.
2. Repo Settings → Pages.
3. Source: deploy from your branch (e.g. main), root folder.
4. Your site goes live at https://<username>.github.io/<repo>/ — over HTTPS, so WebMCP can register in supporting browsers.

1. Import the repo at vercel.com.
2. Framework preset: Other (it's a static site — no build command needed).
3. Deploy. Done.

• WebMCP spec (W3C Web Machine Learning Community Group): https://webmachinelearning.github.io/webmcp/
• WebMCP on Chrome for Developers: https://developer.chrome.com/docs/ai/webmcp

Note: WebMCP is new and evolving. Native support is rolling out (Chrome Canary behind a webmcp flag), so this site loads the @mcp-b/global polyfill to make navigator.modelContext real today. Offline or on file://, the page falls back to the on-page demo — which always works.

Built by Himanshu Kumar · GitHub · LinkedIn