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:

{
  "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:

"ctaWork": "View My Work"

After:

"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/privacy-policy/page.tsx (lines 76-302)
• Legal Notice: /app/legal-notice/page.tsx

⚠️ 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

   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:

# 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

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

Changing Navigation Items

File: /messages/de.json

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

Changing Button Text

File: /messages/en.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