From 558df41289e7738f8623f6eef675112d035a9432 Mon Sep 17 00:00:00 2001 From: ben7sys Date: Mon, 25 Nov 2024 00:17:13 +0100 Subject: [PATCH] language switch functionality added --- public/PROMPT.md | 61 +++++++++ public/components/footer.html | 6 +- public/components/header.html | 21 ++- public/components/language-switcher.html | 4 + public/css/header.css | 47 ++++++- public/css/language-switcher.css | 98 ++++++++++++++ public/css/responsive.css | 44 ++++++- public/css/variables.css | 22 +++- public/datenschutz.html | 16 ++- public/impressum.html | 16 ++- public/index.html | 83 ++++++------ public/js/components.js | 31 ----- public/js/language.js | 80 ++++++++++++ public/js/translations.js | 158 +++++++++++++++++++++++ 14 files changed, 579 insertions(+), 108 deletions(-) create mode 100644 public/PROMPT.md create mode 100644 public/components/language-switcher.html create mode 100644 public/css/language-switcher.css create mode 100644 public/js/language.js create mode 100644 public/js/translations.js diff --git a/public/PROMPT.md b/public/PROMPT.md new file mode 100644 index 0000000..a772a10 --- /dev/null +++ b/public/PROMPT.md @@ -0,0 +1,61 @@ +Multilingual Enhancement Assistant for Existing Website + + +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 + + +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 + + +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 + + +- 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 + + +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 \ No newline at end of file diff --git a/public/components/footer.html b/public/components/footer.html index eaa34f9..ce0a7c8 100644 --- a/public/components/footer.html +++ b/public/components/footer.html @@ -8,7 +8,7 @@ - Signal + Signal
- Impressum - Datenschutz + Impressum + Datenschutz
diff --git a/public/components/header.html b/public/components/header.html index 89f9409..422f478 100644 --- a/public/components/header.html +++ b/public/components/header.html @@ -10,10 +10,16 @@ Home Expertise Kontakt - +
+
+ + +
+ +
- diff --git a/public/components/language-switcher.html b/public/components/language-switcher.html new file mode 100644 index 0000000..04dca96 --- /dev/null +++ b/public/components/language-switcher.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/public/css/header.css b/public/css/header.css index a528040..d47af7f 100644 --- 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; + } +} diff --git a/public/css/language-switcher.css b/public/css/language-switcher.css new file mode 100644 index 0000000..5916cfa --- /dev/null +++ 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); +} diff --git a/public/css/responsive.css b/public/css/responsive.css index 09dac3a..796d5cc 100644 --- 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; diff --git a/public/css/variables.css b/public/css/variables.css index 99f0b7d..3105dbd 100644 --- 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 */ diff --git a/public/datenschutz.html b/public/datenschutz.html index 044caec..449e1e3 100644 --- a/public/datenschutz.html +++ b/public/datenschutz.html @@ -8,22 +8,26 @@ - - - - - + + + + + + + + +
-

Datenschutzerklärung

+

Datenschutzerklärung

1. Datenschutz auf einen Blick

Allgemeine Hinweise

diff --git a/public/impressum.html b/public/impressum.html index b1d3b22..159f7ec 100644 --- a/public/impressum.html +++ b/public/impressum.html @@ -8,22 +8,26 @@ - - - - - + + + + + + + + +
-

Impressum

+

Impressum

Angaben gemäß § 5 TMG

7SYS
diff --git a/public/index.html b/public/index.html index 0dea2b7..db07578 100644 --- a/public/index.html +++ b/public/index.html @@ -3,8 +3,8 @@ - - 7SYS - Persönliche IT-Lösungen + + 7SYS - Persönliche IT-Lösungen @@ -20,6 +20,9 @@ + + + @@ -27,25 +30,25 @@

-

Ihr Partner für Digitale Souveränität

-

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.

- 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) +

Ihr Partner für Digitale Souveränität

+

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.

+ 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)
-

Meine Vision

-

Digitale Souveränität

+

Meine Vision

+

Digitale Souveränität

-
+
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.
-

Meine Mission

-

Sichere und nachhaltige IT-Lösungen

+

Meine Mission

+

Sichere und nachhaltige IT-Lösungen

-
+
Meine Mission ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten.
@@ -53,55 +56,53 @@
-

Meine Expertise

+

Meine Expertise

-

Strategische IT-Beratung

-

Ich begleite Sie persönlich bei der Entwicklung und Umsetzung Ihrer IT-Strategien

-
  • Analyse Ihrer bestehenden Systeme und Situation mit Blick auf die Zukunft
    • -
  • Individuelle Lösungen für Ihre Bedürfnisse
    • -
  • Zukunftsorientierte Technologieberatung
    • +

    Strategische IT-Beratung

    +

    Ich begleite Sie persönlich bei der Entwicklung und Umsetzung Ihrer IT-Strategien

    +
  • Analyse Ihrer bestehenden Systeme und Situation mit Blick auf die Zukunft
    • +
  • Individuelle Lösungen für Ihre Bedürfnisse
    • +
  • Zukunftsorientierte Technologieberatung
    • -

    Systemadministration

    -

    Professionelle Verwaltung und Wartung Ihrer IT-Systeme

    -
  • Server-Management
    • -
  • Netzwerkadministration
    • -
  • Backup-Konzepte
    • -
  • Security-Lösungen
    • +

    Systemadministration

    +

    Professionelle Verwaltung und Wartung Ihrer IT-Systeme

    +
  • Server-Management
    • +
  • Netzwerkadministration
    • +
  • Backup-Konzepte
    • +
  • Security-Lösungen
    • -

    Automatisierung

    -

    Automatisierte Lösungen für ausgewählte Prozesse, die Sie in Ihrer Organisation nutzen können, um Arbeiten sicher, effizient und konsistent zu gestalten.

    -
  • Ansible, PowerShell, Bash
    • -
  • N8N Workflows, Microsoft Power Automate
    • +

    Automatisierung

    +

    Automatisierte Lösungen für ausgewählte Prozesse, die Sie in Ihrer Organisation nutzen können, um Arbeiten sicher, effizient und konsistent zu gestalten.

    +
  • Ansible, PowerShell, Bash
    • +
  • N8N Workflows, Microsoft Power Automate
    • -

    Self-Hosted & Cloud Solutions

    -

    -

  • Wartung von Cloud- oder Self-Hosted-Infrastrukturen
    • -
  • Planung, Migration und Administration
    • -

    +

    Self-Hosted & Cloud Solutions

    +
  • Wartung von Cloud- oder Self-Hosted-Infrastrukturen
    • +
  • Planung, Migration und Administration
    • -

    Kernkompetenzen

    -
  • 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).
    • +

    Kernkompetenzen

    +
  • 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).
    • -

    Kontakt

    +

    Kontakt

    -

    Ich freue mich darauf, Ihr Projekt kennenzulernen und mit Ihnen gemeinsam,
    +

    Ich freue mich darauf, Ihr Projekt kennenzulernen und mit Ihnen gemeinsam,
    an Ihrer digitalen Souveränität zu arbeiten.

    diff --git a/public/js/components.js b/public/js/components.js index 05014f6..dd33c8b 100644 --- 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 }); - } } }); diff --git a/public/js/language.js b/public/js/language.js new file mode 100644 index 0000000..c879487 --- /dev/null +++ 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; + } +}); diff --git a/public/js/translations.js b/public/js/translations.js new file mode 100644 index 0000000..b6aff76 --- /dev/null +++ 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" + } + } +};