# My Portfolio - Project Guidelines

This is a personal portfolio website built with Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS 4.

## General Principles
- **Interactivity First**: Most UI components and sections use `"use client"` and `framer-motion` for animations.
- **Data Driven**: Portfolio data (projects, experience, status) is managed in [src/context/ProfileContext.tsx](src/context/ProfileContext.tsx) and typically fetched from `shsf-api.reversed.dev`.
- **Responsive & Modern**: Use Tailwind 4 utility classes for a "glassmorphism" aesthetic (`backdrop-blur-sm`, `bg-white/10`).

## Code Style & Conventions
- **Components**: Prefer named exports for components and sections.
- **Styling**: Use `tailwind-merge` and `clsx` for conditional classes. Follow the established patterns for containers and cards.
- **Animations**: Use `framer-motion` for hover effects, entry transitions, and modals.
- **Types**: Define shared types in [src/types.ts](src/types.ts).

## Architecture
- `src/app/`: Next.js App Router folders, layouts, and global styles.
- `src/sections/`: High-level page sections (e.g., `Hero`, `About`, `WorkExperience`).
- `src/components/`: Reusable UI elements (`ProjectCard`, `Navbar`, etc.).
- `src/context/`: Global state via React Context.

## Build and Development
- **Install**: `pnpm install`
- **Dev**: `pnpm dev`
- **Build**: `pnpm build`
- **Lint**: `pnpm lint`
- **Node Version**: Targets Node 24 (see CI config).

## Patterns to Follow
- **Section Pattern**: See [src/sections/About.tsx](src/sections/About.tsx) for a standard section with themed container styling.
- **Card Pattern**: See [src/components/ProjectCard.tsx](src/components/ProjectCard.tsx) for cards with hover animations and conditional content.
- **Modal Pattern**: See [src/components/ExperienceModal.tsx](src/components/ExperienceModal.tsx) for handling overlays.

## Common Pitfalls
- **Hydration**: Most components are Client Components. Ensure SSR compatibility where necessary.
- **API Dependencies**: The app relies on an external API; handle "offline" states gracefully in context.
