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
2.5 KiB
2.5 KiB
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-maroonand 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