generated from Nicholai/astro-template
127 lines
5.1 KiB
Markdown
127 lines
5.1 KiB
Markdown
# 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`
|