my-portfolio/.github/copilot-instructions.md

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.