update

package-lock.json

@@ -81,6 +81,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz",
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -721,6 +722,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.26.0.tgz",
       "integrity": "sha512-B+O2DnPc0iG+YXFqOxv2WNuNU97ToWjOomUQ78DouOENWUaM5sVrmet9mcomUGQFwpJd//gvUagXBSdzO1fRKg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1585,6 +1587,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz",
       "integrity": "sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
         "@babel/helper-module-imports": "^7.25.9",
@@ -3099,6 +3102,7 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -3535,6 +3539,7 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
       "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3969,6 +3974,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.2.tgz",
       "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -4095,6 +4101,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
       "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.4.0",
         "@typescript-eslint/scope-manager": "5.62.0",
@@ -4148,6 +4155,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
       "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.62.0",
         "@typescript-eslint/types": "5.62.0",
@@ -4517,6 +4525,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4603,6 +4612,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -5519,6 +5529,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -7458,6 +7469,7 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -10427,6 +10439,7 @@
       "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
       "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/core": "^27.5.1",
         "import-local": "^3.0.2",
@@ -13555,6 +13568,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -14742,6 +14756,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -15139,6 +15154,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15307,6 +15323,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -15385,6 +15402,7 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16004,6 +16022,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -16258,6 +16277,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -17923,6 +17943,7 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
       "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
       "license": "(MIT OR CC0-1.0)",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -18542,6 +18563,7 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.99.6.tgz",
       "integrity": "sha512-TJOLrJ6oeccsGWPl7ujCYuc0pIq2cNsuD6GZDma8i5o5Npvcco/z+NKvZSFsP0/x6SShVb0+X2JK/JHUjKY9dQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.6",
@@ -18611,6 +18633,7 @@
       "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
       "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -19023,6 +19046,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",

src/components/about.jsx

@@ -8,76 +8,78 @@ function AboutPage() {
         <div style={{ marginTop: "1.5em" }}>
           <p>
             <b>
-              Auf dieser Seite m&ouml;chte ich Ihnen einen Einblick in meine
-              Reise in die faszinierende Welt der Informatik geben. Als
-              20-j&auml;hriger Sch&uuml;ler f&uuml;r Wirtschaftsinformatik an
-              der EDV-Schule Plattling ist meine Begeisterung f&uuml;r das
-              Programmieren und die M&ouml;glichkeiten der Datenanalyse stetig
-              gewachsen.
+              Willkommen auf meiner Seite! Als angehender Data Scientist mit
+              Hintergrund in Wirtschaftsinformatik möchte ich Ihnen hier meine
+              Leidenschaft für die Datenanalyse und künstliche Intelligenz
+              näherbringen. Mein Ziel ist es, durch die Analyse komplexer
+              Datensätze wertvolle Erkenntnisse zu gewinnen und innovative
+              Lösungen zu entwickeln.
             </b>
           </p>
 
-          <h2>Motivation und Leidenschaft f&uuml;r die Informatik</h2>
-          <h3>Wie ich zur Informatik gekommen bin</h3>
+          <h2>Meine Vision in Data Science</h2>
+          <h3>Der Weg zur Datenanalyse</h3>
           <p>
-            Den Weg der Informatik habe ich vor wenigen Jahren gefunden nachdem
-            ich das erste mal programmiert habe und sofort den Erfolg
-            versp&uuml;ren konnte der mich bis heute noch antreibt weiter zu
-            machen. Ich bin zwar schon seit viele Jahren sehr stark von
-            Computern begeistert jedoch war ich mir bis dahin nicht so sicher
-            was ich mit dieser Begeisterung anfangen sollte, daher habe ich mich
-            dann entschieden das Programmieren auszuprobieren.
+            Meine Reise in die Welt der Daten begann mit der Entdeckung der
+            Programmierung und entwickelte sich schnell zu einer Faszination für
+            die Möglichkeiten der Datenanalyse. Was als allgemeines Interesse
+            an Computern begann, hat sich zu einer gezielten Spezialisierung
+            im Bereich Data Science entwickelt. Die Fähigkeit, aus rohen Daten
+            wertvolle Erkenntnisse zu gewinnen und diese für fundierte
+            Entscheidungen zu nutzen, treibt mich besonders an.
           </p>
-          <h3>Wieso Data Science</h3>
+          <h3>Meine Spezialisierung in Data Science</h3>
           <p>
-            Das Interesse an Data Science ist entstanden w&auml;hrend ich{" "}
-            <b>CS50X</b> <em>(Online Kurs der Harvard Universit&auml;t)</em> gemacht
-            habe. Dort war eine Woche die den Datenbanken gewidmet war wo ich
-            eine gewisse Verbindung mit den Daten versp&uuml;rt habe, im
-            Anschluss habe ich mehrere Tage nichts anderes gemacht als SQL
-            Querys zu schreiben und Datenbanken zu konzeptieren. Durch den{" "}
-            <b>IBM Data Science Kurs</b> wurde mein Interesse an Data Science
-            nochmal verst&auml;rkt wie ich das erste mal gelernt habe, wie man
-            Daten nutzen kann um ein Model anzupassen, dass es neue
-            Informationen in Form von Daten schafft.
+            Meine Begeisterung für Data Science wurde durch den{" "}
+            <b>CS50X</b> <em>(Harvard University)</em> Kurs geweckt, wo ich die
+            Grundlagen der Datenverarbeitung kennenlernte. Der intensive{" "}
+            <b>IBM Data Science Professional Certificate</b> vertiefte diese
+            Faszination und gab mir praktische Einblicke in Machine Learning
+            und prädiktive Analysen. Besonders die Möglichkeit, durch
+            Datenmodelle neue Erkenntnisse zu gewinnen und Vorhersagen zu
+            treffen, hat mich überzeugt, dass dies der richtige Weg für mich
+            ist.
           </p>
-          <h3>Sonstige Interessen in der Informatik</h3>
+          <h3>Technische Infrastruktur und Tools</h3>
           <p>
-            Neben Data Science bin ich auch sehr begeistert von{" "}
-            <b>Server Administration</b> was auch ein Grund war wieso ich mich
-            entschieden habe diese Website aufzubauen. Dieses Interesse habe ich
-            vorallem in der EDV-Schule gefunden wie wir unsere ersten eigenen
-            Server in der Praxis aufgesetzt haben. Dort habe ich gesehen wie
-            interessant es ist was man alles bei einem Server beachten muss wie
-            z.B. <em>Sicherheit und Wartbarkeit</em>.
+            Um meine Data Science Projekte optimal umzusetzen, habe ich eine
+            eigene technische Infrastruktur aufgebaut, zu der auch dieser
+            Server gehört. Er bietet mir eine <b>JupyterHub-Umgebung</b> für
+            Datenanalysen und Machine Learning Experimente. Die{" "}
+            <em>Server-Administration</em> und DevOps-Kenntnisse sehe ich als
+            wichtige Ergänzung zu meinen Data Science Fähigkeiten, da sie mir
+            ermöglichen, meine Analysen und Modelle effizient zu
+            deployen und zu skalieren.
           </p>
         </div>
         <div>
-          <h2>Meine Lernbereitschaft und Engagement</h2>
-          <h3>Mein Weg zum Wissen</h3>
+          <h2>Expertise und Weiterbildung</h2>
+          <h3>Fundierte Ausbildung in Data Science</h3>
           <p>
-            Der Gro&szlig;teil meines Wissens kommt durch die Schule und durch
-            Online Kurse welche ich w&auml;hrend meiner Zeit als
-            Gro&szlig;handelskaufmann neben der Arbeit in meiner Freizeit
-            absolviert habe. Die wichtigsten Kurse (l&auml;nger als eine Woche)
-            sind vorallem <b>CS50X (Computer Science)</b> und{" "}
-            <b>IBM Data Science</b>. In diesen beiden Kursen habe ich sowohl die
-            Grundlagen in der Informatik als auch in Data Science erhalten,
-            au&szlig;erdem habe mir diese beiden Kurse sehr stark bei der
-            Entscheidungsfindung f&uuml;r mein Fachbereich geholfen. Die
-            EDV-Schule erg&auml;nzt dieses Wissen und erweitert es mit vielen
-            neuen Dingen vorallem wenn es darum geht das Wissen mit der
-            Wirtschaft zu verkn&uuml;pfen.
+            Meine Expertise basiert auf einer Kombination aus strukturierter
+            Ausbildung und praktischer Erfahrung. An der EDV-Schule Plattling
+            erhalte ich eine solide Grundlage in Wirtschaftsinformatik, die ich
+            gezielt durch spezialisierte Kurse wie <b>CS50X</b> und den{" "}
+            <b>IBM Data Science Professional Certificate</b> in Richtung Data
+            Science ausbaue. Diese Kombination ermöglicht mir, sowohl die
+            technischen Aspekte der Datenanalyse als auch deren
+            wirtschaftliche Anwendungen zu verstehen.
           </p>
-          <h3>Wie verst&auml;rke ich mein Wissen in der Zukunft</h3>
+          <h3>Aktuelle Projekte und Karriereziele</h3>
           <p>
-            Einerseits bin ich noch &uuml;ber ein Jahr Sch&uuml;ler an der
-            EDV-Schule bei welcher ich noch an viel Wissen erhalten werden.
-            Andererseits habe ich vor in naher Zukunft verst&auml;rkt auf
-            Projekte zu setzen zu dem z&auml;hlt auch diese Website. In meinen
-            n&auml;chsten Projekte will ich vorallem dann in den Bereich von
-            Data Science und AI gehen um einen <em>&bdquo;Headstart&ldquo;</em>{" "}
-            f&uuml;r ein (Duales-)Studium im Bereich Data Science zu bekommen.
+            Aktuell arbeite ich an drei spannenden Projekten, die verschiedene
+            Aspekte der Softwareentwicklung abdecken. Mein <b>ABAP-Abschlussprojekt</b>
+            ist eine Plattform für Wohnungssuche und Mitfahrgelegenheiten, die
+            praktische Alltagsprobleme löst. Parallel entwickle ich in einem
+            <b>Java-Projekt</b> ein Online-Casino, das mir tiefere Einblicke in
+            Backend-Entwicklung und Datenverwaltung ermöglicht. Besonders
+            faszinierend ist mein privates <b>KI-Projekt</b> - ein Krimi-Dinner
+            mit einem KI-Gamemaster, bei dem ich mich intensiv mit
+            Prompt-Engineering und der praktischen Anwendung von Large Language
+            Models beschäftige. Diese Erfahrungen im Bereich KI und Prompting
+            sehe ich als wichtige Grundlage für meinen angestrebten Einstieg in
+            die Data Science, da sie mir ein tiefes Verständnis für die
+            Möglichkeiten und Grenzen von KI-Systemen vermitteln.
           </p>
         </div>
       </div>

src/components/app.jsx

@@ -10,6 +10,8 @@ import GoalsPage from "./goals";
 import ContactPage from "./contact";
 import ServerPage from "./projects/server";
 import LanguagestudyPage from "./projects/languageStudy";
+import OnlineCasinoPage from "./finalprojects/onlineCasino";
+import WohnungUndFahrgemeinschaftenPage from "./finalprojects/wohnungUndFahrgemeinschaften";
 
 function Home() {
   return <HomePage />;
@@ -43,6 +45,13 @@ function Server() {
   return <ServerPage />;
 }
 
+function OnlineCasino() {
+  return <OnlineCasinoPage />;
+}
+
+function WohnungUndFahrgemeinschaften() {
+  return <WohnungUndFahrgemeinschaftenPage />
+}
 function App() {
   return (
     <Router>
@@ -57,6 +66,8 @@ function App() {
           <Route path="/privacy" element={<Privacy />} />
           <Route path="/projects/languagestudy" element={<LanguageStudy />} />
           <Route path="/projects/server" element={<Server />} />
+          <Route path="/finalprojects/onlineCasino" element={<OnlineCasino />} />
+          <Route path="/finalprojects/wufg" element={<WohnungUndFahrgemeinschaften />} />
         </Routes>
       </div>
       <FooterSection />

src/components/finalprojects/onlineCasino.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+function OnlineCasinoPage() {
+  return (
+    <section className="content-group">
+      <h1 className="project-header">Online Casino</h1>
+      <p className="centered" style={{ marginTop: '1em' }}>
+        <em>Dieses Projekt ist derzeit in der Planungsphase.</em>
+      </p>
+      <div>
+        <h2 style={{ marginTop: '2em' }}>Worum geht es in diesem Projekt?</h2>
+        <p>
+          Dieses Projekt ist mein Abschlussprojekt. Das Ziel ist es, ein Online-Casino von Grund auf zu entwickeln.
+          Weitere Details zum Projekt werden hinzugefügt, sobald die Planungsphase abgeschlossen ist.
+        </p>
+      </div>
+      <div>
+        <h2 style={{ marginTop: '2em' }}>
+          Welche Techniken, Technologien und Bibliotheken werde ich verwenden?
+        </h2>
+        <div className="list-display">
+          <ul className="key-points">
+            <li>
+              <b>Programmiersprache</b>: Java
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default OnlineCasinoPage;

src/components/finalprojects/wohnungUndFahrgemeinschaften.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+function WohnungUndFahrgemeinschaftenPage() {
+  return (
+    <section className="content-group">
+      <h1 className="project-header">Wohnungs- und Fahrgemeinschaften (SAP Fiori)</h1>
+      <p className="centered" style={{ marginTop: '1em' }}>
+        <em>Dieses Projekt ist mein ABAP-Abschlussprojekt für die Schule und befindet sich in der Planungsphase.</em>
+      </p>
+      <div>
+        <h2 style={{ marginTop: '2em' }}>Projektziel</h2>
+        <p>
+          Ziel ist die Entwicklung einer SAP-Fiori-Anwendung, die es Benutzern ermöglicht, Wohnungsangebote und Fahrgemeinschaften einfach zu verwalten. Die Applikation wird als SAP-RAP-Backend mit einem Fiori-Frontend umgesetzt.
+        </p>
+      </div>
+      <div>
+        <h2 style={{ marginTop: '2em' }}>Kernfunktionen</h2>
+        <div className="list-display">
+          <ul className="key-points">
+            <li><b>Wohnungsangebote:</b> Erstellen, Anzeigen, Bearbeiten und Löschen von Angeboten mit bis zu 5 Bildern.</li>
+            <li><b>Fahrgemeinschaften:</b> Erstellen, Suchen (Listen- & Kartenansicht), Bearbeiten und Löschen von Fahrten.</li>
+            <li><b>Nutzerverwaltung:</b> Anmeldung via SAP-Login mit Rollen für Schüler und Administratoren (Lehrer/Verwaltung).</li>
+            <li><b>Moderation:</b> Administratoren können alle Einträge verwalten und moderieren.</li>
+          </ul>
+        </div>
+      </div>
+      <div>
+        <h2 style={{ marginTop: '2em' }}>Technologie-Stack</h2>
+        <div className="list-display">
+          <ul className="key-points">
+            <li><b>Backend:</b> SAP RAP (RESTful ABAP Programming Model)</li>
+            <li><b>Frontend:</b> SAP Fiori (UI5)</li>
+            <li><b>Datenmodell:</b> Core Data Services (CDS)</li>
+            <li><b>API:</b> OData</li>
+            <li><b>Authentifizierung:</b> SAP Single Sign-On (SSO)</li>
+            <li><b>Kartenintegration:</b> OpenStreetMap</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default WohnungUndFahrgemeinschaftenPage;

src/components/home.jsx

@@ -1,18 +1,25 @@
 import React from "react";
 
 function HomePage() {
+  const birthDate = new Date(2005, 3, 21); // Month is 0-indexed, so 3 is April
+  const today = new Date();
+  let age = today.getFullYear() - birthDate.getFullYear();
+  const m = today.getMonth() - birthDate.getMonth();
+  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+    age--;
+  }
   return (
     <section className="centered">
       <div>
         <h1>Startseite</h1>
         <p style={{ marginTop: '1.5em' }}>
           <b>
-            Hallo und danke f&uuml;rs Daraufklicken! Ich bin Simon Altsch&auml;ffl, 20
+            Hallo und danke f&uuml;rs Daraufklicken! Ich bin Simon Altsch&auml;ffl, {age}<span> </span>
             Jahre alt und derzeit Sch&uuml;ler f&uuml;r Wirtschaftsinformatik an der EDV-Schule
             Plattling.
           </b>
         </p>
-        <img src="assets/img/DSC_4133.jpg" alt="Mein Foto" className="center-image"/>
+        <img src="assets/img/picture.jpg" alt="Mein Foto" className="center-image"/>
         <p>
           <em>Willkommen auf meiner Website!</em> Hier stelle ich mich detailliert vor,
           pr&auml;sentiere meine Projekte und teile meine Erfahrung in der

src/components/navigation.jsx

@@ -21,11 +21,21 @@ function Navigation() {
               <NavDropdown.Item href="/projects/languagestudy">
                 Sprachstudie Wikipedia
               </NavDropdown.Item>
-              <NavDropdown.Divider />
-              <NavDropdown.ItemText>In Arbeit</NavDropdown.ItemText>
               <NavDropdown.Item href="/projects/server">
                 Server Architektur
               </NavDropdown.Item>
+              <NavDropdown.Divider />
+              <NavDropdown.ItemText>In Arbeit</NavDropdown.ItemText>
+              <NavDropdown.Item href="/projects/crime-dinner">
+                Krimi Dinner mit KI
+              </NavDropdown.Item>
+              <NavDropdown.ItemText>Abschlussprojekte in Arbeit</NavDropdown.ItemText>
+              <NavDropdown.Item href="/finalprojects/wufg">
+                Wohnungssuche und Fahrgemeinschaften
+              </NavDropdown.Item>
+              <NavDropdown.Item href="/finalprojects/onlineCasino">
+                Online Casino
+              </NavDropdown.Item>
             </NavDropdown>
           </Nav>
         </Navbar.Collapse>

src/components/privacy.jsx

@@ -94,22 +94,24 @@ function PrivacyPage() {
       </p>{" "}
       <p>Wir setzen folgende(n) Hoster ein:</p>
       <p>
-        MC-HOST24.de ist ein Label der Gericke KG
+        netcup GmbH
         <br />
         Vertretungsberechtigter Gesellschafter: Eberhard Gericke
         (Komplement&auml;r)
         <br />
         <br />
-        Telefon: +49 (0)7544 9679080
+        Telefon: +49 721 / 7540755 - 0 
         <br />
-        Mail: info@mc-host24.de
+        Mail: mail@netcup.de 
+        <br />
+        Web: <a href="www.netcup.com">www.netcup.com</a>
         <br />
         <br />
         Postanschrift:
         <br />
-        Lichtenbergstr. 53/1
+        Emmy-Noether-Straße 10
         <br />
-        88677 Markdorf
+        D-76131 Karlsruhe
         <br />
         Deutschland
       </p>

src/components/projects/server.jsx

@@ -13,13 +13,14 @@ function ServerPage() {
       <div className="list-display" style={{ marginTop: '2em' }}>
         <h2>Welche Kernaufgaben erf&uuml;llt dieser Server?</h2>
         <ul className="key-points">
-          <li>Die Bereitstellung dieser Website</li>
-          <li>Die Bereitstellung des JupyterHub-Servers</li>
+          <li>Die Bereitstellung dieser Website über Nginx</li>
+          <li>Die Bereitstellung des JupyterHub-Servers für Data Science und Machine Learning</li>
           <li>
-            Die Entgegennahme des GitHub-Webhooks, um die React-Applikation
-            automatisch <br />
-            via Python (Flask) zu aktualisieren.
+            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>
 
@@ -27,55 +28,65 @@ function ServerPage() {
         <h3>Wichtige Kerntechnologien</h3>
         <ul className="key-points">
           <li>
-            <b>Docker und Docker-Compose</b>: Um den gesamten Server so modular
-            wie m&ouml;glich f&uuml;r Erweiterungen oder Ver&auml;nderungen zu gestalten, habe
-            ich mich entschieden, jeden Prozess in einem eigenen Container zu
-            kapseln. Dies tr&auml;gt auch dazu bei, dass die Daten nicht mehr &uuml;ber
-            den gesamten Server verteilt sind, wodurch die Fehlersuche
-            erleichtert wird.
+            <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>React</b>: Erstellt die Website, sodass sie von Nginx geladen
-            werden kann.
+            <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>: Wird hier sowohl als <em>Reverse Proxy</em> verwendet, um
-            JupyterHub und die Flask-App ansprechbar zu machen, als auch als
-            Webserver f&uuml;r die React-App. Nginx &uuml;bernimmt in diesem Fall die
-            gesamte Kommunikation mit dem Client bzw. dem GitHub-Webhook.
+            <b>Nginx</b>: Dient als Webserver für die React-App und stellt die
+            statischen Inhalte bereit.
           </li>
           <li>
-            <b>JupyterHub</b>: Diesen nutze ich f&uuml;r die Verwaltung der Benutzer
-            und ihrer JupyterLab-Umgebungen.
+            <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>: Wird verwendet, um den GitHub-Webhook zu verifizieren
-            und anschlie&szlig;end die React-App sowie den zugeh&ouml;rigen
-            Docker-Container neu zu starten. Dies bietet mir die Flexibilit&auml;t,
-            meine gesamte Homepage mit nur wenigen Klicks oder Befehlen zu
-            aktualisieren, ohne dass ich mich auf dem Server einloggen muss.
+            <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>
-          <li><b>Certbot</b>: Stellt die SSL/TSL Zertifikate bereit und h&auml;lt sie stets aktuell.</li>
         </ul>
       </div>
 
       <div style={{ marginTop: '2em' }}>
-        <h3>Diese Website</h3>
+        <h3>Routing und Zugriff</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.
+          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>
 
         <h3>JupyterHub &amp; JupyterLab</h3>
         <p>
-          Hierauf gelangt man &uuml;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&uuml;r Experimente mit Machine Learning bzw.
-          k&uuml;nstlicher Intelligenz oder <em>Titanic Competitions</em> von Kaggle verwende.
+          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>
+
+        <h3>Sicherheit und Remote-Zugriff</h3>
+        <p>
+          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>
 
@@ -116,11 +127,10 @@ function ServerPage() {
       <div className="list-display" style={{ marginTop: '2em' }}>
         <h2>Ideen f&uuml;r die Zukunft des Servers</h2>
         <ul className="key-points">
-          <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>
+          <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>
     </section>