Replit.md - Abdul Rafay Ahmed Khan Portfolio

# Replit.md - Abdul Rafay Ahmed Khan Portfolio

## Overview

This is a single-page portfolio application for Abdul Rafay Ahmed Khan that showcases a dual-persona concept - Software Engineer and Data Engineer. The application features a 3D gateway with animated avatars that transition into detailed persona sections with smooth animations, parallax effects, and interactive elements. Built with React, TypeScript, and modern web technologies, it creates an immersive "wow" experience for visitors.

## User Preferences

Preferred communication style: Simple, everyday language.

## System Architecture

### Frontend Architecture
- **Framework**: React 18 with TypeScript and Vite for development and build tooling
- **Styling**: Tailwind CSS with custom CSS variables for theming and glass morphism effects
- **Component Library**: Radix UI primitives with shadcn/ui component system for consistent design
- **Animations**: Framer Motion for complex animations, transitions, and gesture handling
- **Routing**: Wouter for lightweight client-side routing
- **State Management**: React hooks with TanStack Query for server state management

### Backend Architecture
- **Server**: Express.js with TypeScript for API endpoints
- **Development**: Vite middleware integration for hot module replacement in development
- **Build Process**: ESBuild for production server bundling
- **Storage Interface**: Abstracted storage layer with in-memory implementation for user management

### Data Storage Solutions
- **Database**: PostgreSQL configured with Drizzle ORM
- **Schema Management**: Drizzle Kit for migrations and schema management
- **Connection**: Neon Database serverless PostgreSQL connection
- **Session Storage**: PostgreSQL session store with connect-pg-simple

### Authentication and Authorization
- **User Schema**: Basic user model with username/password fields
- **Session Management**: Express sessions with PostgreSQL storage
- **Validation**: Zod schemas with Drizzle integration for type-safe validation

### Component Architecture
- **Portfolio Components**: Modular persona sections (About, Tech Stack, Experience, Projects)
- **3D Elements**: Custom Three.js-inspired components for avatar stage and floating particles
- **UI Components**: Comprehensive shadcn/ui component library with custom animations
- **Responsive Design**: Mobile-first approach with device-specific optimizations

### Animation System
- **Scroll Animations**: Intersection Observer hooks for triggering animations on scroll
- **Particle Effects**: Floating background particles with physics-based movement
- **Counter Animations**: Animated number counting for metrics and statistics
- **Gesture Handling**: Touch and mouse interaction support for avatar selection

### Development Workflow
- **Hot Reload**: Vite development server with React Fast Refresh
- **Type Safety**: Strict TypeScript configuration with path mapping
- **Code Quality**: ESLint integration with modern React patterns
- **Build Optimization**: Separate client and server builds with asset optimization

## External Dependencies

### Core Framework Dependencies
- **React Ecosystem**: React 18, React DOM, React Router (Wouter)
- **Build Tools**: Vite, ESBuild, TypeScript compiler
- **Animation**: Framer Motion for complex animations and gestures

### Database and ORM
- **Database**: Neon Database (PostgreSQL serverless)
- **ORM**: Drizzle ORM with PostgreSQL adapter
- **Migrations**: Drizzle Kit for schema management
- **Validation**: Zod with Drizzle integration

### UI and Styling
- **CSS Framework**: Tailwind CSS with PostCSS processing
- **Component Library**: Radix UI primitives for accessibility
- **Design System**: shadcn/ui component collection
- **Icons**: Lucide React icons, Font Awesome for branding
- **Fonts**: Google Fonts (Inter) for typography

### Server Infrastructure
- **Web Server**: Express.js with TypeScript
- **Session Management**: Express sessions with PostgreSQL store
- **Development**: Replit-specific plugins for cartographer and error overlay

### Development Tools
- **Type Safety**: TypeScript with strict configuration
- **Code Quality**: Class Variance Authority for component variants
- **Utilities**: Date-fns for date manipulation, clsx for class management
- **Query Management**: TanStack React Query for server state

### Third-Party Integrations
- **Replit Platform**: Custom Vite plugins for Replit development environment
- **Font Services**: Google Fonts CDN for web fonts
- **Icon Libraries**: Font Awesome CDN for social and brand icons