# System Patterns

## Architecture Overview
- **Framework**: Next.js 14 with App Router
- **Language**: TypeScript for type safety
- **Styling**: TailwindCSS with custom configurations
- **Animations**: Framer Motion for smooth interactions
- **Deployment**: Docker containerization

## Key Technical Decisions

### Frontend Architecture
- **App Router**: Uses Next.js 14's modern app directory structure
- **Component Organization**: Feature-based organization (biography, home, layout, shared)
- **Client Components**: Uses 'use client' directive for interactive components
- **Responsive Design**: Mobile-first approach with TailwindCSS breakpoints

### Styling Patterns
- **TailwindCSS**: Utility-first CSS framework
- **Custom Colors**: Brand colors including `mcdi-maroon` and blue gradients
- **Responsive Design**: Consistent breakpoint usage (sm, lg)
- **Animation**: Framer Motion for entrance animations and hover effects

### Component Patterns
- **Composition**: Components are composed together (Hero + ServiceGrid + Timeline)
- **Props Interface**: TypeScript interfaces for component props
- **Motion Components**: Consistent use of motion.div for animations
- **Image Optimization**: Next.js Image component with proper sizing

### State Management
- **Client State**: React hooks for local component state
- **No Global State**: Simple architecture without complex state management
- **Form Handling**: Contact forms with validation and sanitization

### Security Patterns
- **Input Validation**: XSS protection with validator library
- **Rate Limiting**: Upstash Redis for API rate limiting
- **Content Security Policy**: Implemented via middleware
- **Environment Variables**: Secure credential management

## File Structure Patterns
```
src/
├── app/                 # Next.js App Router pages
│   ├── api/            # API routes
│   ├── services/       # Service pages
│   └── biography/      # Biography page
├── components/         # React components
│   ├── home/          # Homepage components
│   ├── layout/        # Layout components
│   ├── shared/        # Reusable components
│   └── biography/     # Biography-specific components
├── lib/               # Utility functions
└── styles/            # Global styles
```

## Development Patterns
- **Docker Development**: Hot reloading with volume mounting
- **Package Manager**: pnpm for efficient dependency management
- **TypeScript**: Strict typing throughout the application
- **ESLint**: Code quality and consistency