package-lock.json

@@ -12,6 +12,9 @@
         "astro": "^6.1.2",
         "tailwindcss": "^4.2.2"
       },
+      "devDependencies": {
+        "@tailwindcss/typography": "^0.5.19"
+      },
       "engines": {
         "node": ">=22.12.0"
       }
@@ -1800,6 +1803,19 @@
         "node": ">= 20"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
     "node_modules/@tailwindcss/vite": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.2.tgz",
@@ -2203,6 +2219,19 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csso": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
@@ -4242,6 +4271,20 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.30.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
@@ -5085,6 +5128,13 @@
         }
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",

package.json

@@ -15,5 +15,8 @@
     "@tailwindcss/vite": "^4.2.2",
     "astro": "^6.1.2",
     "tailwindcss": "^4.2.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19"
   }
 }

src/components/Footer.astro

@@ -0,0 +1,22 @@
+---
+// src/components/Footer.astro
+const currentYear = new Date().getFullYear();
+const startYear = 2026;
+const displayYear = currentYear > startYear ? `${startYear}–${currentYear}` : startYear;
+import { getPath } from '../utils/paths';
+---
+
+<footer class="main-footer">
+  <div class="footer-container">
+    <div class="footer-copy">
+      &copy;{displayYear} Eduard Iten
+    </div>
+    
+    <nav>
+      <ul class="footer-links">
+        <li><a href={getPath("/impressum")} class="footer-link-item">Impressum</a></li>
+        <li><a href={getPath("/datenschutz")} class="footer-link-item">Datenschutz</a></li>
+      </ul>
+    </nav>
+  </div>
+</footer>

src/components/Header.astro

@@ -0,0 +1,34 @@
+---
+import Logo from './Logo.astro';
+
+const pathname = new URL(Astro.request.url).pathname;
+const currentPath = pathname.slice(1); 
+---
+
+<header class="main-header">
+  <div class="header-container">
+    <a href="/" class="group flex items-center gap-2">
+      <Logo class="h-6 w-auto transition-colors" />
+    </a>
+<!-- 
+    <nav>
+      <ul class="nav-list">
+        <li>
+          <a href="/projekte" class={`nav-item ${currentPath === 'projekte' ? 'nav-item-active' : ''}`}>
+            Projekte
+          </a>
+        </li>
+        <li>
+          <a href="/engineering" class={`nav-item ${currentPath === 'engineering' ? 'nav-item-active' : ''}`}>
+            Engineering
+          </a>
+        </li>
+        <li>
+          <a href="/kontakt" class={`nav-item ${currentPath === 'kontakt' ? 'nav-item-active' : ''}`}>
+            Kontakt
+          </a>
+        </li>
+      </ul>
+    </nav> -->
+  </div>
+</header>

src/layouts/MainLayout.astro

@@ -0,0 +1,35 @@
+---
+// src/layouts/MainLayout.astro
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+import '../styles/global.css';
+
+interface Props {
+    title?: string;
+    description?: string;
+}
+
+const {
+    title = "iten.pro | Engineering",
+    description = "Portfolio und Projekte",
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang="de" class="scroll-smooth">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+    </head>
+    <body class="flex flex-col min-h-screen">
+        <Header />
+
+        <main class="flex-grow container mx-auto px-6 py-12">
+            <slot />
+        </main>
+
+        <Footer />
+    </body>
+</html>

src/layouts/PageLayout.astro

@@ -0,0 +1,11 @@
+---
+import MainLayout from './MainLayout.astro';
+import '../styles/global.css';
+const { frontmatter } = Astro.props;
+---
+<MainLayout title={frontmatter.title}>
+  <article class="prose prose-slate mx-auto ">
+    <h1 class="text-3xl font-bold mb-8">{frontmatter.title}</h1>
+    <slot />
+  </article>
+</MainLayout>

src/pages/datenschutz.md

@@ -0,0 +1,54 @@
+---
+layout: ../layouts/PageLayout.astro
+title: "Datenschutzerklärung"
+---
+
+Ich freue mich über Deinen Besuch auf meiner Internetseite iten.pro und dein Interesse an meinem Unternehmen.
+
+Der Schutz Ihrer personenbezogenen Daten, wie z.B. Geburtsdatum, Name, Telefonnummer, Anschrift etc., ist uns ein wichtiges Anliegen. Der Zweck dieser Datenschutzerklärung besteht darin, Sie über die Bearbeitung Ihrer personenbezogenen Daten zu informieren, die wir bei einem Seitenbesuch von Ihnen sammeln.
+
+## Inhaber
+Verantwortlicher für die Datenbearbeitung:
+
+Eduard Iten\
+Haufen 234\
+9426 Lutzenberg\
+Schweiz\
+**E-Mail:** info@iten.pro\
+**Tel.:** +41 78 766 73 18
+
+## Bereitstellung der Website und Erstellung von Logfiles
+Bei jedem Aufruf unserer Internetseite erfasst unser System automatisiert Daten und Informationen des jeweils abrufenden Gerätes.
+
+**Folgende Daten werden erhoben:**
+* Informationen über den Browsertyp und die verwendete Version
+* Das Betriebssystem des Abrufgerätes
+* Hostname des zugreifenden Rechners
+* Die IP-Adresse des Abrufgerätes
+* Datum und Uhrzeit des Zugriffs
+* Websites und Ressourcen (Bilder, Dateien), die aufgerufen wurden
+* Referrer-Tracking (von welcher Seite Sie zu uns kamen)
+* Übertragene Datenmenge
+
+Diese Daten werden in den Logfiles unseres Systems gespeichert. Eine Identifizierung einzelner Seitenbesucher findet nicht statt.
+
+## Zweck der Datenbearbeitung
+Die vorübergehende Speicherung der Daten ist erforderlich, um eine Auslieferung der Website zu ermöglichen, die Kompatibilität sicherzustellen und zur Missbrauchsbekämpfung (z.B. Schutz vor Angriffen).
+
+## Weitergabe an Dritte
+Wir behandeln Ihre Angaben vertraulich. Eine Weitergabe erfolgt nur an öffentliche Stellen oder Behörden, sofern gesetzliche Bestimmungen, gerichtliche Entscheidungen oder behördliche Anordnungen dies erfordern.
+
+## Datensicherheit
+Ihre Daten werden durch technische und organisatorische Massnahmen vor dem Zugriff Dritter geschützt. Wir weisen darauf hin, dass bei der Kommunikation per E-Mail keine vollständige Datensicherheit gewährleistet werden kann.
+
+## Ihre Rechte
+Sie haben im Rahmen des geltenden Datenschutzrechts (DSG) jederzeit folgende Rechte:
+* **Auskunft:** Sie können bestätigen lassen, ob wir Daten von Ihnen bearbeiten.
+* **Berichtigung:** Sie können die Korrektur unrichtiger Daten verlangen.
+* **Löschung:** Sie können die Löschung Ihrer Daten verlangen, sofern keine gesetzliche Aufbewahrungspflicht entgegensteht.
+* **Widerruf:** Erteilte Einwilligungen können Sie jederzeit widerrufen.
+
+Bitte wenden Sie sich für die Ausübung Ihrer Rechte direkt an die oben genannte Kontaktadresse.
+
+## Aufsichtsbehörde
+Wenn Sie glauben, dass die Bearbeitung Ihrer Daten gegen Datenschutzvorschriften verstösst, können Sie beim **Eidgenössischen Datenschutz- und Öffentlichkeitsbeauftragten (EDÖB)** eine Anzeige machen.

src/pages/impressum.md

@@ -0,0 +1,17 @@
+---
+layout: ../layouts/PageLayout.astro
+title: "Impressum"
+---
+
+## Kontaktadresse
+Eduard Iten  
+Haufen 234  
+9426 Lutzenberg  
+Schweiz  
+**E-Mail:** info@iten.pro
+
+## Vertretungsberechtigte Personen
+Eduard Iten, Inhaber
+
+## Haftungsausschluss
+Der Autor übernimmt keinerlei Gewähr hinsichtlich der inhaltlichen Richtigkeit, Genauigkeit, Aktualität, Zuverlässigkeit und Vollständigkeit der Informationen...

src/pages/index.astro

@@ -1,33 +1,24 @@
 ---
-import '../styles/global.css'
+import MainLayout from "../layouts/MainLayout.astro";
 ---
 
-<html lang="de">
+<MainLayout title="Home | iten.pro">
-  <head>
+	<div class="flex flex-col items-center justify-center">
-    <meta charset="utf-8" />
+		<div class="width-md">
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+			<h1 class="text-4xl font-bold text-center mb-4">Error 404: Motivation Not Found</h1>
-    <title>Engineering | Under Construction</title>
+			<p class="font-md text-lg">
-  </head>
+				Das theoretische Konzept für diese Website ist absolut
-  <body class="bg-gray-900 text-gray-200 h-screen flex flex-col items-center justify-center p-6 text-center font-mono">
+				fehlerfrei und auf dem Papier bereits ein Meisterwerk. Leider
-    
+				hat die Umsetzung in der Praxis einige unerwartete
-    <div class="max-w-3xl">
+				Herausforderungen mit sich gebracht, die zu diesem bedauerlichen
-      <h1 class="text-4xl md:text-6xl font-bold mb-6 text-blue-400">
+				Ergebnis geführt haben. Es scheint, als ob die Motivation, die
-        Error 404: Motivation Not Found
+				für die Entwicklung dieser Seite erforderlich ist, auf
-      </h1>
+				mysteriöse Weise verschwunden ist. Trotz aller Bemühungen, sie
-      
+				wiederzufinden, bleibt sie unauffindbar. Wir entschuldigen uns
-      <p class="text-lg md:text-2xl text-gray-400 mb-8 leading-relaxed">
+				aufrichtig für diese Unannehmlichkeit und hoffen, dass wir in
-        Das theoretische Konzept für diese Website ist absolut fehlerfrei und auf dem Papier bereits ein Meisterwerk. <br />
+				Zukunft eine Lösung finden können, um die Motivation
-        <span class="text-gray-500 text-sm mt-4 block">
+				zurückzubringen und diese Website zum Leben zu erwecken.
-          // Status: Warte auf die praktische Umsetzung (voraussichtliche Dauer: NaN)
-        </span>
 			</p>
-
-      <div class="flex justify-center space-x-2 mt-8">
-        <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s"></div>
-        <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
-        <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
 		</div>
 	</div>
-
+</MainLayout>
-  </body>
-</html>

src/styles/global.css

@@ -1 +1,57 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+    --color-header-bg: var(--color-slate-200);
+    --color-nav-text: var(--color-slate-400);
+    --color-nav-hover: var(--color-blue-400);
+    --shadow-top: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+@layer base {
+    body {
+        @apply bg-slate-50 text-slate-700 antialiased;
+    }
+}
+
+@layer components {
+
+    /* Der Container des Headers */
+    .main-header {
+        @apply sticky top-0 z-50 w-full bg-linear-to-b from-white to-header-bg backdrop-blur-md shadow-md;
+    }
+
+    /* Innere Zentrierung */
+    .header-container {
+        @apply container mx-auto flex h-16 items-center justify-between px-6;
+    }
+
+    /* Navigations-Links */
+    .nav-list {
+        @apply flex items-center gap-8;
+    }
+
+    .nav-item {
+        @apply text-sm font-medium text-nav-text transition-colors hover:text-nav-hover;
+    }
+
+    .main-footer {
+        @apply w-full bg-linear-to-b from-white to-header-bg py-2 mt-auto shadow-top;
+    }
+
+    .footer-container {
+        @apply container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4;
+    }
+
+    .footer-copy {
+        @apply text-xs text-slate-400 font-medium;
+    }
+
+    .footer-links {
+        @apply flex gap-6 text-xs text-slate-500;
+    }
+
+    .footer-link-item {
+        @apply hover:text-blue-500 transition-colors;
+    }
+}

src/utils/paths.ts

@@ -0,0 +1,18 @@
+// src/utils/paths.ts
+
+// Wir greifen auf die Umgebungsvariable von Astro zu
+const base = import.meta.env.BASE_URL;
+
+/**
+ * Erstellt einen korrekten Pfad unter Berücksichtigung der Astro 'base' Konfiguration.
+ * Verhindert doppelte Slashes und funktioniert in Dev, Test und Prod.
+ */
+export function getPath(path: string): string {
+  // Entfernt den Slash am Ende der Base, falls vorhanden
+  const normalizedBase = base.replace(/\/$/, '');
+  
+  // Stellt sicher, dass der Pfad mit einem Slash beginnt
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  
+  return `${normalizedBase}${normalizedPath}`;
+}