broberbot: An AI Portfolio Navigator
Designing, coding, and training an OpenAI Assistant for automated, intelligent portfolio navigation.
Tools
Open AI, ElevenLabs, React, Next.js, Tailwind, Shadcn, Vercel
Scope
Research, design, and impementation
Timeline
May 2025 - August 2025
tl;dr
broberbot is a chatbot that provides guidance and "instant gratification" to busy hiring managers and recruiters while creating a memorable, branded experience to represent me and my work.
Traditional design portfolios are 'one-size-fits-all' despite needing to cater to multiple distinct audiences: hiring managers, recruiters, fellow designers, new coworkers and more. Instead of making visitors dig through many pages to find relevant information, I trained broberbot to have 'actual conversations' about my work instead.
The AI adapts its responses based on who's asking—recruiters get quick skill confirmations, hiring managers get detailed process walkthroughs, and fellow designers get insights and honest challenges I faced. By leveraging OpenAI's Assistant API, visitors can just ask questions—or use the prompts—to get personalized, hyper-relevant answers with links to the right projects.
brober, evolved.
broberbot, and similar AI portfolio assistants, are the future of portfolio design. Deploying broberbot allowed me to completely overhaul my approach to brober.com, building the site around an AI core.
Visual Personality Expression
- Custom avatar design that reflects my design style and personality.
- Contextual responses based on conversation topics include case studies, personal sketches and more.
- Design system integration.
- Signature design elements: personal brand colors, fonts, and interaction patterns throughout the AI experience.
Successful Technical Integration
- Accurate intent recognition—the system reliably identifies whether users are recruiters, hiring managers, or fellow designers.
- Function calling routes users to relevant projects and content.
- Responsive API integration.
- Fully mobile-optimized experience.
- Robust error handling with graceful fallbacks.
Adaptive Intelligence
- Context-awareness adjusts communication style and depth based on detected user type and conversation history.
- Seamless transitions between different topics without losing conversational thread.
- Smart follow-up suggestions.
- Personalized content discovery.
Traditional and static -> dynamic and engaged.
After more than a year of in-depth use of LLMs in my everyday design practice, I realized that the traditional design portfolio website felt cold and impersonal compared to the more engaged conversations that I was having with Claude, Gemini, and others. So I sought to use my own site as an experiment: can I transform brober.com into a living object trained on my own work and voice?
Different users want to see different things - fast
By analyzing previous site metrics and SEO, I was able to identify which audiences were visiting my site, from where, and what content they were likely to engage with.
Recruiters:
Core need: Translate visual work into role requirements.
- Spend 5-7 minutes per portfolio.
- Need for quick skill verification and experience level confirmation.
- Pressure to create defensible shortlists for hiring teams.
Hiring Design Managers
Core need: balance portfolio review with other time-consuming management responsibilities.
- Want to understand design process and decision-making rationale.
- Assess team fit and collaboration style from static work samples
- Need to evaluate both craft skills and strategic thinking.
Other Designers
Core need:See how others approach design problems.
- Want to learn new methods and approaches from peers.
- Seek authentic connection and potential collaboration opportunities.
- Younger designers may have limited insight into career progression and growth paths.
Multi-Modal User Journey
The user journey offers three distinct interaction pathways from the homepage welcome message.
Dual access: two key entry points for maximum engagement.
Two primary entry points were chosen based on existing user behavior: a prominent call-to-action on the main landing page to immediately engage first-time visitors, and a persistent 'Chat with me' button in the site navigation that allows users to access conversational help at any point during their portfolio exploration.
Entry point from home page
Entry point from main navigation
From Conversation Architecture to Technical Implementation
The design process combined conversational UX principles with progressive AI training, moving from intent recognition frameworks and personality definition, through three phases of machine learning enhancement, to full integration. This systematic approach ensured the AI agent could intelligently adapt its responses to different user types while maintaining seamless discussion handoffs between light conversation and more in-depth work-related topics.
Conversational Design Framework
- Intent recognition system
- Response architecture
- Personality & tone definition
Conversational Design Framework
- Intent recognition system
- Response architecture
- Personality & tone definition
Technical Implementation
- React & Typescript for frontend architecture
- OpenAI and ElevenLabsintegration and API key management
- Smart routing & real-time content integration
- Vercel for deployment
Technical Implementation
- React & Typescript for frontend architecture
- OpenAI and ElevenLabsintegration and API key management
- Smart routing & real-time content integration
- Vercel for deployment
Testing
- A/B testing with real portfolio visitors
- Technical performance validation
- Edge case exploration
- Analytics setup
Testing
- A/B testing with real portfolio visitors
- Technical performance validation
- Edge case exploration
- Analytics setup
Iteration
- Quality assurance testing and bug fixes
- Mobile-first redesign
- Quick-answer buttons based on common query patterns in logs
Iteration
- Quality assurance testing and bug fixes
- Mobile-first redesign
- Quick-answer buttons based on common query patterns in logs
Tech Stack
Structured content for intelligent AI responses
Portfolio content needed to be systematically organized into categories with detailed subcategories to enable the AI agent to quickly locate, parse and reference.
A Progressive, Three-Phase Training Approach.
The AI training progressively built intelligence from basic portfolio content knowledge to sophisticated navigation capabilities. Starting with foundational Q&A training, the system evolved to make contextual connections between projects and skills, ultimately achieving smart routing that seamlessly guides users from conversation to relevant portfolio sections based on their specific interests and intent.
Phase 1: Foundation Training
- Feed comprehensive portfolio content into knowledge base.
- Create extensive Q&A pairs covering common questions.
- Develop response templates maintaining consistency.
Phase 2: Contextual Enhancement
- Train agent to reference specific projects when discussing skills.
- Implement cross-referencing between experience and portfolio examples.
- Add capability to suggest relevant case studies based on user interests.
Phase 3: Navigation Intelligence
- Integrate deep-linking to specific portfolio sections.
- Develop smart routing based on user intent.
- Create seamless handoffs between conversation and visual exploration.
Clear separation between user interface, server logic, and AI services creates a secure, maintainable system.
Clear separation between user interface, server logic, and AI services creates a secure, maintainable system. When a user types a message, it travels from the chat interface to your server, which then forwards it to OpenAI. OpenAI's response flows back through the same path to appear in the user's chat window.
Custom prompt engineering allows 'broberbot' to mirror my voice.
The OpenAI integration uses dynamic prompt engineering to automatically adapt the AI's personality, vocabulary, and response depth based on detected user types (recruiters, hiring managers, or fellow designers), while maintaining consistent brand voice through predefined templates and regular tone monitoring.
Personality
Custom prompt engineering for consistent brand voiceSuccessful AI chatbot design requires real-time feedback, consistent interactions, a flexible content strategy, and a scalable design system to create an engaging user experience.
Successful AI chatbot design requires real-time feedback, consistent interactions, flexible content strategies, and scalable design systems to create engaging user experiences.
Context is Important
The most valuable AI responses weren't just accurate—they were contextually relevant and connected information across my portfolio in ways users couldn't easily do themselves.
Hybrid Experiences Win
The most successful interactions seamlessly blended conversational AI with traditional visual portfolio exploration, rather than replacing one with the other.
Personality Matters
Users responded much better when the AI agent felt "authentically me", or rather, when it reflected my own voice, style, and even humor.
Component modularity
...significantly speeds up development time.
Progressive Disclosure Works
Visitors preferred responses that provided immediate value while offering pathways to deeper exploration, rather than overwhelming with long, drawn-out explanations.
Immediate Enhancements
I truly feel that AI will revolutionize how creative professionals present their work, moving beyond static portfolios to intelligent, adaptive presentations that meet visitors' specific needs. However, we can still take it further....
Voice
Implementing voice input would drastically increase accessibility as well as make the experience even more mobile—and even smart-device—native.
Error Handling
Communicating to users when there is a problem or error
Direct Contact
Allowing users to contact me directly through chat could eliminate clumsy email engagement flows.
You can create your very own portfolio navigation tool!
broberbot is fully open-source. Feel free to check out my Github repository for in-depth documentation and how-to for building your personal AI portfolio assistant.