144 lines
4.5 KiB
Markdown
144 lines
4.5 KiB
Markdown
# 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:
|
|
```typescript
|
|
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`
|
|
|
|
```typescript
|
|
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`:
|
|
|
|
```typescript
|
|
// 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`:
|
|
|
|
```typescript
|
|
// 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.
|