language switch functionality added

This commit is contained in:
ben7sys
2024-11-25 00:17:13 +01:00
parent 083e9fd771
commit 558df41289
14 changed files with 579 additions and 108 deletions

View File

@@ -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 (19302002)</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 (19302002)</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">