Configuration File:
config/pages/jobs.tsOverview
The jobs/careers page allows you to:- Showcase your team with photos and bios
- Highlight company culture and values
- Display benefits and perks
- List job openings with full descriptions
config/pages/jobs.ts
Quick Start
1
Edit the config file
Open
config/pages/jobs.ts:2
Add team members and job openings
Update team member profiles and open positions
3
Test it
Configuration Structure
Hero Section
Team Section
Generate avatars using DiceBear API:3b82f6- Blue10b981- Green8b5cf6- Purplef59e0b- Amberef4444- Redec4899- Pink06b6d4- Cyana855f7- Purple
seed parameter to change the avatar style (use the personâs name).
Culture Section
Perks Section
Job Openings
id- URL-friendly identifier (lowercase with hyphens)title- Job titledepartment- Engineering, Operations, Support, Marketing, etc.location- Remote, City Name, or Hybridtype- Full-time, Part-time, Contractdescription- Brief overview (1-2 sentences)responsibilities- Array of key dutiesrequirements- Array of required qualificationsbonus- Array of nice-to-have skills (optional)
Complete Example
CTA Section
The bottom call-to-action for speculative applications:title- Main headingsubtitle- Supporting textemail- Email address for applications (links to mailto:)
Best Practices
Team Section
- Real photos or avatars - Use DiceBear for consistency
- Short bios - 1-2 sentences max
- Diverse roles - Show all departments
Culture
- Authentic values - Donât copy generic startup values
- Specific examples - âWe deploy dailyâ vs âWe move fastâ
- 5-6 values - Not too many
Job Openings
- Clear titles - âSenior Backend Engineerâ not âCode Ninjaâ
- Realistic requirements - Donât ask for 10 years in 5-year-old tech
- Specific tech stack - List actual tools you use
- Bonus section - Shows nice-to-haves, not dealbreakers
Perks
- Concrete benefits - â$2,000 learning budgetâ not âgrowth opportunitiesâ
- Important first - Salary, health, remote work
- 6-8 items - Cover main benefits
Troubleshooting
Avatars not loading
Check DiceBear URL format:%20.
Open positions count mismatch
Updatehero.openPositions to match number of items in openings array.

