dev #3
@@ -20,4 +20,33 @@ const displayYear = currentYear > startYear ? `${startYear}–${currentYear}` :
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
</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>
|
||||
@@ -34,3 +34,24 @@ const currentPath = pathname.slice(1);
|
||||
</nav> -->
|
||||
</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>
|
||||
|
||||
50
src/components/PatternCode.astro
Normal file
50
src/components/PatternCode.astro
Normal file
@@ -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>
|
||||
21
src/components/PatternPCB.astro
Normal file
21
src/components/PatternPCB.astro
Normal file
File diff suppressed because one or more lines are too long
47
src/components/PatternSystem.astro
Normal file
47
src/components/PatternSystem.astro
Normal file
@@ -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>
|
||||
64
src/components/Section.astro
Normal file
64
src/components/Section.astro
Normal file
@@ -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>
|
||||
@@ -26,8 +26,8 @@ const {
|
||||
<body class="flex flex-col min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main class="flex-grow w-full pb-6">
|
||||
<div class="container mx-auto px-6 py-6"><slot /></div>
|
||||
<main class="flex-grow w-full">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
@@ -3,8 +3,8 @@ import MainLayout from './MainLayout.astro';
|
||||
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>
|
||||
<article class="prose prose-slate mx-auto bg-white p-4 mt-6 mb-16 shadow-lg">
|
||||
<h1>{frontmatter.title}</h1>
|
||||
<slot />
|
||||
</article>
|
||||
</MainLayout>
|
||||
85
src/pages/index-test.astro
Normal file
85
src/pages/index-test.astro
Normal file
@@ -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>
|
||||
@@ -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="width-md">
|
||||
<h1 class="text-4xl font-bold text-center mb-4">Error 404: Motivation Not Found</h1>
|
||||
<p class="font-md text-lg">
|
||||
Das theoretische Konzept für diese Website ist absolut
|
||||
fehlerfrei und auf dem Papier bereits ein Meisterwerk. Leider
|
||||
hat die Umsetzung in der Praxis einige unerwartete
|
||||
Herausforderungen mit sich gebracht, die zu diesem bedauerlichen
|
||||
Ergebnis geführt haben. Es scheint, als ob die Motivation, die
|
||||
für die Entwicklung dieser Seite erforderlich ist, auf
|
||||
mysteriöse Weise verschwunden ist. Trotz aller Bemühungen, sie
|
||||
wiederzufinden, bleibt sie unauffindbar. Wir entschuldigen uns
|
||||
aufrichtig für diese Unannehmlichkeit und hoffen, dass wir in
|
||||
Zukunft eine Lösung finden können, um die Motivation
|
||||
zurückzubringen und diese Website zum Leben zu erwecken.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center min-h-[70vh] px-6">
|
||||
<div class="max-w-2xl">
|
||||
<h1 class="text-4xl font-bold font-mono mb-4">
|
||||
Error 404: Motivation Not Found
|
||||
</h1>
|
||||
<p class="text-lg leading-relaxed font-mono">
|
||||
Das theoretische Konzept für diese Website ist absolut
|
||||
fehlerfrei und auf dem Papier bereits ein Meisterwerk. Leider
|
||||
hat die Umsetzung in der Praxis einige unerwartete
|
||||
Herausforderungen mit sich gebracht, die zu diesem bedauerlichen
|
||||
Ergebnis geführt haben.
|
||||
<br class="mb-3" />
|
||||
Es scheint, als ob die Motivation, die für die Entwicklung dieser
|
||||
Seite erforderlich ist, auf mysteriöse Weise verschwunden ist. Trotz
|
||||
aller Bemühungen, sie wiederzufinden, bleibt sie unauffindbar.
|
||||
<br class="mb-3" />
|
||||
Ich entschuldige mich aufrichtig für diese Unannehmlichkeit und hoffe,
|
||||
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>
|
||||
|
||||
@@ -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,48 +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 fixed bottom-0 left-0 w-full z-50 py-2 shadow-top bg-linear-to-b from-white to-header-bg;
|
||||
|
||||
}
|
||||
|
||||
/* .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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user