From 3e0875a0d7ba0188388ed4fe49c54a48f395ade2 Mon Sep 17 00:00:00 2001
From: Alexander Daichendt <git@daichendt.one>
Date: Sat, 5 Jul 2025 08:01:47 +0200
Subject: [PATCH] feat: add datenschutz

---
 src/components/nav/MobileNavDrawer.astro |   2 +-
 src/components/nav/TopHeader.astro       |   7 -
 src/layouts/BaseLayout.astro             |   4 -
 src/pages/datenschutz/index.astro        | 258 +++++++++++++++++++++++
 src/pages/index.astro                    |  23 +-
 5 files changed, 274 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/datenschutz/index.astro

diff --git a/src/components/nav/MobileNavDrawer.astro b/src/components/nav/MobileNavDrawer.astro
index b2c3763..76fef7e 100644
--- a/src/components/nav/MobileNavDrawer.astro
+++ b/src/components/nav/MobileNavDrawer.astro
@@ -16,7 +16,7 @@ import DarkModeToggle from "./DarkModeToggle.astro";
   <!-- Mobile Drawer -->
   <nav
     id="mobile-drawer"
-    class="fixed top-0 right-0 h-full w-64 bg-white dark:bg-gray-800 shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50"
+    class="fixed top-0 right-0 h-full w-48 bg-white dark:bg-gray-800 shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50"
   >
     <!-- Close button in drawer -->
     <div
diff --git a/src/components/nav/TopHeader.astro b/src/components/nav/TopHeader.astro
index 17b1aea..a9fedb6 100644
--- a/src/components/nav/TopHeader.astro
+++ b/src/components/nav/TopHeader.astro
@@ -10,7 +10,6 @@ import MobileNav from "./MobileNav.astro";
 >
   <div class="max-w-full lg:px-16 md:px-8 px-2 py-4">
     <div class="flex items-center justify-between">
-      <!-- Site Title - stays on far left -->
       <h2 class="font-bold text-xl mb-0 font-mono flex">
         <a
           href="/"
@@ -20,20 +19,14 @@ import MobileNav from "./MobileNav.astro";
         </a>
       </h2>
 
-      <!-- Center container aligned with content -->
       <div class="flex-1 flex justify-center">
         <div class="max-w-2xl w-full flex justify-end lg:justify-start">
-          <!-- Desktop: Nav Menu aligned with content -->
           <DesktopNav />
         </div>
       </div>
 
-      <!-- Right side: Dark Mode Toggle + Mobile Menu -->
       <div class="flex items-center gap-4">
-        <!-- Dark Mode Toggle - always visible -->
         <div class="hidden lg:block"><DarkModeToggle /></div>
-
-        <!-- Mobile Navigation Toggle - only on mobile -->
         <MobileNav />
       </div>
     </div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index b4ef3de..3935090 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -46,13 +46,10 @@ const {
   >
     <div id="theme-overlay" class="theme-overlay"></div>
 
-    <!-- Mobile Navigation Drawer (at body level for proper positioning) -->
     <MobileNavDrawer />
 
-    <!-- Header -->
     <TopHeader />
 
-    <!-- Main Content -->
     <main class="flex-1">
       <div class={`${className} mx-auto`}>
         <PageHeadline title={title} subtitle={subtitle} />
@@ -60,7 +57,6 @@ const {
       </div>
     </main>
 
-    <!-- Footer -->
     <Footer />
 
     <style>
diff --git a/src/pages/datenschutz/index.astro b/src/pages/datenschutz/index.astro
new file mode 100644
index 0000000..60ebeed
--- /dev/null
+++ b/src/pages/datenschutz/index.astro
@@ -0,0 +1,258 @@
+---
+import Link from "../../components/Link.astro";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+---
+
+<BaseLayout title="Datenschutz (Germany)">
+  <h2>Datenschutzerklärung</h2>
+  <p>
+    Im Folgenden möchten wir Sie aufklären, wie Ihre Daten von uns verarbeitet
+    werden.
+  </p>
+
+  <p>
+    <strong>Verantwortlich im Sinne der DSGVO ist:</strong><br />
+    <span class="placeholder">Alexander Daichendt</span><br />
+    <span class="placeholder">Wiesenweg 10a, 85464 Neufinsing</span><br />
+    <span class="placeholder">datenschutz@daichendt.one</span>
+  </p>
+
+  <p>
+    Sollten Sie per E-Mail oder über Kontaktformular mit uns Kontakt aufnehmen,
+    werden die mitgeteilten Daten von uns gespeichert, um Ihr Anliegen zu
+    bearbeiten.
+  </p>
+
+  <p><strong>Zu den verarbeiteten Daten zählen:</strong></p>
+  <ul>
+    <li><span class="placeholder">[Ihr Name]</span></li>
+    <li><span class="placeholder">[Ihre E-Mail-Adresse]</span></li>
+    <li><span class="placeholder">[Ihre Telefonnummer]</span></li>
+  </ul>
+
+  <p>
+    Wir werden die Daten löschen, sobald die Speicherung nicht mehr erforderlich
+    ist oder die Verarbeitung einschränken, falls gesetzliche
+    Aufbewahrungspflichten bestehen.
+  </p>
+
+  <h2>Betroffenenrechte</h2>
+  <p>
+    Sie haben als betroffene Person, das Recht auf Auskunft, das Recht auf
+    Berichtigung oder Löschung, das Recht auf Einschränkung der Verarbeitung und
+    das Recht auf Widerspruch gegen die Verarbeitung Ihrer Daten. Sofern Sie uns
+    eine Einwilligung erteilt haben, können Sie diese jederzeit mit Wirkung für
+    die Zukunft widerrufen.
+  </p>
+
+  <p>Bitte richten Sie Ihren Widerspruch formlos an die obige Adresse.</p>
+
+  <p>
+    Darüber hinaus haben Sie das Recht auf Datenübertragbarkeit. Sie haben
+    weiter das Recht, sich bei einer Aufsichtsbehörde über die Verarbeitung zu
+    beschweren. Eine Liste der entsprechenden Behörden finden Sie unter: <Link
+      href="https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html"
+      >https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html</Link
+    >.
+  </p>
+
+  <div class="legal-note">
+    <h3>Rechtliche Hinweise</h3>
+    <h4>Betroffenenrechte</h4>
+    <p>
+      Sollte die Datenverarbeitung nicht auf Einwilligung des Betroffenen
+      beruhen (siehe Kontaktformular), muss das Widerrufsrecht nicht angegeben
+      werden (Art. 13 Abs. 2 lit. c DSGVO).
+    </p>
+  </div>
+
+  <h2>Cloudflare</h2>
+  <p>
+    Wir nutzen das Content Delivery Network (CDN) von Cloudflare Germany GmbH,
+    Rosental 7, c/o Mindspace, 80331 München Deutschland (Cloudflare), um die
+    Sicherheit und die Auslieferungsgeschwindigkeit unserer Website zu erhöhen.
+    Dies entspricht unserem berechtigten Interesse (Art. 6 Abs. 1 lit. f DSGVO).
+    Ein CDN ist ein Netzwerk aus weltweit verteilten Servern, das in der Lage
+    ist, optimiert Inhalte an den Websitenutzer auszuliefern. Für diesen Zweck
+    können personenbezogene Daten in Server-Logfiles von Cloudflare verarbeitet
+    werden. Bitte vergleichen Sie die Ausführungen unter „Hosting".
+  </p>
+
+  <p>
+    Cloudflare ist Empfänger Ihrer personenbezogenen Daten und als
+    Auftragsverarbeiter für uns tätig. Die entspricht unserem berechtigten
+    Interesse im Sinne des Art. 6 Abs. 1 S. 1 lit. f DSGVO, selbst kein Content
+    Delivery Network zu betreiben.
+  </p>
+
+  <p>
+    Sie haben das Recht der Verarbeitung zu widersprechen. Ob der Widerspruch
+    erfolgreich ist, ist im Rahmen einer Interessenabwägung zu ermitteln.
+  </p>
+
+  <p>
+    Die Verarbeitung der unter diesem Abschnitt angegebenen Daten ist weder
+    gesetzlich noch vertraglich vorgeschrieben. Die Funktionsfähigkeit der
+    Website ist ohne die Verarbeitung nicht gewährleistet.
+  </p>
+
+  <p>
+    Ihre personenbezogenen Daten werden von Cloudflare so lange gespeichert, wie
+    es für die beschriebenen Zwecke erforderlich ist.
+  </p>
+
+  <p>
+    Weitere Informationen zu Widerspruchs- und Beseitigungsmöglichkeiten
+    gegenüber Cloudflare finden Sie unter: Cloudflare DPA
+  </p>
+
+  <p>
+    Cloudflare hat Compliance-Maßnahmen für internationale Datenübermittlungen
+    umgesetzt. Diese gelten für alle weltweiten Aktivitäten, bei denen
+    Cloudflare personenbezogene Daten von natürlichen Personen in der EU
+    verarbeitet. Diese Maßnahmen basieren auf den EU-Standardvertragsklauseln
+    (SCCs). Weitere Informationen finden Sie unter: <Link
+      href="https://www.cloudflare.com/cloudflare_customer_SCCs-German.pdf"
+      >https://www.cloudflare.com/cloudflare_customer_SCCs-German.pdf</Link
+    >
+  </p>
+
+  <h2>Hosting</h2>
+  <p>
+    Sofern Sie sich als Besucher weder registrieren noch einloggen, erheben wir
+    in sog. Logfiles folgende Daten, die Ihr Browser übermittelt:
+  </p>
+
+  <p>
+    IP-Adresse, Datum und Uhrzeit der Anfrage, Zeitzonendifferenz zur Greenwich
+    Mean Time, Inhalt der Anforderung, HTTP-Statuscode, übertragene Datenmenge,
+    Website, von der die Anforderung kommt und Informationen zu Browser und
+    Betriebssystem.
+  </p>
+
+  <p>
+    Das ist erforderlich, um unsere Website anzuzeigen und die Stabilität und
+    Sicherheit zu gewährleisten. Dies entspricht unserem berechtigten Interesse
+    im Sinne des Art. 6 Abs. 1 S. 1 lit. f DSGVO.
+  </p>
+
+  <p>
+    Wir setzen für die Zurverfügungstellung unserer Website folgenden Hoster
+    ein: Cloudflare
+  </p>
+
+  <p>
+    Dieser ist Empfänger Ihrer personenbezogenen Daten und als
+    Auftragsverarbeiter für uns tätig. Dies entspricht unserem berechtigten
+    Interesse im Sinne des Art. 6 Abs. 1 S. 1 lit. f DSGVO, selbst keinen Server
+    in unseren Räumlichkeiten vorhalten zu müssen.
+  </p>
+
+  <p>
+    Sie haben das Recht der Verarbeitung zu widersprechen. Ob der Widerspruch
+    erfolgreich ist, ist im Rahmen einer Interessenabwägung zu ermitteln.
+  </p>
+
+  <p>
+    Die Verarbeitung der unter diesem Abschnitt angegebenen Daten ist weder
+    gesetzlich noch vertraglich vorgeschrieben. Die Funktionsfähigkeit der
+    Website ist ohne die Verarbeitung nicht gewährleistet.
+  </p>
+
+  <div class="technical-note">
+    <h3>Technische Hinweise</h3>
+    <p>
+      Neben den Server-Logfiles können auch von der verwendeten Applikation und
+      deren Plugins personenbezogene Daten verarbeitet werden. Darunter fallen
+      u.a. die Protokollierung fehlerhafter Anmeldeversuche, oder Zugriffe auf
+      nicht existierende Seiten (404). Dies sollte überprüft und entsprechend
+      ergänzt werden.
+    </p>
+
+    <p>
+      Im Falle eine Speicherung, sollte ebenfalls angegeben werden, wie lange
+      diese erfolgt und ob und ab wann eine Anonymisierung der erhobenen Daten
+      stattfindet.
+    </p>
+  </div>
+
+  <div class="legal-note">
+    <h3>Rechtliche Hinweise</h3>
+    <p>
+      Grundsätzlich ist ein Auftragsverarbeitungsvertrag mit dem Hoster
+      abzuschließen. Das bayerische Landesamt für Datenschutzaufsicht hat für
+      das Hosting rein statischer Websites eine Ausnahme gemacht. Für den Fall,
+      dass die Webseite der Selbstdarstellung dient, z.B. von Vereinen oder
+      Kleinunternehmen, keine personenbezogenen Daten an den Betreiber fließen
+      und kein Tracking stattfindet, liegt keine Auftragsverarbeitung vor.
+      Weiter heißt es: „Die Tatsache, dass auch beim Hosting von statischen
+      Webseiten zwangsläufig IP-Adressen, d.h. personenbezogene Daten,
+      verarbeitet werden müssen, führt nicht zur Annahme einer
+      Auftragsverarbeitung. Das wäre nicht sachgerecht. Die (kurzfristige)
+      IP-Adressenspeicherung ist vielmehr noch der TK-Zugangsvermittlung des
+      Website-Hosters nach dem TKG zuzurechnen und dient in erster Linie
+      Sicherheitszwecken des Hosters." (<Link
+        href="https://www.lda.bayern.de/media/veroeffentlichungen/FAQ_Hosting_keine_Auftragsverarbeitung.pdf"
+        >https://www.lda.bayern.de/media/veroeffentlichungen/FAQ_Hosting_keine_Auftragsverarbeitung.pdf</Link
+      >) Es sollte deshalb überprüft werden, ob der Hoster Tracking und
+      Auswertungstools zur Verfügung stellt und ob und wie lange Logfiles
+      aufbewahrt werden.
+    </p>
+  </div>
+
+  <h3>Weitere Zwecke der Datenverarbeitung</h3>
+  <ul>
+    <li>Gewährleistung der Stabilität und Sicherheit der Website</li>
+    <li>Auswertung der Systemsicherheit und -Stabilität</li>
+    <li>Optimierung der Website</li>
+    <li>Überprüfung, ob rechtswidrige Nutzung stattgefunden hat</li>
+  </ul>
+
+  <div class="legal-note">
+    <h3>Widerspruchs- und Beseitigungsmöglichkeit</h3>
+    <p>
+      Der häufig verwendete Hinweis, dass seitens des Nutzers keine
+      Widerspruchsmöglichkeit bestehe, entspricht nicht der gesetzlichen
+      Vorgabe. Wird die Verarbeitung auf das berechtigte Interesse des
+      Verantwortlichen gestützt (Art. 6 Abs. 1 lit.f DSGVO), so ist das Recht
+      auf Widerspruch nicht per se ausgeschlossen. Ob dieser jedoch Erfolg hat,
+      ist im Rahmen einer Interessenabwägung zu ermitteln. Auch wenn in der
+      Praxis das berechtigte Interesse des Websitebetreibers wohl überwiegen
+      wird, folgt daraus kein Ausschluss des Widerspruchrechts. Eine solche
+      Formulierung sollte korrigiert werden, da sie dazu führen kann, dass der
+      Betroffene an der Ausübung seines Widerspruchrechts gehindert wird.
+    </p>
+
+    <h3>Empfänger</h3>
+    <p>
+      Gemäß Art. 13. Abs. 1 lit. e DSGVO, besteht die Pflicht „die Empfänger
+      oder Kategorien von Empfängern der personenbezogenen Daten" anzugeben.
+      Häufig wird vertreten, dass vorrangig Empfänger namentlich und mit
+      Anschrift zu benennen sind und nur hilfsweise auf Kategorien
+      zurückgegriffen werden darf. Eine andere Auffassung vertritt ein Wahlrecht
+      zwischen der namentlichen Nennung und der Angabe von Kategorien. (Vgl.
+      Daum: Pflichtangaben auf Webseiten MMR 2020 643 (646) m.w.N.) Demnach wäre
+      es ausreichend als Kategorie „Hoster" anzugeben. Für diese Auffassung
+      spricht jedoch, wenn überhaupt, nur die Übersichtlichkeit. Dem Sinn und
+      Zweck der Vorschrift entspricht es aber vielmehr den Namen und die
+      Anschrift anzugeben, zumal dieser im Rahmen des Hostings bereits feststeht
+      (Vgl. Lorenz: Datenschutzrechtliche Informationspflichten (VuR 2019, 213
+      (216)).
+    </p>
+
+    <h3>Speicherdauer</h3>
+    <p>
+      Für die Feststellung der Speicherdauer sollten die Server- und
+      Applikationseinstellungen überprüft werden, auch um Widersprüche zwischen
+      den angebenden Zwecken zu vermeiden. So kann es beispielsweise zu
+      Unstimmigkeiten kommen, wenn angegeben wird, dass nach jeder Sitzung die
+      Daten gelöscht werden, diese aber gleichzeitig der Stabilität und
+      Sicherheit dienen sollen. Eine allgemeine Mitteilung, die Daten würden so
+      lange gespeichert werden, wie es für die angegebenen Zwecke erforderlich
+      ist, ist nicht ausreichend (Vgl. Simitis/Hornung/Spiecker gen. Döhmann,
+      Datenschutzrecht, Art. 13 Rn 15). Ausreichend ist aber gem. Art. 13 Abs. 2
+      lit a. DSGVO die Angabe von Kriterien für die Festlegung der
+      Speicherdauer.
+    </p>
+  </div>
+</BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b71db5a..e1ab428 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -55,20 +55,26 @@ const skills = {
 <BaseLayout
   title="Hi, my name is Alex!"
   subtitle="Software Engineer, Linux Enthusiast, Lightweight Systems Advocate"
-  className="w-full py-16 gap-16 flex flex-col"
+  className="w-full py-16 flex flex-col"
 >
   <section
-    class="max-w-8xl mx-auto grid grid-cols-[auto,1fr,auto] items-start gap-8"
+    class="max-w-8xl mx-auto
+        grid grid-cols-1 lg:grid-cols-[auto,1fr,auto]
+        items-center md:items-start
+        gap-8
+        py-8 md:py-12"
   >
-    <div class="w-64 hidden md:block"></div>
+    <!-- Left Spacer: Already responsive, no changes needed -->
+    <div class="w-72 hidden md:block"></div>
 
-    <div class="max-w-2xl px-4">
-      <p>
+    <!-- Main Content: Add order to place it below the image on mobile -->
+    <div class="max-w-2xl px-4 order-2 md:order-none">
+      <p class="mb-4">
         I am a privacy-first software engineer passionate about building web
         applications that are efficient, user-friendly, and respectful of your
         data.
       </p>
-      <p>
+      <p class="mb-4">
         I help clients design and develop sleek, standards-compliant web
         solutions, always prioritizing usability over visual clutter. With
         hands-on experience in Rust, Node.js and many more, I believe in using
@@ -80,8 +86,9 @@ const skills = {
       </p>
     </div>
 
-    <div>
-      <Picture src={me} alt="me" class="w-64 h-auto" />
+    <!-- Picture: Place it first on mobile using order -->
+    <div class="px-4 order-1 md:order-none">
+      <Picture src={me} alt="me" class="w-48 md:w-64 h-auto mx-auto" />
     </div>
   </section>