Api Project Card
A two-column backend project card pairing a project description and stack chips with a static mono panel showing a sample endpoint path and a formatted HTTP response.
A two-column backend project card pairing a project description and stack chips with a static mono panel showing a sample endpoint path and a formatted HTTP response.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
One strong use is the HTTP proxy or middleware project card. Other API layouts:
Tip: the response panel is the proof; pick the endpoint that shows the most interesting thing the API does, not the simplest one.