PRINCE.EXE
PORTFOLIO · AI / RAG · INTERACTION DESIGN
This website: a portfolio built as a personal operating system, with an AI assistant that answers only from verified portfolio data and refuses to guess.
Personal project — this website.
- ROLE
- Concept, UX, interaction design, frontend, backend and AI.
- STACK
- Next.js 16 (App Router) · React 19.2 · TypeScript · Tailwind CSS v4 · Zustand · Zod
- OUTCOME
- Every module is a real, server-rendered URL; the recruiter path is one click; the AI cannot answer from unverified claims.
- LINKS
- Source code: [LINK REQUIRED]
01BRIEFING
Portfolios usually either read like a resume or bury the resume under effects. A recruiter has 30 seconds, an engineer wants depth, a client wants outcomes.
02OBJECTIVE
One site that serves all three without forcing anyone through a gimmick — a fast recruiter mode, a technical mode with real architecture, and an exploratory layer for the curious.
03ROLE
Concept, UX, interaction design, frontend, backend and AI.
04TECHNOLOGY
- Next.js 16 (App Router)
- React 19.2
- TypeScript
- Tailwind CSS v4
- Zustand
- Zod
- Claude API
- Three.js
- React Three Fiber
- Vitest
- Playwright + axe
05ARCHITECTURE
CONTENT
- Typed /data modules
- Fact model: verified · unverified · required
RENDERING
- Next.js App Router
- Server components
- Static generation per module & mission
INTERACTION
- Client islands: boot, terminal, skill engine
- React ViewTransition
INTELLIGENCE
- Knowledge chunks
- BM25 retriever
- Refusal gate
- Claude · local fallback
QUALITY
- Vitest: data integrity, retrieval
- Playwright e2e + axe
- Components never hardcode facts. The pages, the terminal, the file system and Ask Prince all read from the same typed data.
06CHALLENGE
- Build an operating-system metaphor without hurting speed, SEO, accessibility or the 30-second recruiter read.
- Build an AI assistant that cannot invent facts about a real person.
07SOLUTION
- The boot sequence is an overlay on top of fully server-rendered content: it never delays content, is skippable, shortens for returning visitors and never runs on deep links.
- A retrieval gate runs before the model. If nothing in the verified knowledge base matches, the API returns a fixed refusal without calling the LLM. Unverified claims are excluded from the knowledge base by type, and a test enforces it.
08RESULT
- Lighthouse (mobile, local production build, Sept 2026): Performance 96–99, Accessibility 100, Best Practices 100, SEO 100 across the home, recruiter and mission pages — with the first-visit boot sequence included.
- 100 end-to-end checks on desktop and mobile: routes, real 404s, boot behaviour, keyboard, terminal, axe accessibility, console errors and the AI endpoint.
- [SCORES FROM THE DEPLOYED SITE REQUIRED]
09EXPERIENCE
You’re inside it. Try the terminal (press `) or Ask Prince. [DEMO / REPO LINK REQUIRED]
RELATED LAB EXPERIMENTS
10REFLECTION
The portfolio is itself the most direct evidence of how I work: the metaphor is the fun part, but the typed content model and the refusal gate are the parts I’m proudest of.VERIFY — Unverified — only in: Drafted copy — confirm voice
TECHNICAL LAYERWhy this stack · trade-offs · performance · implementation
WHY THIS STACK
- Server-rendered routes put every word in the HTML for crawlers and screen readers; the OS layer is progressive enhancement.
- React’s built-in ViewTransition handles route transitions, so there is no animation library in the bundle.
TRADE-OFFS
- Lexical (BM25) retrieval instead of embeddings: the corpus is small and curated, so keyword retrieval is predictable, free and unit-testable. The Retriever interface lets an embedding store drop in later.
- In-memory rate limiting is per server instance — fine for a portfolio, with a shared-store upgrade path documented.
PERFORMANCE
- Three.js loads only after the page is idle, and only on capable devices; mobile and reduced-motion visitors get a static SVG.
- The Ask Prince panel is code-split and loaded on first open.
IMPLEMENTATION
- Evidence links are typed references (mission, career, experiment, scenario) validated by a test, so a broken internal link fails the build pipeline.