Build and maintain a multilingual (EN/DE/AR) CV website with Next.js, React, TypeScript, and PDF generation. Full RTL support and print optimization.
A specialized skill for building and maintaining multilingual personal CV/resume websites with Next.js 15, React 19, and TypeScript. Supports English, German, and Arabic with full RTL support, optimized for both web viewing and printing/PDF generation.
This skill helps you build, maintain, and extend a professional CV website with:
Before making any changes:
When updating work experience, education, skills, or projects:
1. **Update resume data** in `src/data/resume-data.tsx`:
```typescript
{
company: "Company Name",
title: "Job Title",
start: "2023",
end: "Present",
description: "What I did here"
}
```
2. **Add translations** to all three message files (`en.ts`, `de.ts`, `ar.ts`):
```typescript
// en.ts
work_company_key: "Company Name",
work_company_key_title: "Job Title",
work_company_key_description: "What I did here",
```
3. **Update mapping logic** in `src/app/page.tsx`:
```typescript
const resumeWork = RESUME_DATA.work.find(w =>
w.company.toLowerCase().includes(key === 'company_key' ? 'company' : 'other')
);
```
4. **Update PDF components** in `src/components/pdf/CVDocument.tsx` if the structure changes
When creating or modifying components:
1. **Get locale context**:
```typescript
const { locale } = useLanguage();
const isArabic = locale === 'ar';
```
2. **Apply conditional RTL classes**:
```typescript
<div className={cn(
"flex gap-4",
isArabic && "flex-row-reverse text-right"
)}>
```
3. **Common RTL patterns**:
- Text alignment: `isArabic ? "text-right" : "text-left"`
- Flex direction: `isArabic && "flex-row-reverse"`
- Margins: `isArabic ? "ml-4" : "mr-4"`
- Typography: `isArabic && "font-arabic"`
When styling components:
1. **Hide interactive elements**:
```typescript
<button className="print:hidden">Download PDF</button>
```
2. **Adjust sizing for print**:
```typescript
<h1 className="text-3xl print:text-[18px]">Title</h1>
```
3. **Control page breaks**:
```typescript
<section className="print-force-new-page">Content</section>
```
4. **Test both screen and print**:
- Run `npm run dev`
- Open browser print preview (Cmd/Ctrl+P)
- Verify layout, spacing, and page breaks
When modifying PDF output:
1. **Update factory pattern** in `src/components/pdf/createCVDocument.tsx`:
```typescript
export function createCVDocument(locale: string) {
const messages = locale === 'ar' ? ar : locale === 'de' ? de : en;
return <CVDocument messages={messages} locale={locale} />;
}
```
2. **Update API route** in `src/app/api/generate-pdf/route.ts` if response format changes
3. **Test all locales**:
```
http://localhost:3000/api/generate-pdf?locale=en
http://localhost:3000/api/generate-pdf?locale=de
http://localhost:3000/api/generate-pdf?locale=ar
```
To add a new locale (e.g., French):
1. **Add locale to config** in `src/lib/i18n.ts`:
```typescript
export const locales = ['en', 'de', 'ar', 'fr'] as const;
export const localeNames = {
en: 'English', de: 'Deutsch', ar: 'العربية', fr: 'Français'
};
```
2. **Create translation file** `src/messages/fr.ts` (copy structure from `en.ts`)
3. **Update LanguageContext** in `src/contexts/LanguageContext.tsx` to load new message file
4. **Update PDF factory** in `src/components/pdf/createCVDocument.tsx`
5. **Add font support** if needed (non-Latin scripts) in `tailwind.config.js`
Run these commands during development:
```bash
npm run dev
npm run build
npm run lint
```
Before marking work complete, verify:
1. Add to `RESUME_DATA.work` array in `src/data/resume-data.tsx`
2. Add keys to `en.ts`, `de.ts`, `ar.ts` (follow `work_*` pattern)
3. Update mapping in `src/app/page.tsx` (add company pattern)
4. Update `CVDocument.tsx` if rendering logic changes
1. Add to `RESUME_DATA.skills` in `src/data/resume-data.tsx`
2. Add translation keys (`skills_category`, `skills_category_items`)
3. Render in both web (`src/app/page.tsx`) and PDF (`CVDocument.tsx`)
1. Edit print-specific classes in components (use `print:` prefix)
2. Adjust custom print utilities in `globals.css` (`@media print`)
3. Test with browser print preview (Cmd/Ctrl+P)
1. Update HSL color variables in `src/app/globals.css`
2. Maintain separate light/dark mode values
3. Test both modes and print output
| Path | Purpose |
|------|---------|
| `src/data/resume-data.tsx` | Single source of truth for all resume content |
| `src/messages/*.ts` | Translation files (en, de, ar) |
| `src/contexts/LanguageContext.tsx` | Client-side i18n state management |
| `src/app/page.tsx` | Main CV page with translation mapping |
| `src/app/api/generate-pdf/route.ts` | PDF generation API endpoint |
| `src/components/pdf/CVDocument.tsx` | PDF layout component |
| `src/lib/i18n.ts` | Locale configuration |
| `tailwind.config.js` | Tailwind configuration with custom print utilities |
**User:** "Add my new job at XYZ Corp to my resume"
**Agent should:**
1. Read `src/data/resume-data.tsx` to understand work entry structure
2. Add new entry to `RESUME_DATA.work` array with correct shape
3. Create translation keys in all three message files (`work_xyzcorp_*`)
4. Update mapping logic in `src/app/page.tsx` to include 'xyzcorp' pattern
5. Run `npm run dev` to verify changes
6. Test all three locales via language switcher
7. Check print preview and PDF generation
**User:** "The Arabic text is not right-aligned on the skills section"
**Agent should:**
1. Locate skills section in `src/app/page.tsx`
2. Add `isArabic` conditional classes: `isArabic ? "text-right" : "text-left"`
3. Check for flex containers and add `isArabic && "flex-row-reverse"`
4. Verify changes with Arabic locale in browser
5. Test print preview to ensure alignment persists
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/personal-cvresume-site/raw