language switch functionality added

2024-11-25 00:17:13 +01:00
parent 083e9fd771
commit 558df41289
14 changed files with 579 additions and 108 deletions
--- a/public/PROMPT.md
+++ b/public/PROMPT.md
@@ -0,0 +1,61 @@
+Multilingual Enhancement Assistant for Existing Website
+
+<context>
+Current setup:
+- Single-page website (index.html)
+- Modular CSS theming system with separate CSS files
+- Functional JavaScript implementation
+- Stable production environment requiring careful modifications
+
+Target:
+- Add multilingual support starting with German (base) and English
+- Maintain existing theming system
+- Ensure scalability for additional languages
+- Preserve current functionality
+
+<instructions>
+Provide solutions that:
+- Minimize changes to existing structure
+- Maintain current CSS theming capabilities
+- Follow progressive enhancement principles
+- Preserve site performance
+- Consider SEO implications
+- Keep code maintainable
+
+<output_format>
+Structure responses as follows:
+1. Impact assessment on existing system
+2. Step-by-step implementation plan
+3. Code modifications with detailed comments
+4. Testing guidelines
+5. Documentation requirements
+
+<technical_constraints>
+- Must work with separate CSS files
+- Avoid breaking existing theming system
+- Maintain current performance levels
+- Support offline functionality
+- Allow easy addition of future languages
+- Ensure backward compatibility
+
+<implementation_requirements>
+Code solutions must:
+- Clearly separate content from functionality
+- Maintain existing CSS variable system
+- Include fallback mechanisms
+- Be SEO-friendly
+- Support browser compatibility
+
+---
+
+Verbesserungen:
+ich denke du solltest zu erst alle css dateien ansehen und dann die änderung nocheinmal überdenken.
+- Die Buttons für die Sprache sind visuell für den nutzer nicht zu sehen da der header verdeckt.
+- Bitte gleich auch den Header korrigieren. Der Header sollte beim Scrollen stehen bleiben und nicht verschwinden.
+- In der Mobileansicht wird die Sprachauswahl nicht angezeigt.
+
+
+---
+
+
+Die Translation Buttons sind
--- a/public/components/footer.html
+++ b/public/components/footer.html
@@ -8,7 +8,7 @@
            <svg class="signal-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="24" height="24">
                <path fill="currentColor" d="M128 26.6C71.9 26.6 26.6 71.9 26.6 128c0 56.1 45.3 101.4 101.4 101.4c56.1 0 101.4-45.3 101.4-101.4C229.4 71.9 184.1 26.6 128 26.6zM128 220c-50.7 0-92-41.3-92-92s41.3-92 92-92s92 41.3 92 92S178.7 220 128 220z M128 76.5c-28.4 0-51.5 23.1-51.5 51.5s23.1 51.5 51.5 51.5s51.5-23.1 51.5-51.5S156.4 76.5 128 76.5z M128 170c-23.1 0-42-18.9-42-42s18.9-42 42-42s42 18.9 42 42S151.1 170 128 170z M128 98.5c-16.3 0-29.5 13.2-29.5 29.5s13.2 29.5 29.5 29.5s29.5-13.2 29.5-29.5S144.3 98.5 128 98.5z"/>
            </svg>
-            <a href="https://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR">Signal</a>
+            <a href="https://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR" data-i18n="footer.signal">Signal</a>
        </div>
    </div>
    <div class="social-links">
@@ -23,7 +23,7 @@
        </a>
    </div>
    <div class="legal-links">
-        <a href="impressum.html">Impressum</a>
-        <a href="datenschutz.html">Datenschutz</a>
+        <a href="impressum.html" data-i18n="footer.imprint">Impressum</a>
+        <a href="datenschutz.html" data-i18n="footer.privacy">Datenschutz</a>
    </div>
 </footer>
--- a/public/components/header.html
+++ b/public/components/header.html
@@ -10,10 +10,16 @@
            <a href="index.html" id="start-link">Home</a>
            <a href="#services" id="expertise-link">Expertise</a>
            <a href="#contact" id="contact-link">Kontakt</a>
+            <div class="nav-controls">
+                <div class="language-switcher">
+                    <button class="lang-btn" data-lang="de">DE</button>
+                    <button class="lang-btn" data-lang="en">EN</button>
+                </div>
                <button class="theme-toggle" aria-label="Theme Toggle">
                    <i class="fas fa-sun"></i>
                    <i class="fas fa-moon"></i>
                </button>
+            </div>
        </nav>
        
        <button class="mobile-menu-toggle" aria-label="Toggle Menu">
@@ -21,11 +27,4 @@
        </button>
    </div>
    <div class="header-horizontal-line"></div>
-    <script>
-        // Hide expertise and contact links on non-index pages
-        if (window.location.pathname !== '/' && window.location.pathname !== '/index.html') {
-            document.getElementById('expertise-link').style.display = 'none';
-            document.getElementById('contact-link').style.display = 'none';
-        }
-    </script>
 </header>
--- a/public/components/language-switcher.html
+++ b/public/components/language-switcher.html
@@ -0,0 +1,4 @@
+<div class="language-switcher">
+    <button class="lang-btn" data-lang="de">DE</button>
+    <button class="lang-btn" data-lang="en">EN</button>
+</div>
--- a/public/css/header.css
+++ b/public/css/header.css
@@ -10,7 +10,7 @@ header {
    left: 0;
    right: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: var(--theme-transition), transform 0.7s var(--transition-timing), box-shadow 0.7s var(--transition-timing);
+    transition: var(--theme-transition);
    transform: var(--gpu-accelerated);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
@@ -51,6 +51,13 @@ header {
    padding-top: var(--space-md);
 }

+.nav-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-left: var(--space-lg);
+}
+
 .nav-menu a {
    color: var(--text);
    text-decoration: none;
@@ -100,7 +107,6 @@ header {
    position: relative;
    width: calc(var(--space-xl) * 1.25);
    height: calc(var(--space-xl) * 1.25);
-    margin-left: var(--space-sm);
 }

 .theme-toggle:hover {
@@ -157,3 +163,40 @@ header {
    cursor: pointer;
    padding: var(--space-sm);
 }
+
+/* Mobile Menu Adjustments */
+@media (max-width: 768px) {
+    .mobile-menu-toggle {
+        display: block;
+    }
+
+    .nav-menu {
+        display: none;
+        position: fixed;
+        top: var(--header-height);
+        left: 0;
+        right: 0;
+        background: var(--bg-card);
+        padding: var(--space-xl) var(--space-md);
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-lg);
+    }
+
+    .nav-menu.active {
+        display: flex;
+    }
+
+    .nav-controls {
+        flex-direction: row;
+        gap: var(--space-md);
+        margin: var(--space-md) 0;
+        padding-top: var(--space-md);
+        border-top: 1px solid var(--border-color);
+    }
+
+    .nav-menu a {
+        width: 100%;
+        text-align: center;
+    }
+}
--- a/public/css/language-switcher.css
+++ b/public/css/language-switcher.css
@@ -0,0 +1,98 @@
+.language-switcher {
+    display: flex;
+    gap: var(--space-xs);
+    padding: var(--space-xs);
+    border-radius: var(--radius-sm);
+    transition: var(--theme-transition);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+.lang-btn {
+    background: none;
+    border: 2px solid var(--lang-switcher-border);
+    color: var(--lang-switcher-text);
+    padding: var(--space-xxs) var(--space-xs);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    transition: all var(--transition-speed) var(--transition-timing);
+    min-width: 40px;
+    min-height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.lang-btn:hover {
+    background-color: var(--lang-switcher-active-bg);
+    color: var(--lang-switcher-active-text);
+    opacity: var(--lang-switcher-hover-opacity);
+}
+
+.lang-btn.active {
+    background-color: var(--lang-switcher-active-bg);
+    color: var(--lang-switcher-active-text);
+}
+
+/* Tablet Devices */
+@media (max-width: 768px) {
+    .lang-btn {
+        font-size: var(--font-size-xs);
+        min-width: 36px;
+        min-height: 28px;
+    }
+}
+
+/* Mobile Devices */
+@media (max-width: 480px) {
+    .language-switcher {
+        padding: var(--space-xxs);
+    }
+}
+
+/* Small Mobile Devices */
+@media (max-width: 320px) {
+    .language-switcher {
+        padding: var(--space-xxs);
+    }
+}
+
+/* Ensure touch targets are large enough on mobile */
+@media (hover: none) {
+    .lang-btn {
+        min-width: 44px;
+        min-height: 44px;
+        padding: var(--space-xs);
+    }
+}
+
+/* Animations */
+.lang-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.lang-btn::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background: var(--lang-switcher-active-bg);
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform var(--transition-speed) var(--transition-timing),
+                opacity var(--transition-speed) var(--transition-timing);
+    border-radius: var(--radius-sm);
+    pointer-events: none;
+}
+
+.lang-btn:active::after {
+    opacity: 0.1;
+    transform: translate(-50%, -50%) scale(1);
+}
--- a/public/css/responsive.css
+++ b/public/css/responsive.css
@@ -91,6 +91,23 @@
        background-color: var(--bg-hover-rgb);
    }

+    .nav-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-md);
+        width: 100%;
+        padding: var(--space-md) 0;
+        border-top: 1px solid var(--border-color);
+        margin-top: var(--space-md);
+    }
+
+    .language-switcher {
+        margin: 0;
+        padding: 0;
+    }
+
    .contact-block {
        flex-direction: column;
        align-items: center;
@@ -176,6 +193,10 @@
        padding: var(--space-lg);
        margin: 0;
    }
+
+    .nav-controls {
+        padding: var(--space-sm) 0;
+    }
 }

 /* Small Mobile Devices */
@@ -208,6 +229,10 @@
        font-size: var(--font-size-xs);
        padding: var(--space-sm);
    }
+
+    .nav-controls {
+        gap: var(--space-sm);
+    }
 }

 /* Ensure touch targets are large enough on mobile */
@@ -228,10 +253,6 @@
    .service-card:hover {
        transform: none;
    }
-
-    header:hover {
-        transform: none;
-    }
 }

 /* Fix for notched phones */
@@ -248,6 +269,21 @@
    }
 }

+/* Ensure consistent nav-controls across all pages */
+.nav-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-left: var(--space-lg);
+}
+
+.language-switcher {
+    display: flex;
+    gap: var(--space-xs);
+    padding: var(--space-xs);
+    border-radius: var(--radius-sm);
+}
+
@keyframes fadeIn {
    from {
        opacity: 0;
--- a/public/css/variables.css
+++ b/public/css/variables.css
@@ -63,10 +63,10 @@

    /* Light Theme Colors (default) */
    --primary: #3a7be0;
-    --primary-gradient-1: #112fcf;
-    --primary-gradient-2: #3b3bc8;
-    --primary-gradient-3: #5743ed;
-    --primary-gradient-4: #784dd9;
+    --primary-gradient-1: rgba(17,47, 237); /* #112fed; */
+    --primary-gradient-2: rgba(59, 59, 237); /* #3b3bed; */
+    --primary-gradient-3: rgba(87, 67, 237); /* #5743ed; */
+    --primary-gradient-4: rgba(120, 77, 237); /* #784ded; */
    
    --bg-main: #f8f8f8;
    --bg-card: #f1f1f1;
@@ -78,12 +78,22 @@
    --bg-hover-rgb: 237, 237, 237;
    --bg-hover-nav: 207, 207, 207;

+    /* Language Switcher Specific */
+    --lang-switcher-bg: var(--bg-card);
+    --lang-switcher-text: var(--text);
+    --lang-switcher-border: var(--primary);
+    --lang-switcher-active-bg: var(--primary);
+    --lang-switcher-active-text: var(--bg-main);
+    --lang-switcher-shadow: rgba(0, 0, 0, 0.1);
+    --lang-switcher-hover-opacity: 0.9;
+
    /* Z-index Scale */
    --z-below: -1;
    --z-normal: 1;
    --z-above: 10;
    --z-header: 100;
    --z-modal: 1000;
+    --z-language-switcher: 1001;
 }

 /* Dark Theme */
@@ -96,6 +106,10 @@
    --header-gradient-2: rgba(41, 41, 41, 0.9);
    --bg-hover-rgb: 17, 17, 17;
    --bg-hover-nav: 20, 20, 20;
+
+    /* Language Switcher Dark Theme */
+    --lang-switcher-bg: var(--bg-card);
+    --lang-switcher-shadow: rgba(0, 0, 0, 0.2);
 }

 /* Responsive Adjustments */
--- a/public/datenschutz.html
+++ b/public/datenschutz.html
@@ -8,22 +8,26 @@
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-    <link rel="stylesheet" href="css/variables.css">
-    <link rel="stylesheet" href="css/base.css">
-    <link rel="stylesheet" href="css/layout.css">
-    <link rel="stylesheet" href="css/header.css">
-    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/animations.css">
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/footer.css">
+    <link rel="stylesheet" href="css/header.css">
+    <link rel="stylesheet" href="css/header-line.css">
+    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/responsive.css">
+    <link rel="stylesheet" href="css/variables.css">
+    <link rel="stylesheet" href="css/language-switcher.css">
    <script src="js/components.js" defer></script>
+    <script src="js/translations.js" defer></script>
+    <script src="js/language.js" defer></script>
    <script src="js/theme.js" defer></script>
 </head>
 <body>
    <main>
        <div class="container">
            <section>
-                <h1>Datenschutzerklärung</h1>
+                <h1 data-i18n="footer.privacy">Datenschutzerklärung</h1>
                <div class="card-base">
                    <h2>1. Datenschutz auf einen Blick</h2>
                    <h3>Allgemeine Hinweise</h3>
--- a/public/impressum.html
+++ b/public/impressum.html
@@ -8,22 +8,26 @@
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-    <link rel="stylesheet" href="css/variables.css">
-    <link rel="stylesheet" href="css/base.css">
-    <link rel="stylesheet" href="css/layout.css">
-    <link rel="stylesheet" href="css/header.css">
-    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/animations.css">
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/footer.css">
+    <link rel="stylesheet" href="css/header.css">
+    <link rel="stylesheet" href="css/header-line.css">
+    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/responsive.css">
+    <link rel="stylesheet" href="css/variables.css">
+    <link rel="stylesheet" href="css/language-switcher.css">
    <script src="js/components.js" defer></script>
+    <script src="js/translations.js" defer></script>
+    <script src="js/language.js" defer></script>
    <script src="js/theme.js" defer></script>
 </head>
 <body>
    <main>
        <div class="container">
            <section>
-                <h1>Impressum</h1>
+                <h1 data-i18n="footer.imprint">Impressum</h1>
                <div class="card-base">
                    <h2>Angaben gemäß § 5 TMG</h2>
                    <p>7SYS<br>
--- a/public/index.html
+++ b/public/index.html
@@ -3,8 +3,8 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="7SYS - Ihr Partner für maßgeschneiderte IT-Lösungen, Systemarchitekturen und digitale Souveränität. Persönliche Betreuung für nachhaltige IT-Infrastruktur.">
-    <title>7SYS - Persönliche IT-Lösungen</title>
+    <meta name="description" data-i18n="meta.description" content="7SYS - Ihr Partner für maßgeschneiderte IT-Lösungen, Systemarchitekturen und digitale Souveränität. Persönliche Betreuung für nachhaltige IT-Infrastruktur.">
+    <title data-i18n="meta.title">7SYS - Persönliche IT-Lösungen</title>
    <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -20,6 +20,9 @@
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/variables.css">
+    <link rel="stylesheet" href="css/language-switcher.css">
+    <script src="js/translations.js" defer></script>
+    <script src="js/language.js" defer></script>
    <script src="js/components.js" defer></script>
    <script src="js/theme.js" defer></script>
 </head>
@@ -27,25 +30,25 @@
    <main>
        <div class="container">
            <section id="intro">
-                <h1 class="h1-hero">Ihr Partner für Digitale Souveränität</h1>
-                <p class="welcome-quote">Als Ihr persönlicher IT-Experte entwickle ich maßgeschneiderte und zukunftssichere Systemarchitekturen. Mit Expertise und Leidenschaft gestalte ich IT-Lösungen, die Ihr Unternehmen nachhaltig stärken und schützen.</p>
-                <span class="logo-sub">Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. - Edsger Wybe Dijkstra (1930–2002)</span>
+                <h1 class="h1-hero" data-i18n="intro.hero">Ihr Partner für Digitale Souveränität</h1>
+                <p class="welcome-quote" data-i18n="intro.welcome">Als Ihr persönlicher IT-Experte entwickle ich maßgeschneiderte und zukunftssichere Systemarchitekturen. Mit Expertise und Leidenschaft gestalte ich IT-Lösungen, die Ihr Unternehmen nachhaltig stärken und schützen.</p>
+                <span class="logo-sub" data-i18n="intro.quote">Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. - Edsger Wybe Dijkstra (1930–2002)</span>
                <div class="mission-vision">
                    <div class="tooltip-container">
                        <div class="tooltip-header">
-                            <h3>Meine Vision</h3>
-                            <p>Digitale Souveränität</p>
+                            <h3 data-i18n="vision.title">Meine Vision</h3>
+                            <p data-i18n="vision.subtitle">Digitale Souveränität</p>
                        </div>
-                        <div class="tooltip-content">
+                        <div class="tooltip-content" data-i18n="vision.content">
                            Ich strebe eine Zukunft an, in der jedes Individuum die volle Kontrolle über ihre digitalen Ressourcen hat. Digitale Souveränität bedeutet für mich, eine sichere, unabhängige und datenschutzkonforme Nutzung moderner Technologien zu ermöglichen, bei der jede Person die Kontrolle über ihre Daten, Zugriffe und IT-Systeme behält, ohne von externen Anbietern oder unsicheren Lösungen abhängig zu sein.
                        </div>
                    </div>
                    <div class="tooltip-container">
                        <div class="tooltip-header">
-                            <h3>Meine Mission</h3>
-                            <p>Sichere und nachhaltige IT-Lösungen</p>
+                            <h3 data-i18n="mission.title">Meine Mission</h3>
+                            <p data-i18n="mission.subtitle">Sichere und nachhaltige IT-Lösungen</p>
                        </div>
-                        <div class="tooltip-content">
+                        <div class="tooltip-content" data-i18n="mission.content">
                            Meine Mission ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten.
                        </div>
                    </div>
@@ -53,55 +56,53 @@
            </section>

            <section id="services">
-                <h2>Meine Expertise</h2>
+                <h2 data-i18n="services.title">Meine Expertise</h2>
                
                <div class="service-card">
-                    <h3>Strategische IT-Beratung</h3>
-                    <p>Ich begleite Sie persönlich bei der Entwicklung und Umsetzung Ihrer IT-Strategien</p>
-                    <li>Analyse Ihrer bestehenden Systeme und Situation mit Blick auf die Zukunft</li>
-                    <li>Individuelle Lösungen für Ihre Bedürfnisse</li>
-                    <li>Zukunftsorientierte Technologieberatung</li>
+                    <h3 data-i18n="services.consulting.title">Strategische IT-Beratung</h3>
+                    <p data-i18n="services.consulting.intro">Ich begleite Sie persönlich bei der Entwicklung und Umsetzung Ihrer IT-Strategien</p>
+                    <li data-i18n="services.consulting.items.0">Analyse Ihrer bestehenden Systeme und Situation mit Blick auf die Zukunft</li>
+                    <li data-i18n="services.consulting.items.1">Individuelle Lösungen für Ihre Bedürfnisse</li>
+                    <li data-i18n="services.consulting.items.2">Zukunftsorientierte Technologieberatung</li>
                </div>

                <div class="service-card">
-                    <h3>Systemadministration</h3>
-                    <p>Professionelle Verwaltung und Wartung Ihrer IT-Systeme</p>
-                    <li>Server-Management</li>
-                    <li>Netzwerkadministration</li>
-                    <li>Backup-Konzepte</li>
-                    <li>Security-Lösungen</li>
+                    <h3 data-i18n="services.administration.title">Systemadministration</h3>
+                    <p data-i18n="services.administration.intro">Professionelle Verwaltung und Wartung Ihrer IT-Systeme</p>
+                    <li data-i18n="services.administration.items.0">Server-Management</li>
+                    <li data-i18n="services.administration.items.1">Netzwerkadministration</li>
+                    <li data-i18n="services.administration.items.2">Backup-Konzepte</li>
+                    <li data-i18n="services.administration.items.3">Security-Lösungen</li>
                </div>

                <div class="service-card">
-                    <h3>Automatisierung</h3>
-                    <p>Automatisierte Lösungen für ausgewählte Prozesse, die Sie in Ihrer Organisation nutzen können, um Arbeiten sicher, effizient und konsistent zu gestalten.</p>
-                    <li>Ansible, PowerShell, Bash</li>
-                    <li>N8N Workflows, Microsoft Power Automate</li>
+                    <h3 data-i18n="services.automation.title">Automatisierung</h3>
+                    <p data-i18n="services.automation.intro">Automatisierte Lösungen für ausgewählte Prozesse, die Sie in Ihrer Organisation nutzen können, um Arbeiten sicher, effizient und konsistent zu gestalten.</p>
+                    <li data-i18n="services.automation.items.0">Ansible, PowerShell, Bash</li>
+                    <li data-i18n="services.automation.items.1">N8N Workflows, Microsoft Power Automate</li>
                </div>

                <div class="service-card">
-                    <h3>Self-Hosted & Cloud Solutions</h3>
-                    <p>
-                    <li>Wartung von Cloud- oder Self-Hosted-Infrastrukturen</li>
-                    <li>Planung, Migration und Administration</li>
-                    </p>
+                    <h3 data-i18n="services.cloud.title">Self-Hosted & Cloud Solutions</h3>
+                    <li data-i18n="services.cloud.items.0">Wartung von Cloud- oder Self-Hosted-Infrastrukturen</li>
+                    <li data-i18n="services.cloud.items.1">Planung, Migration und Administration</li>
                </div>
                
                <div class="service-card">
-                    <h3>Kernkompetenzen</h3>
-                    <li>Microsoft Infrastrukturen (M365, Azure, AD, Windows Server, DNS, DHCP)</li>
-                    <li>Linux-Server (RedHat or Debian based distributions)</li>
-                    <li>Virtualisierung (Proxmox, vSphere, Xen Server)</li>
-                    <li>Netzwerktechnik (Secure Point, Cisco, Mikrotik)</li>
-                    <li>Sicherheit (Firewalls, VPN, Antivirus, Backup)</li> 
-                    <li>Automatisierung (Ansible, PowerShell, Bash).</li>
+                    <h3 data-i18n="services.core.title">Kernkompetenzen</h3>
+                    <li data-i18n="services.core.items.0">Microsoft Infrastrukturen (M365, Azure, AD, Windows Server, DNS, DHCP)</li>
+                    <li data-i18n="services.core.items.1">Linux-Server (RedHat or Debian based distributions)</li>
+                    <li data-i18n="services.core.items.2">Virtualisierung (Proxmox, vSphere, Xen Server)</li>
+                    <li data-i18n="services.core.items.3">Netzwerktechnik (Secure Point, Cisco, Mikrotik)</li>
+                    <li data-i18n="services.core.items.4">Sicherheit (Firewalls, VPN, Antivirus, Backup)</li>
+                    <li data-i18n="services.core.items.5">Automatisierung (Ansible, PowerShell, Bash).</li>
                </div>
            </section>

            <section id="contact">
-                <h2>Kontakt</h2>
+                <h2 data-i18n="contact.title">Kontakt</h2>
                <div class="contact-info">
-                    <p>Ich freue mich darauf, Ihr Projekt kennenzulernen und mit Ihnen gemeinsam, <br>
+                    <p data-i18n="contact.message">Ich freue mich darauf, Ihr Projekt kennenzulernen und mit Ihnen gemeinsam, <br>
                         an Ihrer digitalen Souveränität zu arbeiten.</p>
                    <div class="contact-links">
                        <a href="mailto:info@7sys.de" class="contact-link">
--- a/public/js/components.js
+++ b/public/js/components.js
@@ -145,36 +145,5 @@ document.addEventListener('DOMContentLoaded', function() {
                }
            });
        }
-
-        // Scroll behavior - only enable on index page
-        if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
-            let lastScrollTop = 0;
-            let scrollTimeout;
-
-            window.addEventListener('scroll', () => {
-                if (scrollTimeout) {
-                    window.cancelAnimationFrame(scrollTimeout);
-                }
-
-                scrollTimeout = window.requestAnimationFrame(() => {
-                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                    
-                    // Don't hide header when near top of page
-                    if (scrollTop < 100) {
-                        header.style.transform = 'translateY(0)';
-                        return;
-                    }
-                    
-                    // Hide header on scroll down, show on scroll up
-                    if (scrollTop > lastScrollTop) {
-                        header.style.transform = 'translateY(-100%)';
-                    } else {
-                        header.style.transform = 'translateY(0)';
-                    }
-                    
-                    lastScrollTop = scrollTop;
-                });
-            }, { passive: true });
-        }
    }
 });
--- a/public/js/language.js
+++ b/public/js/language.js
@@ -0,0 +1,80 @@
+document.addEventListener('componentsLoaded', function() {
+    // Initialize language system
+    const defaultLang = 'de';
+    let currentLang = localStorage.getItem('preferredLanguage') || defaultLang;
+
+    // Initialize language switcher
+    initializeLanguageSwitcher();
+    updateContent();
+    updateHTMLLang(); // Ensure HTML lang attribute is set initially
+
+    function initializeLanguageSwitcher() {
+        const switcher = document.querySelector('.language-switcher');
+        if (!switcher) return;
+
+        // Set initial active state
+        updateButtonStates();
+
+        // Add click handlers
+        switcher.querySelectorAll('.lang-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const newLang = btn.dataset.lang;
+                if (newLang !== currentLang) {
+                    currentLang = newLang;
+                    localStorage.setItem('preferredLanguage', currentLang);
+                    updateButtonStates();
+                    updateContent();
+                    updateHTMLLang();
+                }
+            });
+        });
+    }
+
+    function updateButtonStates() {
+        document.querySelectorAll('.lang-btn').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.lang === currentLang);
+        });
+    }
+
+    function updateHTMLLang() {
+        document.documentElement.setAttribute('lang', currentLang);
+    }
+
+    function updateContent() {
+        const elements = document.querySelectorAll('[data-i18n]');
+        elements.forEach(element => {
+            const key = element.dataset.i18n; // Fixed: using dataset.i18n instead of i18n
+            const translation = getTranslation(key);
+            if (translation !== undefined) {
+                if (element.tagName === 'META') {
+                    element.setAttribute('content', translation);
+                } else {
+                    element.innerHTML = translation;
+                }
+            }
+        });
+
+        // Update meta tags
+        updateMetaTags();
+    }
+
+    function updateMetaTags() {
+        document.title = translations[currentLang].meta.title;
+        const metaDescription = document.querySelector('meta[name="description"]');
+        if (metaDescription) {
+            metaDescription.setAttribute('content', translations[currentLang].meta.description);
+        }
+    }
+
+    function getTranslation(key) {
+        const keys = key.split('.');
+        let value = translations[currentLang];
+        
+        for (const k of keys) {
+            if (value === undefined) return undefined;
+            value = value[k];
+        }
+        
+        return value;
+    }
+});
--- a/public/js/translations.js
+++ b/public/js/translations.js
@@ -0,0 +1,158 @@
+const translations = {
+    de: {
+        meta: {
+            description: "7SYS - Ihr Partner für maßgeschneiderte IT-Lösungen, Systemarchitekturen und digitale Souveränität. Persönliche Betreuung für nachhaltige IT-Infrastruktur.",
+            title: "7SYS - Persönliche IT-Lösungen"
+        },
+        intro: {
+            hero: "Ihr Partner für Digitale Souveränität",
+            welcome: "Als Ihr persönlicher IT-Experte entwickle ich maßgeschneiderte und zukunftssichere Systemarchitekturen. Mit Expertise und Leidenschaft gestalte ich IT-Lösungen, die Ihr Unternehmen nachhaltig stärken und schützen.",
+            quote: "Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. - Edsger Wybe Dijkstra (1930–2002)"
+        },
+        vision: {
+            title: "Meine Vision",
+            subtitle: "Digitale Souveränität",
+            content: "Ich strebe eine Zukunft an, in der jedes Individuum die volle Kontrolle über ihre digitalen Ressourcen hat. Digitale Souveränität bedeutet für mich, eine sichere, unabhängige und datenschutzkonforme Nutzung moderner Technologien zu ermöglichen, bei der jede Person die Kontrolle über ihre Daten, Zugriffe und IT-Systeme behält, ohne von externen Anbietern oder unsicheren Lösungen abhängig zu sein."
+        },
+        mission: {
+            title: "Meine Mission",
+            subtitle: "Sichere und nachhaltige IT-Lösungen",
+            content: "Meine Mission ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten."
+        },
+        services: {
+            title: "Meine Expertise",
+            consulting: {
+                title: "Strategische IT-Beratung",
+                intro: "Ich begleite Sie persönlich bei der Entwicklung und Umsetzung Ihrer IT-Strategien",
+                items: [
+                    "Analyse Ihrer bestehenden Systeme und Situation mit Blick auf die Zukunft",
+                    "Individuelle Lösungen für Ihre Bedürfnisse",
+                    "Zukunftsorientierte Technologieberatung"
+                ]
+            },
+            administration: {
+                title: "Systemadministration",
+                intro: "Professionelle Verwaltung und Wartung Ihrer IT-Systeme",
+                items: [
+                    "Server-Management",
+                    "Netzwerkadministration",
+                    "Backup-Konzepte",
+                    "Security-Lösungen"
+                ]
+            },
+            automation: {
+                title: "Automatisierung",
+                intro: "Automatisierte Lösungen für ausgewählte Prozesse, die Sie in Ihrer Organisation nutzen können, um Arbeiten sicher, effizient und konsistent zu gestalten.",
+                items: [
+                    "Ansible, PowerShell, Bash",
+                    "N8N Workflows, Microsoft Power Automate"
+                ]
+            },
+            cloud: {
+                title: "Self-Hosted & Cloud Solutions",
+                items: [
+                    "Wartung von Cloud- oder Self-Hosted-Infrastrukturen",
+                    "Planung, Migration und Administration"
+                ]
+            },
+            core: {
+                title: "Kernkompetenzen",
+                items: [
+                    "Microsoft Infrastrukturen (M365, Azure, AD, Windows Server, DNS, DHCP)",
+                    "Linux-Server (RedHat or Debian based distributions)",
+                    "Virtualisierung (Proxmox, vSphere, Xen Server)",
+                    "Netzwerktechnik (Secure Point, Cisco, Mikrotik)",
+                    "Sicherheit (Firewalls, VPN, Antivirus, Backup)",
+                    "Automatisierung (Ansible, PowerShell, Bash)."
+                ]
+            }
+        },
+        contact: {
+            title: "Kontakt",
+            message: "Ich freue mich darauf, Ihr Projekt kennenzulernen und mit Ihnen gemeinsam, an Ihrer digitalen Souveränität zu arbeiten."
+        },
+        footer: {
+            signal: "Signal",
+            imprint: "Impressum",
+            privacy: "Datenschutz"
+        }
+    },
+    en: {
+        meta: {
+            description: "7SYS - Your partner for customized IT solutions, system architectures, and digital sovereignty. Personal support for sustainable IT infrastructure.",
+            title: "7SYS - Personal IT Solutions"
+        },
+        intro: {
+            hero: "Your Partner for Digital Sovereignty",
+            welcome: "As your personal IT expert, I develop customized and future-proof system architectures. With expertise and passion, I create IT solutions that sustainably strengthen and protect your business.",
+            quote: "Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. - Edsger Wybe Dijkstra (1930–2002)"
+        },
+        vision: {
+            title: "My Vision",
+            subtitle: "Digital Sovereignty",
+            content: "I envision a future where every individual has full control over their digital resources. For me, digital sovereignty means enabling secure, independent, and privacy-compliant use of modern technologies, where each person maintains control over their data, access, and IT systems without depending on external providers or insecure solutions."
+        },
+        mission: {
+            title: "My Mission",
+            subtitle: "Secure and Sustainable IT Solutions",
+            content: "My mission is to competently guide you on your path to digital sovereignty."
+        },
+        services: {
+            title: "My Expertise",
+            consulting: {
+                title: "Strategic IT Consulting",
+                intro: "I personally accompany you in developing and implementing your IT strategies",
+                items: [
+                    "Analysis of your existing systems and situation with a view to the future",
+                    "Individual solutions for your needs",
+                    "Future-oriented technology consulting"
+                ]
+            },
+            administration: {
+                title: "System Administration",
+                intro: "Professional management and maintenance of your IT systems",
+                items: [
+                    "Server Management",
+                    "Network Administration",
+                    "Backup Concepts",
+                    "Security Solutions"
+                ]
+            },
+            automation: {
+                title: "Automation",
+                intro: "Automated solutions for selected processes that you can use in your organization to make work secure, efficient, and consistent.",
+                items: [
+                    "Ansible, PowerShell, Bash",
+                    "N8N Workflows, Microsoft Power Automate"
+                ]
+            },
+            cloud: {
+                title: "Self-Hosted & Cloud Solutions",
+                items: [
+                    "Maintenance of cloud or self-hosted infrastructures",
+                    "Planning, migration, and administration"
+                ]
+            },
+            core: {
+                title: "Core Competencies",
+                items: [
+                    "Microsoft Infrastructures (M365, Azure, AD, Windows Server, DNS, DHCP)",
+                    "Linux Servers (RedHat or Debian based distributions)",
+                    "Virtualization (Proxmox, vSphere, Xen Server)",
+                    "Network Technology (Secure Point, Cisco, Mikrotik)",
+                    "Security (Firewalls, VPN, Antivirus, Backup)",
+                    "Automation (Ansible, PowerShell, Bash)."
+                ]
+            }
+        },
+        contact: {
+            title: "Contact",
+            message: "I look forward to learning about your project and working with you together on your digital sovereignty."
+        },
+        footer: {
+            signal: "Signal",
+            imprint: "Legal Notice",
+            privacy: "Privacy Policy"
+        }
+    }
+};