# Component System Architecture

## Neo-Brutalism Design Principles

**Visual Identity:**

- Sharp corners (0px radius) - no rounded edges
- Bold borders (4px solid shadows) for depth
- High contrast colors with hard edges
- Gold (#FFD700) primary, Orange (#ff6f00) secondary
- Space Mono headings, Inter body text

**Component Styling:**

```tsx
// Base button pattern - no border-radius, hard shadows
className="border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]
           hover:translate-x-1 hover:translate-y-1 hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
```

## Component Organization

```
src/components/
├── layout/           # Layout primitives (Header, Footer, AnnouncementBar)
├── locale/           # I18n utilities (LocaleSwitcher)
├── project/          # Project-specific components (ProjectCard, ProjectDetail)
├── search/           # Search functionality (SearchBar)
└── ui/               # Base UI components (Button, Card, Badge)
```

## Component Patterns

### Composition Pattern

- Build complex components from small reusable primitives
- Example: `ProjectCard` = `Card` + `Badge` + `ExternalLink`

### Server Components First

- Default to Server Components for data fetching
- Use Client Components (`"use client"`) only for interactivity
- Pass server data via props to client components

### Responsive Design

- Mobile-first Tailwind classes: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
- Breakpoints: md (768px), lg (1024px)

### Accessibility

- Semantic HTML elements
- Keyboard navigation support
- ARIA labels where needed

## State Management

- Server state: Prisma queries in Server Components
- Client state: React hooks (useState, useEffect) for interactivity
- Global state: Context providers for locale, theme