# 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/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` ```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