TheMaddax
85ed3cce2c
- Updated Hero component to show former positions - Updated biography page with specific end dates (NAD: Jan 2025, KAD: July 2025) - Updated Deafhood service page to reflect past experience - Updated timeline components with term dates - Updated Memory Bank documentation - All references now accurately reflect Chris's leadership history
61 lines
2.5 KiB
Markdown
61 lines
2.5 KiB
Markdown
# 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
|