feat: Enhance project descriptions with details on AI-assisted 'Vibe Coding' in development, update project technologies, and add GitHub repository links.

src/components/finalprojects/onlineCasino.jsx

@@ -1,20 +1,7 @@
 import React, { useEffect } from "react";
 import mermaid from "mermaid";
 
-const Wireframe = ({ title, children }) => (
+
-  <div className="w-full md:w-1/2 lg:w-1/3 px-2 mb-4">
-    <div className="h-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden flex flex-col">
-      <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
-        <h5 className="text-center font-semibold text-slate-700 m-0 text-sm md:text-base">{title}</h5>
-      </div>
-      <div className="p-2 flex-grow flex justify-center items-center overflow-hidden bg-slate-100">
-        <div className="bg-white w-full h-full border border-slate-200 rounded-lg shadow-inner p-3 flex flex-col overflow-hidden relative" style={{ aspectRatio: '9 / 19.5' }}>
-          {children}
-        </div>
-      </div>
-    </div>
-  </div>
-);
 
 function OnlineCasino() {
   useEffect(() => {
@@ -76,17 +63,19 @@ function OnlineCasino() {
             <div className="h-full">
               <div className="h-full bg-white rounded-xl border border-slate-200 shadow-sm p-6 hover:shadow-md transition-shadow flex flex-col">
                 <h3 className="text-xl font-bold text-slate-800 mb-4 pb-2 border-b border-slate-100">Backend, DB & Engine</h3>
-                <ul className="list-disc pl-5 space-y-2 text-slate-700 flex-grow">
+                <ul className="list-disc pl-5 space-y-3 text-slate-700 flex-grow">
-                  <li><strong>Poker Engine (Core):</strong> Modulare Java-Library für die komplette Spiellogik (Runden, Pötte, Gewinner).</li>
+                  <li>
+                    <strong>Poker Engine (Core):</strong> Hochgradig modulare und sicher aufgebaute Java-Library für die komplette Spiellogik (Runden, Pötte, Gewinner). Obwohl weite Teile durch Vibe Coding implementiert wurden, liegt der Engine eine strikte, selbst entworfene Architektur zugrunde, die Regelkonformität und Stabilität garantiert.
+                  </li>
+                  <div className="mt-2 mb-4">
+                    <a href="https://github.com/simon-266/poker-engine" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-800 font-bold inline-flex items-center text-sm bg-indigo-50 px-3 py-1.5 rounded-full border border-indigo-100">
+                      <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd"></path></svg>
+                      GitHub Repository
+                    </a>
+                  </div>
                   <li><strong>API Layer:</strong> Implementierung der WebSocket-Controller für Echtzeit-Kommunikation.</li>
                   <li><strong>Datenbank:</strong> Design und Implementierung der JPA-Entities und Repositories für alle Poker-bezogenen Daten.</li>
                 </ul>
-                <div className="mt-4 pt-4 border-t border-slate-100">
-                  <a href="https://github.com/simon-266/poker-engine" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-800 font-bold inline-flex items-center">
-                    <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd"></path></svg>
-                    GitHub Repository
-                  </a>
-                </div>
               </div>
             </div>
             <div className="h-full">
@@ -143,6 +132,24 @@ function OnlineCasino() {
           </div>
         </section>
 
+        <section className="mb-16">
+          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">5. Entwicklung mit KI (Vibe Coding)</h2>
+          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
+            <p className="text-lg leading-relaxed text-slate-700">
+              In diesem Projekt setze ich den Fokus ganz gezielt auf "Vibe Coding", da auch der professionelle Umgang mit KI Teil unserer Benotung ist. Ziel ist es, praktische Erfahrungen mit verschiedenen KI-Modellen zu sammeln und deren Stärken sowie Grenzen im Entwicklungsalltag kennenzulernen.
+            </p>
+            <p className="text-lg leading-relaxed text-slate-700">
+              Während ich die Planung der Systemarchitektur, der APIs und der WebSockets komplett selbst übernehme, delegiere ich einen Großteil der eigentlichen Code-Implementierung an die KI. Dabei gehe ich nach einem klaren, strukturierten Prozess vor:
+            </p>
+            <ul className="list-disc pl-5 space-y-2 text-slate-700">
+              <li>Brainstorming von Lösungsansätzen mit Tools wie Gemini oder ChatGPT</li>
+              <li>Ausarbeitung eines detaillierten Bauplans anhand der Ideen</li>
+              <li>Festlegung von präzisen Coding-Richtlinien für das jeweilige Modul</li>
+              <li>Generierung des Codes durch die KI – strikt entlang dieser Vorgaben</li>
+            </ul>
+          </div>
+        </section>
+
       </div>
     </div>
   );

src/components/finalprojects/wohnungUndFahrgemeinschaften.jsx

@@ -197,6 +197,19 @@ function WohnungUndFahrgemeinschaftenPage() {
           </div>
         </section>
 
+        {/* --- KI NUTZUNG --- */}
+        <section className="mb-16">
+          <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">6. KI-Nutzung im Projekt</h2>
+          <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
+            <p className="text-lg leading-relaxed text-slate-700">
+              Bei der Konzeption von Zenith Marketplace hat mich KI beim Ausformulieren und optischen Gestalten des Pflichtenhefts stark entlastet.
+            </p>
+            <p className="text-lg leading-relaxed text-slate-700">
+              Was den eigentlichen SAP- und ABAP-Code angeht, bin ich jedoch noch vorsichtig, da aktuelle KI-Modelle in diesem sehr speziellen SAP-Umfeld oft Schwächen zeigen. Deshalb nutze ich KI hier bewusst nicht zum direkten "Vibe Coding", sondern vielmehr als inspirierenden Sparringspartner für Architektur-Ideen, Optimierungsvorschläge und punktuelle Code-Reviews.
+            </p>
+          </div>
+        </section>
+
       </div>
     </div>
   );

src/components/projects/languageRoleplay.jsx

@@ -162,6 +162,18 @@ function LanguageRoleplay() {
                     </div>
                 </section>
 
+                <section className="mb-16">
+                    <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">5. Entwicklungsprozess & KI</h2>
+                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
+                        <p className="text-lg leading-relaxed text-slate-700">
+                            Für diesen ersten Prototypen nutze ich starkes "Vibe Coding" mithilfe von KI. So kann ich unglaublich schnell testen, ob meine Idee eines interaktiven Sprach-Rollenspiels überhaupt so funktioniert, wie ich es mir vorstelle.
+                        </p>
+                        <p className="text-lg leading-relaxed text-slate-700">
+                            Sobald das Konzept validiert ist, werde ich das gesamte Projekt auf Basis dieses Prototypens von Grund auf sauber planen und stabil neu entwickeln.
+                        </p>
+                    </div>
+                </section>
+
             </div>
         </div>
     );

src/components/projects/languageStudy.jsx

@@ -78,7 +78,7 @@ function LanguagestudyPage() {
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
               <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Python 3</div>
               <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Pandas</div>
-              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Web Scraping</div>
+              <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Wikipedia API</div>
               <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Multithreading</div>
               <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">SQLite</div>
               <div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Matplotlib</div>
@@ -101,7 +101,7 @@ function LanguagestudyPage() {
             <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
               <h3 className="text-xl font-bold text-slate-800 mb-3 pb-2 border-b border-slate-100">Datenbereinigung</h3>
               <p className="text-slate-600 text-sm">
-                Rohes HTML musste geparsed und von Satzzeichen sowie Metadaten bereinigt werden, um
+                Der rohe Text aus der <b>Wikipedia Library</b> musste aufbereitet und von Satzzeichen sowie Metadaten befreit werden, um
                 verzerrungsfreie Wortzählungen zu ermöglichen.
               </p>
             </div>

src/components/projects/server.jsx

@@ -112,12 +112,15 @@ function ServerPage() {
               </div>
               <div className="flex-1">
                 <h3 className="text-lg font-bold text-slate-800 mb-2">KI als "Co-Admin"</h3>
-                <div className="bg-indigo-50 p-4 rounded-lg border border-indigo-100 text-indigo-900 text-sm">
+                <div className="bg-indigo-50 p-4 rounded-lg border border-indigo-100 text-indigo-900 text-sm space-y-2">
                   <p>
                     LLMs waren eine große Hilfe beim Debugging komplexer <b>Docker-Compose</b> Konfigurationen
                     und beim Schreiben von robusten Shell-Skripten. Sie dienten als interaktive Dokumentation
                     für Linux-Server-Administration.
                   </p>
+                  <p>
+                    Für die textliche Gestaltung und Formulierung der Inhalte dieser Webseite habe ich ebenfalls KI-Unterstützung genutzt, um die Beschreibungen klar und ansprechend zu gestalten.
+                  </p>
                 </div>
               </div>
             </div>

src/components/projects/tdot.jsx

@@ -56,6 +56,12 @@ function TdotPage() {
                             <span className="text-sm font-medium text-slate-600">Live Demo / Showcase</span>
                         </div>
                     </div>
+                    <div className="mt-8">
+                        <a href="https://github.com/simon-266/tdot_programm" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-800 font-bold inline-flex items-center bg-white px-4 py-2 rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-all">
+                            <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd"></path></svg>
+                            GitHub Repository
+                        </a>
+                    </div>
                 </header>
 
                 <section className="mb-16">
@@ -69,12 +75,6 @@ function TdotPage() {
                             Die Anwendung nutzt eine Webcam, um Handgesten (Schere, Stein, Papier) in Echtzeit zu erkennen und ermöglicht es,
                             gegen eine KI oder einen anderen Spieler anzutreten.
                         </p>
-                        <div className="mt-4 pt-4 border-t border-slate-100">
-                            <a href="https://github.com/simon-266/tdot_programm" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:text-indigo-800 font-bold inline-flex items-center">
-                                <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd"></path></svg>
-                                GitHub Repository
-                            </a>
-                        </div>
                     </div>
                 </section>
 
@@ -198,6 +198,15 @@ function TdotPage() {
                     </div>
                 </section>
 
+                <section className="mb-16">
+                    <h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">7. KI im Entwicklungsprozess</h2>
+                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
+                        <p className="text-lg leading-relaxed text-slate-700">
+                            Um den knappen Zeitplan für den Tag der offenen Tür einzuhalten, habe ich für einige Code-Passagen sogenanntes "Vibe Coding" mit KI-Unterstützung angewendet. Die grundlegende Software-Architektur sowie die gezielte Auswahl der verwendeten KI-Modelle stammen jedoch vollständig von mir.
+                        </p>
+                    </div>
+                </section>
+
             </div>
         </div>
     );