CLAUDE.md Portfolio Guide

Comprehensive instructions for working with the Saelan architect portfolio website codebase.

Project Overview

This is a portfolio website for architect Oskar Saelan Halskov built with Next.js 14 App Router. The site features:

Tech Stack & Architecture

**Frontend:**

**Backend:**

**Hosting:**

Project Structure Reference

```

app/

├── layout.js # Root layout (font, Header, TransitionWrapper)

├── page.js # Home — splash video → image reveal

├── globals.css # Font-face, animations, polyrattan mask

├── error.js # Error boundary

├── not-found.js # 404 page

├── contact/page.js # Contact info

├── projects/

│ ├── page.js # Project grid

│ └── [slug]/page.js # Project detail

components/

├── Header.js # Nav with category dropdowns (client)

├── TransitionWrapper.js # Route fade-in wrapper

├── Video.js # Masked video player

lib/

└── projects.js # Project data helpers (Strapi fetch)

public/

├── fonts/ # Italian Plate No2 (11 variants)

├── PH.jpg # Placeholder

├── polyrattanLogo.jpg # Header logo

├── polyrattanVideo.mp4 # Splash video

└── logoTransparent.png # Video mask

```

Data Model

Projects fetched from Strapi have this structure:

```js

{

slug: string,

title: string,

category: 'architecture' | 'illustration' | 'other',

description: string,

image: string, // Cloudinary URL

year: string,

where: string,

who: string

}

```

Development Workflow

Starting the Development Environment

1. **Start Strapi CMS (optional, for content changes):**

```bash

cd ../saelan-cms && npm run develop

# Runs on localhost:1337

```

2. **Start Next.js dev server:**

```bash

npm run dev

# Runs on localhost:3000

```

3. **Environment variables** (`.env.local`):

```

NEXT_PUBLIC_STRAPI_URL=http://localhost:1337

STRAPI_API_TOKEN=<read-only-token>

```

Common Commands

```bash

npm run dev # Development server

npm run build # Production build

npm run start # Production server

npm run lint # Run ESLint

```

Key Implementation Patterns

Bilingual Labels

All UI text follows Danish primary with English italic pattern:

```html

DANSK.<em>ENGLISH</em>

```

Header Visibility Control

Data Fetching Strategy

Video Player

Content Management (Strapi)

Local CMS Development

```bash

cd ../saelan-cms

npm run develop

```

Production CMS

Deploying Strapi Changes

```bash

cd ../saelan-cms

Make changes, then:

git add -A && git commit -m "description"

git push origin main

railway up --detach

```

Deployment

Frontend (Vercel)

- `NEXT_PUBLIC_STRAPI_URL` → production Strapi URL

- `STRAPI_API_TOKEN` → production read-only token

Backend (Railway)

Working with This Codebase

When Adding New Features

1. **Read the existing code** in the relevant files first

2. **Follow existing patterns**: bilingual labels, ISR data fetching, Server/Client component split

3. **Test locally** with both local and production Strapi URLs

4. **Maintain the minimal design aesthetic** — this is a clean, image-focused portfolio

When Modifying Projects

1. **Content changes**: Make in Strapi admin panel

2. **Data model changes**: Update both Strapi schema AND `lib/projects.js` helper functions

3. **Category changes**: Update both Strapi collection type AND `Header.js` category filters

When Debugging

1. **Check Strapi connection**: Verify `NEXT_PUBLIC_STRAPI_URL` and `STRAPI_API_TOKEN`

2. **Check Network tab**: Strapi fetch calls should return 200 with JSON data

3. **Check localStorage**: Header visibility state stored in `hasSeenSplash`

4. **Check Console**: Custom events (`showHeader`, `resetSplash`) logged during navigation

Common Tasks

Adding a New Project

1. Log into Strapi admin

2. Create new entry in Projects collection

3. Upload image to Cloudinary via Strapi media library

4. Set category, title, description, year, where, who

5. Frontend auto-updates via ISR (60s) or on next build

Changing Site Typography

1. Replace font files in `public/fonts/`

2. Update font-face declarations in `app/globals.css`

3. Update `next/font/local` config in `app/layout.js`

Updating Splash Video

1. Replace `public/polyrattanVideo.mp4`

2. Optionally update `public/logoTransparent.png` mask

3. Adjust video reveal timing in `app/page.js` if needed

Important Notes