Israel's AI Portfolio - Replit Documentation

# Israel's AI Portfolio - Replit Documentation

## Overview

This project is an interactive AI-powered portfolio website for Israel Opoku, a full-stack developer specializing in React and PHP. The application features a modern cyberpunk-themed design with 3D animations, an AI chatbot, and a comprehensive project showcase. It demonstrates Israel's skills in both frontend and backend development while providing an engaging user experience through AI integration.

## System Architecture

### Frontend Architecture
- **Framework**: React 18 with TypeScript
- **Styling**: Tailwind CSS with custom cyberpunk theme variables
- **UI Components**: Radix UI primitives with shadcn/ui component library
- **3D Graphics**: React Three Fiber for 3D animations and effects
- **Animations**: Framer Motion for smooth transitions and interactions
- **State Management**: TanStack Query for server state management
- **Routing**: Wouter for lightweight client-side routing
- **Form Handling**: React Hook Form with Zod validation

### Backend Architecture
- **Runtime**: Node.js with Express.js server
- **Language**: TypeScript with ES modules
- **Database**: PostgreSQL with Drizzle ORM
- **Database Provider**: Neon Database (serverless PostgreSQL)
- **AI Integration**: OpenAI GPT-4o API for chatbot functionality
- **Session Management**: Connect-pg-simple for PostgreSQL session storage
- **Development**: Vite for development server and build tooling

### Database Schema
The application uses three main tables:
- `users`: User authentication and management
- `chat_messages`: AI conversation history storage
- `contact_messages`: Contact form submissions

## Key Components

### AI Chatbot (Opoku-1)
- Custom AI assistant trained to represent Israel's professional profile
- Real-time chat interface with voice recognition support
- Conversation history persistence
- Personality-driven responses showcasing Israel's work and skills

### 3D Interactive Elements
- Floating particles animation system
- 3D hero section with React Three Fiber
- Cyberpunk-themed visual effects and animations
- Responsive 3D elements that adapt to screen size

### Project Showcase
- Interactive project cards with hover effects
- Technology stack visualization
- Links to GitHub repositories and live demos
- Detailed project descriptions and features

### Contact System
- Form validation with Zod schemas
- Email integration for contact submissions
- Toast notifications for user feedback
- Project type categorization

## Data Flow

1. **User Interaction**: Users interact with the portfolio through various components
2. **AI Processing**: Chat messages are sent to OpenAI API via backend routes
3. **Database Operations**: Conversations and contact forms are stored in PostgreSQL
4. **Real-time Updates**: React Query manages cache invalidation and updates
5. **Visual Feedback**: Toast notifications and animations provide user feedback

## External Dependencies

### AI Services
- **OpenAI API**: GPT-4o model for intelligent chatbot responses
- **Environment Variables**: `OPENAI_API_KEY` for API authentication

### Database
- **Neon Database**: Serverless PostgreSQL hosting
- **Environment Variables**: `DATABASE_URL` for database connection

### UI Libraries
- **Radix UI**: Accessible component primitives
- **Tailwind CSS**: Utility-first styling framework
- **Framer Motion**: Animation library for React
- **React Three Fiber**: 3D graphics rendering

### Development Tools
- **Vite**: Build tool and development server
- **TypeScript**: Type safety and development experience
- **ESBuild**: Fast JavaScript bundler for production

## Deployment Strategy

### Build Process
1. Frontend built with Vite to `dist/public`
2. Backend bundled with ESBuild to `dist/index.js`
3. Database schema deployed with Drizzle migrations

### Environment Configuration
- **Development**: Uses `tsx` for TypeScript execution
- **Production**: Compiled JavaScript execution
- **Database**: Automatic provisioning on Replit with PostgreSQL module

### Replit Configuration
- **Modules**: Node.js 20, Web, PostgreSQL 16
- **Port**: 5000 (mapped to external port 80)
- **Deployment**: Autoscale deployment target
- **Workflows**: Automated development and production workflows

## Changelog

```
Changelog:
- June 26, 2025: Initial setup with cinematic 3D AI portfolio
- June 26, 2025: Implemented Agent Blank with voice-first interaction system
- June 26, 2025: Added automatic microphone access and voice introduction
- June 26, 2025: Integrated conversational name recognition and session memory
- June 26, 2025: Complete knowledge base with authentic project URLs and contact info
- June 26, 2025: Female voice-only responses with specified tone settings
```

## User Preferences

```
Preferred communication style: Simple, everyday language.
```