Master

.env.example

@@ -0,0 +1,3 @@
+# Email Service (Resend)
+RESEND_API_KEY=re_your_resend_api_key
+USER_EMAIL=your@email.com

.eslintrc.json

@@ -1,3 +1,11 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+    ],
+    "@typescript-eslint/no-empty-object-type": "off"
+  },
+  "ignorePatterns": [".next/", "node_modules/", "public/"]
 }

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  lint-and-build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Build
+        run: npm run build

CLAUDE.md

@@ -0,0 +1,149 @@
+# Luigi Simiani Photography Portfolio
+
+## Project Overview
+
+Next.js 16 photography portfolio with React 19, TypeScript, Framer Motion animations, and Decap CMS for content management.
+
+## Tech Stack
+
+- **Framework**: Next.js 16 (App Router, Turbopack)
+- **Language**: TypeScript (strict mode)
+- **Styling**: Tailwind CSS + custom CSS
+- **Animation**: Framer Motion 12
+- **CMS**: Decap CMS (content in `/content/`)
+- **UI Components**: shadcn/ui + 8-bit themed components
+
+## Project Structure
+
+```
+├── app/
+│   ├── (routes)/           # Page routes
+│   │   ├── page.tsx        # Home
+│   │   ├── about-me/
+│   │   ├── contact/
+│   │   └── gallery/[id]/
+│   ├── components/         # App-specific components
+│   │   ├── about-me/
+│   │   ├── contact/
+│   │   ├── gallery/
+│   │   ├── header/
+│   │   ├── home/
+│   │   ├── menu/
+│   │   └── work/
+│   ├── context/            # React Context (UIContext)
+│   ├── actions/            # Server actions
+│   ├── types/              # TypeScript types
+│   └── styles/             # Global CSS
+├── components/ui/          # Reusable UI primitives (shadcn)
+├── lib/                    # Utilities
+│   ├── animations.ts       # All Framer Motion configs
+│   ├── constants.ts        # App constants
+│   ├── content.ts          # CMS content fetching
+│   ├── getBase64.ts        # Image blur placeholders
+│   └── utils.ts            # cn() utility
+├── content/                # CMS JSON content
+│   ├── gallery/            # Gallery data
+│   └── settings/           # Site settings
+└── public/                 # Static assets
+```
+
+## File Naming Conventions
+
+| Type | Convention | Example |
+|------|------------|---------|
+| React components | PascalCase `.tsx` | `Header.tsx` |
+| Utilities | camelCase `.ts` | `utils.ts` |
+| Constants | camelCase `.ts` | `constants.ts` |
+| Folders | kebab-case | `about-me/` |
+| Route pages | `page.tsx` | `app/(routes)/gallery/page.tsx` |
+
+## Import Order
+
+1. React/Next.js (`react`, `next/*`)
+2. External libraries (`framer-motion`, `rooks`, etc.)
+3. `@/lib/*` utilities
+4. `@/app/components/*`
+5. `@/components/ui/*`
+6. Relative imports (`./`, `../`)
+
+## Component Patterns
+
+### Props Interface
+```tsx
+interface ButtonProps {
+  text: string;
+  onClick?: () => void;
+}
+
+export default function Button({ text, onClick }: ButtonProps) {
+  // ...
+}
+```
+
+### Conditional Classes
+```tsx
+import { cn } from "@/lib/utils";
+
+<div className={cn("base-class", isActive && "active-class")} />
+```
+
+### Animations
+Import from centralized animations file:
+```tsx
+import { fadeIn, carouselAnimationProps } from "@/lib/animations";
+
+<motion.div {...fadeIn}>
+```
+
+### Context Usage
+```tsx
+import { useUI } from "@/app/context/UIContext";
+
+const { isMenuVisible, toggleMenu } = useUI();
+```
+
+## Adding Content
+
+### New Gallery
+1. Add JSON file to `/content/gallery/[id].json`
+2. Include required fields: `id`, `title`, `imageUrls`
+3. Optional: `subTitle`, `description`, `coverPhoto`, `tags`
+
+### Gallery JSON Schema
+```json
+{
+  "id": "gallery-slug",
+  "title": "Gallery Title",
+  "subTitle": "Optional subtitle",
+  "description": "Optional description",
+  "coverPhoto": "/images/galleries/cover.jpg",
+  "imageUrls": ["/images/galleries/img1.jpg"],
+  "tags": ["featured", "fashion"]
+}
+```
+
+## Key Files
+
+| File | Purpose |
+|------|---------|
+| `app/context/UIContext.tsx` | Global UI state (menu visibility) |
+| `lib/animations.ts` | All Framer Motion animation configs |
+| `lib/content.ts` | CMS content fetching functions |
+| `app/types/content.ts` | TypeScript types for content |
+
+## Environment Variables
+
+```bash
+# .env.local
+RESEND_API_KEY=       # For contact form emails
+GALLERY_PASSWORD=     # For protected galleries
+```
+
+## Commands
+
+```bash
+npm run dev      # Development server
+npm run build    # Production build
+npm run start    # Start production server
+npm run lint     # Run ESLint
+```

README.md

@@ -1,6 +1,100 @@
 # luigisimiani.com
 
-Portfolio website of Amsterdam based photographer Luigi Simiani. Built with Next.js, Firebase and ImageKit.
-
+Portfolio website for Amsterdam-based photographer Luigi Simiani. Built with Next.js 16, React 19, and Tailwind CSS.
 
 <img width="1432" height="718" alt="Screenshot 2025-11-23 at 12 46 06" src="https://github.com/user-attachments/assets/8b633bea-3dda-4484-b7e8-a018448b1a05" />
+
+## Tech Stack
+
+- **Framework**: Next.js 16 (App Router, Turbopack)
+- **Runtime**: React 19
+- **CMS**: Decap CMS (formerly Netlify CMS)
+- **Styling**: Tailwind CSS
+- **Animations**: Framer Motion 12
+- **Language**: TypeScript (strict mode)
+
+## Features
+
+- **Password-protected galleries** with secret flower bypass (5 clicks)
+- **Downloadable galleries** - client-side ZIP export
+- **Hero slideshow** with gallery references
+- **Featured work section** with 2-column grid, quotes, and full-width hero items
+- **Gallery tags** for layout control and utility functions
+- **8-bit themed UI** components for contact form
+
+## Project Structure
+
+```
+├── app/
+│   ├── (routes)/           # Page routes
+│   ├── components/         # App-specific components
+│   │   ├── about-me/       # About page components
+│   │   ├── contact/        # Contact form components
+│   │   ├── gallery/        # Gallery view components
+│   │   ├── header/         # Site header
+│   │   ├── home/           # Homepage components
+│   │   ├── menu/           # Navigation menu
+│   │   └── work/           # Gallery/carousel components
+│   ├── context/            # React Context
+│   └── types/              # TypeScript types
+├── components/ui/          # Reusable UI primitives (shadcn)
+├── lib/                    # Utilities & animations
+├── content/                # CMS JSON content
+└── public/                 # Static assets
+```
+
+## Gallery Tags
+
+| Tag | Effect |
+|-----|--------|
+| `hero` | Full-width in Featured Work |
+| `hidden` | Excluded from gallery listings |
+| `downloadable` | Adds ZIP download button |
+| `protect` | Disables flower bypass on password page |
+
+## Content Structure
+
+```
+content/
+├── gallery/        # Gallery JSON files
+├── bio.json        # About page content
+├── contact.json    # Contact info
+├── featured.json   # Hero slideshow galleries
+├── quotes.json     # Featured work quotes
+└── settings.json   # Homepage settings
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Production build
+npm run build
+
+# Run CMS locally
+npx decap-server
+```
+
+Visit `http://localhost:3000` for the site and `http://localhost:3000/admin` for the CMS.
+
+## Environment Variables
+
+Copy `.env.example` to `.env.local` and configure:
+
+```
+RESEND_API_KEY=your-resend-api-key
+GALLERY_PASSWORD=your-gallery-password
+```
+
+## Documentation
+
+See [CLAUDE.md](./CLAUDE.md) for detailed developer documentation including:
+- File naming conventions
+- Import order guidelines
+- Component patterns
+- How to add new content

app/(routes)/about-me/page.jsx → app/(routes)/about-me/page.tsx

@@ -1,10 +1,11 @@
-import AboutMePage from "@/app/components/AboutMe/AboutMePage";
-import Menu from "@/app/components/Menu/Menu/Menu";
-import MemorizePosition from "@/app/components/Work/MemorizePosition";
-import { fetchDocs } from "@/app/service/fetchDocs";
-import { fetchFeaturedBlurDataUrls } from "@/app/utils/getBase64";
+import AboutMePage from "@/app/components/about-me/AboutMePage";
+import Menu from "@/app/components/menu/Menu";
+import MemorizePosition from "@/app/components/work/MemorizePosition";
+import { fetchDocs } from "@/lib/content";
+import { fetchFeaturedBlurDataUrls } from "@/lib/getBase64";
 
-export const revalidate = 0;
+// Use ISR with 1 hour revalidation
+export const revalidate = 3600;
 
 export const metadata = {
   title: "About Me",
@@ -18,11 +19,19 @@ export const metadata = {
   },
 };
 
+interface Paragraph {
+  value: string;
+  highlightWords?: string[];
+}
+
+interface Source {
+  url: string;
+  base64?: string;
+}
+
 export default async function AboutMe() {
-  const paragraphRef = `${process.env.NEXT_PUBLIC_USER_UID}/about-me/paragraphs`;
-  const sourcesRef = `${process.env.NEXT_PUBLIC_USER_UID}/featured/about-me`;
-  const paragraphs = await fetchDocs(paragraphRef);
-  const sources = await fetchDocs(sourcesRef);
+  const paragraphs = (await fetchDocs("about/bio")) as unknown as Paragraph[];
+  const sources = (await fetchDocs("about/film-strip")) as unknown as Source[];
 
   const blurData = await fetchFeaturedBlurDataUrls(sources);
 

app/(routes)/contact/page.jsx → app/(routes)/contact/page.tsx

@@ -1,9 +1,10 @@
-import ContactPage from "@/app/components/Contact/ContactPage";
-import Menu from "@/app/components/Menu/Menu/Menu";
-import MemorizePosition from "@/app/components/Work/MemorizePosition";
-import { fetchDoc } from "@/app/service/fetchDocs";
+import ContactPage from "@/app/components/contact/ContactPage";
+import Menu from "@/app/components/menu/Menu";
+import MemorizePosition from "@/app/components/work/MemorizePosition";
+import { fetchDoc } from "@/lib/content";
 
-export const revalidate = 0;
+// Use ISR with 1 hour revalidation
+export const revalidate = 3600;
 
 export const metadata = {
   title: "Contact",
@@ -18,8 +19,7 @@ export const metadata = {
 };
 
 export default async function Contact() {
-  const ref = `${process.env.NEXT_PUBLIC_USER_UID}/contact-info`;
-  const contactInfo = await fetchDoc(ref);
+  const contactInfo = await fetchDoc("contact");
 
   return (
     <>