src/components/Footer.astro

@@ -1,9 +1,10 @@
 ---
 // src/components/Footer.astro
+import { getPath } from '../utils/paths';
+
 const currentYear = new Date().getFullYear();
 const startYear = 2026;
 const displayYear = currentYear > startYear ? `${startYear}–${currentYear}` : startYear;
-import { getPath } from '../utils/paths';
 ---
 
 <footer class="main-footer">
@@ -20,3 +21,32 @@ import { getPath } from '../utils/paths';
     </nav>
   </div>
 </footer>
+
+<style>
+    @reference "../styles/global.css";
+    .main-footer {
+        @apply fixed bottom-0 left-0 w-full z-50 py-2 shadow-top  bg-linear-to-b from-white/80 to-header-bg/80 backdrop-blur-sm;
+
+    }
+
+    /* .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;
+    }
+
+</style>

src/components/Header.astro

@@ -1,16 +1,18 @@
 ---
-import Logo from './Logo.astro';
+// src/components/Header.astro
+import Logo from "./Logo.astro";
+import { getPath } from "../utils/paths";
 
 const pathname = new URL(Astro.request.url).pathname;
 const currentPath = pathname.slice(1);
 ---
 
 <header class="main-header">
-  <div class="header-container">
+    <div class="header-container">
-    <a href="/" class="group flex items-center gap-2">
+        <a href={getPath("/")} class="group flex items-center gap-2">
-      <Logo class="h-6 w-auto transition-colors" />
+            <Logo class="h-6 w-auto transition-colors" />
-    </a>
+        </a>
-<!-- 
+        <!-- 
     <nav>
       <ul class="nav-list">
         <li>
@@ -30,5 +32,26 @@ const currentPath = pathname.slice(1);
         </li>
       </ul>
     </nav> -->
-  </div>
+    </div>
 </header>
+
+<style>
+    @reference "../styles/global.css";
+    .main-header {
+        @apply sticky top-0 z-50 w-full bg-linear-to-b from-white/80 to-header-bg/80 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;
+    }
+</style>

src/components/PatternCode.astro

@@ -0,0 +1,50 @@
+---
+// src/components/CodePattern.astro
+interface Props {
+  fillColor?: string;
+}
+const { fillColor = "text-white" } = Astro.props;
+
+const codeLines = [
+  "/* Zephyr RTOS Thread Init */",
+  "K_THREAD_DEFINE(my_tid, STACKSIZE,",
+  "                my_entry_point, NULL, NULL, NULL,",
+  "                MY_PRIORITY, 0, K_NO_WAIT);",
+  "void main(void) {",
+  "    printk(\"Booting iten.pro...\\n\");",
+  "}"
+];
+---
+
+<svg 
+  width="100%" 
+  height="100%" 
+  xmlns="http://www.w3.org/2000/svg" 
+  class={`block ${fillColor}`}
+>
+  <defs>
+    <pattern 
+      id="codePattern" 
+      x="0" 
+      y="0" 
+      width="600" 
+      height="280" 
+      patternUnits="userSpaceOnUse"
+    >
+      <text 
+        x="0" 
+        y="30" 
+        font-family="monospace" 
+        font-weight="bold"
+        font-size="20" 
+        fill="currentColor"
+      >
+        {codeLines.map((line, index) => (
+          <tspan x="10" dy={index === 0 ? "0" : "1.5em"}>{line}</tspan>
+        ))}
+      </text>
+    </pattern>
+  </defs>
+  
+  <rect width="100%" height="100%" fill="url(#codePattern)" />
+</svg>

src/components/PatternSystem.astro

@@ -0,0 +1,47 @@
+---
+// src/components/PatternSystem.astro
+interface Props {
+  fillColor?: string;
+}
+const { fillColor = "text-white" } = Astro.props;
+---
+
+<svg 
+  viewBox="0 0 200 60" 
+  preserveAspectRatio="xMidYMid slice" 
+  xmlns="http://www.w3.org/2000/svg" 
+  class={`w-full h-full block ${fillColor} fill-current`}
+>
+  <g opacity="0.15">
+    <path d="M 10,30 L 190,30" stroke="currentColor" stroke-width="1" />
+    <path d="M 10,32 L 190,32" stroke="currentColor" stroke-width="0.5" stroke-dasharray="2 2" />
+  </g>
+
+  <g opacity="0.25">
+    
+    <rect x="20" y="20" width="25" height="20" rx="1" stroke="currentColor" stroke-width="0.5" fill="none" />
+    <text x="23" y="28" font-family="monospace" font-size="3" fill="currentColor">SEN</text>
+    <path d="M 32.5,30 L 32.5,40" stroke="currentColor" stroke-width="0.5" />
+    <circle cx="32.5" cy="30" r="1" fill="currentColor" />
+
+    <rect x="65" y="15" width="30" height="30" rx="2" stroke="currentColor" stroke-width="1" fill="none" />
+    <text x="70" y="25" font-family="monospace" font-size="4" font-weight="bold" fill="currentColor">MCU</text>
+    <path d="M 65,30 L 95,30" stroke="currentColor" stroke-width="0.5" />
+    <g opacity="0.5">
+        <path d="M 70,30 L 70,15 M 75,30 L 75,15 M 80,30 L 80,15 M 85,30 L 85,15" stroke="currentColor" stroke-width="0.2" />
+        <path d="M 70,30 L 70,45 M 75,30 L 75,45 M 80,30 L 80,45 M 85,30 L 85,45" stroke="currentColor" stroke-width="0.2" />
+    </g>
+
+    <rect x="115" y="22" width="20" height="16" rx="1" stroke="currentColor" stroke-width="0.5" fill="none" />
+    <text x="118" y="29" font-family="monospace" font-size="3" fill="currentColor">MEM</text>
+    <path d="M 125,30 L 125,38" stroke="currentColor" stroke-width="0.5" />
+    <circle cx="125" cy="30" r="1" fill="currentColor" />
+
+    <rect x="155" y="18" width="25" height="24" rx="1" stroke="currentColor" stroke-width="0.5" fill="none" />
+    <path d="M 175,22 L 175,12 M 172,15 L 175,12 L 178,15 M 170,18 L 175,12 L 180,18" stroke="currentColor" stroke-width="0.5" fill="none" />
+    <text x="158" y="26" font-family="monospace" font-size="3" fill="currentColor">RF/LoRa</text>
+    <path d="M 167.5,30 L 167.5,42" stroke="currentColor" stroke-width="0.5" />
+    <circle cx="167.5" cy="30" r="1" fill="currentColor" />
+
+  </g>
+</svg>

src/components/Section.astro

@@ -0,0 +1,64 @@
+---
+// src/components/Section.astro
+interface Props {
+    title: string;
+    subtitle?: string;
+    themeColor?: string;
+    highlightColor?: string;
+    id?: string;
+}
+
+const {
+    title,
+    subtitle,
+    themeColor,
+    highlightColor,
+    id,
+} = Astro.props;
+
+// Extrahiere den reinen Farbnamen für die CSS-Variable des Listen-Randes
+// Aus "bg-fuchsia-800" wird "fuchsia-800"
+const borderColorName = themeColor.replace("bg-", "");
+---
+
+<div id={id} class="w-full" style={`--list-border-color: var(--color-${borderColorName});`}>
+    <header class={`w-full py-8 lg:py-16 relative overflow-hidden ${themeColor}`}>
+        <div class="absolute inset-0 pointer-events-none z-0">
+            <div class="w-full h-full block"> 
+                <slot name="background" />
+            </div>
+        </div>
+
+        <div class="container mx-auto px-6 relative z-10 max-w-6xl">
+            <h2 class="text-5xl font-bold text-white mb-2 drop-shadow-lg">
+                {title}
+            </h2>
+            {
+                subtitle && (
+                    <p class={`text-2xl font-semibold ${highlightColor} drop-shadow-lg`}>
+                        {subtitle}
+                    </p>
+                )
+            }
+        </div>
+    </header>
+
+    <article class="w-full">
+        <div class="container mx-auto px-6 max-w-6xl pt-6 pb-12 section-content">
+            <slot />
+        </div>
+    </article>
+</div>
+
+<style>
+    @reference "../styles/global.css";
+
+    .section-content :global(ul) {
+        @apply grid md:grid-cols-2 gap-4 mt-6 list-none pl-0;
+    }
+
+    .section-content :global(li) {
+        @apply bg-slate-100 text-slate-800 px-4 py-2 rounded border-l-4 shadow-sm;
+        border-left-color: var(--list-border-color);
+    }
+</style>

src/layouts/MainLayout.astro

@@ -2,7 +2,7 @@
 // src/layouts/MainLayout.astro
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
-import '../styles/global.css';
+import "../styles/global.css";
 
 interface Props {
     title?: string;
@@ -26,7 +26,7 @@ const {
     <body class="flex flex-col min-h-screen">
         <Header />
 
-        <main class="flex-grow container mx-auto px-6 py-12">
+        <main class="flex-grow w-full">
             <slot />
         </main>
 

src/layouts/PageLayout.astro

@@ -1,11 +1,10 @@
 ---
 import MainLayout from './MainLayout.astro';
-import '../styles/global.css';
 const { frontmatter } = Astro.props;
 ---
 <MainLayout title={frontmatter.title}>
-  <article class="prose prose-slate mx-auto ">
+  <article class="prose prose-slate mx-auto bg-white p-4 mt-6 mb-16 shadow-lg">
-    <h1 class="text-3xl font-bold mb-8">{frontmatter.title}</h1>
+    <h1>{frontmatter.title}</h1>
     <slot />
   </article>
 </MainLayout>

src/pages/index-test.astro

@@ -0,0 +1,85 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+import Section from "../components/Section.astro";
+import PatternCode from "../components/PatternCode.astro";
+import PatternPCB from "../components/PatternPCB.astro";
+import PatternSystem from "../components/PatternSystem.astro";
+import { ACTION_QUERY_PARAMS } from "astro:actions";
+---
+
+<MainLayout title="Engineering | iten.pro">
+  <Section
+    title="Hardware"
+    subtitle="Low-Power Systeme, Embedded SoC & PCB-Design"
+    themeColor="bg-lime-700"
+    highlightColor="text-lime-200"
+  >
+    <div slot="background" class="w-full h-full">
+      <PatternPCB fillColor="text-lime-800" />
+    </div>
+    <div class="prose prose-slate max-w-none">
+      <p class="text-xl">
+        Die physische Basis: Zuverlässige Hardware-Architekturen für intelligente und vernetzte Systeme.
+      </p>
+      <ul class="list-disc">
+        <li>Design von Low-Power-<strong>Embedded-Systemen</strong> basierend auf <strong>ARM Cortex-M</strong> und <strong>RISC-V</strong> Architekturen.</li>
+        <li><strong>PCB-Design</strong> (KiCad) mit Fokus auf kompakte IoT-Lösungen und EMV-gerechtes Layout.</li>
+        <li>Rapid <strong>Prototyping</strong> und Evaluierung mit gängigen SoCs (STM32, RP2040, ESP32, Nordic nRF52).</li>
+        <li><strong>Power Management</strong> & Ladeelektronik, inklusive Schutzbeschaltungen für Li-Ion-Akkusysteme.</li>
+      </ul>
+    </div>
+  </Section>
+
+  <Section
+    title="Software"
+    subtitle="Embedded Software & RTOS"
+    themeColor="bg-indigo-800"
+    highlightColor="text-indigo-200"
+  >
+    <div slot="background" class="w-full h-full">
+      <PatternCode fillColor="text-indigo-700" />
+    </div>
+    <div class="prose prose-slate max-w-none">
+      <p class="text-xl">
+        Hardwarenahe Softwareentwicklung. Von der Bare-Metal-Firmware bis zur RTOS-Integration – optimiert auf Performance und minimalen Energieverbrauch.
+      </p>
+      <ul class="list-disc">
+        <li><strong>Firmware-Entwicklung</strong> in C/C++ für ressourcenbeschränkte Mikrocontroller.</li>
+        <li>Einsatz von <strong>Echtzeitbetriebssystemen (RTOS)</strong>, spezialisiert auf das Zephyr Project.</li>
+        <li>Anbindung von Sensorik und Aktorik über gängige <strong>Kommunikationsbusse</strong> (SPI, I2C, UART, CAN, Ethernet).</li>
+        <li>Systematisches <strong>Debugging</strong> und Profiling zur Engpassanalyse in Embedded-Systemen.</li>
+        <li>Implementierung <strong>poweroptimierter Software-Architekturen</strong> für batteriebetriebene Endgeräte.</li>
+        <li><strong>Drahtlose Kommunikation & IoT-Stacks:</strong> BLE, LoRaWAN, OpenThread, Zigbee, WiFi sowie IP-basierte Protokolle (MQTT, WebSockets).</li>
+      </ul>
+    </div>
+  </Section>
+
+  <Section 
+    title="Systems"
+    subtitle="End-to-End Solutions"
+    themeColor="bg-fuchsia-800" 
+    highlightColor="text-fuchsia-200"
+    id="systems"
+  >
+    <div slot="background" class="w-full h-full">
+      <PatternSystem fillColor="text-fuchsia-600" />
+    </div>
+    
+    <div class="prose prose-slate max-w-none">
+      <p class="text-xl">
+        Integration von Hardware und Software zu skalierbaren Gesamtsystemen. Vom Sensor über das Edge-Gateway bis zur Visualisierung.
+      </p>
+      <ul>
+        <li>
+          <strong>System-Architektur:</strong> Konzeption modularer, sicherer und wartbarer End-to-End Lösungen.
+        </li>
+        <li>
+          <strong>Connectivity & Routing:</strong> Zuverlässige Datenübertragung über LoRaWAN, IEEE 802.15.4, Feldbusse und MQTT-Broker.
+        </li>
+        <li>
+          <strong>User Interfaces & Visualisierung:</strong> Entwicklung responsiver Dashboards und Web-UIs mit modernen Frameworks (Astro, Svelte).
+        </li>
+      </ul>
+    </div>
+  </Section>
+</MainLayout>

src/pages/index.astro

@@ -3,22 +3,26 @@ import MainLayout from "../layouts/MainLayout.astro";
 ---
 
 <MainLayout title="Home | iten.pro">
-	<div class="flex flex-col items-center justify-center">
+    <div class="flex flex-col items-center justify-center min-h-[70vh] px-6">
-		<div class="width-md">
+        <div class="max-w-2xl">
-			<h1 class="text-4xl font-bold text-center mb-4">Error 404: Motivation Not Found</h1>
+            <h1 class="text-4xl font-bold font-mono mb-4">
-			<p class="font-md text-lg">
+                Error 404: Motivation Not Found
-				Das theoretische Konzept für diese Website ist absolut
+            </h1>
-				fehlerfrei und auf dem Papier bereits ein Meisterwerk. Leider
+            <p class="text-lg leading-relaxed font-mono">
-				hat die Umsetzung in der Praxis einige unerwartete
+                Das theoretische Konzept für diese Website ist absolut
-				Herausforderungen mit sich gebracht, die zu diesem bedauerlichen
+                fehlerfrei und auf dem Papier bereits ein Meisterwerk. Leider
-				Ergebnis geführt haben. Es scheint, als ob die Motivation, die
+                hat die Umsetzung in der Praxis einige unerwartete
-				für die Entwicklung dieser Seite erforderlich ist, auf
+                Herausforderungen mit sich gebracht, die zu diesem bedauerlichen
-				mysteriöse Weise verschwunden ist. Trotz aller Bemühungen, sie
+                Ergebnis geführt haben.
-				wiederzufinden, bleibt sie unauffindbar. Wir entschuldigen uns
+                <br class="mb-3" />
-				aufrichtig für diese Unannehmlichkeit und hoffen, dass wir in
+                Es scheint, als ob die Motivation, die für die Entwicklung dieser
-				Zukunft eine Lösung finden können, um die Motivation
+                Seite erforderlich ist, auf mysteriöse Weise verschwunden ist. Trotz
-				zurückzubringen und diese Website zum Leben zu erwecken.
+                aller Bemühungen, sie wiederzufinden, bleibt sie unauffindbar.
-			</p>
+                <br class="mb-3" />
-		</div>
+                Ich entschuldige mich aufrichtig für diese Unannehmlichkeit und hoffe,
-	</div>
+                dass ich in Zukunft eine Lösung finden kann, um die Motivation zurückzubringen
+                und diese Website zum Leben zu erwecken.
+            </p>
+        </div>
+    </div>
 </MainLayout>

src/styles/global.css

@@ -2,7 +2,7 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
-    --color-header-bg: var(--color-slate-200);
+    --color-header-bg: var(--color-slate-400);
     --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);
@@ -15,43 +15,4 @@
 }
 
 @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;
-    }
 }