AI intake website

Portfolio AI

An AI-native studio site that turns passive browsing into a live project briefing.

0:00 / 0:00

The preview shows the product loop: portfolio surface, project card, and streamed AI response routing visitors into proof.

role
Design Engineer — designed & built solo
proof
public repo / live site / demo video
result
Live production site

decision

AI-native portfolio that answers questions, qualifies intent, and opens relevant proof.

proof

Designed in Figma → shipped in Next.js + React → exposed AI-readable docs and design-system routes.

result

Live production site · Public Next.js repository

Recruiter proof

A live portfolio, source repo, and AI-readable system

Live

Production site

Public repo

Source-code proof

3

AI-readable routes

The problem

Static portfolios do not qualify intent

Most portfolios make visitors skim and guess. Portfolio AI answers questions, identifies intent, and opens the most relevant project evidence.

Product proof

Conversation -> intent -> proof

Intake

Conversation qualifies the visitor's intent

Visitors can ask for an AI website, UX audit, product prototype, or case study.

Routing

Project evidence opens deterministically

The chat can route people to the right case study while navigation stays predictable.

Interface proof

AI response and project evidence share the same surface

The chat response sits beside resume and contact actions instead of becoming a separate gimmick
The chat response sits beside resume and contact actions instead of becoming a separate gimmick
The AI system is also a normal explorable case-study entry
The AI system is also a normal explorable case-study entry

What it demonstrates

Live AI -> evidence routing -> machine-readable system

01

Live AI interface

Streaming responses, scoped prompts, and guarded routing are part of the live portfolio.

02

Evidence-first navigation

The interface points people to concrete work instead of making the AI the whole product.

03

Machine-readable system

Portfolio content, resume data, LLM instructions, tokens, and interaction rules are exposed as public routes.

Under the hood

System architecture

Client → Next.js API route → Gemini, streamed back over SSE
Client → Next.js API route → Gemini, streamed back over SSE

System proof

AI-readable interface primitives, not just a page

Design tokens

Roles instead of decoration

Color, type, spacing, radius, and motion roles are documented so new UI can be generated from the same quiet system.

Interaction contract

Rules an LLM can follow

Component primitives, accessibility rules, reduced-motion behavior, and AI usage limits are exposed as public docs.

Turning a portfolio into an agency-style lead flow

Delivered a streaming AI interface that shows design taste, frontend craft, and applied AI in one live product.

Reframed the portfolio as a working studio demo: visitors can explore the work, ask about capabilities, and start a project brief from the same surface.