add people
This commit is contained in:
143
docs/adding-people.md
Normal file
143
docs/adding-people.md
Normal file
@@ -0,0 +1,143 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user