www_ourworld_new/docs/adding-people.md

Adding New People to the Team Page

This guide explains how to add new team members to the website. The system now features automated discovery of people components, so you no longer need to manually update imports!

🚀 Quick Start (Automated Workflow)

1. Create the Person's Component

Create a new file: src/components/people/People_[Name].tsx

Example for John Doe:

import { PersonTemplate } from '@/components/PersonTemplate'

export const data = [
  {
    name: 'John Doe',
    role: 'Software Engineer',
    imageUrl: '/images/people/john_doe/john_doe.jpg',
    xUrl: '#',
    linkedinUrl: 'https://www.linkedin.com/in/johndoe/',
  },
]

const biography = `
  <p class="text-lg/7">
    John is a passionate software engineer with expertise in modern web technologies. 
    He specializes in building scalable applications and has a keen interest in user experience design.
  </p>
  <p class="mt-5 text-lg/7">
    With over 5 years of experience in the tech industry, John has worked on various projects 
    ranging from startups to enterprise applications. He believes in writing clean, maintainable code 
    and is always eager to learn new technologies.
  </p>
`

export function People_John() {
  return <PersonTemplate personData={data[0]} biography={biography} />
}

2. Create the Person's Page Route

Create a directory and page: src/app/people/John_Doe/page.tsx

import { CallToAction } from '@/components/CallToAction'
import { Faqs } from '@/components/Faqs'
import { Footer } from '@/components/Footer'
import { Header_darkbg } from '@/components/Header_darkbg'
import { People_John } from '@/components/people/People_John'

export default function JohnDoePage() {
  return (
    <>
      <Header_darkbg />
      <main>
        <People_John />
        <CallToAction />
        <Faqs />
      </main>
      <Footer />
    </>
  )
}

3. Add Person's Images

Add the person's images to: public/images/people/john_doe/

• john_doe.jpg (or .png, .jpeg)

4. 🎉 Automatic Integration

That's it! The person will automatically appear on the people page when you build the project. The people data registry is automatically updated during the build process.

If you want to test locally during development, you can manually run:

npm run generate-people-data

🔧 How the Automation Works

The system now includes a Node.js script (scripts/generate-people-data.js) that:

1. Scans the src/components/people/ directory for all People_*.tsx files
2. Generates the necessary imports and exports in src/lib/peopleData.ts
3. Creates both synchronous and asynchronous data loading functions
4. Eliminates the need for manual import management

Available Commands

• npm run generate-people-data - Manually regenerate the people data registry (for development testing)
• npm run dev - Start the development server
• npm run build - Build for production (automatically runs people data generation first)

📁 File Structure

src/
├── components/people/
│   ├── People_Adnan.tsx      ✅ Auto-discovered
│   ├── People_Kristof.tsx    ✅ Auto-discovered
│   └── People_John.tsx       ✅ Auto-discovered (after running script)
├── app/people/
│   ├── Adnan_Fatayerji/page.tsx
│   ├── kristof_de_spiegeleer/page.tsx
│   └── John_Doe/page.tsx
├── lib/
│   └── peopleData.ts         🤖 Auto-generated
└── ...

🎯 Benefits of the New System

✅ No Manual Imports

• Add a new People_*.tsx file
• Run npm run generate-people-data
• Done! No need to edit peopleData.ts manually

✅ Error Prevention

• No more forgotten imports
• No more typos in import statements
• Automatic error handling for each component

✅ Scalable

• Add as many people as needed
• System automatically discovers all components
• Consistent naming convention enforced

✅ Developer Friendly

• Clear feedback when running the script
• Lists all discovered components
• Easy to debug and maintain

🔄 Migration from Manual System

If you have existing people components that were manually imported:

1. Ensure all components follow the People_*.tsx naming convention
2. Run npm run generate-people-data
3. The script will automatically discover and include all existing components

📋 Naming Conventions

• Component files: People_[FirstName].tsx (e.g., People_John.tsx)
• Page directories: [First_Last]/page.tsx (e.g., John_Doe/page.tsx)
• Image directories: first_last/ (e.g., john_doe/)
• Export function: People_[FirstName] (e.g., People_John)

🚨 Important Notes

• Data Structure: Each person component must export a data array with the exact structure shown above
• Biography Format: Use HTML string for rich text formatting in the biography
• Template Usage: All person components should use PersonTemplate for consistency
• Automatic Discovery: Components are discovered by filename pattern People_*.tsx
• Script Execution: Always run npm run generate-people-data after adding new people
• URL Structure: Individual pages will be accessible at /people/First_Last

🎨 Template System Benefits

The system uses a centralized template (PersonTemplate.tsx) for all individual people pages:

• Global Styling: Change image size, layout, or styling in PersonTemplate.tsx and it applies to ALL people's profiles
• Consistency: All people pages have the same structure and design
• Easy Maintenance: Update the template once instead of editing each person's component individually
• Responsive Design: Template handles all responsive breakpoints uniformly

📊 Current Status

• ✅ Adnan Fatayerji - Complete (auto-discovered)
• ✅ Kristof De Spiegeleer - Complete (auto-discovered)
• ✅ Automation System - Active and ready for new additions

🔮 Future Enhancements

The automation system can be extended to:

• Auto-generate page routes
• Validate image file existence
• Check for required data fields
• Generate TypeScript types from component data
• Create development-time file watchers for instant updates

---

🎉 The new automated system makes adding team members faster, safer, and more maintainable than ever before!