simon_admin/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

big overhaul of genereall design

Browse Source
This commit is contained in:
simonaltschaffl@gmail.com 2025-05-09 17:21:39 +02:00
parent 91863c5aa7
commit cb9a5e8e2b
13 changed files with 304 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@ -24,6 +24,9 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<title>React App</title>
</head>
<body>

39
src/components/about.jsx
View File

@ -1,46 +1,45 @@
import React, { Component } from 'react';
import React from 'react';
function AboutPage() {
return (
<section>
<div className='center-titles'>
<h1>Über mich</h1>
<div className='space'>
<div className='content-group'>
<h1>&Uuml;ber mich</h1>
<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.</b>
<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.</b>
</p>
<h2 className='space'>Motivation und Leidenschaft für die Informatik</h2>
<h2>Motivation und Leidenschaft f&uuml;r die Informatik</h2>
<h3>Wie ich zur Informatik gekommen bin</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
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.
</p>
<h3>Wieso Data Science</h3>
<p>
Das Interesse an Data Science ist entstanden während ich CS50X (Online Kurs der Harvard Universität) 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 IBM Data Science Kurs wurde mein Interesse an Data Science nochmal verstärkt wie ich
Das Interesse an Data Science ist entstanden w&auml;hrend ich <em>CS50X (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.
</p>
<h3>Sonstige Interessen in der Informatik</h3>
<p>
Neben Data Science bin ich auch sehr begeistert von Server Adminstration 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 intressant es ist was man alles bei einem Server beachten muss wie z.B. Sicherheit und Wartbarkeit.
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>.
</p>
</div>
<div>
<h2 className='space'>Meine Lernbereitschaft und Engagement</h2>
<h2>Meine Lernbereitschaft und Engagement</h2>
<h3>Mein Weg zum Wissen</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 absolivert habe. Die wichtigsten Kurse (länger als eine Woche) sind vorallem
CS50X (Computer Science) und IBM Data Science. 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 Entscheidungsfinden für mein Fachbereich geholgen.
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.
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.
</p>
<h3>Wie verstärke ich mein Wissen in der Zukunft</h3>
<h3>Wie verst&auml;rke ich mein Wissen in der Zukunft</h3>
<p>
Einerseitz bin ich noch über ein Jahr Schüler an der EDV-Schule bei welcher ich noch an viel Wissen erhalten werden. Andererseit 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 eine "Headstart" für ein (Duales-)Studium im Bereich Data Science zu bekommen.
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.
</p>
</div>
</div>
@ -48,4 +47,4 @@ function AboutPage() {
);
}
export default AboutPage
export default AboutPage;

14
src/components/app.jsx
View File

@ -1,5 +1,5 @@
import React, { Component } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from "./navigation";
import FooterSection from "./footerSection";
import ImpressumSide from "./impressum";
@ -11,7 +11,6 @@ import ContactPage from "./contact";
import ServerPage from "./projects/server";
import LanguagestudyPage from "./projects/languageStudy";
// Deine Komponenten für die verschiedenen Seiten
function Home() {
return <HomePage />;
}
@ -36,11 +35,6 @@ function Privacy(){
return <PrivacyPage />;
}
{
/* For the Projects */
}
function LanguageStudy() {
return <LanguagestudyPage />;
}
@ -59,14 +53,10 @@ function App() {
<Route path="/about-me" element={<About />} />
<Route path="/goals" element={<Goals />} />
<Route path="/contact" element={<Contact />} />
<Route path="/impressum" element={<Impressum />} />
<Route path="/privacy" element={<Privacy />} />
{/* For the Projects */}
<Route path="/projects/languagestudy" element={<LanguageStudy />} />
<Route path="/projects/server" element={<Server />} />
</Routes>
</div>
<FooterSection />

10
src/components/contact.jsx
View File

@ -1,4 +1,4 @@
import React, { Component } from "react";
import React from "react";
function ContactPage() {
return (
@ -13,10 +13,10 @@ function ContactPage() {
<br /> oder per Telefon unter{" "}
<a href="tel:+4915157852478">+49 1515 7852478</a>. <br />
</p>
<p className="space">
Bitte beachten Sie, dass es während meiner Schulzeiten zu <br />
Verzögerungen bei der Beantwortung kommen kann. Ich bemühe mich <br />
jedoch, Ihre Anfrage so schnell wie möglich zu beantworten.
<p style={{ marginTop: '1.5em' }}>
<em>Bitte beachten Sie</em>, dass es w&auml;hrend meiner Schulzeiten zu <br />
Verz&ouml;gerungen bei der Beantwortung kommen kann. Ich bem&uuml;he mich <br />
jedoch, Ihre Anfrage <b>so schnell wie m&ouml;glich</b> zu beantworten.
</p>
</div>
</section>

5
src/components/footerSection.jsx
View File

@ -1,11 +1,10 @@
import React, { Component } from "react";
import React from "react";
function FooterSection() {
return (
<footer >
<footer>
<nav>
<a href="/impressum" className="foot-links">Impressum</a>
<br />
<a href="/privacy" className="foot-links">Datenschutz</a>
</nav>
</footer>

38
src/components/goals.jsx
View File

@ -1,50 +1,50 @@
import React, { Component } from "react";
import React from "react";
function GoalsPage() {
return (
<section className="center-titles">
<section className="content-group">
<h1>Meine Ziele</h1>
<div>
<h2 className="space">Derzeitige Ziele</h2>
<div className="centered-list-container">
<ul className="centered-list">
<h2>Derzeitige Ziele</h2>
<div className="list-display">
<ul className="key-points">
<li>
Meinen Fokus auf die Schule richten, um dem Pensum der Schule
gerecht zu werden
</li>
<li>
Vertiefung meiner Kenntnisse in Python für Data Science (z.B.
Vertiefung meiner Kenntnisse in <b>Python f&uuml;r Data Science</b> (z.B.
Pandas, TensorFlow, NumPy, Scikit-learn)
</li>
<li>
Entwicklung von Data Science Projekten mit Fokus auf vollständige
Applikationen (Frontend: React; Backend Flask, FastAPI; Forschung:
Entwicklung von Data Science Projekten mit Fokus auf <em>vollst&auml;ndige
Applikationen</em> (Frontend: React; Backend Flask, FastAPI; Forschung:
JupyterNotebook)
</li>
</ul>
</div>
</div>
<div>
<h2 className="space">Ziele der nächsten Jahre</h2>
<h2>Ziele der n&auml;chsten Jahre</h2>
<p>
Für meine Ziele in den nächsten Jahren strebe ich einen guten
Abschluss an meiner derzeitigen Schule zum Staatlich geprüften
Wirtschaftsinformatiker und anschließend ein (duales) Studium im
Bereich Data Science an. Durch diese Ziele habe ich vor, ein Fundament
F&uuml;r meine Ziele in den n&auml;chsten Jahren strebe ich einen <b>guten
Abschluss</b> an meiner derzeitigen Schule zum Staatlich gepr&uuml;ften
Wirtschaftsinformatiker und anschlie&szlig;end ein <em>(duales) Studium im
Bereich Data Science</em> an. Durch diese Ziele habe ich vor, ein Fundament
aufzubauen, welches mir helfen wird, die auf mich zukommenden
Schwierigkeiten zu bewältigen.
Schwierigkeiten zu bew&auml;ltigen.
</p>
</div>
<div>
<h2 className="space">Langfristige Ziele</h2>
<h2>Langfristige Ziele</h2>
<p>
Langfristig plane ich, meine Kenntnisse immer weiter auszubauen und
diese auch an die Welt und deren Anforderungen, vor allem in dieser
sich schnell entwickelnden Zeit, anzupassen. Ich würde derzeit auch
ein weiteres Studium zum Master nicht ausschließen. Meine
sich schnell entwickelnden Zeit, anzupassen. Ich w&uuml;rde derzeit auch
ein weiteres Studium zum Master nicht ausschlie&szlig;en. Meine
langfristigen Ziele sind aber nicht nur rein auf den IT-Bereich
beschränkt, sondern auch um die Bereiche darum, wie z.B.
Sprachkenntnisse, Soziale Komptenzen oder auch Projektmanagement,
beschr&auml;nkt, sondern auch um die Bereiche darum, wie z.B.
<em>Sprachkenntnisse, Soziale Kompetenzen oder auch Projektmanagement</em>,
immer weiter zu verbessern.
</p>
</div>

18
src/components/home.jsx
View File

@ -1,32 +1,30 @@
import React, { Component } from "react";
import React from "react";
function HomePage() {
return (
<section className="centered">
<div>
<h1>Startseite</h1>
<p className="space">
<p style={{ marginTop: '1.5em' }}>
<b>
Hallo und danke fürs Daraufklicken! Ich bin Simon Altschäffl, 20
Jahre alt und derzeit Schüler für Wirtschaftsinformatik an der EDV-Schule
Hallo und danke f&uuml;rs Daraufklicken! Ich bin Simon Altsch&auml;ffl, 20
Jahre alt und derzeit Sch&uuml;ler f&uuml;r Wirtschaftsinformatik an der EDV-Schule
Plattling.
</b>
<br />
</p>
<p>
Willkommen auf meiner Website! Hier stelle ich mich detailliert vor,
präsentiere meine Projekte und teile meine Erfahrung in der
<em>Willkommen auf meiner Website!</em> Hier stelle ich mich detailliert vor,
pr&auml;sentiere meine Projekte und teile meine Erfahrung in der
Informatik.
</p>
<p>
Entdecken Sie gerne meine Projekte, die bereits abgeschlossen sind oder derzeit noch in Entwicklung sind. Erfahren Sie auch mehr über mich und meine Ziele, außerdem können Sie gerne mit mir Kontakt aufnehmen.
Entdecken Sie gerne meine Projekte, die bereits abgeschlossen sind oder derzeit noch in Entwicklung sind. Erfahren Sie auch mehr &uuml;ber mich und meine Ziele, au&szlig;erdem k&ouml;nnen Sie gerne mit mir Kontakt aufnehmen.
</p>
<p>
Diese Seite ist derzeit auch noch im Aufbau, daher bin ich für das Melden von Fehlern sehr dankbar.
Diese Seite ist derzeit auch noch im Aufbau, daher bin ich f&uuml;r das Melden von Fehlern <b>sehr dankbar</b>.
</p>
</div>
</section>
);

6
src/components/impressum.jsx
View File

@ -1,12 +1,12 @@
import React, { Component } from "react";
import React from "react";
function ImpressumSide() {
return (
<section className="centered">
<h1>Impressum nach § 5 TMG</h1>
<h1>Impressum nach &sect; 5 TMG</h1>
<div>
<h2 className="space">Betreiber und Administrator</h2>
<h2 style={{ marginTop: '1.5em' }}>Betreiber und Administrator</h2>
<p>
<b>Simon Altsch&auml;ffl</b> <br />
Sammern 6b <br />

8
src/components/navigation.jsx
View File

@ -1,11 +1,11 @@
import React, { Component } from "react";
import React from "react";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
function Navigation() {
return (
<div className="navigation">
<Navbar bg="light" expand="lg">
<Navbar.Brand className="my-name">Simon Altsch&auml;ffl</Navbar.Brand>
<Navbar bg="light" expand="lg" className="py-0">
<Navbar.Brand href="/" className="my-name">Simon Altsch&auml;ffl</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse
id="basic-navbar-nav"
@ -13,7 +13,7 @@ function Navigation() {
>
<Nav className="mr-auto">
<Nav.Link href="/">Startseite</Nav.Link>
<Nav.Link href="/about-me">Über mich</Nav.Link>
<Nav.Link href="/about-me">&Uuml;ber mich</Nav.Link>
<Nav.Link href="/goals">Ziele</Nav.Link>
<Nav.Link href="/contact">Kontakt</Nav.Link>
<NavDropdown title="Projekte" id="basic-nav-dropdown">

80
src/components/projects/languageStudy.jsx
View File

@ -1,63 +1,63 @@
import React, { Component } from "react";
import React from "react";
function LanguagestudyPage() {
return (
<section className="center-titles">
<section className="content-group">
<h2>Wikipedia Sprachstudie</h2>
<p className="centered">
Dieses Projekt war mein Abschlussprojekt für den Kurs „CS50x“.
<p className="centered" style={{ marginTop: '1em' }}>
<em>Dieses Projekt war mein Abschlussprojekt f&uuml;r den Kurs &bdquo;CS50x&ldquo;.</em>
</p>
<div className="centered">
<h3 className="space">GitHub</h3>
<div className="centered" style={{ marginTop: '2em' }}>
<h3>GitHub</h3>
<a href="https://github.com/simon-266/WikiDictionaryResearch">
https://github.com/simon-266/WikiDictionaryResearch
</a>
</div>
<div>
<h2 className="space">Worum geht es in dieser Sprachstudie?</h2>
<h2 style={{ marginTop: '2em' }}>Worum geht es in dieser Sprachstudie?</h2>
<p>
Ziel dieser Sprachstudie ist es, einem oft gehörten Fakt beim
Ziel dieser Sprachstudie ist es, einem oft geh&ouml;rten Fakt beim
Sprachenlernen nachzugehen und ihn zu beweisen oder zu widerlegen. Der
Fakt lautet:{" "}
<b>
„Die 1000 häufigsten Wörter machen etwa 80 % des gesprochenen
Wortschatzes aus.“
&bdquo;Die 1000 h&auml;ufigsten W&ouml;rter machen etwa 80 % des gesprochenen
Wortschatzes aus.&ldquo;
</b>
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
Wikipedia-Seiten durchsucht und die englischen W&ouml;rter darin z&auml;hlt.
Zus&auml;tzlich habe ich einige Diagramme zu meinen Ergebnissen in einem
Jupyter Notebook erstellt:
</p>
<div className="image-container">
<img
src="/assets/projects/languageStudy/images/top1000.png"
alt="Kreisdiagramm: Die Top 1000 Wörter im Vergleich zum Rest"
alt="Kreisdiagramm: Die Top 1000 W&ouml;rter im Vergleich zum Rest"
className="center-image"
/>
<img
src="/assets/projects/languageStudy/images/stats.png"
alt="Kreisdiagramm: Verlgeiche der Vorkommen"
className="center-image "
alt="Kreisdiagramm: Vergleiche der Vorkommen"
className="center-image"
/>
</div>
</div>
<div>
<h2 className="space">Ergebnisse</h2>
<h2 style={{ marginTop: '2em' }}>Ergebnisse</h2>
<p>
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.
Die Ergebnisse zeigen deutlich, dass die Top 1000 W&ouml;rter tats&auml;chlich
einen sehr gro&szlig;en Anteil ausmachen &ndash; auch wenn es nicht ganz 80 %,
sondern <em>knapp 70 %</em> sind. Daraus l&auml;sst sich schlussfolgern, dass es sich
beim Sprachenlernen definitiv lohnt, sich auf diese W&ouml;rter zu
konzentrieren, um <b>gute Fortschritte</b> zu erzielen.
</p>
</div>
<div>
<h2 className="space">
<h2 style={{ marginTop: '2em' }}>
Welche Techniken, Technologien und Bibliotheken habe ich verwendet?
</h2>
<div className="centered-list-container">
<ul className="centered-list">
<div className="list-display">
<ul className="key-points">
<li>
<b>Programmiersprachen</b>: Python, IPython
</li>
@ -65,22 +65,22 @@ function LanguagestudyPage() {
<b>Programme</b>: VSCode, JupyterLab, GIT (GitHub)
</li>
<li>
<b>Multithreading und Batchverarbeitung</b>: Mithilfe der Future
Library konnte ich das Zählen der Wörter auf mehrere Threads
verteilen. Durch einfache Schleifen konnte ich den benötigten
<b>Multithreading und Batchverarbeitung</b>: Mithilfe der <em>Future
Library</em> konnte ich das Z&auml;hlen der W&ouml;rter auf mehrere Threads
verteilen. Durch einfache Schleifen konnte ich den ben&ouml;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.
Batches aufteilte, diese vorab zusammenf&uuml;hrte und am Ende zum
finalen Ergebnis zusammenf&uuml;hrte.
</li>
<li>
<b>Wikipedia</b>: Die Quelle meiner Daten, da die Inhalte dort ohne
Copyright-Probleme nutzbar sind, und die zugehörige Python
Copyright-Probleme nutzbar sind, und die zugeh&ouml;rige Python
Library, welche das Webscraping vereinfacht.
</li>
<li>
<b>Pandas</b>: 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.
<b>Pandas</b>: Hierf&uuml;r habe ich mich entschieden, da ich nach einer
effizienten M&ouml;glichkeit suchte, die W&ouml;rter zusammenzuf&uuml;hren.
Au&szlig;erdem vereinfacht es das Speichern dieser Daten in Dateien.
</li>
<li>
<b>sqlite3</b>: Gut zum Speichern und Abrufen meiner Daten.
@ -89,17 +89,17 @@ function LanguagestudyPage() {
</div>
</div>
<div>
<h2 className="space">Fazit</h2>
<div className="centered-list-container">
<ul className="centered-list">
<h2 style={{ marginTop: '2em' }}>Fazit</h2>
<div className="list-display">
<ul className="key-points">
<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.
Mal intensiv mit den Themen Webscraping (auch wenn es &uuml;ber eine
Library geschah) und Multithreading in Python besch&auml;ftigen, was f&uuml;r
zuk&uuml;nftige Projekte relevant sein k&ouml;nnte.
</li>
<li>
<b>Übung</b>: Das Projekt hat sehr gut dazu gedient, mich intensiver
<b>&Uuml;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>

68
src/components/projects/server.jsx
View File

@ -1,18 +1,18 @@
import React, { Component } from "react";
import React from "react";
function ServerPage() {
return (
<section className="center-titles">
<section className="content-group">
<h1>Struktur dieses Servers</h1>
<img
src="/assets/projects/server/images/server.png"
alt="Test"
alt="Server Struktur Diagramm"
className="center-image"
/>
<div className="space centered-list-container">
<h2>Welche Kernaufgaben erfüllt dieser Server?</h2>
<ul className="centered-list">
<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>
@ -23,14 +23,14 @@ function ServerPage() {
</ul>
</div>
<div className="space centered-list-container">
<div className="list-display" style={{ marginTop: '2em' }}>
<h3>Wichtige Kerntechnologien</h3>
<ul className="centered-list">
<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
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ägt auch dazu bei, dass die Daten nicht mehr über
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.
</li>
@ -39,27 +39,27 @@ function ServerPage() {
werden kann.
</li>
<li>
<b>Nginx</b>: Wird hier sowohl als Reverse Proxy verwendet, um
<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
Webserver f&uuml;r die React-App. Nginx &uuml;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
<b>JupyterHub</b>: Diesen nutze ich f&uuml;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,
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.
</li>
<li><b>Certbot</b>: Stellt die SSL/TSL Certifikate bereit und haltet sie stets aktuell.</li>
<li><b>Certbot</b>: Stellt die SSL/TSL Zertifikate bereit und h&auml;lt sie stets aktuell.</li>
</ul>
</div>
<div className="space">
<div style={{ marginTop: '2em' }}>
<h3>Diese Website</h3>
<p>
Diese Website ist eine einfache React-Applikation, die unter
@ -68,54 +68,54 @@ function ServerPage() {
HTML innerhalb seines Containers abruft und an den Client sendet.
</p>
<h3>JupyterHub & JupyterLab</h3>
<h3>JupyterHub &amp; JupyterLab</h3>
<p>
Hierauf gelangt man über die Subdomain jupyter.simonaltschaeffl.de. Um
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ür Experimente mit Machine Learning bzw.
künstlicher Intelligenz oder Titanic Competitions von Kaggle verwende.
erstellt, welche ich f&uuml;r Experimente mit Machine Learning bzw.
k&uuml;nstlicher Intelligenz oder <em>Titanic Competitions</em> von Kaggle verwende.
</p>
</div>
<div class="space centered-list-container">
<div className="list-display" style={{ marginTop: '2em' }}>
<h2>Mein Fazit</h2>
<ul className="centered-list">
<ul className="key-points">
<li>
<b>Umfangreiches Lernen</b>: Das Projekt bot eine großartige Möglichkeit, neue Technologien wie
<b>Umfangreiches Lernen</b>: Das Projekt bot eine gro&szlig;artige M&ouml;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
<b>Lernkurve war es wert</b>: Auch wenn das Verst&auml;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
<b>Produktionsvorteile von Docker</b>: Das Projekt hat das Verst&auml;ndnis f&uuml;r die Bedeutung von Docker in
Produktionsumgebungen deutlich gemacht und wird die
Serverkonfiguration zukünftiger Projekte erleichtern.
Serverkonfiguration zuk&uuml;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.
React erstellt werden k&ouml;nnen, hat positiv &uuml;berrascht und wird in
Zukunft h&auml;ufiger eingesetzt werden.
</li>
</ul>
</div>
<div className="space">
<div style={{ marginTop: '2em' }}>
<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
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 className="space centered-list-container">
<h2>Ideen für die Zukunft des Servers</h2>
<ul className="centered-list">
<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

2
src/index.js
View File

@ -11,4 +11,4 @@ root.render(
<App />
</div>
</React.StrictMode>
);
);

211
src/styles/styles.css
View File

@ -1,92 +1,183 @@
.navigation{
display: flex;
justify-content: center;
}
.dropdown-item-text {
font-weight: bold;
color: #495057;
padding: 0.25rem 1.5rem;
}
.my-name {
color: #28a745;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
}
.my-name:hover{
color: #28a745 !important;
}
footer {
min-height: 100px;
background-color: rgb(214, 214, 214);
display: flex;
justify-content: center;
align-items: center;
}
section {
margin-top: 50px;
}
.centered{
text-align: center;
}
.foot-links{
text-decoration: none;
}
.space {
margin-top: 30px;
}
.content {
flex-grow: 1;
body {
font-family: 'Open Sans', Arial, sans-serif;
background-color: #f4f7f6;
color: #333;
line-height: 1.6;
margin: 0;
padding: 0;
}
.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #ffffff;
}
.center-titles {
margin-left: 5%;
margin-right: 5%;
.content {
flex-grow: 1;
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}
.center-titles h1, .center-titles h2, .center-titles h3{
h1, h2, h3, h4, h5, h6 {
font-family: 'Lato', Arial, sans-serif;
color: #2c3e50;
margin-top: 1.8em;
margin-bottom: 0.6em;
}
h1 {
font-size: 2.4em;
text-align: center;
margin-bottom: 1em;
}
h2 {
font-size: 1.9em;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 0.3em;
margin-top: 2em;
}
h3 {
font-size: 1.5em;
color: #34495e;
}
p {
margin-bottom: 1.2em;
font-size: 1em;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
.navigation {
display: flex;
justify-content: center;
background-color: #ffffff;
border-bottom: 1px solid #dee2e6;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
}
.navigation .navbar {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
width: 100%;
max-width: 1100px;
}
.my-name {
color: #007bff !important;
font-family:'Lato', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
font-size: 1.6rem;
}
.my-name:hover {
color: #0056b3 !important;
}
.navigation .nav-link {
color: #343a40 !important;
padding: 0.5rem 1rem !important;
font-size: 1rem;
}
.navigation .nav-link:hover,
.navigation .nav-link.active {
color: #007bff !important;
}
.dropdown-item-text {
font-weight: bold;
color: #495057;
padding: 0.25rem 1.5rem;
}
footer {
min-height: 80px;
background-color: #343a40;
color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
text-align: center;
margin-top: 40px;
}
.foot-links {
text-decoration: none;
color: #adb5bd;
margin: 0 15px;
}
.foot-links:hover {
color: #ffffff;
text-decoration: none;
}
section {
padding: 10px 0;
}
.centered {
text-align: center;
}
.centered-list-container {
.content-group h1, .content-group h2, .content-group h3 {
text-align: center;
}
.centered-list {
.list-display {
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
.key-points {
display: inline-block;
text-align: left;
list-style-position: outside;
padding-left: 20px;
}
.key-points li {
margin-bottom: 0.6em;
}
.center-image {
display: block;
margin: auto auto;
max-width: 100%;
max-height: 100%;
margin: 25px auto;
max-width: 90%;
max-height: 450px;
height: auto;
width: auto;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.image-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
margin-bottom: 30px;
}