diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..3e0fc6b
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,36 @@
+# 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.