Adding New People to the Team Page

This guide explains how to add new team members to the website. The system is designed to automatically display people based on existing component files.

Current System

Currently, only Adnan Fatayerji appears on the people page because only his component exists in src/components/people/People_Adnan.tsx.

How to Add a New Person

To add a new team member, follow these steps:

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">
    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. Update the People Data Registry

Add the new person's data import to src/lib/peopleData.ts:

// Add import
import { data as johnData } from '@/components/people/People_John'

// Add to getAllPeopleData function
export function getAllPeopleData(): PersonData[] {
  const allPeopleData: PersonData[] = []

  try {
    allPeopleData.push(...adnanData)
    allPeopleData.push(...johnData) // Add this line
  } catch (error) {
    console.error('Error loading people data:', error)
  }

  return allPeopleData
}

4. Add Person's Images

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

john_doe.jpg (or .png, .jpeg)

Template System Benefits

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

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

Customizing the Template

To change styling for all people pages (like image size), edit src/components/PersonTemplate.tsx:

// Example: To change image aspect ratio for all people
<img
  alt={personData.name}
  src={personData.imageUrl}
  width={1184}
  height={1376}
  className="aspect-square w-full rounded-lg object-cover shadow-lg lg:aspect-auto" // Changed from aspect-12/7 to aspect-square
/>

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
Naming Convention:
- Component files: People_[FirstName].tsx
- Page directories: [First_Last]/page.tsx
- Image directories: first_last/
Automatic Display: Once all steps are completed, the person will automatically appear on the main people page
URL Structure: Individual pages will be accessible at /people/First_Last

Current Status

✅ Adnan Fatayerji - Complete (component, page, images)
❌ All other team members - Need to be added following the steps above

The system is designed to be scalable - each new person added will automatically appear on the team page without needing to modify the main PeopleHero component.

4.5 KiB Raw Blame History