About this block

API Project Card presents one backend project as a two-column split: the left column holds the project name (Relay API), a tagline, a prose description, the stack chips, and two links (View project, API docs). The right column is a static mono panel with a title bar, an endpoint line showing the method badge (GET) and the path (/v1/proxy/{upstream}), and a formatted HTTP response block including headers and a JSON body. The distinctive detail is the endpoint panel: it gives a backend project the same visual proof point that a screenshot gives a UI project.

The project is a single typed const with an endpoint object holding a method, a path, and a response lines array. The panel uses theme tokens throughout; no green or status-color literals appear in the response lines.

When to use

Reach for this block when a developer portfolio needs to show server-side work without a visual interface to screenshot. The installer replaces the project const with their own project name, description, stack, endpoint path, and response lines, and wires the two links to real URLs.

A natural flow around it on a Portfolio Pro page:

Before

• Code snippet
• Project repos

After

• Tech stack detail
• Contact section

What you can display

One strong use is the HTTP proxy or middleware project card. Other API layouts:

• GraphQL project. Swap the endpoint line for a query panel and a response shape.
• CLI tool card. Replace the endpoint panel with a terminal showing a command and its stdout output.
• Webhook service. Show an incoming POST body on the left and the processed event payload on the right.

Tip: the response panel is the proof; pick the endpoint that shows the most interesting thing the API does, not the simplest one.