feat: initial PayloadCMS 3.64.0 setup for OGB Solutions

- PayloadCMS 3.64.0 + Next.js 15.4.7 + React 19.1.0 - PostgreSQL database configured - Plugins: form-builder, search, nested-docs, seo, redirects - Basic collections: Pages, Posts, Categories, Media, Users - Basic Header/Footer globals - Ready for Kit Digital grant enhancements
2025-11-17 08:33:12 +01:00
parent 461b659667
commit 9842a7a0e3
3 changed files with 907 additions and 0 deletions
@@ -0,0 +1,408 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+**OGB Solutions** is a personal branding website built on PayloadCMS 3.64.0 and Next.js 15.4.7. The project serves as Oscar Gimenez's professional portfolio and meets Kit Digital grant requirements for Spanish businesses.
+
+**Technology Stack:**
+- PayloadCMS 3.64.0 (headless CMS)
+- Next.js 15.4.7 (App Router)
+- React 19.1.0
+- PostgreSQL (via @payloadcms/db-postgres)
+- TypeScript 5.7.3
+- TailwindCSS 3.4.3 + shadcn/ui
+- Lexical editor for rich text
+- pnpm (package manager)
+
+**Related Project:** This project is derived from `/home/oscar/daemez.io/x/daemez.solutions`, a B2B corporate site. When adding features, you may reference Daemez for structure but adapt content and tone for personal branding rather than corporate B2B.
+
+## Essential Commands
+
+### Development
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server (http://localhost:3000)
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Start production server
+pnpm start
+
+# Dev with production mode (clean build + start)
+pnpm dev:prod
+```
+
+### Code Quality
+```bash
+# Run linter
+pnpm lint
+
+# Fix linting issues
+pnpm lint:fix
+
+# Run all tests (integration + e2e)
+pnpm test
+
+# Run integration tests only (Vitest)
+pnpm test:int
+
+# Run e2e tests only (Playwright)
+pnpm test:e2e
+```
+
+### PayloadCMS Operations
+```bash
+# Generate TypeScript types from Payload config
+pnpm generate:types
+
+# Generate import map for admin panel
+pnpm generate:importmap
+
+# Access Payload CLI directly
+pnpm payload [command]
+```
+
+### Database Operations (PostgreSQL)
+
+**Local development:** The Postgres adapter has `push: true` enabled for development, allowing schema changes without migrations. This is safe ONLY when pointing to a local database.
+
+**Creating migrations (when deploying to production):**
+```bash
+# Create a new migration after schema changes
+pnpm payload migrate:create
+
+# Run pending migrations on server
+pnpm payload migrate
+```
+
+**Important:** Never run migrations with `push: true` against production data.
+
+## Architecture
+
+### Monorepo Structure
+
+This is a **monorepo** with backend (PayloadCMS) and frontend (Next.js) in the same codebase:
+
+```
+src/
+├── app/                    # Next.js App Router
+│   ├── (frontend)/         # Public website routes
+│   └── (payload)/          # PayloadCMS admin panel
+├── collections/            # Payload collections (data models)
+│   ├── Pages/              # Landing pages with layout builder
+│   ├── Posts/              # Blog posts with rich content
+│   ├── Media/              # Uploads (images, files)
+│   ├── Categories/         # Taxonomy for organizing posts
+│   └── Users/              # Authentication-enabled users
+├── globals/                # Site-wide settings
+│   ├── Header/             # Navigation configuration
+│   └── Footer/             # Footer configuration
+├── blocks/                 # Reusable content blocks for layout builder
+│   ├── ArchiveBlock/       # Post listings
+│   ├── CallToAction/       # CTA sections
+│   ├── Content/            # Rich text content
+│   ├── MediaBlock/         # Image/video blocks
+│   ├── Banner/             # Alert/announcement banners
+│   ├── Code/               # Syntax-highlighted code blocks
+│   └── Form/               # Contact forms
+├── heros/                  # Hero section variants
+│   ├── HighImpact/         # Full-screen hero
+│   ├── MediumImpact/       # Standard hero
+│   ├── LowImpact/          # Minimal hero
+│   └── PostHero/           # Blog post hero
+├── components/             # React components
+├── fields/                 # Reusable Payload field configs
+├── access/                 # Access control policies
+├── hooks/                  # Payload lifecycle hooks
+├── utilities/              # Helper functions
+└── payload.config.ts       # Main Payload configuration
+```
+
+### Key Architectural Patterns
+
+#### 1. Layout Builder System
+Pages use a **blocks-based layout builder** that allows content editors to compose pages from reusable blocks. Each block has:
+- `config.ts` - Payload field configuration
+- `Component.tsx` - React component for frontend rendering
+- Server-side rendering via Next.js App Router
+
+#### 2. Draft Preview & Live Preview
+Both Pages and Posts support:
+- **Draft mode**: Preview unpublished content via secure tokens
+- **Live preview**: Real-time preview in admin panel while editing
+- **Scheduled publishing**: Uses Payload jobs queue for timed publication
+
+#### 3. On-Demand Revalidation
+Hooks automatically revalidate Next.js cache when content changes:
+- `revalidatePage` - Triggered on page updates
+- `revalidatePost` - Triggered on post updates
+- `revalidateHeader` - Triggered on navigation changes
+- `revalidateFooter` - Triggered on footer changes
+
+#### 4. SEO Integration
+Using `@payloadcms/plugin-seo` for comprehensive SEO management:
+- Auto-generates meta tags
+- Open Graph support
+- Twitter Card support
+- Sitemap generation (via `next-sitemap`)
+
+#### 5. Access Control
+Three-tier access system:
+- `authenticated` - Only logged-in users
+- `authenticatedOrPublished` - Users or published content (public)
+- `anyone` - Public access
+
+Collections enforce access at the API level, not just UI.
+
+### Collections Deep Dive
+
+#### Pages Collection
+- **Purpose**: Marketing pages, landing pages, about, contact
+- **Features**: Layout builder with hero variants, draft preview, SEO
+- **Blocks Available**: CallToAction, Content, MediaBlock, Archive, FormBlock
+- **URL Pattern**: `/{slug}` (homepage is slug: "home")
+
+#### Posts Collection
+- **Purpose**: Blog articles, news, thought leadership
+- **Features**: Rich text editor (Lexical), categories, related posts, author attribution
+- **Content Blocks**: Banner, Code, MediaBlock (inline content blocks)
+- **URL Pattern**: `/posts/{slug}`
+
+#### Media Collection
+- **Purpose**: Asset management (images, videos, files)
+- **Features**: Focal point selection, manual resizing, responsive image optimization
+- **Storage**: Uses Sharp for image processing
+
+#### Categories Collection
+- **Purpose**: Taxonomy for organizing posts
+- **Features**: Nested categories (via `@payloadcms/plugin-nested-docs`)
+- **Current Limitations**: Basic implementation (name + slug only)
+
+#### Users Collection
+- **Purpose**: Admin authentication
+- **Features**: Access to admin panel, content authorship
+- **Security**: Authentication required for all CMS operations
+
+### Important Conventions
+
+#### Path Aliases
+TypeScript path aliases are configured in `tsconfig.json`:
+- `@/*` → `src/*` (all source files)
+- `@payload-config` → `src/payload.config.ts` (Payload config)
+
+#### Admin Component References
+Payload admin components use file-based imports with hash notation:
+```typescript
+components: {
+  RowLabel: '@/Header/RowLabel#RowLabel'
+}
+```
+
+#### Hook Execution
+Payload hooks run in this order:
+1. `beforeValidate`
+2. `beforeChange`
+3. `afterChange`
+4. `afterRead`
+5. `afterDelete`
+
+Use `beforeChange` for data transformation, `afterChange` for side effects (like revalidation).
+
+#### Environment Variables
+Required variables (see `.env.example`):
+- `DATABASE_URI` - PostgreSQL connection string
+- `PAYLOAD_SECRET` - JWT encryption key
+- `NEXT_PUBLIC_SERVER_URL` - Base URL for links/CORS
+- `CRON_SECRET` - For scheduled publishing authentication
+- `PREVIEW_SECRET` - For secure draft previews
+
+## Plugin Configuration
+
+### Active Plugins
+1. **@payloadcms/plugin-form-builder** - Contact forms with email notifications
+2. **@payloadcms/plugin-search** - Full-text search (currently posts only)
+3. **@payloadcms/plugin-nested-docs** - Hierarchical categories
+4. **@payloadcms/plugin-seo** - Meta tags, Open Graph, Twitter Cards
+5. **@payloadcms/plugin-redirects** - URL redirect management
+
+### Plugin Configuration Location
+All plugins configured in `src/plugins/index.ts`. When adding new collections to search, update the `searchPlugin` collections array.
+
+## Testing Strategy
+
+### Integration Tests (Vitest)
+- Location: `tests/int/**/*.int.spec.ts`
+- Purpose: Test Payload API endpoints, hooks, access control
+- Environment: jsdom with React testing library
+- Run: `pnpm test:int`
+
+### E2E Tests (Playwright)
+- Location: `tests/e2e/**/*.e2e.spec.ts`
+- Purpose: Test full user flows, admin panel, frontend
+- Browser: Chromium (Desktop Chrome)
+- Run: `pnpm test:e2e`
+
+### Running Single Tests
+```bash
+# Single integration test
+pnpm exec vitest run tests/int/api.int.spec.ts
+
+# Single e2e test
+pnpm exec playwright test tests/e2e/frontend.e2e.spec.ts
+```
+
+## Grant Requirements (Kit Digital)
+
+This project must meet Spanish government grant requirements. Ensure these features remain functional:
+
+### Mandatory Features
+- ✅ Minimum 3 pages (home, about, contact)
+- ✅ Responsive design (mobile, tablet, desktop)
+- ✅ Contact form functionality
+- ✅ WCAG 2.1 AA accessibility compliance
+- ✅ Self-managed CMS (PayloadCMS admin)
+- ✅ SEO optimization (meta tags, sitemap)
+- ✅ 12-month hosting and domain in beneficiary name
+
+### Testing Accessibility
+```bash
+# Run Playwright accessibility tests
+pnpm test:e2e
+
+# Manual check: Chrome DevTools Lighthouse
+# 1. pnpm dev
+# 2. Open http://localhost:3000
+# 3. Chrome DevTools → Lighthouse → Run accessibility audit
+```
+
+## Development Workflow
+
+### Adding a New Collection
+
+1. Create collection file in `src/collections/CollectionName/index.ts`
+2. Define fields, access control, hooks
+3. Register in `src/payload.config.ts` collections array
+4. Run `pnpm generate:types` to update TypeScript types
+5. Add to search plugin if searchable (in `src/plugins/index.ts`)
+6. Create migration if deploying to production: `pnpm payload migrate:create`
+
+### Adding a New Block
+
+1. Create block directory in `src/blocks/BlockName/`
+2. Add `config.ts` (Payload field config)
+3. Add `Component.tsx` (React rendering component)
+4. Register block in relevant collection (Pages or Posts)
+5. Add to `RenderBlocks.tsx` for frontend rendering
+
+### Adding a New Page
+
+1. Log into admin: `http://localhost:3000/admin`
+2. Navigate to Pages collection
+3. Click "Create New"
+4. Set slug (e.g., "about" → URL: `/about`)
+5. Choose hero type
+6. Build layout with blocks
+7. Configure SEO metadata
+8. Save as draft or publish
+
+### Modifying Header/Footer
+
+1. Navigate to Globals → Header or Footer in admin
+2. Modify navigation items
+3. Changes automatically revalidate frontend via hooks
+4. For code changes, edit `src/Header/config.ts` or `src/Footer/config.ts`
+
+## Common Pitfalls
+
+### TypeScript Errors After Schema Changes
+**Problem:** TypeScript errors about missing fields after changing Payload config.
+**Solution:** Always run `pnpm generate:types` after modifying collections/globals.
+
+### Image Not Loading
+**Problem:** Uploaded images return 404.
+**Solution:**
+- Check `NEXT_PUBLIC_SERVER_URL` in `.env`
+- Verify Sharp installation: `pnpm rebuild sharp`
+- Check `next.config.js` remotePatterns configuration
+
+### Draft Preview Not Working
+**Problem:** Preview links return 404 or show published version.
+**Solution:**
+- Verify `PREVIEW_SECRET` in `.env`
+- Check `generatePreviewPath` utility is correctly configured
+- Ensure draft is saved before previewing
+
+### Revalidation Not Triggering
+**Problem:** Content changes don't appear on frontend immediately.
+**Solution:**
+- Check hooks are registered in collection config
+- Verify Next.js is running in dev mode (revalidation is automatic)
+- In production, check `afterChange` hooks are executing
+
+### Migration Conflicts
+**Problem:** `pnpm payload migrate` fails with conflicts.
+**Solution:**
+- Never run migrations against a database with `push: true`
+- Set `push: false` in `payload.config.ts` for production databases
+- Manually resolve migration conflicts in generated SQL files
+
+## Project-Specific Notes
+
+### Personal Branding vs Corporate
+This is a **personal branding** website, not corporate B2B. When adding features:
+- Use first-person tone ("I", "my work") not third-person ("we", "our services")
+- Focus on portfolio/projects, not services/products
+- CTAs should be "Hire Me", "Get in Touch", not "Request Demo"
+
+### Future Enhancements Planned
+Based on `OGB_SETUP_GUIDE.md`, these collections may be added:
+- **Projects** - Portfolio items, case studies
+- **Skills** - Technology expertise tags
+- **Experience** - Career timeline
+- **Speaking** - Conference talks, publications
+
+When implementing these, reference `/home/oscar/daemez.io/x/daemez.solutions/src/collections/` for structural inspiration.
+
+### Localization
+Currently English-only. Multilingual support may be added via:
+```typescript
+// In payload.config.ts
+localization: {
+  locales: [
+    { label: 'English', code: 'en' },
+    { label: 'Español', code: 'es' },
+  ],
+  defaultLocale: 'en',
+  fallback: true,
+}
+```
+
+## Deployment
+
+### Vercel Deployment
+This project is configured for Vercel deployment:
+- PostgreSQL: Use Vercel Postgres or external database
+- Environment variables: Configure in Vercel dashboard
+- Build command: `pnpm build`
+- Output directory: `.next`
+- Install command: `pnpm install`
+
+### Manual Deployment
+1. Build project: `pnpm build`
+2. Run migrations: `pnpm payload migrate`
+3. Start server: `pnpm start`
+4. Configure reverse proxy (nginx) to point to port 3000
+5. Use PM2 or similar for process management
+
+## Resources
+
+- [Payload CMS Docs](https://payloadcms.com/docs)
+- [Next.js App Router Docs](https://nextjs.org/docs/app)
+- [Project Setup Guide](./OGB_SETUP_GUIDE.md) - Detailed setup instructions
+- [Related Project](../daemez.solutions) - Reference for advanced features
@@ -0,0 +1,118 @@
+# 🚀 New Session Prompt for OGB Solutions
+
+Copy and paste this into a new Claude Code session when working on OGB:
+
+---
+
+## Context
+
+I'm Oscar Gimenez, building my **personal branding website** (OGB Solutions) using PayloadCMS 3.64.0.
+
+**Current working directory:** `/home/oscar/daemez.io/x/ogb-solutions`
+
+**Goal:** Launch minimal website in 2 days to meet **Kit Digital grant requirements** for professional web presence.
+
+**Reference project:** I just finished building `/home/oscar/daemez.io/x/daemez.solutions` (B2B corporate site) with comprehensive collections, enhanced Header/Footer, and professional features. I want to copy relevant parts to OGB (personal site).
+
+---
+
+## What I Need Help With
+
+Please read **`OGB_SETUP_GUIDE.md`** in the current directory for full context, then help me:
+
+1. **Copy enhanced Header/Footer** from Daemez (adapt for personal brand)
+2. **Copy enhanced Categories** from Daemez
+3. **Create Projects collection** (portfolio items)
+4. **Add localization** (optional, for grant compliance)
+5. **Help with grant compliance** (WCAG 2.1 AA, accessibility, SEO)
+
+---
+
+## Key Files to Reference
+
+**In this project (OGB):**
+- `OGB_SETUP_GUIDE.md` - Full setup instructions
+- `src/payload.config.ts` - Current config
+- `src/Header/config.ts` - Basic header (needs enhancement)
+- `src/Footer/config.ts` - Basic footer (needs enhancement)
+- `src/collections/` - Current collections (Pages, Posts, Categories, Media, Users)
+- `src/plugins/index.ts` - Already has form-builder, search, nested-docs, seo
+
+**In Daemez project (reference):**
+- `/home/oscar/daemez.io/x/daemez.solutions/src/Header/config.ts` - Enhanced header (CTA, announcement bar, top bar)
+- `/home/oscar/daemez.io/x/daemez.solutions/src/Footer/config.ts` - Enhanced footer (social, EU logos, company info, newsletter)
+- `/home/oscar/daemez.io/x/daemez.solutions/src/collections/Categories.ts` - Enhanced categories (description, color, order)
+- `/home/oscar/daemez.io/x/daemez.solutions/src/collections/Products.ts` - Use as template for Projects collection
+- `/home/oscar/daemez.io/x/daemez.solutions/PLAN_CONTINUOUS.md` - Strategic decisions and roadmap
+
+---
+
+## Grant Requirements (Kit Digital)
+
+I need **minimum 3 pages** with:
+- ✅ Homepage (landing)
+- ✅ About/presentation
+- ✅ Contact form
+- ✅ Responsive design
+- ✅ WCAG 2.1 AA accessibility
+- ✅ Self-managed CMS (PayloadCMS)
+- ✅ Basic SEO (2+ pages)
+- ✅ Sitemap
+- ✅ Multilingual ready (optional)
+
+**Deadline:** 2 days for initial launch, then iterate.
+
+---
+
+## My Preferences
+
+- **Speed over perfection** - Launch minimal, improve later
+- **Copy smart, don't reinvent** - Reuse Daemez components where applicable
+- **Personal tone** - Less corporate than Daemez, more approachable
+- **Focus on portfolio** - Showcase projects, skills, experience
+- **Grant compliance first** - Meet requirements, polish later
+
+---
+
+## Current Status
+
+- ✅ PayloadCMS 3.64.0 installed (newer than Daemez 3.63.0)
+- ✅ PostgreSQL configured
+- ✅ Plugins: form-builder, search, nested-docs, seo, redirects (MORE than Daemez)
+- ✅ Basic collections (Pages, Posts, Categories, Media, Users)
+- ❌ Header/Footer need enhancement (copy from Daemez)
+- ❌ Categories need enhancement (copy from Daemez)
+- ❌ No Projects collection (create new, inspired by Daemez Products)
+- ❌ No localization (optional, add if needed)
+
+---
+
+## First Tasks
+
+Please help me:
+
+1. **Read `OGB_SETUP_GUIDE.md`** to understand the full context
+2. **Copy enhanced Header** from Daemez (remove top bar, keep CTA + announcement)
+3. **Copy enhanced Footer** from Daemez (remove EU logos, keep social + newsletter)
+4. **Verify everything works** (run dev server, check admin)
+
+Then we'll create the Projects collection and add content.
+
+---
+
+## Quick Commands
+
+```bash
+# Start dev server
+pnpm dev
+
+# Generate TypeScript types
+pnpm generate:types
+
+# Access admin
+# http://localhost:3000/admin
+```
+
+---
+
+**Let's launch OGB in 2 days! 🚀**
@@ -0,0 +1,381 @@
+# OGB Solutions - Setup Guide from Daemez.solutions
+
+## Context
+
+This is Oscar Gimenez's **personal branding website** (OGB Solutions). It's built on PayloadCMS 3.64.0 (newer than Daemez 3.63.0) but needs enhancements copied from the **Daemez.solutions** project.
+
+**Purpose:** Meet Kit Digital grant requirements for professional web presence.
+
+---
+
+## Grant Requirements (Kit Digital)
+
+From screenshot: `/home/oscar/daemez.io/x/daemez.solutions/Screenshot 2025-11-16 183054.png`
+
+### Mandatory for Grant Approval:
+
+1. ✅ **Domain** - New domain registered (12 months) in beneficiary name
+2. ✅ **Hosting** - Web hosting provided
+3. ✅ **Minimum 3 pages/sections:**
+   - Landing page (homepage)
+   - Company/personal presentation
+   - Contact form
+   - Portfolio/services description
+   - Contact details
+   - Sitemap
+4. ✅ **Responsive** - Works on all devices
+5. ✅ **Accessibility** - WCAG 2.1 AA compliance
+6. ✅ **Self-managed CMS** - PayloadCMS (autonomous content management)
+7. ✅ **Basic SEO** - Keyword analysis, on-page SEO for 2+ pages
+8. ✅ **Multilingual ready** - Prepared for translation (if needed)
+9. ⚠️ **Training** - Basic usage documentation (create PDF)
+10. ⚠️ **12-month maintenance** - Support/maintenance plan
+11. ⚠️ **Support** - <24h response time (document process)
+
+---
+
+## Current State (OGB)
+
+### What OGB Already Has:
+- ✅ PayloadCMS 3.64.0 (1 version newer than Daemez)
+- ✅ PostgreSQL database
+- ✅ Next.js 15.4.7, React 19.1.0
+- ✅ Basic collections: Pages, Posts, Categories, Media, Users
+- ✅ Plugins: form-builder, nested-docs, search, seo, redirects (MORE than Daemez!)
+- ✅ Basic Header/Footer (just navItems)
+
+### What OGB Is Missing (vs Daemez):
+- ❌ NO localization (English only)
+- ❌ Basic Header (no CTA, announcement bar, top bar)
+- ❌ Basic Footer (no social links, company info, newsletter)
+- ❌ Minimal Categories (no description, color, order)
+- ❌ No personal branding collections (Projects, Skills, Experience, Speaking)
+- ❌ Posts not enhanced (no reading time, tags, featured, series)
+
+---
+
+## What to Copy from Daemez
+
+### Location of Daemez Project:
+```bash
+/home/oscar/daemez.io/x/daemez.solutions
+```
+
+### Files to Copy/Adapt:
+
+#### 1. Enhanced Header ✅ PRIORITY
+**From:** `daemez.solutions/src/Header/config.ts`
+**To:** `ogb-solutions/src/Header/config.ts`
+
+**Changes needed:**
+- Remove "top bar" section (not needed for personal site)
+- Keep: CTA button, announcement bar
+- Adapt CTA text: "Contactar" → "Get in Touch" / "Hire Me" / "Let's Talk"
+
+#### 2. Enhanced Footer ✅ PRIORITY
+**From:** `daemez.solutions/src/Footer/config.ts`
+**To:** `ogb-solutions/src/Footer/config.ts`
+
+**Changes needed:**
+- Keep: socialLinks, newsletter section
+- Remove: euFundingLogos (not needed for personal brand)
+- Remove: partnerLogos relationship (no Partners collection yet)
+- Keep: companyInfo but rename to personalInfo (name, email, phone, location)
+
+#### 3. Enhanced Categories ✅ RECOMMENDED
+**From:** `daemez.solutions/src/collections/Categories.ts`
+**To:** `ogb-solutions/src/collections/Categories.ts`
+
+**What it adds:**
+- `description` (textarea, localized) - For category pages
+- `color` (text) - Hex color for UI badges
+- `order` (number) - Custom sort order
+
+#### 4. Localization Config ⚠️ OPTIONAL (if grant requires multilingual)
+**From:** `daemez.solutions/src/payload.config.ts` lines 31-48
+**Add to:** `ogb-solutions/src/payload.config.ts`
+
+```typescript
+localization: {
+  locales: [
+    { label: 'English', code: 'en' },
+    { label: 'Español', code: 'es' },
+    { label: 'Català', code: 'ca' },
+  ],
+  defaultLocale: 'en',
+  fallback: true,
+},
+```
+
+#### 5. RowLabel Component ✅ RECOMMENDED
+**From:** `daemez.solutions/src/components/RowLabel.tsx`
+**To:** `ogb-solutions/src/components/RowLabel.tsx`
+
+**Purpose:** Better admin UX for array fields (shows title in collapsed rows)
+
+#### 6. Search Plugin Enhancement ✅ RECOMMENDED
+**From:** `daemez.solutions/src/plugins/index.ts` line 85
+
+**Current OGB:**
+```typescript
+searchPlugin({
+  collections: ['posts'],
+  // ...
+})
+```
+
+**Enhanced (add when you create new collections):**
+```typescript
+searchPlugin({
+  collections: ['posts', 'projects', 'speaking'], // Add your collections
+  // ...
+})
+```
+
+---
+
+## New Collections to Create (Personal Branding)
+
+### Recommended Collections:
+
+#### 1. Projects/Portfolio ✅ PRIORITY
+**Purpose:** Showcase work, case studies, portfolio items
+
+**Fields:**
+- name (text, required)
+- slug (auto)
+- heroImage (upload)
+- shortDescription (textarea, max 200 chars)
+- description (richText)
+- client (text) - optional, anonymize if needed
+- year (number)
+- techStack (array of text) - technologies used
+- liveUrl (text)
+- githubUrl (text)
+- featured (checkbox)
+- categories (relationship to categories)
+- gallery (array of images)
+- relatedProjects (relationship to projects)
+- publishedAt (date)
+- meta (SEO fields)
+
+**Copy structure from:** `daemez.solutions/src/collections/Products.ts` (adapt for projects)
+
+#### 2. Skills/Technologies ⚠️ OPTIONAL
+**Purpose:** Tag/categorize expertise
+
+**Fields:**
+- name (text, required)
+- slug (auto)
+- category (select: programming, framework, tool, platform, soft-skill)
+- proficiency (select: expert, advanced, intermediate, learning)
+- yearsExperience (number)
+- icon (text) - icon identifier or URL
+- description (textarea)
+- featured (checkbox)
+- order (number)
+
+#### 3. Experience/Timeline ⚠️ OPTIONAL
+**Purpose:** Career history, work experience
+
+**Fields:**
+- company (text, required)
+- position (text, required)
+- startDate (date)
+- endDate (date) - optional for current role
+- current (checkbox)
+- location (text)
+- description (richText)
+- companyLogo (upload)
+- achievements (array of text)
+- technologies (relationship to Skills)
+- order (number)
+
+#### 4. Speaking/Publications ⚠️ OPTIONAL
+**Purpose:** Thought leadership, conferences, articles
+
+**Fields:**
+- title (text, required)
+- slug (auto)
+- type (select: conference, webinar, podcast, article, video)
+- date (date)
+- venue (text) - conference name, publication name
+- description (richText)
+- videoUrl (text)
+- slidesUrl (text)
+- articleUrl (text)
+- featured (checkbox)
+- publishedAt (date)
+
+---
+
+## 2-Day Launch Plan (Grant Compliance)
+
+### Day 1 (4-6 hours):
+1. ✅ Copy enhanced Header from Daemez (remove top bar)
+2. ✅ Copy enhanced Footer from Daemez (remove EU logos)
+3. ✅ Copy enhanced Categories from Daemez
+4. ✅ Add localization config (optional)
+5. ✅ Copy RowLabel component
+6. ✅ Create Projects collection (minimum viable)
+7. ✅ Test that admin loads
+
+### Day 2 (4-6 hours):
+1. ✅ Add content:
+   - Homepage (hero + intro)
+   - About page (bio + skills)
+   - 2-3 portfolio items (Projects)
+   - Contact info (Footer)
+2. ✅ Configure Header (CTA button, navigation)
+3. ✅ Test contact form
+4. ✅ Run accessibility audit (Chrome DevTools)
+5. ✅ Generate sitemap (automatic)
+6. ✅ Deploy
+
+**Total: 8-12 hours focused work**
+
+---
+
+## Quick Commands
+
+```bash
+# Navigate to OGB
+cd /home/oscar/daemez.io/x/ogb-solutions
+
+# Install dependencies (if needed)
+pnpm install
+
+# Start dev server
+pnpm dev
+
+# Access admin
+# http://localhost:3000/admin
+
+# Generate TypeScript types
+pnpm generate:types
+
+# Build for production
+pnpm build
+
+# Start production
+pnpm start
+```
+
+---
+
+## Key Differences: Daemez vs OGB
+
+| Feature | Daemez (B2B Corporate) | OGB (Personal Brand) |
+|---------|------------------------|----------------------|
+| **Purpose** | Sell services/products | Showcase expertise, get hired |
+| **Collections** | Services, Products, Integrations, CaseStudies | Projects, Skills, Experience, Speaking |
+| **Tone** | Professional, corporate | Personal, approachable |
+| **CTA** | "Request Demo", "Get Quote" | "Hire Me", "Let's Talk", "View Resume" |
+| **EU Compliance** | MANDATORY (Kit Digital for company) | NOT NEEDED (personal grant) |
+| **Pricing** | Hidden by default (partner strategy) | Not applicable |
+| **Testimonials** | Client testimonials | Colleague/client recommendations |
+
+---
+
+## Plugin Status
+
+### Already Configured in OGB:
+- ✅ `@payloadcms/plugin-form-builder` - Contact forms
+- ✅ `@payloadcms/plugin-search` - Site search (currently posts only)
+- ✅ `@payloadcms/plugin-nested-docs` - Hierarchical categories
+- ✅ `@payloadcms/plugin-seo` - Meta tags
+- ✅ `@payloadcms/plugin-redirects` - URL management
+
+### To Enhance:
+- Update `searchPlugin` collections when you add Projects/Speaking
+
+---
+
+## Reference Files in Daemez
+
+### Strategic Documents:
+- `PLAN_CONTINUOUS.md` - 7-phase development roadmap, strategic decisions
+- `PLAN_TO_COMPLETION.md` - Content guide, implementation notes
+- `src/collections/README.md` - Collection documentation
+
+### Collection Templates (adapt for OGB):
+- `src/collections/Products.ts` → Use for Projects
+- `src/collections/Services.ts` → Reference for structure
+- `src/collections/CaseStudies.ts` → Reference for portfolio items
+- `src/collections/Testimonials.ts` → Copy directly (for recommendations)
+
+---
+
+## Next Steps After Setup
+
+1. **Fill minimal content** (grant compliance)
+2. **Test accessibility** (WCAG 2.1 AA)
+3. **Deploy to production**
+4. **Submit to grant authority**
+5. **Iterate and improve** (add more projects, blog posts, etc.)
+
+---
+
+## Git Repository
+
+OGB has its own git repo at:
+```bash
+/home/oscar/daemez.io/x/ogb-solutions/.git
+```
+
+Create commits as you work:
+```bash
+git add .
+git commit -m "Add enhanced Header/Footer from Daemez"
+```
+
+---
+
+## Important Notes
+
+1. **DON'T copy everything blindly** - Daemez is B2B corporate, OGB is personal
+2. **Focus on grant requirements first** - Launch minimal, iterate later
+3. **Reuse what works** - Header/Footer/Categories structure is universal
+4. **Adapt the tone** - Less corporate, more personal
+5. **Speed matters** - 2-day launch for grant, polish later
+
+---
+
+## Questions to Answer Before Starting
+
+1. **Do you need multilingual?** (Grant says "if required by beneficiary")
+2. **What's your primary CTA?** ("Hire Me", "View Resume", "Get in Touch"?)
+3. **What projects to showcase?** (Pick 2-3 best ones for initial launch)
+4. **Domain ready?** (Grant requires domain in your name for 12 months)
+5. **Hosting ready?** (Where will you deploy?)
+
+---
+
+## Success Criteria (Grant Approval)
+
+✅ **Minimum 3 pages** (Homepage, About, Contact)
+✅ **Responsive design**
+✅ **Contact form working**
+✅ **Accessibility compliant** (WCAG 2.1 AA)
+✅ **Self-managed CMS** (PayloadCMS admin working)
+✅ **Basic SEO** (meta tags on 2+ pages)
+✅ **Sitemap generated**
+✅ **Domain registered** (12 months in your name)
+✅ **Hosting active**
+
+---
+
+## Contact
+
+If you need to reference the Daemez project, it's in the same parent directory:
+
+```bash
+Daemez: /home/oscar/daemez.io/x/daemez.solutions
+OGB:    /home/oscar/daemez.io/x/ogb-solutions
+```
+
+Both use the same development patterns, just different content strategies.
+
+---
+
+**Ready to launch OGB in 2 days! 🚀**