About this site

How I built this site.

This portfolio is also a place to experiment with interactive graphics and AI connections. Here's how the main features work and the technology behind them.

The inspiration

The interactive portrait and Human/Agent idea were inspired by Ruben Marcus's portfolio (opens in a new tab). I'm not affiliated with him, and the work on this site is my own.

This site's stack

Astro builds the pages, and my writing lives in an Astro content collection. The portrait is a custom WebGL interaction built from my portrait video. A Streamable HTTP MCP server at https://patrickgibbs.dev/api/mcp gives AI apps the same information these pages show, plus my open meeting times; /mcp/ is the step-by-step connection guide for people.

The Tell me what you need box on the homepage sends what you type to an AI model, which picks the closest match from the published work on this site. When the model isn't available, the box matches your words against that work itself. The rules that keep its answer from flickering as you type are adapted from Shapeshift (opens in a new tab), an open-source project (MIT license).

I built the site with AI coding tools and set the visual direction myself: I used each page, noted what felt wrong, and changed it.

People and AI apps

The pages you're reading and my structured profile share the same project information. An AI app can read it and check when I'm free for a call. To book one, pick a time on my booking page.

To see which files and data build each part of a page, press B or choose Explore how this page works in the footer.

Read the portrait story

Say hello.

Tell me what you'd like to build or improve.

Quick navigation

Find a page.

Use the arrow keys to choose a result, Enter to open it, or Escape to close.