Update

src/components/app.jsx

@@ -8,6 +8,7 @@ import HomePage from "./home";
 import AboutPage from "./about";
 import GoalsPage from "./goals";
 import ContactPage from "./contact";
+import ServerPage from "./projects/server";
 
 // Deine Komponenten für die verschiedenen Seiten
 function Home() {
@@ -44,7 +45,7 @@ function LanguageStudy() {
 }
 
 function Server() {
-  return <h2>Server</h2>;
+  return <ServerPage />;
 }
 
 function App() {

src/components/projects/server.jsx

@@ -1,8 +1,128 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
 function ServerPage() {
   return (
-        <section><h1>Struktur dieses Servers</h1></section>
+    <section className="center-titles">
+      <h1>Struktur dieses Servers</h1>
+      <img
+        src="/assets/projects/server/images/server.png"
+        alt="Test"
+        className="center-image"
+      />
+
+      <div className="space centered-list-container">
+        <h2>Welche Kernaufgaben erfüllt dieser Server?</h2>
+        <ul className="centered-list">
+          <li>Die Bereitstellung dieser Website</li>
+          <li>Die Bereitstellung des JupyterHub-Servers</li>
+          <li>
+            Die Entgegennahme des GitHub-Webhooks, um die React-Applikation
+            automatisch <br />
+            via Python (Flask) zu aktualisieren.
+          </li>
+        </ul>
+      </div>
+
+      <div className="space centered-list-container">
+        <h3>Wichtige Kerntechnologien</h3>
+        <ul className="centered-list">
+          <li>
+            <b>Docker und Docker-Compose</b>: Um den gesamten Server so modular
+            wie möglich für Erweiterungen oder Veränderungen zu gestalten, habe
+            ich mich entschieden, jeden Prozess in einem eigenen Container zu
+            kapseln. Dies trägt auch dazu bei, dass die Daten nicht mehr über
+            den gesamten Server verteilt sind, wodurch die Fehlersuche
+            erleichtert wird.
+          </li>
+          <li>
+            <b>React</b>: Erstellt die Website, sodass sie von Nginx geladen
+            werden kann.
+          </li>
+          <li>
+            <b>Nginx</b>: Wird hier sowohl als Reverse Proxy verwendet, um
+            JupyterHub und die Flask-App ansprechbar zu machen, als auch als
+            Webserver für die React-App. Nginx übernimmt in diesem Fall die
+            gesamte Kommunikation mit dem Client bzw. dem GitHub-Webhook.
+          </li>
+          <li>
+            <b>JupyterHub</b>: Diesen nutze ich für die Verwaltung der Benutzer
+            und ihrer JupyterLab-Umgebungen.
+          </li>
+          <li>
+            <b>Flask</b>: Wird verwendet, um den GitHub-Webhook zu verifizieren
+            und anschließend die React-App sowie den zugehörigen
+            Docker-Container neu zu starten. Dies bietet mir die Flexibilität,
+            meine gesamte Homepage mit nur wenigen Klicks oder Befehlen zu
+            aktualisieren, ohne dass ich mich auf dem Server einloggen muss.
+          </li>
+        </ul>
+      </div>
+
+      <div className="space">
+        <h3>Diese Website</h3>
+        <p>
+          Diese Website ist eine einfache React-Applikation, die unter
+          [www.]simonaltschaeffl.de erreichbar ist. Um darauf zuzugreifen, wird
+          eine einfache Anfrage an Nginx gesendet, welcher die Seite aus dem
+          HTML innerhalb seines Containers abruft und an den Client sendet.
+        </p>
+
+        <h3>JupyterHub & JupyterLab</h3>
+        <p>
+          Hierauf gelangt man über die Subdomain jupyter.simonaltschaeffl.de. Um
+          dorthin geroutet zu werden, wird Nginx als Reverse Proxy verwendet.
+          Sobald man sich eingeloggt hat, wird ein JupyterLab-Container mit
+          Data-Science-Tools und Libraries wie Pandas, TensorFlow, NumPy etc.
+          erstellt, welche ich für Experimente mit Machine Learning bzw.
+          künstlicher Intelligenz oder Titanic Competitions von Kaggle verwende.
+        </p>
+      </div>
+
+      <div class="space centered-list-container">
+        <h2>Mein Fazit</h2>
+        <ul className="centered-list">
+          <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 className="space">
+        <h3>Rolle von LLMs in der Konfiguration</h3>
+        <p>
+          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.
+        </p>
+      </div>
+
+      <div className="space centered-list-container">
+        <h2>Ideen für die Zukunft des Servers</h2>
+        <ul className="centered-list">
+          <li>
+            Die Trennung von React und dem Nginx-Hauptcontainer mithilfe eines
+            eigenen Nginx-Servers und Reverse Proxys
+          </li>
+          <li>Erweiterung mit neuen/eigenen Services</li>
+        </ul>
+      </div>
+    </section>
   );
 }
 

src/styles/styles.css

@@ -62,5 +62,10 @@ section {
 
 .centered-list {
     display: inline-block;
-    text-align: left; /* Text innerhalb der Liste links ausrichten */
+    text-align: left;
+}
+
+.center-image {
+    display: block;
+    margin: auto auto;
 }