zachlagden_uk

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a personal portfolio website for Zach Lagden built with Next.js, React, TypeScript, and Tailwind CSS. The site serves as a professional CV/resume showcasing skills, experience, education, and certifications.

## Technology Stack

- **Frontend**: Next.js 16 (App Router), React 19.2, TypeScript 5
- **Styling**: Tailwind CSS 4, PostCSS
- **Animations**: Framer Motion, Split-Type
- **Forms**: Formspree
- **Analytics**: Google Analytics

## Common Commands

### Development

```bash
# Start the development server (uses Turbopack by default)
pnpm dev
```

### Building & Deployment

```bash
# Generate a production build
pnpm build

# Start the production server
pnpm start
```

### Code Quality

```bash
# Run ESLint (uses eslint CLI directly, not next lint)
pnpm lint

# Format code with Prettier
pnpm format
```

## Architecture Overview

The project follows a component-based architecture using Next.js App Router with dynamic content loading:

1. **App Structure**
   - `src/app`: Contains page components and layouts using Next.js App Router
   - Entry point is `src/app/page.tsx` with `src/app/layout.tsx` as the root layout
   - `src/app/HomeClient.tsx`: Main client-side component handling content loading and rendering

2. **Content Management**
   - `public/content.json`: Centralized content data file
   - `src/types/content.ts`: TypeScript interfaces for all content types
   - `src/utils/contentLoader.ts`: Client-side content loading utili…

## Component Prop Patterns
- Components receive their slice of `ContentData` as `content` — never import or fetch JSON themselves
- Pattern is consistent across all `src/components/sections/*` and `src/components/layout/*`
- Type comes from `src/types/content.ts` — sections take a domain type (`About`, `Experience[]`, `Skills`, etc.) not the full `ContentData`
- Booleans default to `false`: `featured = false`, `disableParallax = false`, `once = true`
- Optional callbacks default to no-op or are checked before invocation
- `displayName` is set on every `forwardRef` — required by ESLint `react/display-name`
- Children typed as `React.ReactNode`
- Discriminated unions rare — most variant props are simple string literals like `size?: "sm" | "md"`
## Animation Conventions
- `viewport.once: true` everywhere — animations fire only once on first scroll into view
- `viewport.margin` typically `-50px` to `-100px` to delay trigger
- String easings: `"easeOut"`, `"easeInOut"` (most common)
- Custom cubic-bezier: `[0.22, 1, 0.36, 1]` for the intro fall (`src/components/layout/Header.tsx:280`)
- Spring presets: `{ type: "spring", damping: 30 }` (`src/components/layout/MobileMenu.tsx:70`), `{ type: "spring", mass: 0.1, stiffness: 700, damping: 30 }` (`src/components/ui/CustomCursor.tsx:124`)
- SplitType is the `split-type` package listed in `dependencies`, but **the component loads it via external CDN script** (`https://unpkg.com/split-type@0.3.3/umd/index.min.js`) rather than importing it. The package version (`0.3.4`) doesn't even match the CDN URL (`0.3.3`). See CONCERNS.md.
- Splits t…