multi lang mit hugo

2026-02-28 21:44:43 +00:00
parent eb9b30bfb5
commit 1ab276fdfd
13 changed files with 591 additions and 276 deletions
--- a/static/script.js
+++ b/static/script.js
@@ -0,0 +1,113 @@
+/* ==========================================
+   NAVIGATION & MOBILE MENU
+   ========================================== */
+function toggleHamburger() {
+    const navLinks = document.getElementById('navLinks');
+    const hamburger = document.querySelector('.hamburger');
+    navLinks.classList.toggle('mobile-open');
+    hamburger.classList.toggle('active');
+}
+
+/* ==========================================
+   THEME SWITCHER LOGIC
+   ========================================== */
+const themeBtn = document.getElementById('themeBtn');
+const themeDropdown = document.getElementById('themeDropdown');
+const themeButtons = document.querySelectorAll('.theme-dropdown button');
+const htmlEl = document.documentElement;
+
+// Dropdown öffnen/schließen
+if (themeBtn) {
+    themeBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        themeDropdown.classList.toggle('show');
+        // Schließe andere Dropdowns
+        if (langDropdown) langDropdown.classList.remove('show');
+    });
+}
+
+// Theme auswählen
+themeButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+        const theme = btn.getAttribute('data-theme');
+        applyTheme(theme);
+        themeDropdown.classList.remove('show');
+    });
+});
+
+// Theme anwenden
+function applyTheme(theme) {
+    if (theme === 'auto') {
+        localStorage.removeItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        htmlEl.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+        themeBtn.innerHTML = '🌓';
+    } else {
+        htmlEl.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        themeBtn.innerHTML = theme === 'dark' ? '🌙' : '☀️';
+    }
+}
+
+// Initialisierung beim Laden
+document.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = localStorage.getItem('theme') || 'auto';
+    applyTheme(savedTheme);
+});
+
+// Klick außerhalb schließt alle Dropdowns
+window.addEventListener('click', () => {
+    if (themeDropdown) themeDropdown.classList.remove('show');
+    if (langDropdown) langDropdown.classList.remove('show');
+});
+
+// Mobile Menü schließen bei Klick auf Link
+document.querySelectorAll('.nav-links a').forEach(link => {
+    link.addEventListener('click', () => {
+        document.getElementById('navLinks').classList.remove('mobile-open');
+        const hamburger = document.querySelector('.hamburger');
+        if (hamburger) hamburger.classList.remove('active');
+    });
+});
+
+
+/* ==========================================
+   LANGUAGE SWITCHER LOGIC
+   ========================================== */
+const langBtn = document.getElementById('langBtn');
+const langDropdown = document.getElementById('langDropdown');
+
+if (langBtn) {
+    langBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        langDropdown.classList.toggle('show');
+        // Schließe andere Dropdowns
+        if (themeDropdown) themeDropdown.classList.remove('show');
+    });
+}
+
+// Sprachwechsel Logik (Repariert für alle Sprachen)
+if (langDropdown) {
+    langDropdown.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault(); // Verhindert das sofortige Neuladen
+
+            const selectedLang = link.getAttribute('data-lang');
+            const currentPath = window.location.pathname; // z.B. /de/projects/
+
+            // RegEx um den aktuellen Sprachcode (/de/, /en/, /fr/, etc.) am Anfang zu finden
+            // und durch die neue Sprache zu ersetzen.
+            let newPath = currentPath.replace(/^\/(de|en|fr|es|ru)(\/|$)/, '/' + selectedLang + '/');
+
+            // Falls man auf der Hauptseite ist (/), oder RegEx nicht matcht
+            if (currentPath === '/' || !newPath.startsWith('/' + selectedLang)) {
+                newPath = '/' + selectedLang + '/';
+            }
+
+            // Sicherstellen, dass keine Doppel-Slashes entstehen
+            newPath = newPath.replace(/\/+/g, '/');
+
+            window.location.href = newPath;
+        });
+    });
+}
--- a/static/style.css
+++ b/static/style.css
@@ -0,0 +1,448 @@
+/* ==========================================
+   0. THEME VARIABLEN (Vollständig Dynamisch)
+   ========================================== */
+:root {
+    /* --- Hell-Modus --- */
+    --bg-body: #ffffff;
+    --bg-section-alt: #f8f9fa;
+    --text-main: #333333;
+    --text-muted: #666666;
+    --header-bg: rgba(255, 255, 255, 0.95);
+    
+    /* Cards */
+    --card-bg: #ffffff;
+    --card-shadow: rgba(0, 0, 0, 0.08);
+    --border-color: #eeeeee;
+
+    /* Hero & Akzente */
+    --accent: #667eea;
+    --accent-dark: #764ba2;
+    --hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --hero-text: #ffffff;
+    --hero-h1-gradient: linear-gradient(45deg, #ffffff, #d1d8ff);
+
+    /* Footer */
+    --footer-bg: #1a1a1a;
+    --footer-text: #bbbbbb;
+    --footer-link-hover: #ffffff;
+}
+
+[data-theme="dark"] {
+    /* --- Dunkel-Modus --- */
+    --bg-body: #0f111a;
+    --bg-section-alt: #161925;
+    --text-main: #e0e6ed;
+    --text-muted: #94a3b8;
+    --header-bg: rgba(15, 17, 26, 0.96);
+    
+    /* Cards */
+    --card-bg: #1c2132;
+    --card-shadow: rgba(0, 0, 0, 0.3);
+    --border-color: #2d334a;
+
+    /* Hero & Akzente (Im Darkmode etwas entspannter) */
+    --accent: #39348c;
+    --accent-dark: #3d4593;
+    --hero-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
+    --hero-text: #e2e8f0;
+    --hero-h1-gradient: linear-gradient(45deg, #818cf8, #c084fc);
+
+    /* Footer */
+    --footer-bg: #070910;
+    --footer-text: #64748b;
+    --footer-link-hover: #818cf8;
+}
+
+/* ==========================================
+   1. RESET & BASIS STILE
+   ========================================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    color: var(--text-main);
+    background-color: var(--bg-body);
+    overflow-x: hidden;
+    transition: all 0.3s ease;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* ==========================================
+   2. HEADER & NAVIGATION
+   ========================================== */
+header {
+    background-color: var(--header-bg);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+}
+
+.nav-right {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--accent);
+    text-decoration: none;
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+    list-style: none;
+}
+
+.nav-links a {
+    color: var(--text-main);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.nav-links a:hover {
+    color: var(--accent);
+}
+
+/* Theme Switcher */
+.theme-switch { position: relative; }
+.theme-btn {
+    background: none;
+    border: 1px solid var(--border-color);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-main);
+}
+
+.theme-dropdown {
+    position: absolute;
+    top: 120%;
+    right: 0;
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 5px 15px var(--card-shadow);
+    display: none;
+    flex-direction: column;
+    min-width: 130px;
+    z-index: 2000;
+    overflow: hidden;
+}
+
+.theme-dropdown.show { display: flex; }
+.theme-dropdown button {
+    background: none;
+    border: none;
+    padding: 12px 15px;
+    text-align: left;
+    cursor: pointer;
+    color: var(--text-main);
+}
+.theme-dropdown button:hover {
+    background-color: var(--accent);
+    color: white;
+}
+
+/* --- Language Switcher --- */
+.lang-switch { position: relative; }
+.lang-btn {
+    background: none;
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    padding: 8px 15px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    color: var(--text-main);
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+.lang-btn:hover {
+    border-color: var(--accent);
+    background: rgba(102, 126, 234, 0.1);
+}
+
+.lang-dropdown {
+    position: absolute;
+    top: 120%;
+    right: 0;
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 5px 15px var(--card-shadow);
+    display: none;
+    flex-direction: column;
+    min-width: 150px;
+    z-index: 2000;
+}
+.lang-dropdown.show { display: flex; }
+.lang-dropdown a {
+    padding: 10px 15px;
+    text-decoration: none;
+    color: var(--text-main);
+    font-size: 0.9rem;
+    transition: background 0.2s;
+    /* ANPASSUNG 2: Flexbox für Links, damit Flagge/Text nebeneinander bleiben */
+    display: flex;
+    align-items: center;
+    gap: 10px; /* Abstand zwischen Flagge und Text */
+    
+    /* ANPASSUNG 3: Verhindern, dass der Text umbricht */
+    white-space: nowrap;
+}
+.lang-dropdown a:hover {
+    background-color: var(--accent);
+    color: white;
+}
+
+
+.hamburger {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    cursor: pointer;
+}
+.hamburger span {
+    display: block;
+    width: 25px;
+    height: 3px;
+    background-color: var(--accent);
+    border-radius: 3px;
+}
+
+/* ==========================================
+   3. HERO SECTION
+   ========================================== */
+.hero {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background: var(--hero-gradient);
+    color: var(--hero-text);
+    padding: 80px 20px;
+    transition: background 0.5s ease;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
+    background: var(--hero-h1-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    line-height: 1.2;
+}
+
+.hero p {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.9;
+}
+
+/* ==========================================
+   4. BUTTONS
+   ========================================== */
+.cta-button {
+    display: inline-block;
+    background-color: var(--accent);
+    color: white;
+    padding: 1rem 2rem;
+    text-decoration: none;
+    border-radius: 50px;
+    font-weight: bold;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+}
+
+.cta-button:hover {
+    transform: translateY(-2px);
+    background-color: var(--accent-dark);
+}
+
+.demo-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    padding: 1rem;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+}
+
+.demo-button {
+    background-color: var(--accent);
+    color: white;
+    padding: 0.6rem 1.4rem;
+    text-decoration: none;
+    border-radius: 25px;
+    transition: all 0.3s ease;
+}
+
+.demo-button:hover {
+    background-color: var(--accent-dark);
+    transform: translateY(-2px);
+}
+
+/* ==========================================
+   5. SECTIONS & CARDS
+   ========================================== */
+section {
+    /*padding: 80px 0;*/
+    background-color: var(--bg-body);
+}
+
+.section-dark {
+    background-color: var(--bg-section-alt);
+}
+
+h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    padding: 2.5rem 0;
+    margin-bottom: -2rem;
+    color: var(--text-main);
+}
+
+.text {
+    max-width: 800px;
+    margin: 0 auto;
+    text-align: center;
+    font-size: 1.1rem;
+    line-height: 1.8;
+    color: var(--text-muted);
+}
+
+/* Hier ist die wichtige Änderung für das Nebeneinanderstehen */
+.projects, .tech-features {
+    display: grid;
+    /* Erzeugt so viele Spalten wie nebeneinander passen (mind. 300px breit) */
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.project-card, .tech-card {
+    background-color: var(--card-bg);
+    border-radius: 15px;
+    padding: 2.5rem;
+    box-shadow: 0 10px 30px var(--card-shadow);
+    border: 1px solid var(--border-color);
+    text-align: center;
+    transition: transform 0.3s ease, background-color 0.3s;
+    
+    /* Flexbox Korrektur */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start; /* Schiebt alles nach oben */
+    height: 100%; /* Sorgt dafür, dass alle Karten in einer Reihe gleich hoch sind */
+}
+
+.project-card h3, .tech-card h3 {
+    color: var(--accent);
+    margin-bottom: 1.2rem; /* Abstand zwischen Überschrift und Text */
+    font-size: 1.5rem;
+}
+
+.project-card p, .tech-card p {
+    color: var(--text-muted);
+    line-height: 1.6;
+    margin-bottom: 0; /* Verhindert unnötigen Platz nach unten */
+}
+
+.project-card:hover, .tech-card:hover {
+    transform: translateY(-5px);
+}
+
+
+/* ==========================================
+   6. FOOTER
+   ========================================== */
+footer {
+    background-color: var(--footer-bg);
+    color: var(--footer-text);
+    text-align: center;
+    padding: 60px 0;
+    transition: background 0.3s ease;
+}
+
+.footer-links a {
+    color: var(--footer-text);
+    text-decoration: none;
+    margin: 0 1rem;
+}
+
+.footer-links a:hover {
+    color: var(--footer-link-hover);
+}
+
+/* ==========================================
+   7. RESPONSIVENESS
+   ========================================== */
+@media (max-width: 950px) {
+    .hamburger { display: flex; }
+    .nav-links {
+        position: absolute;
+        top: 100%; left: 0; width: 100%;
+        background-color: var(--header-bg);
+        flex-direction: column;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.4s ease;
+    }
+    .nav-links.mobile-open { max-height: 500px; }
+    .nav-links li { border-bottom: 1px solid var(--border-color); }
+    .nav-links a { padding: 1.2rem; display: block; }
+    .hero h1 { font-size: 2.2rem; }
+    .nav-links {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        background-color: var(--header-bg);
+        display: flex;
+        flex-direction: column;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.4s ease-in-out;
+        box-shadow: 0 10px 15px var(--card-shadow);
+        
+        /* Nav-Links müssen über dem Content, aber unter dem Dropdown sein */
+        z-index: 999; 
+    }
+}