From 786c81a5a43a60c43c8dc45b4865419d0791dc8f Mon Sep 17 00:00:00 2001
From: T <T>
Date: Mon, 1 Dec 2025 01:00:00 +0100
Subject: [PATCH] =?UTF-8?q?Sch=C3=B6nere=20Projekte-Seite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 projects/projects.md | 109 ++++++++++++++++++++++++++++---------------
 1 file changed, 72 insertions(+), 37 deletions(-)

diff --git a/projects/projects.md b/projects/projects.md
index d48af2b..4af1874 100644
--- a/projects/projects.md
+++ b/projects/projects.md
@@ -3,45 +3,80 @@ layout: post
 title: Projekte
 ---
 
+<style>
+.project {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 2em;
+}
+.img {
+    min-width: 200px;
+    max-width: 200px;
+}
+img {
+    object-fit: contain;
+}
+.info {
+    margin-left: 1em;
+    margin-top: 1ex;
+    margin-bottom: auto;
+    text-align: left;
+}
+@media (max-width: 767px) {
+    .project {
+        flex-direction: column;
+        align-items: start;
+    }
+    .img {
+        width: 100%;
+        max-width: 100%;
+        min-width: unset;
+    }
+    .info {
+        margin-left: unset;
+    }
+}
+</style>
+
 Hier dokumentieren wir einige unserer Projekte ausführlicher.
 
-<img alt="Der Lorenz-Attraktor auf dem Oszilloskop-Bildschirm" src="/media/projects/analog-lorenz/analog-lorenz_display.jpg" height=150px style="margin-left: 0"/>
-### [Der analoge Lorenz-Attraktor](analog-lorenz/analog-lorenz.html)  
-Eine Analogschaltung, die den Lorenz-Attraktor auf einem Analog-Oszilloskop darstellen kann.
+<div class="project">
+<div class="img"><img alt="Der Lorenz-Attraktor auf dem Oszilloskop-Bildschirm" src="/media/projects/analog-lorenz/analog-lorenz_display.jpg"/></div>
+<div class="info">
+<a href="analog-lorenz/analog-lorenz.html"><h2>Der analoge Lorenz-Attraktor</h2></a>
+<p>Eine Analogschaltung, die den Lorenz-Attraktor auf einem Analog-Oszilloskop darstellen kann.</p>
+</div>
+</div>
 
----
+<div class="project">
+<div class="img"><img src="https://wiki.chaospott.de/_media/projekte:glados:gla_dos_light_blue.png?w=400&tok=59f2fc"></div>
+<div class="info">
+<a href="https://wiki.chaospott.de/projekte:glados:start"><h2>GLaDOS Ceiling Lamp</h2></a>
+<p>Eine GLaDOS-Deckenlampe basierend auf Portal 2 leuchtet und bewegt sich unter der Decke.</p>
+</div>
+</div>
 
-### Weitere Projekte finden sich [in unserem Wiki](https://wiki.chaospott.de/projekte:start), z.B.:
+<div class="project">
+<div class="img"><img src="https://wiki.chaospott.de/_media/projekte:foodoor:foodoor_v1_carambola.jpg?w=400&tok=39d31a"></div>
+<div class="info">
+<a href="https://wiki.chaospott.de/projekte:foodoor:start"><h2>foodoor</h2></a>
+<p>Ein klassisches Schließsystem mit physischen Schlüsseln passt nicht zu unserem Vereinsalltag. Ein Türöffner per SSH.</p>
+</div>
+</div>
 
-- [AiCore -- StewartPlatform](https://wiki.chaospott.de/projekte:ai_core-stewart_platform:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:ai_core-stewart_platform:hexapod_general_anim.gif" height=150px style="margin-left: 0">
-- [Alarmanlage](https://wiki.chaospott.de/projekte:alarmanlage:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:alarmanlage:luesterklemmenalarmanlage.jpg" height=150px style="margin-left: 0">
-- [BällebadBällePixelDisplay](https://wiki.chaospott.de/projekte:baellebadbaellepixeldisplay:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:baellebadbaellepixeldisplay:baellebadbaellepixeldisplay.jpg?w=400&tok=151a9c" height=150px style="margin-left: 0">
-- [Bügelperlen](https://wiki.chaospott.de/projekte:buegelperlen:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:buegelperlen:buegelperlen.jpg" height=150px style="margin-left: 0">
-- [Ceiling Pixel Lamp](https://wiki.chaospott.de/projekte:ceilingpixellamp:start)
-- [Der Tanzhut](https://wiki.chaospott.de/projekte:tanzhut:start)
-- [Docpatch](https://wiki.chaospott.de/projekte:doc_patch:start)
-- [foodoor](https://wiki.chaospott.de/projekte:foodoor:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:foodoor:foodoor_v1_carambola.jpg?w=400&tok=39d31a" height=150px style="margin-left: 0">
-- [Foomood](https://wiki.chaospott.de/projekte:foomood:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:foomood:foomood_300.png?w=400&tok=f35695" height=150px style="margin-left: 0">
-- [Geocache](https://wiki.chaospott.de/projekte:geocache:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:geocache:opencaching_logo.png?w=400&tok=172183" height=150px style="margin-left: 0">
-- [GLaDOS Ceiling Lamp](https://wiki.chaospott.de/projekte:glados:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:glados:gla_dos_light_blue.png?w=400&tok=59f2fc" height=150px style="margin-left: 0">
-- [Hackersofa](https://wiki.chaospott.de/projekte:hackersofa:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:hackersofa:hackersofa.jpg?w=400&tok=459154" height=150px style="margin-left: 0">
-- [Infoscreen](https://wiki.chaospott.de/projekte:infoscreen:start)
-- [IRemotePI](https://wiki.chaospott.de/projekte:iremotepi:start)
-- [KFZ-Zusatzinstrumente](https://wiki.chaospott.de/projekte:kfzzusatzinstrumente:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:kfzzusatzinstrumente:zusatzinstrumente3.jpg?w=400&tok=c872dd" height=150px style="margin-left: 0">
-- [Klodisplay](https://wiki.chaospott.de/projekte:klodisplay:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:klodisplay:wcba_schaltplan_v2.png?w=400&tok=c6be43" height=150px style="margin-left: 0">
-- [pam_panic](https://wiki.chaospott.de/projekte:pam_panic:start)
-- [SDR Web-based Shared Access Receiver (RX)](https://wiki.chaospott.de/projekte:sdr_rx:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:sdr_rx:20250315_175800.jpg?w=400&tok=145bb8" height=150px style="margin-left: 0">
-- [Slusheis-Maschine](https://wiki.chaospott.de/projekte:slush:start)
-  <img src="https://wiki.chaospott.de/_media/projekte:slush:img_20190223_173929.jpg?w=400&tok=5af803" height=150px style="margin-left: 0">
+<div class="project">
+<div class="img"><img src="https://wiki.chaospott.de/_media/projekte:buegelperlen:buegelperlen.jpg"></div>
+<div class="info">
+<a href="https://wiki.chaospott.de/projekte:buegelperlen:start"><h2>Bügelperlen</h2></a>
+<p>Bügelperlen und Bügelpresse für kreative Pixelkunst.</p>
+</div>
+</div>
+
+<div class="project">
+<div class="img"><img src="https://wiki.chaospott.de/_media/projekte:hackersofa:hackersofa.jpg?w=400&tok=459154"></div>
+<div class="info">
+<a href="https://wiki.chaospott.de/projekte:hackersofa:start"><h2>Das Hackersofa</h2></a>
+<p>RJ-45 und Schuko zum gemütlichen Hacken.</p>
+</div>
+</div>