Project coding conventions, standards, and architectural rules for the developer portfolio. Use this skill whenever the user asks about coding standards, naming conventions, file structure rules, TypeScript practices, component patterns, or how things should be organized. Also use when reviewing code for convention violations, when someone says 'what are the rules', 'coding standards', 'naming convention', 'where does this go', or asks about the right way to structure something in this project.
| Thing | Convention | Example |
|---|---|---|
| Components | PascalCase | SectionHeading, InteractiveGrid |
| Hooks | useCamelCase | useDebounce, useMediaQuery |
| Functions/variables | camelCase | handleClick, isVisible |
| Constants | UPPER_SNAKE_CASE | PROJECTS, HERO_STATS |
| Files | kebab-case.tsx | section-heading.tsx, interactive-grid.tsx |
any. Use if the type is genuinely uncertainunknowninterface for object shapes, type for unions and intersectionsLucideIcon from lucide-reactapp/ # Next.js routing only — no business logic
├── layout.tsx # Fonts, ThemeProvider, ClientCursor, SpeedInsights
└── page.tsx # Composes section components sequentially
src/components/sections/ # One file per portfolio section (hero, about, etc.)
src/components/ # Shared UI components (SectionHeading, BackToTop, etc.)
src/data/portfolio.ts # Single source of truth for ALL portfolio content
src/types/portfolio.ts # All shared TypeScript interfaces
src/hooks/ # One hook per file, kebab-case filename
components/ui/ # shadcn-generated components (don't edit manually)
lib/ # Utility functions (cn, etc.)
@/ // project root
@/src/components // src/components/
@/components // shadcn components (components/ui/)
@/lib // lib/
Server Components by default. Only add 'use client' when the component uses event handlers, React hooks, browser APIs, or client-side libraries (Framer Motion, React Three Fiber).
No business logic in app/. Pages and layouts only compose components — no data fetching, no transformations, no conditionals beyond what's needed for layout.
No API calls inside src/components/. Components receive data via imports from src/data/portfolio.ts or through props.
Data lives in src/data/portfolio.ts. All text, lists, and structured content are exported as typed constants. To change portfolio content, edit only this file.
Section components follow a consistent structure:
'use client' (if animated)<section id="name" className="py-20 sm:py-28"><div className="mx-auto max-w-5xl px-4 sm:px-6">SectionHeading with section number, title, subtitletext-heading, text-body, text-muted-text, text-accent, bg-surface, bg-surface-alt, bg-background, border-border-colorgap over margin for spacing between siblingsfont-heading (Sora), font-sans (DM Sans), font-mono (JetBrains Mono)base-nova style, lucide iconsany types — the codebase is strict and should stay that wayportfolio.ts'use client' to components that don't need itbuncomponents/ui/