Update README.md

README.md

@@ -1,16 +1,18 @@
 # Kobelly Web Solutions
 
-A professional Flask-based website for promoting small business web development services. Features multilanguage support (English, Dutch, French, German) and is fully dockerized for easy deployment.
+A professional Flask-based website for promoting small business web development services. Features multilanguage support (English, Dutch, French, German) with a simple JSON-based translation system and is fully dockerized for easy deployment.
 
 ## Features
 
-- 🌐 **Multilanguage Support**: English (EN), Dutch (NL), French (FR), German (DE)
+- 🌐 **Multilanguage Support**: English (EN), Dutch (NL), French (FR), German (DE) with JSON-based translations
 - 📱 **Responsive Design**: Modern, mobile-friendly interface
 - 🎨 **Professional UI**: Clean, modern design with Bootstrap 5
 - 🐳 **Docker Support**: Easy containerization and deployment
 - ⚡ **Fast Performance**: Optimized for speed and performance with minified assets
 - 🔧 **No Database Required**: Simple, lightweight setup
 - 🚀 **Asset Optimization**: CSS/JS minification with cache busting
+- 📧 **Contact Form**: Fully functional email contact form
+- 🗺️ **SEO Optimized**: Sitemap generation and robots.txt
 
 ## Pages
 
@@ -18,6 +20,7 @@ A professional Flask-based website for promoting small business web development
 - **Services**: Detailed service offerings with pricing information
 - **About**: Company story, team, and values
 - **Contact**: Contact form and business information
+- **Portfolio**: Showcase of completed projects
 
 ## Quick Start
 
@@ -105,9 +108,12 @@ Kobelly/
 ├── requirements.txt       # Python dependencies
 ├── Dockerfile            # Docker configuration
 ├── docker-compose.yml    # Docker Compose configuration
+├── docker-compose.dev.yml # Development Docker Compose
 ├── Makefile              # Build and deployment commands
 ├── build_assets.py       # Asset minification script
-├── babel.cfg             # Babel configuration for translations
+├── translation_manager.py # JSON-based translation system
+├── test_translations.py  # Translation testing script
+├── robots.txt            # Search engine configuration
 ├── static/               # Static assets
 │   ├── css/              # CSS files
 │   │   ├── main.css      # Main stylesheet
@@ -121,31 +127,67 @@ Kobelly/
 │   ├── index.html        # Homepage
 │   ├── services.html     # Services page
 │   ├── about.html        # About page
-│   └── contact.html      # Contact page
+│   ├── contact.html      # Contact page
-└── translations/         # Translation files
+│   ├── portfolio.html    # Portfolio page
-    ├── en/LC_MESSAGES/messages.po
+│   └── components/       # Reusable template components
-    ├── nl/LC_MESSAGES/messages.po
+│       ├── hero_section.html
-    ├── fr/LC_MESSAGES/messages.po
+│       ├── cta_section.html
-    └── de/LC_MESSAGES/messages.po
+│       ├── stats_section.html
+│       └── testimonials_section.html
+└── translations/         # JSON translation files
+    ├── en.json           # English translations
+    ├── nl.json           # Dutch translations
+    ├── fr.json           # French translations
+    └── de.json           # German translations
 ```
 
 ## Multilanguage Support
 
-The website supports four languages:
+The website supports four languages using a simple JSON-based translation system:
 - 🇺🇸 **English** (EN) - Default
 - 🇳🇱 **Dutch** (NL)
 - 🇫🇷 **French** (FR)
 - 🇩🇪 **German** (DE)
 
-Users can switch languages using the language selector in the navigation bar. The language preference is stored in the session.
+Users can switch languages using the language selector in the navigation bar or URL parameters (`?lang=de`). The language preference is stored in the session.
+
+### Translation System
+
+The project uses a custom JSON-based translation system that:
+- **No compilation needed** - Just edit JSON files directly
+- **Real-time updates** - Changes appear immediately after restart
+- **Simple maintenance** - Clear JSON structure
+- **Independent languages** - Edit English without breaking translations
+
+### Adding New Translations
+
+1. **Add the string to your template:**
+   ```html
+   <h2>{{ t('New Section Title') }}</h2>
+   ```
+
+2. **Add it to the translation files:**
+   ```json
+   // translations/en.json
+   {
+     "New Section Title": "New Section Title"
+   }
+   
+   // translations/de.json  
+   {
+     "New Section Title": "Neuer Abschnittstitel"
+   }
+   ```
+
+3. **Restart your Flask app** - Changes appear immediately!
 
 ## Customization
 
 ### Content Updates
 
 1. **Text Content**: Edit the HTML templates in the `templates/` directory
-2. **Translations**: Update the `.po` files in the `translations/` directory
+2. **Translations**: Update the `.json` files in the `translations/` directory
-3. **Styling**: Modify the CSS in `templates/base.html`
+3. **Styling**: Modify the CSS in `static/css/main.css`
 
 ### Adding New Pages
 
@@ -155,19 +197,24 @@ Users can switch languages using the language selector in the navigation bar. Th
 
 ### Updating Translations
 
-1. Extract translatable strings:
+The JSON-based system makes translation updates simple:
+
+1. **Edit translation files directly:**
    ```bash
-   pybabel extract -F babel.cfg -o messages.pot .
+   # Open and edit the JSON files
+   nano translations/en.json
+   nano translations/de.json
+   # etc.
    ```
 
-2. Update translation files:
+2. **Restart the application:**
    ```bash
-   pybabel update -i messages.pot -d translations
+   python app.py
    ```
 
-3. Compile translations:
+3. **Test translations:**
    ```bash
-   pybabel compile -d translations
+   python test_translations.py
    ```
 
 ## Asset Optimization
@@ -211,28 +258,24 @@ The website includes a fully functional contact form that sends email notificati
 
 ### 1. Email Configuration
 
-1. **Copy the environment template:**
+The application uses environment variables for email configuration. You can set these in your environment or create a `.env` file:
-   ```bash
-   cp .env.example .env
-   ```
 
-2. **Configure your email settings in `.env`:**
+```bash
-   ```bash
+# For Gmail (recommended)
-   # For Gmail (recommended)
+MAIL_SERVER=smtp.gmail.com
-   MAIL_SERVER=smtp.gmail.com
+MAIL_PORT=587
-   MAIL_PORT=587
+MAIL_USE_TLS=True
-   MAIL_USE_TLS=True
+MAIL_USERNAME=contact@kobelly.be
-   MAIL_USERNAME=contact@kobelly.be
+MAIL_PASSWORD=your-app-password-here
-   MAIL_PASSWORD=your-app-password-here
+MAIL_DEFAULT_SENDER=contact@kobelly.be
-   MAIL_DEFAULT_SENDER=contact@kobelly.be
+```
-   ```
 
-3. **For Gmail users:**
+### 2. For Gmail users:
-   - Enable 2-factor authentication on your Google account
+- Enable 2-factor authentication on your Google account
-   - Generate an "App Password" in Google Account settings
+- Generate an "App Password" in Google Account settings
-   - Use the app password as `MAIL_PASSWORD`
+- Use the app password as `MAIL_PASSWORD`
 
-### 2. Alternative Email Providers
+### 3. Alternative Email Providers
 
 **For other SMTP providers, update the settings accordingly:**
 ```bash
@@ -247,7 +290,7 @@ MAIL_PORT=587
 MAIL_USE_TLS=True
 ```
 
-### 3. Testing the Contact Form
+### 4. Testing the Contact Form
 
 1. Start the application
 2. Navigate to the Contact page
@@ -267,6 +310,12 @@ The form includes:
 - `SECRET_KEY`: Secret key for Flask sessions (default: 'your-secret-key-change-in-production')
 - `FLASK_ENV`: Flask environment (development/production)
 - `FLASK_DEBUG`: Debug mode (0=disabled, 1=enabled, defaults to 1 in development)
+- `MAIL_SERVER`: SMTP server for email (default: smtp.gmail.com)
+- `MAIL_PORT`: SMTP port (default: 587)
+- `MAIL_USE_TLS`: Use TLS encryption (default: True)
+- `MAIL_USERNAME`: Email username
+- `MAIL_PASSWORD`: Email password
+- `MAIL_DEFAULT_SENDER`: Default sender email
 
 **Environment Modes:**
 
@@ -296,10 +345,11 @@ For production deployment:
 
 - **Backend**: Flask 2.3.3
 - **Frontend**: Bootstrap 5, Font Awesome
-- **Internationalization**: Flask-Babel
+- **Translation**: Custom JSON-based system
 - **Containerization**: Docker, Docker Compose
 - **Styling**: Custom CSS with CSS variables
-- **Asset Management**: Flask-Assets with CSS/JS minification
+- **Asset Management**: Custom build script with CSS/JS minification
+- **Email**: Flask-Mail
 
 ## Browser Support