From 3ca7259ad590236b6a25764b9c6c2fada407e169 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Altsch=C3=A4ffl?= Date: Tue, 17 Feb 2026 11:58:59 +0100 Subject: [PATCH] refactor: Redesign the language study project page with an enhanced layout, structured sections, and new project metadata. --- src/components/projects/languageStudy.jsx | 217 ++++++++--------- src/components/projects/server.jsx | 272 ++++++++++------------ 2 files changed, 225 insertions(+), 264 deletions(-) diff --git a/src/components/projects/languageStudy.jsx b/src/components/projects/languageStudy.jsx index af86b9b..b8f3b8e 100644 --- a/src/components/projects/languageStudy.jsx +++ b/src/components/projects/languageStudy.jsx @@ -2,127 +2,114 @@ import React from "react"; function LanguagestudyPage() { return ( -
-

Wikipedia Sprachstudie

-

- Dieses Projekt war mein Abschlussprojekt für den Kurs „CS50x“. -

- -
-

GitHub Repository

- - https://github.com/simon-266/WikiDictionaryResearch - -
- -
-

Worum geht es in dieser Sprachstudie?

-

- Ziel dieser Sprachstudie ist es, einem oft gehörten Fakt beim - Sprachenlernen nachzugehen und ihn zu beweisen oder zu widerlegen. Der - Fakt lautet:{" "} - - „Die 1000 häufigsten Wörter machen etwa 80 % des gesprochenen - Wortschatzes aus.“ - - 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: -

- -
-
- Kreisdiagramm: Die Top 1000 Wörter im Vergleich zum Rest -

Top 1000 Wörter vs. Rest

+
+
+
+

Wikipedia Sprachstudie

+
+
+ Status + Abgeschlossen +
+
+ Typ + Data Science / Analyse +
+
+ Kontext + CS50x Final Project +
-
- Kreisdiagramm: Vergleiche der Vorkommen -

Häufigkeitsverteilung

+ -
-
+ -
-

Ergebnisse

-

- Die Ergebnisse zeigen deutlich, dass die Top 1000 Wörter tatsächlich - einen sehr großen Anteil ausmachen – auch wenn es nicht ganz 80 %, - sondern knapp 70 % sind. Daraus lässt sich schlussfolgern, dass es sich - beim Sprachenlernen definitiv lohnt, sich auf diese Wörter zu - konzentrieren, um gute Fortschritte zu erzielen. -

-
+
+

1. Forschungsfrage & Ziel

+
+
+ "Die 1000 häufigsten Wörter machen etwa 80 % des gesprochenen Wortschatzes aus." +
+

+ Dieser oft zitierte Fakt beim Sprachenlernen war der Ausgangspunkt für meine Untersuchung. + Um dies zu verifizieren, habe ich ein Python-Skript entwickelt, das 15.000 Wikipedia-Artikel analysiert + und die Häufigkeit englischer Wörter statistisch auswertet. +

+
+
-
-

- Welche Techniken, Technologien und Bibliotheken habe ich verwendet? -

-
-
    -
  • - Programmiersprachen: Python, IPython -
    • -
  • - Programme: VSCode, JupyterLab, GIT (GitHub) -
    • -
  • - Multithreading und Batchverarbeitung: Mithilfe der Future - Library konnte ich das Zählen der Wörter auf mehrere Threads - verteilen. Durch einfache Schleifen konnte ich den benötigten - Arbeitsspeicher begrenzen, indem ich die 15.000 Seiten in kleinere - Batches aufteilte, diese vorab zusammenführte und am Ende zum - finalen Ergebnis zusammenführte. -
    • -
  • - Wikipedia: Die Quelle meiner Daten, da die Inhalte dort ohne - Copyright-Probleme nutzbar sind, und die zugehörige Python - Library, welche das Webscraping vereinfacht. -
    • -
  • - Pandas: Hierfür habe ich mich entschieden, da ich nach einer - effizienten Möglichkeit suchte, die Wörter zusammenzuführen. - Außerdem vereinfacht es das Speichern dieser Daten in Dateien. -
    • -
  • - sqlite3: Gut zum Speichern und Abrufen meiner Daten. -
    • -
-
-
+
+

2. Visualisierung der Ergebnisse

+
+
+ Kreisdiagramm: Die Top 1000 Wörter im Vergleich zum Rest +

Top 1000 Wörter vs. Rest

+
+
+ Kreisdiagramm: Vergleiche der Vorkommen +

Häufigkeitsverteilung

+
+
+
+

Das Ergebnis

+

+ Die Analyse von Millionen von Wörtern zeigte: Die Top 1000 Wörter machen tatsächlich einen + signifikanten Anteil von knapp 70% aus. Auch wenn die 80%-Marke knapp verfehlt wurde, + bestätigt die Studie, dass eine Konzentration auf den Grundwortschatz für Lernende extrem effizient ist. +

+
+
+ +
+

3. Tech Stack & Methoden

+
+
+
Python 3
+
Pandas
+
Web Scraping
+
Multithreading
+
SQLite
+
Matplotlib
+
Jupyter Notebooks
+
Git
+
+
+
+ +
+

4. Technische Herausforderungen

+
+
+

Performance (Multithreading)

+

+ Um 15.000 Seiten effizient zu verarbeiten, nutzte ich die Python Future Library für + parallele Requests. Batch-Verarbeitung verhinderte dabei einen RAM-Overflow. +

+
+
+

Datenbereinigung

+

+ Rohes HTML musste geparsed und von Satzzeichen sowie Metadaten bereinigt werden, um + verzerrungsfreie Wortzählungen zu ermöglichen. +

+
+
+
-
-

Fazit

-
-
    -
  • - Neues Wissen: 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. -
    • -
  • - Übung: Das Projekt hat sehr gut dazu gedient, mich intensiver - mit Python auseinanderzusetzen und dabei neue Libraries und - Funktionen innerhalb der Sprache selbst kennenzulernen. -
    • -
-
-
+ ); } diff --git a/src/components/projects/server.jsx b/src/components/projects/server.jsx index 5ef6bf5..4274223 100644 --- a/src/components/projects/server.jsx +++ b/src/components/projects/server.jsx @@ -2,156 +2,130 @@ import React from "react"; function ServerPage() { return ( -
-

Struktur dieses Servers

-
- Server Struktur Diagramm +
+
+
+

Home Server & Infrastruktur

+
+
+ Status + In Betrieb / Wartung +
+
+ Typ + Homelab / DevOps +
+
+ Rolle + Administrator & Entwickler +
+
+
+ +
+

1. Projektüberblick & Architektur

+
+
+ Server Struktur Diagramm +
+

+ 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 Docker-Containern, orchestrirert durch Docker Compose und + verwaltet vom Reverse Proxy Traefik. +

+
+
+ +
+

2. Kernkomponenten & Dienste

+
+
+

Traefik (Reverse Proxy)

+

+ Zentraler Einstiegspunkt. Routet Anfragen basierend auf Subdomains an die richtigen Container + und verwaltet automatisch SSL-Zertifikate (Let's Encrypt). +

+
+
+

JupyterHub

+

+ Multi-User Umgebung für Data Science. Startet für jeden Nutzer isolierte Container + mit vorinstallierten Libraries wie Pandas, TensorFlow und NumPy. +

+
+
+

CI/CD Pipeline

+

+ Eine Flask-Anwendung lauscht auf GitHub Webhooks. Bei neuen Pushes wird die Website + automatisch neu gebaut und deployed. +

+
+
+

Sicherheit

+

+ Zugriffsschutz durch WireGuard VPN und SSH (Key-Auth). Interne Dienste sind + nicht öffentlich erreichbar. +

+
+
+

Nginx

+

+ High-Performance Webserver für die Auslieferung der statischen React-Build-Dateien + dieser Portfolio-Seite. +

+
+
+
+ +
+

3. Tech Stack

+
+
+
Docker
+
Docker Compose
+
Traefik
+
Nginx
+
Linux (Ubuntu)
+
Python (Flask)
+
Bash Scripting
+
WireGuard
+
+
+
+ +
+

4. Learnings & KI-Einsatz

+
+
+
+

Wichtigste Erkenntnisse

+
    +
  • Verständnis von Container-Orchestrierung in Produktionsumgebungen.
    • +
  • Wichtigkeit von automatisierten Deployments (CI/CD) für effizientes Arbeiten.
    • +
  • Netzwerk-Routing und SSL-Management mit Reverse Proxies.
    • +
+
+
+

KI als "Co-Admin"

+
+

+ LLMs waren eine große Hilfe beim Debugging komplexer Docker-Compose Konfigurationen + und beim Schreiben von robusten Shell-Skripten. Sie dienten als interaktive Dokumentation + für Linux-Server-Administration. +

+
+
+
+
+
+
- -
-

Welche Kernaufgaben erfüllt dieser Server?

-
-
    -
  • Die Bereitstellung dieser Website über Nginx
    • -
  • Die Bereitstellung des JupyterHub-Servers für Data Science und Machine Learning
    • -
  • - Automatische Aktualisierung der React-Applikation durch GitHub-Webhooks - über die Flask-App -
    • -
  • Sichere Remote-Verbindung über WireGuard VPN und SSH
    • -
  • Zentrales Routing und Load Balancing durch Traefik
    • -
-
-
- -
-

Wichtige Kerntechnologien

-
-
    -
  • - Docker und Docker-Compose: 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. -
    • -
  • - Traefik: 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. -
    • -
  • - Nginx: Dient als Webserver für die React-App und stellt die - statischen Inhalte bereit. -
    • -
  • - JupyterHub: 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. -
    • -
  • - Flask: 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. -
    • -
  • - WireGuard VPN & SSH: Bietet sicheren Remote-Zugriff auf den - Server. WireGuard ermöglicht eine moderne, schnelle VPN-Verbindung, - während der SSH-Server sichere Terminal-Verbindungen bereitstellt. -
    • -
-
-
- -
-
-

Routing und Zugriff

-

- 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. -

-
- -
-

JupyterHub & JupyterLab

-

- 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. -

-
- -
-

Sicherheit und Remote-Zugriff

-

- 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. -

-
-
- -
-

Mein Fazit

-
-
    -
  • - Umfangreiches Lernen: Das Projekt bot eine großartige Möglichkeit, neue Technologien wie - Docker und React von Grund auf zu lernen. -
    • -
  • - Lernkurve war es wert: Auch wenn das Verständnis der neuen Technologien Zeit brauchte, war - der Erkenntnisgewinn immens. -
    • -
  • - Produktionsvorteile von Docker: Das Projekt hat das Verständnis für die Bedeutung von Docker in - Produktionsumgebungen deutlich gemacht und wird die - Serverkonfiguration zukünftiger Projekte erleichtern. -
    • -
  • - Effizienz von JavaScript-Bibliotheken (React): 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. -
    • -
-
-
- -
-

Rolle von LLMs in der Konfiguration

-
-

- Ich habe Chatbots in verschiedenen Bereichen eingesetzt, vor allem im - Bereich Debugging und Rechtschreibung. Viele Fehler, vor allem bei - Dockerfiles oder Docker-Compose-Dateien, konnten durch den Einsatz von - Chatbots effizient behoben werden. -

-
-
- -
-

Ideen für die Zukunft des Servers

-
-
    -
  • Integration weiterer Dienste durch einfache Erweiterung der Traefik-Konfiguration
    • -
  • Implementierung eines Monitoring-Systems für bessere Überwachung der Services
    • -
  • Automatisierung der Backups und Disaster Recovery Prozesse
    • -
  • Erweiterung der JupyterHub-Umgebung mit zusätzlichen Data Science Tools
    • -
-
-
-
+ ); }