ogb-solutions/OGB_SETUP_GUIDE.md

# 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! 🚀**