37 lines
2.1 KiB
Markdown
37 lines
2.1 KiB
Markdown
# 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.
|