Project Overview

Salem Alpha is Rodrigo's own portfolio — redesigned from the ground up as an AI-native product rather than a static showcase. The portfolio shell features Salem, a purpose-built AI assistant that acts as a recruiter filter, a project guide, and a live demonstration of what Rodrigo builds.

Instead of a grid of case studies that a visitor scrolls past, Salem Alpha is a conversational interface where the portfolio is interrogated. Recruiters ask questions and get direct answers. Salem knows every project, Rodrigo's positioning, his rate expectations, and when to close the conversation with a booking link.

The product serves two goals simultaneously: as a portfolio, it presents Rodrigo's work. As a proof of concept, it demonstrates that he can design and ship a full AI-native product end-to-end — from system prompt architecture to design system to production deployment.

The Problem

Traditional portfolios fail at the moment they matter most — the recruiter's first 30 seconds.

• Passive by default: A static site can't adapt to the reader. A senior hiring manager and a junior recruiter see the exact same page, regardless of what they actually need to know.
• Context gets lost: The rationale behind design decisions — the constraints, the trade-offs, the business outcomes — lives in PDFs that rarely get read.
• Zero qualification: Any visitor gets full access. There's no mechanism to filter budget, scope fit, or role alignment before Rodrigo invests time in a call.
• Undifferentiated format: A Notion page or a Framer template looks identical regardless of the designer behind it.

The core insight was simple: a portfolio that can answer questions is more valuable than one that only shows work.

Product Strategy & Design Decisions

1. Conversation as Navigation

The primary interface is not a project grid — it's a chat thread. Salem uses frontend tools (show_projects, evaluate_match, show_cv, show_contact) to render interactive components directly inside the conversation as the context demands. The AI decides when to call a tool; the client renders the corresponding React component.

This means a recruiter can ask "what have you built in fintech?" and receive a visual project grid inline. They can ask "does Rodrigo fit this role?" and upload a job description to get a structured evaluation card. Navigation is a side effect of a conversation, not a prerequisite to it.

2. Salem as a Vetted Persona

Salem isn't a generic chatbot wrapper around a PDF. The AI has explicit business rules baked into its system prompt: it steers conversations toward a 15-minute "Fit Assessment" call, redirects low-budget inquiries, and responds in the user's detected language (Spanish or English). Every interaction is designed to qualify the lead, not just answer the question.

The knowledge base — every project entry, the CV, the FAQ, the positioning docs — is injected statically into Salem's system prompt at request time. No vector database, no RAG pipeline. The deliberate simplicity keeps latency low and reasoning coherent.

3. Chat Pills as Onboarding

The empty chat state presents three chat pills (Match, Contact, CV). Each pill fires a predefined prompt that triggers the matching frontend tool. This removes the blank-canvas problem: a new visitor immediately sees the three most valuable actions available without needing to know what to ask.

4. Mobile-First Architecture

On desktop, Salem uses a sidebar + thread split — the sidebar holds navigation links and a thread history list. On mobile, the interface switches to a full-screen chat with a bottom navigation bar and a secondary drawer for links. The chat state persists across route navigation via an AssistantProvider mounted at the root layout, so switching to /projects and back doesn't reset the conversation.

Design System

Salem's visual identity is built on a constrained, deliberate set of rules to ensure the UI recedes and the content speaks.

Color: A single action color — oklch(0.522 0.163 255.45) Action Blue — handles every interactive element. No second accent, no gradients. Hierarchy is resolved through spacing, typography, and contrast alone.

Typography: SF Pro on macOS/iOS, falling back to Inter. A strict weight ladder of 300, 400, and 600 — never 500 or 700. Negative letter-spacing at display sizes for tightness; near-zero tracking at small sizes.

Radius: Full-bleed tiles use rounded-none. Primary CTAs and chips use rounded-full. Cards and accessories use rounded-2xl. Every radius decision maps to a semantic role.

Elevation: A single product shadow (shadow-[0_5px_30px_rgba(0,0,0,0.22)]) applied exclusively to product imagery. No shadows on buttons, cards, or navigation. The flatness creates visual consistency that lets the AI tool cards stand out naturally through their structured content.

The entire system is implemented in Tailwind v4 with OKLCH design tokens via CSS custom properties — no hardcoded values anywhere in the codebase.

Technical Architecture

Salem Alpha was designed as a learning exercise in full-stack AI product development, and the architecture reflects deliberate choices over defaults.

AI Layer: Google Vertex AI (Gemini) via a cached provider. The system prompt includes Salem's persona rules, guardrails, tool behavior instructions, and the full knowledge base — every .md and .mdx file in lib/docs/ — injected at request time. Frontmatter and JSX tags are stripped before injection; image paths are removed and image URLs are replaced with alt text so Salem never leaks asset paths.

Frontend Tools: Tool definitions live on the client (@assistant-ui/react) and are forwarded to the model by the API route. When Salem calls a tool, the corresponding React component renders in-thread. This pattern keeps the server stateless and the UI interactive without round-trips.

Streaming: Vercel AI SDK v6 handles message conversion (convertToModelMessages) and response streaming (streamText → toUIMessageStreamResponse()). The runtime is Node.js — required for PDF and DOCX parsing via pdf-parse and mammoth, which allow recruiters to upload job descriptions directly into the chat.

i18n: Cookie-based locale detection with no URL prefixes. Middleware reads Accept-Language and sets a locale cookie; Salem mirrors the user's language in every response via a locale-aware block in the system prompt.

Outcomes

Salem Alpha reframes what a designer's portfolio can be. Rather than a static record of past work, it's a live product that demonstrates the exact capabilities it describes.

• Differentiated positioning: The portfolio itself answers the question "what does Rodrigo build?" better than any case study paragraph could.
• Passive qualification: Salem handles recruiter filtering, budget conversations, and CTA routing without Rodrigo's involvement.
• Full-stack credibility: System prompt architecture, streaming API, design system, production deployment — every layer built by the same person whose design work it showcases.
• Reusable foundation: The app-shell pattern (AI persona + frontend tools + i18n + knowledge base injection) is directly applicable as a client product offering.