Agent Native Portfolio

• 

  A portfolio that screens, tailors, and pitches itself to any AI agent — live, on the page, in front of you.

Inspiration

Recruiters spend ~30 seconds on a portfolio, and increasingly they browse with agents that have to scrape and guess. Meanwhile every developer sends the same static site to every visitor. WebMCP lets both sides collaborate instead: the agent brings the job, the site brings verified facts about the candidate, and the human watches the two work together in real time.

What it does

Built on top of my existing personal portfolio site (live since early 2026). Everything WebMCP-related — all 11 tools, the AgentBridge island, the scoring engine, the two Netlify Functions, and the /agent-traffic, /agents, /profile.json, and /llms.txt surfaces — was added entirely during the submission period (Sept 1–2, 2026). Nothing about the pre-existing site's design or unrelated content is part of this submission.

This portfolio exposes 11 typed WebMCP tools that a visiting agent can call while its human watches the page respond:

• get_profile / search_projects / get_experience — structured facts: skills with honest self-assessed levels and years, projects with measured outcomes, not tech-tag lists
• get_evidence — verifies a specific claim ("has HIPAA experience") against the record, or says plainly that no evidence exists
• match_role — deterministically scores a pasted job description against the candidate's real skills; a visual fit report renders on the page live, gaps included
• tailor_view / reset_view — the live page reshapes itself for a role: a prominent, highlighted banner appears under the name, projects reorder by relevance, unrelated work dims
• generate_resume — a role-targeted résumé assembled from the same structured data, downloadable as a PDF at /resume
• compose_inquiry — drafts a message into the contact form with an "AI-composed, review before sending" banner; the human always reviews and clicks send — it never submits on its own
• sign_guestbook / get_guestbook — agents leave notes under their own identity, visible on a public dashboard

Every tool call is logged (anonymously) to a public /agent-traffic dashboard — live agent analytics for a personal site, showing which tools get used and what agents have signed the guestbook.

Why WebMCP fits this use case

A portfolio's entire job is to be legible to a stranger fast. Static HTML forces every visitor — human or agent — through the same generic narrative. WebMCP lets the site expose structured, callable truth instead: an agent doesn't have to scrape and infer whether a candidate fits a role, it can ask, and get a deterministic, evidence-backed answer.

How it improves the experience

For the visitor's agent: verifiable answers instead of scraped guesses. For the human on the other end: they watch their agent's work land live — a fit report appears, the page visibly reshapes around their role, a résumé is ready — instead of reading a wall of text summarizing what happened elsewhere.

What people and agents can accomplish together that wasn't possible before

A recruiter pastes a job description into their agent. Together, in one session: the agent gets a scored, honest fit assessment (not a sales pitch — real gaps are called out); the page itself re-prioritizes around that role in front of the recruiter; a tailored résumé is ready to download; and if there's a fit, the agent drafts an outreach message that the recruiter reviews and sends themselves. None of this — live personalization driven by an external agent, with the human co-present and in control of every outward action — was possible with a static site.

How we built it

Astro 5 (static output) + React 19 islands + Tailwind v4, on Netlify. A single persistent island (AgentBridge, mounted with transition:persist) registers all 11 tools once and survives Astro View Transitions, so tool state (a tailored view, a fit report) persists across page navigation. Matching is deterministic — no LLM call, no hallucination risk — reading a structured skills/projects/experience dataset (bio.json + content collections). Two Netlify Functions with Netlify Blobs power the guestbook and the public analytics dashboard, rate-limited and PII-free. Non-WebMCP agents get the same data via /profile.json and /llms.txt.

Challenges we ran into

• Netlify Blobs' list() reads are only eventually consistent — new guestbook entries took ~40s to appear. Fixed by switching to a maintained index at a fixed key (strongly-consistent get/set), the same pattern already used for the analytics counters.
• Early tailor_view changes were functionally correct but visually easy to miss (a small badge and a secondary paragraph changed, while the name headline — the most visually dominant element — never did). Fixed by adding a prominent, pulse-highlighted banner directly under the name.
• The résumé PDF export (browser print-to-PDF, no PDF library) silently rendered several headings invisible when the browser was in dark mode. Fixed by forcing solid ink on every element inside the résumé under @media print.
• A legacy ng build override left in Netlify's dashboard settings (from before this was ever an Astro site) silently broke every PR's deploy preview for months — found and fixed as part of this work.
• Deploy previews and production turned out to share the same Netlify Blobs store rather than being isolated per deploy context — test writes during development leaked into the live public guestbook. Built a secret-protected admin endpoint to clean that up, which now also serves as basic spam moderation going forward.

Accomplishments that we're proud of

A fully working, evidence-based fit report an agent can trust, live page personalization that's actually visible without scrolling, and an agent-facing guestbook + public analytics dashboard — nobody else appears to have built "agent SEO" analytics for a personal site.

What we learned

A correct tool isn't the same as a convincing one — tailor_view tool worked perfectly but was almost invisible until we made the change land somewhere a human would actually notice. Trust boundaries need to be designed, not just enforced in code: compose_inquiry tool drafts and discloses, but a human always has to click send. And "agent-native" means building to the open navigator.modelContext standard, not to any one agent's quirks — testing across ChatGPT, Chrome, and a separate coding agent made that concrete fast.

What's next for Agent Native Portfolio

Extracting the reusable core (context detection, registration manager, generic read tools, deterministic scorer) into a standalone open-source Astro integration package, so any developer can make their own portfolio agent-native by defining one structured data file.

Built With

• astro
• claude
• codex
• netlify-blobs
• netlify-functions
• posthog
• react
• tailwindcss
• typescript
• webmcp