# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

**Kampüs Cadıları** ("Campus Witches") is a modern, accessible web platform for a Turkish feminist organization. The application is a bilingual (TR/EN) React single-page application built with TypeScript, Vite, and TailwindCSS, using the Gemini API for AI features.

## Commands

### Development
```bash
npm install              # Install dependencies
npm run dev              # Start dev server on http://0.0.0.0:3000
npm run build            # Build for production
npm run preview          # Preview production build
```

### Environment Setup
- Copy `.env.local` and set `GEMINI_API_KEY` to your Gemini API key
- The API key is injected at build time via `vite.config.ts` as both `process.env.API_KEY` and `process.env.GEMINI_API_KEY`

## Architecture

### Application Structure

This is a **view-based SPA** with client-side routing managed through state rather than a traditional router:

- **App.tsx**: Root component managing global state (language, navigation, view switching)
- **View switching**: Uses a `currentView` state variable to toggle between `'HOME'` and `'PUBLICATIONS'` views
- **Fixed footer pattern**: The footer is positioned `fixed` at the bottom, with main content scrolling over it (creates a layered poster effect)

### State Management

Global state is managed via React `useState` in `App.tsx`:
- `lang`: Toggle between 'TR' and 'EN' for bilingual support
- `currentView`: Switch between 'HOME' and 'PUBLICATIONS' views
- `isNavOpen`: Mobile navigation drawer state

Content is fully centralized in `content.ts` with the `CONTENT` object keyed by language (`TR`/`EN`).

### Component Organization

Components are stored in `/components/`:
- **Home.tsx**: Main landing page with parallax scroll effects and horizontal scrolling news section
- **Publications.tsx**: Filterable publication gallery with categories
- **Logo.tsx**: Reusable SVG logo component
- **Reveal.tsx**: Intersection Observer-based animation wrapper
- **ArticleCard.tsx, Button.tsx**: Reusable UI components

### Design System

The design system is comprehensively documented in `design.json` and includes:

**Brand colors** (defined in `index.html` TailwindCSS config):
- `brand-lilac` (#EADDFA): Primary background
- `brand-purple` (#6B2C91): Primary brand color
- `brand-deep` (#2D0F41): Text/borders (replaces black)
- `brand-red` (#ED1C24): Action/CTA color
- `brand-accent` (#9D4EDD): Vibrant highlights

**Typography**:
- **Inter**: Body text and UI (`font-sans`)
- **Oswald**: Headings, nav, buttons (`font-display`)
- **Permanent Marker**: Handwritten effects (`font-marker`)

**Visual Style**:
- Bold, poster-like aesthetic with thick borders (4px)
- Brutalist shadows: `shadow-[4px_4px_0px_#2D0F41]`
- Rounded corners: `rounded-lg`, `rounded-2xl`
- Noise overlay for texture (fixed overlay in `index.html`)

### Path Aliases

TypeScript path alias configured in `tsconfig.json`:
- `@/*` resolves to root directory
- Example: `import { Logo } from '@/components/Logo'`

### Animation Patterns

- **Parallax scrolling**: Text and images move at different rates on scroll (see `Home.tsx:31-75`)
- **Horizontal scroll sections**: Uses sticky positioning + transform based on scroll progress
- **Intersection Observer**: Used in `Reveal.tsx` for fade-in animations
- Custom keyframe animations: `blob`, `float`, `marquee` (defined in `index.html`)

### Bilingual Content

All user-facing text is stored in `content.ts` under the `CONTENT` object with `TR` and `EN` keys. To add new translatable content:
1. Add the key to both `CONTENT.TR` and `CONTENT.EN`
2. Access via `t.section.key` (where `t = CONTENT[lang]`)

### TypeScript Types

Core types are defined in `types.ts`:
- `Category`: Publication categories
- `Article`: News/blog article structure
- `Publication`: Publication metadata with type (`FANZIN`, `RAPOR`, `BROSUR`, `KITAP`)
- `Story`: User story/testimonial structure

### Build Configuration

- **Vite** is used for bundling (see `vite.config.ts`)
- **TailwindCSS** is loaded via CDN in `index.html` with inline config
- **Import maps** in `index.html` load React and dependencies from esm.sh CDN
- Dev server runs on port 3000, accessible on all network interfaces (`0.0.0.0`)

## Key Implementation Patterns

### Adding a New View
1. Create component in `/components/`
2. Add new type to `View` union in `App.tsx:9`
3. Update `currentView` state and conditionally render in `App.tsx:133`
4. Add navigation trigger (button/link) that calls `setCurrentView()`

### Adding Scroll Animations
Follow the pattern in `Home.tsx`:
1. Create refs for elements to animate
2. Calculate scroll progress in `useEffect` with `requestAnimationFrame`
3. Apply transforms via `element.style.transform`
4. Respect `prefers-reduced-motion` (checked at `Home.tsx:32`)

### Styling Components
- Use TailwindCSS utility classes with brand colors (`bg-brand-lilac`, `text-brand-deep`)
- Apply brutalist shadow pattern: `shadow-[4px_4px_0px_#2D0F41]`
- Thick borders: `border-4 border-brand-deep`
- Display font for impact: `font-display font-bold tracking-wider uppercase`