kampuscadilari/dev/generated/CLAUDE.md

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

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