38 lines
1.7 KiB
Markdown
38 lines
1.7 KiB
Markdown
# 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.
|