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

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 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.

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 for a standard section with themed container styling.
• Card Pattern: See src/components/ProjectCard.tsx for cards with hover animations and conditional content.
• Modal Pattern: See 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.