refactor: Redesign the language study project page with an enhanced layout, structured sections, and new project metadata.
This commit is contained in:
Simon Altschäffl
parent
97e1758b16
commit
3ca7259ad5
@ -2,127 +2,114 @@ import React from "react";
|
|||||||
|
|
||||||
function LanguagestudyPage() {
|
function LanguagestudyPage() {
|
||||||
return (
|
return (
|
||||||
<section className="max-w-4xl mx-auto px-4 py-12 font-sans text-slate-800">
|
<div className="bg-slate-50 min-h-screen py-8 font-sans text-slate-800">
|
||||||
<h1 className="text-3xl md:text-4xl font-extrabold text-slate-900 mb-8 pb-4 border-b border-slate-200 text-center">Wikipedia Sprachstudie</h1>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<p className="text-center text-lg text-slate-600 mt-4 italic">
|
<header className="text-center border-b border-slate-200 pb-8 mb-12">
|
||||||
Dieses Projekt war mein Abschlussprojekt für den Kurs „CS50x“.
|
<h1 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-6 tracking-tight">Wikipedia Sprachstudie</h1>
|
||||||
</p>
|
<div className="mt-6 flex flex-wrap justify-center gap-4">
|
||||||
|
<div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
|
||||||
<div className="text-center mt-8 p-4 bg-slate-50 rounded-lg border border-slate-100 inline-block w-full">
|
<span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Status</span>
|
||||||
<h3 className="text-lg font-bold text-slate-800 mb-2">GitHub Repository</h3>
|
<span className="text-sm font-medium text-slate-600">Abgeschlossen</span>
|
||||||
<a
|
</div>
|
||||||
href="https://github.com/simon-266/WikiDictionaryResearch"
|
<div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
|
||||||
className="text-blue-600 hover:text-blue-800 hover:underline break-all"
|
<span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Typ</span>
|
||||||
target="_blank"
|
<span className="text-sm font-medium text-slate-600">Data Science / Analyse</span>
|
||||||
rel="noopener noreferrer"
|
</div>
|
||||||
>
|
<div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
|
||||||
https://github.com/simon-266/WikiDictionaryResearch
|
<span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Kontext</span>
|
||||||
</a>
|
<span className="text-sm font-medium text-slate-600">CS50x Final Project</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-12">
|
|
||||||
<h2 className="text-2xl font-bold text-slate-900 mb-4">Worum geht es in dieser Sprachstudie?</h2>
|
|
||||||
<p className="text-slate-700 leading-relaxed mb-6">
|
|
||||||
Ziel dieser Sprachstudie ist es, einem oft gehörten Fakt beim
|
|
||||||
Sprachenlernen nachzugehen und ihn zu beweisen oder zu widerlegen. Der
|
|
||||||
Fakt lautet:{" "}
|
|
||||||
<span className="block my-4 p-4 bg-amber-50 border-l-4 border-amber-400 text-amber-900 font-medium rounded-r">
|
|
||||||
„Die 1000 häufigsten Wörter machen etwa 80 % des gesprochenen
|
|
||||||
Wortschatzes aus.“
|
|
||||||
</span>
|
|
||||||
Um dies zu untersuchen, habe ich ein Skript programmiert, welches 15.000
|
|
||||||
Wikipedia-Seiten durchsucht und die englischen Wörter darin zählt.
|
|
||||||
Zusätzlich habe ich einige Diagramme zu meinen Ergebnissen in einem
|
|
||||||
Jupyter Notebook erstellt:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap justify-center gap-8 my-10">
|
|
||||||
<div className="w-full md:w-5/12">
|
|
||||||
<img
|
|
||||||
src="/assets/projects/languageStudy/images/top1000.png"
|
|
||||||
alt="Kreisdiagramm: Die Top 1000 Wörter im Vergleich zum Rest"
|
|
||||||
className="w-full h-auto rounded-lg shadow-md border border-slate-200"
|
|
||||||
/>
|
|
||||||
<p className="text-sm text-center text-slate-500 mt-2">Top 1000 Wörter vs. Rest</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full md:w-5/12">
|
<div className="mt-8">
|
||||||
<img
|
<a href="https://github.com/simon-266/WikiDictionaryResearch" 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">
|
||||||
src="/assets/projects/languageStudy/images/stats.png"
|
<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>
|
||||||
alt="Kreisdiagramm: Vergleiche der Vorkommen"
|
GitHub Repository
|
||||||
className="w-full h-auto rounded-lg shadow-md border border-slate-200"
|
</a>
|
||||||
/>
|
|
||||||
<p className="text-sm text-center text-slate-500 mt-2">Häufigkeitsverteilung</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-12">
|
<section className="mb-16">
|
||||||
<h2 className="text-2xl font-bold text-slate-900 mb-4">Ergebnisse</h2>
|
<h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">1. Forschungsfrage & Ziel</h2>
|
||||||
<p className="text-slate-700 leading-relaxed">
|
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
|
||||||
Die Ergebnisse zeigen deutlich, dass die Top 1000 Wörter tatsächlich
|
<div className="p-4 bg-amber-50 border-l-4 border-amber-400 text-amber-900 font-medium rounded-r">
|
||||||
einen sehr großen Anteil ausmachen – auch wenn es nicht ganz 80 %,
|
"Die 1000 häufigsten Wörter machen etwa 80 % des gesprochenen Wortschatzes aus."
|
||||||
sondern <em>knapp 70 %</em> sind. Daraus lässt sich schlussfolgern, dass es sich
|
</div>
|
||||||
beim Sprachenlernen definitiv lohnt, sich auf diese Wörter zu
|
<p className="text-lg leading-relaxed text-slate-700">
|
||||||
konzentrieren, um <b>gute Fortschritte</b> zu erzielen.
|
Dieser oft zitierte Fakt beim Sprachenlernen war der Ausgangspunkt für meine Untersuchung.
|
||||||
</p>
|
Um dies zu verifizieren, habe ich ein Python-Skript entwickelt, das <b>15.000 Wikipedia-Artikel</b> analysiert
|
||||||
</div>
|
und die Häufigkeit englischer Wörter statistisch auswertet.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div className="mt-12">
|
<section className="mb-16">
|
||||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">
|
<h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">2. Visualisierung der Ergebnisse</h2>
|
||||||
Welche Techniken, Technologien und Bibliotheken habe ich verwendet?
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
</h2>
|
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
||||||
<div className="bg-slate-50 p-6 rounded-xl border border-slate-100 shadow-sm">
|
<img
|
||||||
<ul className="list-disc pl-5 space-y-3 text-slate-700">
|
src="/assets/projects/languageStudy/images/top1000.png"
|
||||||
<li>
|
alt="Kreisdiagramm: Die Top 1000 Wörter im Vergleich zum Rest"
|
||||||
<b>Programmiersprachen</b>: Python, IPython
|
className="w-full h-auto rounded-lg mb-2"
|
||||||
</li>
|
/>
|
||||||
<li>
|
<p className="text-sm text-center text-slate-500 font-medium">Top 1000 Wörter vs. Rest</p>
|
||||||
<b>Programme</b>: VSCode, JupyterLab, GIT (GitHub)
|
</div>
|
||||||
</li>
|
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
||||||
<li>
|
<img
|
||||||
<b>Multithreading und Batchverarbeitung</b>: Mithilfe der <em>Future
|
src="/assets/projects/languageStudy/images/stats.png"
|
||||||
Library</em> konnte ich das Zählen der Wörter auf mehrere Threads
|
alt="Kreisdiagramm: Vergleiche der Vorkommen"
|
||||||
verteilen. Durch einfache Schleifen konnte ich den benötigten
|
className="w-full h-auto rounded-lg mb-2"
|
||||||
Arbeitsspeicher begrenzen, indem ich die 15.000 Seiten in kleinere
|
/>
|
||||||
Batches aufteilte, diese vorab zusammenführte und am Ende zum
|
<p className="text-sm text-center text-slate-500 font-medium">Häufigkeitsverteilung</p>
|
||||||
finalen Ergebnis zusammenführte.
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li>
|
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm mt-6">
|
||||||
<b>Wikipedia</b>: Die Quelle meiner Daten, da die Inhalte dort ohne
|
<h3 className="text-xl font-bold text-slate-800 mb-2">Das Ergebnis</h3>
|
||||||
Copyright-Probleme nutzbar sind, und die zugehörige Python
|
<p className="text-slate-700 leading-relaxed">
|
||||||
Library, welche das Webscraping vereinfacht.
|
Die Analyse von Millionen von Wörtern zeigte: Die Top 1000 Wörter machen tatsächlich einen
|
||||||
</li>
|
signifikanten Anteil von <b>knapp 70%</b> aus. Auch wenn die 80%-Marke knapp verfehlt wurde,
|
||||||
<li>
|
bestätigt die Studie, dass eine Konzentration auf den Grundwortschatz für Lernende extrem effizient ist.
|
||||||
<b>Pandas</b>: Hierfür habe ich mich entschieden, da ich nach einer
|
</p>
|
||||||
effizienten Möglichkeit suchte, die Wörter zusammenzuführen.
|
</div>
|
||||||
Außerdem vereinfacht es das Speichern dieser Daten in Dateien.
|
</section>
|
||||||
</li>
|
|
||||||
<li>
|
<section className="mb-16">
|
||||||
<b>sqlite3</b>: Gut zum Speichern und Abrufen meiner Daten.
|
<h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">3. Tech Stack & Methoden</h2>
|
||||||
</li>
|
<div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
|
||||||
</ul>
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
</div>
|
<div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Python 3</div>
|
||||||
</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">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>
|
||||||
|
<div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Jupyter Notebooks</div>
|
||||||
|
<div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Git</div>
|
||||||
|
</div>
|
||||||
|
</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">4. Technische Herausforderungen</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<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">Performance (Multithreading)</h3>
|
||||||
|
<p className="text-slate-600 text-sm">
|
||||||
|
Um 15.000 Seiten effizient zu verarbeiten, nutzte ich die <b>Python Future Library</b> für
|
||||||
|
parallele Requests. Batch-Verarbeitung verhinderte dabei einen RAM-Overflow.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<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
|
||||||
|
verzerrungsfreie Wortzählungen zu ermöglichen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div className="mt-12">
|
|
||||||
<h2 className="text-2xl font-bold text-slate-900 mb-4">Fazit</h2>
|
|
||||||
<div className="bg-slate-50 p-6 rounded-xl border border-slate-100 shadow-sm">
|
|
||||||
<ul className="list-disc pl-5 space-y-3 text-slate-700">
|
|
||||||
<li>
|
|
||||||
<b>Neues Wissen</b>: Durch dieses Projekt konnte ich mich zum ersten
|
|
||||||
Mal intensiv mit den Themen Webscraping (auch wenn es über eine
|
|
||||||
Library geschah) und Multithreading in Python beschäftigen, was für
|
|
||||||
zukünftige Projekte relevant sein könnte.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>Übung</b>: Das Projekt hat sehr gut dazu gedient, mich intensiver
|
|
||||||
mit Python auseinanderzusetzen und dabei neue Libraries und
|
|
||||||
Funktionen innerhalb der Sprache selbst kennenzulernen.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,156 +2,130 @@ import React from "react";
|
|||||||
|
|
||||||
function ServerPage() {
|
function ServerPage() {
|
||||||
return (
|
return (
|
||||||
<section className="max-w-4xl mx-auto px-4 py-12 font-sans text-slate-800">
|
<div className="bg-slate-50 min-h-screen py-8 font-sans text-slate-800">
|
||||||
<h1 className="text-3xl md:text-4xl font-extrabold text-slate-900 mb-8 pb-4 border-b border-slate-200 text-center">Struktur dieses Servers</h1>
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm mb-12">
|
<header className="text-center border-b border-slate-200 pb-8 mb-12">
|
||||||
<img
|
<h1 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-6 tracking-tight">Home Server & Infrastruktur</h1>
|
||||||
src="/assets/projects/server/images/server.png"
|
<div className="mt-6 flex flex-wrap justify-center gap-4">
|
||||||
alt="Server Struktur Diagramm"
|
<div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
|
||||||
className="w-full h-auto rounded-lg"
|
<span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Status</span>
|
||||||
/>
|
<span className="text-sm font-medium text-slate-600">In Betrieb / Wartung</span>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
|
||||||
|
<span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Typ</span>
|
||||||
|
<span className="text-sm font-medium text-slate-600">Homelab / DevOps</span>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white px-4 py-2 rounded-full border border-slate-200 shadow-sm flex items-center space-x-2">
|
||||||
|
<span className="bg-slate-200 text-slate-700 text-xs font-bold px-2 py-0.5 rounded uppercase tracking-wide">Rolle</span>
|
||||||
|
<span className="text-sm font-medium text-slate-600">Administrator & Entwickler</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section className="mb-16">
|
||||||
|
<h2 className="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-indigo-500 pl-4">1. Projektüberblick & Architektur</h2>
|
||||||
|
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-6">
|
||||||
|
<div className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm mb-6">
|
||||||
|
<img
|
||||||
|
src="/assets/projects/server/images/server.png"
|
||||||
|
alt="Server Struktur Diagramm"
|
||||||
|
className="w-full h-auto rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-lg leading-relaxed text-slate-700">
|
||||||
|
Dieser Server bildet das Herzstück meiner Entwicklungsumgebung. Er hostet nicht nur diese Website,
|
||||||
|
sondern dient als vielseitige Plattform für Data Science Experimente, Automatisierung und Lernen.
|
||||||
|
Alle Dienste laufen isoliert in <b>Docker-Containern</b>, orchestrirert durch <b>Docker Compose</b> und
|
||||||
|
verwaltet vom Reverse Proxy <b>Traefik</b>.
|
||||||
|
</p>
|
||||||
|
</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">2. Kernkomponenten & Dienste</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<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">Traefik (Reverse Proxy)</h3>
|
||||||
|
<p className="text-slate-600 text-sm">
|
||||||
|
Zentraler Einstiegspunkt. Routet Anfragen basierend auf Subdomains an die richtigen Container
|
||||||
|
und verwaltet automatisch <b>SSL-Zertifikate</b> (Let's Encrypt).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<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">JupyterHub</h3>
|
||||||
|
<p className="text-slate-600 text-sm">
|
||||||
|
Multi-User Umgebung für <b>Data Science</b>. Startet für jeden Nutzer isolierte Container
|
||||||
|
mit vorinstallierten Libraries wie Pandas, TensorFlow und NumPy.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<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">CI/CD Pipeline</h3>
|
||||||
|
<p className="text-slate-600 text-sm">
|
||||||
|
Eine Flask-Anwendung lauscht auf <b>GitHub Webhooks</b>. Bei neuen Pushes wird die Website
|
||||||
|
automatisch neu gebaut und deployed.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<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">Sicherheit</h3>
|
||||||
|
<p className="text-slate-600 text-sm">
|
||||||
|
Zugriffsschutz durch <b>WireGuard VPN</b> und SSH (Key-Auth). Interne Dienste sind
|
||||||
|
nicht öffentlich erreichbar.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<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">Nginx</h3>
|
||||||
|
<p className="text-slate-600 text-sm">
|
||||||
|
High-Performance Webserver für die Auslieferung der statischen React-Build-Dateien
|
||||||
|
dieser Portfolio-Seite.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</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">3. Tech Stack</h2>
|
||||||
|
<div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
|
||||||
|
<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">Docker</div>
|
||||||
|
<div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Docker Compose</div>
|
||||||
|
<div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Traefik</div>
|
||||||
|
<div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Nginx</div>
|
||||||
|
<div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Linux (Ubuntu)</div>
|
||||||
|
<div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Python (Flask)</div>
|
||||||
|
<div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">Bash Scripting</div>
|
||||||
|
<div className="bg-white p-4 rounded shadow-sm text-center font-semibold text-slate-700">WireGuard</div>
|
||||||
|
</div>
|
||||||
|
</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">4. Learnings & KI-Einsatz</h2>
|
||||||
|
<div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
|
||||||
|
<div className="flex flex-col md:flex-row gap-6">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-bold text-slate-800 mb-2">Wichtigste Erkenntnisse</h3>
|
||||||
|
<ul className="list-disc pl-5 space-y-2 text-slate-700">
|
||||||
|
<li>Verständnis von Container-Orchestrierung in Produktionsumgebungen.</li>
|
||||||
|
<li>Wichtigkeit von automatisierten Deployments (CI/CD) für effizientes Arbeiten.</li>
|
||||||
|
<li>Netzwerk-Routing und SSL-Management mit Reverse Proxies.</li>
|
||||||
|
</ul>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div className="mb-12">
|
|
||||||
<h2 className="text-2xl font-bold text-slate-900 mb-4 border-b pb-2">Welche Kernaufgaben erfüllt dieser Server?</h2>
|
|
||||||
<div className="bg-slate-50 p-6 rounded-xl border border-slate-100 shadow-sm mt-4">
|
|
||||||
<ul className="list-disc pl-5 space-y-2 text-slate-700">
|
|
||||||
<li>Die Bereitstellung dieser Website über Nginx</li>
|
|
||||||
<li>Die Bereitstellung des JupyterHub-Servers für Data Science und Machine Learning</li>
|
|
||||||
<li>
|
|
||||||
Automatische Aktualisierung der React-Applikation durch GitHub-Webhooks
|
|
||||||
über die Flask-App
|
|
||||||
</li>
|
|
||||||
<li>Sichere Remote-Verbindung über WireGuard VPN und SSH</li>
|
|
||||||
<li>Zentrales Routing und Load Balancing durch Traefik</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-12">
|
|
||||||
<h3 className="text-xl font-bold text-slate-800 mb-4">Wichtige Kerntechnologien</h3>
|
|
||||||
<div className="bg-slate-50 p-6 rounded-xl border border-slate-100 shadow-sm">
|
|
||||||
<ul className="list-disc pl-5 space-y-4 text-slate-700">
|
|
||||||
<li>
|
|
||||||
<b>Docker und Docker-Compose</b>: Jeder Service läuft in einem eigenen Container,
|
|
||||||
was die Modularität und Wartbarkeit erhöht. Die Container-Architektur
|
|
||||||
ermöglicht eine klare Trennung der Dienste und vereinfacht das Deployment
|
|
||||||
sowie Updates.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>Traefik</b>: Fungiert als zentraler Reverse Proxy und Load Balancer.
|
|
||||||
Traefik übernimmt das Routing der Anfragen zu den entsprechenden Services,
|
|
||||||
verwaltet SSL-Zertifikate automatisch und ermöglicht eine einfache
|
|
||||||
Integration neuer Dienste durch Docker-Labels.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>Nginx</b>: Dient als Webserver für die React-App und stellt die
|
|
||||||
statischen Inhalte bereit.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>JupyterHub</b>: Ermöglicht die Verwaltung von Jupyter-Notebooks
|
|
||||||
für Data Science und Machine Learning. Benutzer können ihre eigenen
|
|
||||||
JupyterLab-Umgebungen über jupyter.simonaltschaeffl.de aufrufen.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>Flask</b>: Verarbeitet GitHub-Webhooks und triggert automatische
|
|
||||||
Updates der React-App. Die Flask-Anwendung verifiziert die Webhook-
|
|
||||||
Authentizität und stößt den Update-Prozess an.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>WireGuard VPN & SSH</b>: Bietet sicheren Remote-Zugriff auf den
|
|
||||||
Server. WireGuard ermöglicht eine moderne, schnelle VPN-Verbindung,
|
|
||||||
während der SSH-Server sichere Terminal-Verbindungen bereitstellt.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-12 space-y-8">
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xl font-bold text-slate-800 mb-2">Routing und Zugriff</h3>
|
|
||||||
<p className="text-slate-700 leading-relaxed">
|
|
||||||
Alle Anfragen werden zunächst von Traefik empfangen und basierend auf der
|
|
||||||
Domain an die entsprechenden Services weitergeleitet. Die Website ist unter
|
|
||||||
simonaltschaeffl.de erreichbar, wobei Traefik die Anfragen an den
|
|
||||||
Nginx-Container weiterleitet, der die React-Applikation bereitstellt.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xl font-bold text-slate-800 mb-2">JupyterHub & JupyterLab</h3>
|
|
||||||
<p className="text-slate-700 leading-relaxed">
|
|
||||||
Der JupyterHub-Service ist über jupyter.simonaltschaeffl.de erreichbar.
|
|
||||||
Traefik leitet die Anfragen an den JupyterHub-Container weiter, der die
|
|
||||||
Benutzerauthentifizierung und Container-Verwaltung übernimmt. Nach erfolgreicher
|
|
||||||
Anmeldung wird ein persönlicher JupyterLab-Container mit Data-Science-Tools
|
|
||||||
wie Pandas, TensorFlow, NumPy etc. gestartet, der für Machine Learning
|
|
||||||
Experimente und Datenanalysen genutzt werden kann.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 className="text-xl font-bold text-slate-800 mb-2">Sicherheit und Remote-Zugriff</h3>
|
|
||||||
<p className="text-slate-700 leading-relaxed">
|
|
||||||
Der sichere Remote-Zugriff wird durch eine Kombination aus WireGuard VPN
|
|
||||||
und SSH gewährleistet. WireGuard bietet eine moderne, effiziente
|
|
||||||
VPN-Lösung, während der SSH-Server sichere Terminal-Verbindungen für
|
|
||||||
Wartungsarbeiten ermöglicht. Die Verwaltung erfolgt über einen
|
|
||||||
dedizierten Admin-Zugang.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-12">
|
|
||||||
<h2 className="text-2xl font-bold text-slate-900 mb-4 border-b pb-2">Mein Fazit</h2>
|
|
||||||
<div className="bg-slate-50 p-6 rounded-xl border border-slate-100 shadow-sm mt-4">
|
|
||||||
<ul className="list-disc pl-5 space-y-3 text-slate-700">
|
|
||||||
<li>
|
|
||||||
<b>Umfangreiches Lernen</b>: Das Projekt bot eine großartige Möglichkeit, neue Technologien wie
|
|
||||||
Docker und React von Grund auf zu lernen.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>Lernkurve war es wert</b>: Auch wenn das Verständnis der neuen Technologien Zeit brauchte, war
|
|
||||||
der Erkenntnisgewinn immens.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>Produktionsvorteile von Docker</b>: Das Projekt hat das Verständnis für die Bedeutung von Docker in
|
|
||||||
Produktionsumgebungen deutlich gemacht und wird die
|
|
||||||
Serverkonfiguration zukünftiger Projekte erleichtern.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>Effizienz von JavaScript-Bibliotheken (React)</b>: Die Einfachheit und Geschwindigkeit, mit der komplexe Webseiten mit
|
|
||||||
React erstellt werden können, hat positiv überrascht und wird in
|
|
||||||
Zukunft häufiger eingesetzt werden.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-12">
|
|
||||||
<h3 className="text-xl font-bold text-slate-800 mb-2">Rolle von LLMs in der Konfiguration</h3>
|
|
||||||
<div className="bg-indigo-50 p-6 rounded-xl border border-indigo-100 text-indigo-900">
|
|
||||||
<p>
|
|
||||||
Ich habe Chatbots in verschiedenen Bereichen eingesetzt, vor allem im
|
|
||||||
Bereich <em>Debugging und Rechtschreibung</em>. Viele Fehler, vor allem bei
|
|
||||||
Dockerfiles oder Docker-Compose-Dateien, konnten durch den Einsatz von
|
|
||||||
Chatbots effizient behoben werden.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-slate-900 mb-4 border-b pb-2">Ideen für die Zukunft des Servers</h2>
|
|
||||||
<div className="bg-emerald-50 p-6 rounded-xl border border-emerald-100 text-emerald-900">
|
|
||||||
<ul className="list-disc pl-5 space-y-2">
|
|
||||||
<li>Integration weiterer Dienste durch einfache Erweiterung der Traefik-Konfiguration</li>
|
|
||||||
<li>Implementierung eines Monitoring-Systems für bessere Überwachung der Services</li>
|
|
||||||
<li>Automatisierung der Backups und Disaster Recovery Prozesse</li>
|
|
||||||
<li>Erweiterung der JupyterHub-Umgebung mit zusätzlichen Data Science Tools</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user