feat: Enhance project descriptions with details on AI-assisted 'Vibe Coding' in development, update project technologies, and add GitHub repository links.
This commit is contained in:
Simon Altschäffl
parent
4b68368e90
commit
a027f7c44c
@ -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">
|
||||
<li><strong>Poker Engine (Core):</strong> Modulare Java-Library für die komplette Spiellogik (Runden, Pötte, Gewinner).</li>
|
||||
<ul className="list-disc pl-5 space-y-3 text-slate-700 flex-grow">
|
||||
<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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user