portfolio/docs/CHANGING_TEXTS.md

# How to Change Texts on the Website

This guide explains how to edit text content on your portfolio website.

## Overview

The website uses **next-intl** for internationalization (i18n), supporting multiple languages. All text strings are stored in JSON files, making them easy to edit.

## Where are the Texts?

All translatable texts are located in the `/messages/` directory:

```
/messages/
  ├── en.json  (English translations)
  └── de.json  (German translations)
```

## How to Edit Texts

### 1. Open the Translation File

Choose the language file you want to edit:
- For English: `/messages/en.json`
- For German: `/messages/de.json`

### 2. Find the Text Section

The JSON file is organized by sections:

```json
{
  "nav": {
    "home": "Home",
    "about": "About",
    "projects": "Projects",
    "contact": "Contact"
  },
  "home": {
    "hero": {
      "description": "Your hero description here",
      "ctaWork": "View My Work",
      "ctaContact": "Contact Me"
    }
  }
}
```

### 3. Edit the Text

Simply change the value (the text after the colon):

**Before:**
```json
"ctaWork": "View My Work"
```

**After:**
```json
"ctaWork": "See My Projects"
```

### 4. Save and Reload

After saving the file:
- In **development**: The changes appear immediately
- In **production**: Restart the application

## Common Text Sections

### Navigation (`nav`)
- `home`, `about`, `projects`, `contact`

### Home Page (`home`)
- `hero.description` - Main hero description
- `hero.ctaWork` - Primary call-to-action button
- `hero.ctaContact` - Contact button
- `about.title` - About section title
- `about.p1`, `about.p2`, `about.p3` - About paragraphs

### Projects (`projects`)
- `title` - Projects page title
- `viewDetails` - "View Details" button text
- `categories.*` - Project category names

### Contact (`contact`)
- `title` - Contact form title
- `form.*` - Form field labels
- `submit` - Submit button text

### Footer (`footer`)
- `copyright` - Copyright text
- `madeWith` - "Made with" text

## Privacy Policy & Legal Notice

The privacy policy and legal notice use a **dynamic CMS system**:

### Option 1: Edit via Admin Dashboard (Recommended)
1. Go to `/manage` (requires login)
2. Navigate to "Content Manager"
3. Select "Privacy Policy" or "Legal Notice"
4. Edit using the rich text editor
5. Click "Save"

### Option 2: Edit Static Fallback
If you haven't set up CMS content, the fallback static content is in:
- Privacy Policy: `/app/_ui/PrivacyPolicyClient.tsx` (Fallback-Text, sonst CMS-Seite `privacy-policy`)
- Legal Notice: `/app/_ui/LegalNoticeClient.tsx` (Fallback-Text, sonst CMS-Seite `legal-notice`)

⚠️ **Note**: Static content is hardcoded in German. For CMS-based content, you can manage both languages separately.

## Adding a New Language

To add a new language (e.g., French):

1. **Create translation file**: Create `/messages/fr.json`
2. **Copy structure**: Copy from `en.json` and translate all values
3. **Update i18n config**: Edit `/i18n/request.ts`
   ```typescript
   export const locales = ['en', 'de', 'fr'] as const;
   ```
4. **Update middleware**: Ensure the new locale is supported in `/middleware.ts`

## Best Practices

1. ✅ **DO**: Keep the JSON structure intact
2. ✅ **DO**: Test changes in development first
3. ✅ **DO**: Keep translations consistent across languages
4. ❌ **DON'T**: Change the keys (left side of the colon)
5. ❌ **DON'T**: Break the JSON format (watch commas and quotes)

## Validation

To check if your JSON is valid:
```bash
# Install a JSON validator
npm install -g jsonlint

# Validate the file
jsonlint messages/en.json
jsonlint messages/de.json
```

Or use an online tool: https://jsonlint.com/

## Examples

### Changing the Hero Description

**File**: `/messages/en.json`

```json
{
  "home": {
    "hero": {
      "description": "New description here - passionate developer building amazing things"
    }
  }
}
```

### Changing Navigation Items

**File**: `/messages/de.json`

```json
{
  "nav": {
    "home": "Startseite",
    "about": "Über mich",
    "projects": "Projekte",
    "contact": "Kontakt"
  }
}
```

### Changing Button Text

**File**: `/messages/en.json`

```json
{
  "home": {
    "hero": {
      "ctaWork": "Browse My Portfolio",
      "ctaContact": "Get In Touch"
    }
  }
}
```

## Troubleshooting

### Changes Don't Appear
- Clear your browser cache
- In development: Stop and restart `npm run dev`
- In production: Rebuild and restart the container

### JSON Syntax Error
- Check for missing commas
- Check for unescaped quotes in text
- Use a JSON validator to find the error

### Missing Translation
- Check that the key exists in all language files
- Default language (English) is used if a translation is missing

## Need Help?

- Check the Next-intl documentation: https://next-intl-docs.vercel.app/
- Review existing translations for examples
- Test changes in development environment first

---

**Last Updated**: January 2026