All-About-Me

Personal portfolio website with AI-powered chat assistant.

A modern portfolio site built with Astro and React featuring an interactive AI chat that can answer questions about my background, projects, and experience. The chat supports both local inference (WebLLM) and cloud fallback (Claude API), with RAG-powered responses grounded in actual project documentation.

Features

• AI Chat Assistant - Interactive chat that answers questions about my portfolio using either local WebLLM or Claude API
• RAG-Powered Responses - Semantic search over pre-computed embeddings ensures accurate, grounded answers
• Project Showcase - Domain-grouped shelves of every repo, with detail pages that render architecture diagrams, tech stack, and Q&A pulled from each project's own docs
• Technical Blog - Markdown/MDX posts with scheduled publishing (future-dated posts stay hidden until their date arrives)
• Dark/Light Theme - System-aware theme with instant switching and persistence
• Responsive Design - Optimized for mobile, tablet, and desktop

Tech Stack

• Framework: Astro 5 with React islands
• AI: WebLLM (SmolLM2-1.7B) for local inference, Claude Haiku 4.5 for cloud fallback, Xenova Transformers for embeddings
• Content: Astro content collections (Markdown/MDX blog)
• 3D Graphics: Three.js with React Three Fiber
• Styling: Tailwind CSS with custom theme variables
• State: Zustand with persistence
• Deployment: Vercel

Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

git clone https://github.com/Technical-1/All-About-Me.git
cd All-About-Me
npm install

Development

# Start development server
npm run dev

# Build for production (includes embedding generation)
npm run build

# Preview production build
npm run preview

Environment Variables

Create a .env file for cloud chat functionality:

ANTHROPIC_API_KEY=your_api_key_here

Project Structure

All-About-Me/
├── src/
│   ├── components/     # React/Astro islands (chat, projects, blog, global)
│   ├── content/        # Blog content collection (Markdown/MDX) + schema
│   ├── layouts/        # Astro layouts
│   ├── lib/            # GitHub API, RAG, project categorization
│   ├── pages/          # Astro pages, blog/project routes, chat API
│   ├── stores/         # Zustand state management
│   └── styles/         # Global CSS and theme
├── public/
│   ├── data/           # JSON repo data and generated embeddings
│   └── og/             # OpenGraph images
├── scripts/            # Build scripts (embeddings, OG images, repo sync)
└── docs/               # Documentation and prompts

Key Features Explained

Hybrid AI Chat

The chat automatically detects WebGPU support:

• WebGPU available: Offers local mode (no data sent to servers)
• No WebGPU: Uses Claude Haiku 4.5 via the API, with rate limiting and input validation

RAG System

Embeddings are generated at build time from portfolio markdown files. At runtime:

1. User query is embedded using Xenova MiniLM-L6-v2
2. Cosine similarity finds relevant chunks
3. Keyword boosting improves exact match accuracy
4. Top results are injected into the LLM context

Theme System

• Inline script prevents flash on load
• Respects prefers-color-scheme on first visit
• Zustand persistence saves preference
• CSS variables enable instant switching

License

Unlicensed (personal project). The source is public on GitHub for reference.

Author

Jacob Kanfer - GitHub - LinkedIn