← Back to Projects

Azieb Tech Portfolio & AI Chatbot

Project Overview

I designed and built this portfolio website to present my data engineering, applied AI, and automation projects. I also built the AI chatbot embedded in the site so visitors can ask questions about my background and project work in a conversational way.

The application is built with Next.js and TypeScript and deployed on Vercel. Markdown files power the About and Projects pages as well as the chatbot's knowledge base, keeping the site's content in one maintainable source.

Key Features

  • Responsive portfolio pages built with Next.js App Router, React, TypeScript, and Tailwind CSS.
  • Project and About content rendered from Markdown files.
  • AI chatbot that answers questions about the portfolio's projects and background.
  • Retrieval-augmented generation (RAG) to ground responses in the site's own content.
  • Streaming assistant responses so users can see answers as they are generated.
  • Input validation, message limits, origin checks, and server-side API key handling.

How the Chatbot Works

  1. Markdown content is split into heading-based chunks with overlap for longer sections.
  2. Voyage AI converts each content chunk into an embedding during the build process.
  3. A visitor's question is converted into a query embedding at request time.
  4. Cosine similarity ranks the stored content chunks by relevance.
  5. The most relevant chunks are provided to Anthropic Claude as context.
  6. Claude generates a concise response that is streamed back to the browser.

Technical Highlights

  • Frontend: Next.js App Router, React, TypeScript, Tailwind CSS
  • Backend: Next.js route handler with request validation and streaming responses
  • AI services: Anthropic Claude for generation and Voyage AI for embeddings
  • Retrieval: Markdown chunking, cached index loading, and cosine similarity search
  • Content architecture: One Markdown source supports both rendered pages and chatbot context
  • Deployment: Vercel

Engineering Decisions

  • Kept API keys on the server by calling external AI services from the Next.js API route.
  • Used Markdown as a simple, maintainable content source instead of introducing a database for a small portfolio.
  • Added content grounding instructions so the assistant uses portfolio information instead of inventing details.
  • Added response streaming to improve the perceived speed of the chat experience.
  • Added message length and conversation limits to reduce accidental or excessive API usage.

Scope and Limitations

  • Retrieval currently uses an in-memory index and a linear similarity scan, which is appropriate for the small amount of portfolio content but would need a vector database for a larger knowledge base.
  • The chatbot depends on external Anthropic and Voyage AI services and their available API limits.
  • The application is a portfolio-scale system, not production-scale conversational infrastructure.

What I Learned

This project helped me combine frontend development, API integration, data preparation, semantic search, prompt design, and deployment into one working application. It also gave me practical experience explaining an AI system in terms of the data flow and engineering decisions behind it, rather than treating the model as a black box.