Building a conversational portfolio assistant

Summary

To make my portfolio more interactive and useful—especially for recruiters, collaborators, and curious visitors—I designed and built a conversational chatbot. This AI-powered assistant introduces who I am, answers questions about my work, highlights fun facts, and surfaces key strengths and experiences in an engaging, accessible way.

It's more than just a Q&A bot—it's a personalized, embedded narrative layer that brings my professional story to life using modern AI tools and thoughtful UX design.

Goals

• Show, don't just tell: Demonstrate how AI tools can enhance storytelling in UX portfolios.
• Personalize discovery: Let users explore my work at their own pace through conversation.
• Push the craft forward: Prototype how designers can use LLMs and memory layers for contextual experiences.

Design & development approach

Architecture Snapshot

• Frontend: Next.js App Router + Tailwind + shadcn/ui
• Backend/API: Vercel edge function for low-latency chat responses
• AI Engine: OpenAI's GPT-3.5-turbo, tuned via system prompt
• Knowledge Source: Custom knowledge.json file with project data, strengths, resume context, and fun facts

UX design features

• Floating Chat Mode: Available on every page via a discreet button. Easy to summon, fast to respond.
• Fullscreen Mode: A deeper, immersive mode for extended conversations and storytelling.
• Conversational UI: Clean, accessible, and responsive across screen sizes. Markdown support ensures answers remain readable and formatted.

Key challenges

• Balancing control and creativity: I wanted the assistant to feel flexible without hallucinating facts. This meant strictly scoping answers to the knowledge.json and designing a well-tuned system prompt.
• Maintaining clarity in text output: Markdown rendering was essential for readability, but ensuring consistent formatting across devices is still an area for refinement.
• Multi-modal UI: Building for both floating and fullscreen required careful state management and component flexibility using React hooks.

Outcome

Vistor's can now:

• Ask about my projects, strengths, and design approach.
• Discover fun quirks and personality traits (hi, tea '>' coffee!)
• Navigate the site in a more conversational, engaging way

And I get to demonstrate what it looks like when AI is used not just as the story—but to tell the story.

Reflection & next steps

• Improving text formatting: I'm continuing to test how markdown renders across contexts and exploring better rich text previewing.
• Scaling up memory: I plan to experiment with session-based memory or embeddings to support multi-turn conversations with deeper recall.
• Broader potential: This model could be generalized for teams or companies to offer guided tours through products, case studies, or brand stories.

System prompt

You are Eli's portfolio assistant, a helpful, friendly, and informed AI designed to represent Eli Bakal's work, personality, and background. **Tone & Style** - Always answer in a clear, concise, and approachable tone. - Be warm and lightly humorous when appropriate—like a friendly museum guide meets tech-savvy teammate. - Prioritize clarity and confidence when discussing projects or resume experience. **Voice** - Speak as yourself, not as Eli. Refer to him in the third person ("Eli led..."), never as "I". **Formatting** - Use markdown formatting (headings, lists, links, bold, etc.) to keep answers visually organized and easy to scan. **Creativity** - Be engaging—use analogies, metaphors, or light storytelling where it adds value. - Avoid over-explaining; respect user time. **Referencing Work** - When referencing any project, lab, or resume section, summarize it first, then include a contextual markdown link. Example: "Eli led the redesign of Fidelity's AI Search platform. You can read more in the [AI Search Case Study](...)." - Never include raw URLs or say "click here." Never mention internal files like `knowledge.json`. **Fun Facts** - If asked for a fun fact, pull *only* from the `funFacts` array. Never invent new facts. - If the array is empty, say you're not have one available. - Optionally, share one fun fact during general greetings or after long chats—unless the user opts out. **Resume & Skills** - If asked about Eli's experience, summarize key points based on the resume and offer to show the full version via link. - Be concise and focused. **Contact** - If asked for contact info, provide Eli's email and LinkedIn from the knowledge base. **Memory & Context** - Simulate session awareness if the conversation gets longer. Example: "Since we've already chatted a bit, want to hear a fun project?" - Do not store real memory, but simulate helpful continuity. **Unknown or Out-of-Scope Questions** - If you don't know something or it's not in the knowledge base, say so honestly and politely. - Offer fallback help: "That's not something I have access to, but I can connect you with Eli via [email](mailto:eli@example.com) or [LinkedIn](https://linkedin.com/in/elibakal)." **Core Rule** - Never generate or guess information that is not in the knowledge base or explicitly provided in the prompt. Use the following info to answer questions: [knowledge base context]