AI-Coding my Portfolio

I rebuilt my portfolio from scratch using AI coding tools like Cursor, OpenCode, and Antigravity. The goal wasn’t just a new site. It was to learn how to go from UX design to shipped product faster, without relying on an engineer.

My role

End-to-end: UX, UI, front-end architecture, and AI-assisted engineering. I designed the system, wrote the code, and built the workflow.

Key outcomes

  • Fully custom site built without templates or CMS
  • Reusable UI + code patterns across all case studies
  • AI integrated into workflow, not used as a one-off tool
Stack
HTML, CSS, JavaScript, Next.js (partial), Three.js (experimental)
Tools
Cursor, Antigravity, OpenCode CLI, Vercel, GitHub, Supabase
Scope
Design, front-end architecture, AI workflow, and implementation

Problem

Design leaders who can execute make better decisions earlier because they understand what implementation actually costs. Most portfolios show the thinking but not the shipping.

I wanted this portfolio to prove I can build, not just design. The question was whether AI tools could get me there without an engineering team behind me. Even more, I wanted to design an AI experience unrestrained by deadlines or priorities at my day job.

Goals

  • Ship faster: Go from idea to working feature in hours
  • Own implementation: Reduce reliance on engineering handoffs
  • Build systems: Create reusable UI and code patterns
  • Use AI intentionally: Turn tools into a real workflow, not a novelty

Approach

I deliberately skipped Figma for this project. I only opened it to check a few colors. I wanted to see if I could control the full design through code alone. That forced me to think in CSS and layout primitives instead of pixel pushes, and to validate decisions by running the result.

  • Cursor: Primary development environment
  • OpenCode: Debugging, reasoning, problem-solving, and deployment
  • Antigravity: Creating .md files to improve agent reasoning and code output

The key realization: AI only produces high-quality output when the structure behind it is clear.

System architecture

Prompts

Clear, constrained instructions defining what to build and how

Foundation

Patterns

Reusable prompt structures for common UI and interaction problems

Structure

Components

Reusable elements like navigation, cards, layouts, and sections

Building blocks

Features

Full experiences including case studies and interactive elements

Shipped

The system connects structured prompts to real product features, not just generated code.

Interactive walkthrough

See how the system works

Watch a visitor question travel through the portfolio assistant, from input to structured, context-aware answer, at your own pace.

Visitor question

What has Ryan built related to AI?

User submits question from the chat widget

Netlify function

Orchestrator

Receives question, checks tools needed, routes to RAG

Vector store

Supabase pgvector

Searches 1,400+ embedded project chunks for context

Language model

Gemini 2.5 Flash

Generates answer from retrieved context + system prompt

Response 2.4s

Ryan has built an AI-powered portfolio assistant that uses RAG to answer visitor questions in real time. The system combines a Supabase vector store with Gemini 2.5 Flash to provide structured, context-aware responses about his product design work, systems thinking approach, and builder experience.

1.3k tokens generated
12 chunks retrieved
26ms vector search

Ready Type a question or use the default prompt, then run the walkthrough.

Building the system

Start in code, not design tools

Designing in Figma first slowed iteration. Working directly in HTML and CSS provided faster feedback loops and immediate validation.

Project file structure in the Cursor editor
Project structure built directly in Cursor, iterating without leaving the editor.
Chat widget in the previous version of the portfolio
The chat widget in the previous portfolio, before this rebuild.

Treat AI like a junior engineer

AI didn’t replace decision-making. It required direction, constraints, and review. The quality of output depended entirely on how clearly the problem was framed.

Build patterns early

Instead of writing one-off code for each page, I created reusable structures that could scale across the portfolio.

Implementation highlights

  • Custom case study system with consistent structure and hierarchy
  • Reusable layout patterns across pages
  • AI-powered chat widget integrated into the portfolio
  • SEO, AEO, accessibility, and metadata structure built directly into templates
Reusable interactive component used across case study pages
Reusable component pattern shared across case study pages.

These replaced static pages with interactive, structured, and code-driven experiences.

The following screenshots compare the previous version of this portfolio — hand-built, static HTML — against the AI-assisted rebuild described above.

Previous homepage design
Before — previous portfolio homepage
Previous case study layout
Before — previous case study page
Previous case study layout, alternate
Before — previous case study page, alternate layout

Database-driven RAG

The original knowledge base was a single JSON file loaded into every chat request. It worked for the first version, but every query sent the entire KB as context. This was just wasteful and unscalable.

I replaced it with a PostgreSQL database (Supabase) using pgvector for semantic search. Each piece of content is chunked, embedded via Gemini, and stored with a 768-dimension vector index.

Now queries find only the most relevant chunks instead of the full document. The same database also tracks chat sessions and resume downloads — turning the portfolio into a measurable surface.

Impact

The site ships as fully custom HTML, CSS, and JavaScript, with no templates, CMS, or static site generator. Every page shares layout patterns and design tokens. The chat widget answers questions about my work using semantic search against a PostgreSQL vector store.

The real output is a repeatable workflow: I can go from idea to working feature in a single session, without blocking on engineering. That changes how quickly I can test and ship product-level work.

Lessons & next

Lessons

The tools didn't just speed up execution. They exposed how much of good output depends on how clearly the problem is framed going in.

  • AI amplifies structure. Clear thinking produces better output
  • Speed needs discipline. Without constraints and direction, code degrades quickly
  • Iteration is the real advantage. Faster loops matter more than automation

Next

  • I want to make the chat more powerful across the board
  • I want to add more interactive elements to the site
  • Include even more elegant Three.js/WebGL effects