# Workspace Instructions - my-portfolio

This repository contains a personal portfolio website built with React 19, Vite, TypeScript, and Tailwind CSS 4.

## Project Structure
- `src/components/`: Reusable UI components (cards, modals, navbar).
- `src/pages/`: Main page components.
- `src/sections/`: Modular layout sections used in pages.
- `src/types.ts`: Central location for all TypeScript interfaces and data models.
- `src/App.tsx`: The main entry point managing overall state and routing.

## Development Workflow
- **Package Manager**: Use `pnpm`.
- **Commands**:
  - `pnpm dev`: Start development server.
  - `pnpm build`: Type-check and build for production.
  - `pnpm lint`: Run ESLint.
  - `pnpm preview`: Preview production build.

## Code Conventions
- **Naming**: Use PascalCase for components and sections (e.g., `ProjectCard.tsx`).
- **Exports**: Prefer named exports for components.
- **Styling**: 
  - Use Tailwind CSS 4 utility classes.
  - Follow the "glassmorphism" aesthetic (e.g., `backdrop-blur-sm`, `bg-white/10`, `border-white/10`).
- **Data Models**:
  - All new data structures (projects, experiences) must be defined in `src/types.ts`.
  - Content is typically initialized in `App.tsx` and passed down as props.

## Component Principles
- **Separation of Concerns**: Sections in `src/sections/` should focus on presentation and receive data via props from parent pages.
- **Modals**: Modal states (open/close, selected item) are managed in the parent component and passed down.

## Best Practices
- Ensure strict TypeScript typing for all props.
- Use the `@danielgtmn/umami-react` for analytics features if needed.
- Maintain consistent hover effects and layout patterns across cards.