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:

/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

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:

searchPlugin({
  collections: ['posts'],
  // ...
})

Enhanced (add when you create new collections):

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

# 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:

/home/oscar/daemez.io/x/ogb-solutions/.git

Create commits as you work:

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:

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