update
This commit is contained in:
simonaltschaffl@gmail.com
parent
535cd3335c
commit
650494ea3e
24
package-lock.json
generated
24
package-lock.json
generated
@ -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",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
3
public/assets/img/favicon.svg
Normal file
3
public/assets/img/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.8 MiB |
BIN
public/assets/img/favicon.zip
Normal file
BIN
public/assets/img/favicon.zip
Normal file
Binary file not shown.
BIN
public/assets/img/picture.jpg
Normal file
BIN
public/assets/img/picture.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 282 KiB After Width: | Height: | Size: 410 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 78 KiB |
BIN
public/assets/projects/server/images/server.png.old
Normal file
BIN
public/assets/projects/server/images/server.png.old
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
@ -8,76 +8,78 @@ function AboutPage() {
|
||||
<div style={{ marginTop: "1.5em" }}>
|
||||
<p>
|
||||
<b>
|
||||
Auf dieser Seite möchte ich Ihnen einen Einblick in meine
|
||||
Reise in die faszinierende Welt der Informatik geben. Als
|
||||
20-jähriger Schüler für Wirtschaftsinformatik an
|
||||
der EDV-Schule Plattling ist meine Begeisterung für das
|
||||
Programmieren und die Mö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ü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ü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ährend ich{" "}
|
||||
<b>CS50X</b> <em>(Online Kurs der Harvard Universität)</em> gemacht
|
||||
habe. Dort war eine Woche die den Datenbanken gewidmet war wo ich
|
||||
eine gewisse Verbindung mit den Daten verspü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ä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ßteil meines Wissens kommt durch die Schule und durch
|
||||
Online Kurse welche ich während meiner Zeit als
|
||||
Großhandelskaufmann neben der Arbeit in meiner Freizeit
|
||||
absolviert habe. Die wichtigsten Kurse (lä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ßerdem habe mir diese beiden Kurse sehr stark bei der
|
||||
Entscheidungsfindung für mein Fachbereich geholfen. Die
|
||||
EDV-Schule ergänzt dieses Wissen und erweitert es mit vielen
|
||||
neuen Dingen vorallem wenn es darum geht das Wissen mit der
|
||||
Wirtschaft zu verknü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ärke ich mein Wissen in der Zukunft</h3>
|
||||
<h3>Aktuelle Projekte und Karriereziele</h3>
|
||||
<p>
|
||||
Einerseits bin ich noch über ein Jahr Schüler an der
|
||||
EDV-Schule bei welcher ich noch an viel Wissen erhalten werden.
|
||||
Andererseits habe ich vor in naher Zukunft verstärkt auf
|
||||
Projekte zu setzen zu dem zählt auch diese Website. In meinen
|
||||
nächsten Projekte will ich vorallem dann in den Bereich von
|
||||
Data Science und AI gehen um einen <em>„Headstart“</em>{" "}
|
||||
fü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>
|
||||
|
||||
@ -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 />
|
||||
|
||||
33
src/components/finalprojects/onlineCasino.jsx
Normal file
33
src/components/finalprojects/onlineCasino.jsx
Normal file
@ -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;
|
||||
@ -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;
|
||||
@ -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ürs Daraufklicken! Ich bin Simon Altschäffl, 20
|
||||
Hallo und danke fürs Daraufklicken! Ich bin Simon Altschäffl, {age}<span> </span>
|
||||
Jahre alt und derzeit Schüler fü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äsentiere meine Projekte und teile meine Erfahrung in der
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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ä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>
|
||||
|
||||
@ -13,13 +13,14 @@ function ServerPage() {
|
||||
<div className="list-display" style={{ marginTop: '2em' }}>
|
||||
<h2>Welche Kernaufgaben erfü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ö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.
|
||||
<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ür die React-App. Nginx ü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ü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ß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.
|
||||
<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ä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 & 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 <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ü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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user