First commit - add essential files
This commit is contained in:
simonaltschaffl@gmail.com
commit
00041a5d83
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
70
README.md
Normal file
70
README.md
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
# Getting Started with Create React App
|
||||||
|
|
||||||
|
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||||
|
|
||||||
|
## Available Scripts
|
||||||
|
|
||||||
|
In the project directory, you can run:
|
||||||
|
|
||||||
|
### `npm start`
|
||||||
|
|
||||||
|
Runs the app in the development mode.\
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||||
|
|
||||||
|
The page will reload when you make changes.\
|
||||||
|
You may also see any lint errors in the console.
|
||||||
|
|
||||||
|
### `npm test`
|
||||||
|
|
||||||
|
Launches the test runner in the interactive watch mode.\
|
||||||
|
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||||
|
|
||||||
|
### `npm run build`
|
||||||
|
|
||||||
|
Builds the app for production to the `build` folder.\
|
||||||
|
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||||
|
|
||||||
|
The build is minified and the filenames include the hashes.\
|
||||||
|
Your app is ready to be deployed!
|
||||||
|
|
||||||
|
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||||
|
|
||||||
|
### `npm run eject`
|
||||||
|
|
||||||
|
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||||
|
|
||||||
|
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||||
|
|
||||||
|
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||||
|
|
||||||
|
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||||
|
|
||||||
|
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||||
|
|
||||||
|
### Code Splitting
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||||
|
|
||||||
|
### Analyzing the Bundle Size
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||||
|
|
||||||
|
### Making a Progressive Web App
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||||
|
|
||||||
|
### Advanced Configuration
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||||
|
|
||||||
|
### Deployment
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||||
|
|
||||||
|
### `npm run build` fails to minify
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||||
17869
package-lock.json
generated
Normal file
17869
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
42
package.json
Normal file
42
package.json
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"name": "homepage",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/dom": "^10.4.0",
|
||||||
|
"@testing-library/jest-dom": "^6.6.3",
|
||||||
|
"@testing-library/react": "^16.3.0",
|
||||||
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"bootstrap": "^5.3.5",
|
||||||
|
"react": "^19.1.0",
|
||||||
|
"react-bootstrap": "^2.10.9",
|
||||||
|
"react-dom": "^19.1.0",
|
||||||
|
"react-router-dom": "^7.5.2",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"web-vitals": "^2.1.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
43
public/index.html
Normal file
43
public/index.html
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
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`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/logo192.png
Normal file
BIN
public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/logo512.png
Normal file
BIN
public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
25
public/manifest.json
Normal file
25
public/manifest.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo192.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo512.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "512x512"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
51
src/components/about.jsx
Normal file
51
src/components/about.jsx
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
function AboutPage() {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<div className='center-titles'>
|
||||||
|
<h1>Über mich</h1>
|
||||||
|
<div className='space'>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 className='space'>Motivation und Leidenschaft fü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
|
||||||
|
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 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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className='space'>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.
|
||||||
|
</p>
|
||||||
|
<h3>Wie verstä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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AboutPage
|
||||||
75
src/components/app.jsx
Normal file
75
src/components/app.jsx
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
|
||||||
|
import Navigation from "./navigation";
|
||||||
|
import FooterSection from "./footerSection";
|
||||||
|
import ImpressumSide from "./impressum";
|
||||||
|
import PrivacyPage from "./privacy";
|
||||||
|
import HomePage from "./home";
|
||||||
|
import AboutPage from "./about";
|
||||||
|
import GoalsPage from "./goals";
|
||||||
|
import ContactPage from "./contact";
|
||||||
|
|
||||||
|
// Deine Komponenten für die verschiedenen Seiten
|
||||||
|
function Home() {
|
||||||
|
return <HomePage />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function About() {
|
||||||
|
return <AboutPage />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Goals() {
|
||||||
|
return <GoalsPage />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Contact() {
|
||||||
|
return <ContactPage />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Impressum() {
|
||||||
|
return <ImpressumSide />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Privacy(){
|
||||||
|
return <PrivacyPage />;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
{
|
||||||
|
/* For the Projects */
|
||||||
|
}
|
||||||
|
|
||||||
|
function LanguageStudy() {
|
||||||
|
return <h2>Sprachstudie</h2>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Server() {
|
||||||
|
return <h2>Server</h2>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<Navigation />
|
||||||
|
<div className="content">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<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 />
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
26
src/components/contact.jsx
Normal file
26
src/components/contact.jsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
function ContactPage() {
|
||||||
|
return (
|
||||||
|
<section className="centered">
|
||||||
|
<h1>Kontakt</h1>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
Sie erreichen mich am besten per E-Mail unter{" "}
|
||||||
|
<a href="mailto:simonaltschaffl@gmail.com">
|
||||||
|
simonaltschaffl@gmail.com
|
||||||
|
</a>{" "}
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ContactPage;
|
||||||
15
src/components/footerSection.jsx
Normal file
15
src/components/footerSection.jsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
function FooterSection() {
|
||||||
|
return (
|
||||||
|
<footer >
|
||||||
|
<nav>
|
||||||
|
<a href="/impressum" className="foot-links">Impressum</a>
|
||||||
|
<br />
|
||||||
|
<a href="/privacy" className="foot-links">Datenschutzerklärungen</a>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FooterSection;
|
||||||
55
src/components/goals.jsx
Normal file
55
src/components/goals.jsx
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
function GoalsPage() {
|
||||||
|
return (
|
||||||
|
<section className="center-titles">
|
||||||
|
<h1>Meine Ziele</h1>
|
||||||
|
<div>
|
||||||
|
<h2 className="space">Derzeitige Ziele</h2>
|
||||||
|
<div className="centered-list-container">
|
||||||
|
<ul className="centered-list">
|
||||||
|
<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.
|
||||||
|
Pandas, TensorFlow, NumPy, Scikit-learn)
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Entwicklung von Data Science Projekten mit Fokus auf vollständige
|
||||||
|
Applikationen (Frontend: React; Backend Flask, FastAPI; Forschung:
|
||||||
|
JupyterNotebook)
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="space">Ziele der nä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
|
||||||
|
aufzubauen, welches mir helfen wird, die auf mich zukommenden
|
||||||
|
Schwierigkeiten zu bewältigen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="space">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
|
||||||
|
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,
|
||||||
|
immer weiter zu verbessern.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GoalsPage;
|
||||||
35
src/components/home.jsx
Normal file
35
src/components/home.jsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
function HomePage() {
|
||||||
|
return (
|
||||||
|
<section className="centered">
|
||||||
|
<div>
|
||||||
|
<h1>Startseite</h1>
|
||||||
|
<p className="space">
|
||||||
|
<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
|
||||||
|
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
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Diese Seite ist derzeit auch noch im Aufbau, daher bin ich für das Melden von Fehlern sehr dankbar.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
30
src/components/impressum.jsx
Normal file
30
src/components/impressum.jsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
function ImpressumSide() {
|
||||||
|
return (
|
||||||
|
<section className="centered">
|
||||||
|
<h1>Impressum nach § 5 TMG</h1>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 className="space">Betreiber und Administrator</h2>
|
||||||
|
<p>
|
||||||
|
<b>Simon Altschäffl</b> <br />
|
||||||
|
Sammern 6b <br />
|
||||||
|
94554 Moos
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Kontakt</h2>
|
||||||
|
<p>
|
||||||
|
<b>Telefon: </b>
|
||||||
|
<a href="tel:+4915157852478">+49 1515 7852478</a>
|
||||||
|
<br />
|
||||||
|
<b>Email:</b>
|
||||||
|
<a href="mailto:simonaltschaffl+impressum@gmail.com">simonaltschaffl@gmail.com</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ImpressumSide;
|
||||||
37
src/components/navigation.jsx
Normal file
37
src/components/navigation.jsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import React, { Component } 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äffl</Navbar.Brand>
|
||||||
|
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||||
|
<Navbar.Collapse
|
||||||
|
id="basic-navbar-nav"
|
||||||
|
className="justify-content-between"
|
||||||
|
>
|
||||||
|
<Nav className="mr-auto">
|
||||||
|
<Nav.Link href="/">Startseite</Nav.Link>
|
||||||
|
<Nav.Link href="/about-me">Ü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">
|
||||||
|
<NavDropdown.ItemText>Fertige Projekte</NavDropdown.ItemText>
|
||||||
|
<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>
|
||||||
|
</Nav>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
</Navbar>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
284
src/components/privacy.jsx
Normal file
284
src/components/privacy.jsx
Normal file
@ -0,0 +1,284 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
function PrivacyPage() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Datenschutzerklärung</h1>
|
||||||
|
<p>Stand: 26. April 2025</p>
|
||||||
|
<h2>Inhaltsübersicht</h2>
|
||||||
|
<ul className="index">
|
||||||
|
<li>
|
||||||
|
<a className="index-link" href="#m3">
|
||||||
|
Verantwortlicher
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a className="index-link" href="#mOverview">
|
||||||
|
Übersicht der Verarbeitungen
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a className="index-link" href="#m2427">
|
||||||
|
Maßgebliche Rechtsgrundlagen
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a className="index-link" href="#m27">
|
||||||
|
Sicherheitsmaßnahmen
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a className="index-link" href="#m25">
|
||||||
|
Übermittlung von personenbezogenen Daten
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a className="index-link" href="#m328">
|
||||||
|
Plug-ins und eingebettete Funktionen sowie Inhalte
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a className="index-link" href="#mRights">
|
||||||
|
Ihre Rechte als betroffene Person
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="m3">Verantwortlicher</h2>
|
||||||
|
<p>
|
||||||
|
Simon Altschäffl
|
||||||
|
<br />
|
||||||
|
Sammern 6b <br />
|
||||||
|
94554 Moos
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
E-Mail-Adresse:{" "}
|
||||||
|
<a href="mailto:simonaltschaffl@gmail.com">simonaltschaffl@gmail.com</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="mOverview">Übersicht der Verarbeitungen</h2>
|
||||||
|
<p>
|
||||||
|
Die nachfolgende Übersicht fasst die Arten der verarbeiteten Daten und
|
||||||
|
die Zwecke ihrer Verarbeitung zusammen und verweist auf die betroffenen
|
||||||
|
Personen.
|
||||||
|
</p>
|
||||||
|
<h3>Arten der verarbeiteten Daten</h3>
|
||||||
|
<ul>
|
||||||
|
<li>IP-Adressen.</li>
|
||||||
|
<li>
|
||||||
|
Kontaktdaten (E-Mail-Adresse, ggf. Name, Telefonnummer), die Sie mir
|
||||||
|
per E-Mail senden.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Kategorien betroffener Personen</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Nutzer.</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Zwecke der Verarbeitung</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Server logging.</li>
|
||||||
|
<li>
|
||||||
|
Bearbeitung von Kontaktanfragen, die Sie per E-Mail an mir richten.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="m2427">Maßgebliche Rechtsgrundlagen</h2>
|
||||||
|
<p>
|
||||||
|
<strong>Maßgebliche Rechtsgrundlagen nach der DSGVO: </strong>Im
|
||||||
|
Folgenden erhalten Sie eine Übersicht der Rechtsgrundlagen der DSGVO,
|
||||||
|
auf deren Basis wir personenbezogene Daten verarbeiten. Bitte nehmen Sie
|
||||||
|
zur Kenntnis, dass neben den Regelungen der DSGVO nationale
|
||||||
|
Datenschutzvorgaben in Ihrem bzw. unserem Wohn- oder Sitzland gelten
|
||||||
|
können. Sollten ferner im Einzelfall speziellere Rechtsgrundlagen
|
||||||
|
maßgeblich sein, teilen wir Ihnen diese in der Datenschutzerklärung mit.
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Einwilligung (Art. 6 Abs. 1 S. 1 lit. a) DSGVO)</strong> - Die
|
||||||
|
betroffene Person hat ihre Einwilligung in die Verarbeitung der sie
|
||||||
|
betreffenden personenbezogenen Daten für einen spezifischen Zweck oder
|
||||||
|
mehrere bestimmte Zwecke gegeben.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>
|
||||||
|
Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f) DSGVO)
|
||||||
|
</strong>{" "}
|
||||||
|
- die Verarbeitung ist zur Wahrung der berechtigten Interessen des
|
||||||
|
Verantwortlichen oder eines Dritten notwendig, vorausgesetzt, dass die
|
||||||
|
Interessen, Grundrechte und Grundfreiheiten der betroffenen Person,
|
||||||
|
die den Schutz personenbezogener Daten verlangen, nicht überwiegen.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>
|
||||||
|
Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f) DSGVO)
|
||||||
|
</strong>{" "}
|
||||||
|
- Die Verarbeitung ist zur Wahrung unserer berechtigten Interessen an
|
||||||
|
der Bearbeitung Ihrer Anfragen und der Kommunikation mit Ihnen
|
||||||
|
erforderlich.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
<strong>Nationale Datenschutzregelungen in Deutschland: </strong>
|
||||||
|
Zusätzlich zu den Datenschutzregelungen der DSGVO gelten nationale
|
||||||
|
Regelungen zum Datenschutz in Deutschland. Hierzu gehört insbesondere
|
||||||
|
das Gesetz zum Schutz vor Missbrauch personenbezogener Daten bei der
|
||||||
|
Datenverarbeitung (Bundesdatenschutzgesetz – BDSG). Das BDSG enthält
|
||||||
|
insbesondere Spezialregelungen zum Recht auf Auskunft, zum Recht auf
|
||||||
|
Löschung, zum Widerspruchsrecht, zur Verarbeitung besonderer Kategorien
|
||||||
|
personenbezogener Daten, zur Verarbeitung für andere Zwecke und zur
|
||||||
|
Übermittlung sowie automatisierten Entscheidungsfindung im Einzelfall
|
||||||
|
einschließlich Profiling. Ferner können Landesdatenschutzgesetze der
|
||||||
|
einzelnen Bundesländer zur Anwendung gelangen.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Hinweis auf Geltung DSGVO und Schweizer DSG: </strong>Diese
|
||||||
|
Datenschutzhinweise dienen sowohl der Informationserteilung nach dem
|
||||||
|
Schweizer DSG als auch nach der Datenschutzgrundverordnung (DSGVO). Aus
|
||||||
|
diesem Grund bitten wir Sie zu beachten, dass aufgrund der breiteren
|
||||||
|
räumlichen Anwendung und Verständlichkeit die Begriffe der DSGVO
|
||||||
|
verwendet werden. Insbesondere statt der im Schweizer DSG verwendeten
|
||||||
|
Begriffe „Bearbeitung" von „Personendaten", „überwiegendes Interesse"
|
||||||
|
und „besonders schützenswerte Personendaten" werden die in der DSGVO
|
||||||
|
verwendeten Begriffe „Verarbeitung" von „personenbezogenen Daten" sowie
|
||||||
|
„berechtigtes Interesse" und „besondere Kategorien von Daten" verwendet.
|
||||||
|
Die gesetzliche Bedeutung der Begriffe wird jedoch im Rahmen der Geltung
|
||||||
|
des Schweizer DSG weiterhin nach dem Schweizer DSG bestimmt.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="m27">Sicherheitsmaßnahmen</h2>
|
||||||
|
<p>
|
||||||
|
Sicherung von Online-Verbindungen durch
|
||||||
|
TLS-/SSL-Verschlüsselungstechnologie (HTTPS): Um die Daten der Nutzer,
|
||||||
|
die über unsere Online-Dienste übertragen werden, vor unerlaubten
|
||||||
|
Zugriffen zu schützen, setzen wir auf die
|
||||||
|
TLS-/SSL-Verschlüsselungstechnologie. Secure Sockets Layer (SSL) und
|
||||||
|
Transport Layer Security (TLS) sind die Eckpfeiler der sicheren
|
||||||
|
Datenübertragung im Internet. Diese Technologien verschlüsseln die
|
||||||
|
Informationen, die zwischen der Website oder App und dem Browser des
|
||||||
|
Nutzers (oder zwischen zwei Servern) übertragen werden, wodurch die
|
||||||
|
Daten vor unbefugtem Zugriff geschützt sind. TLS, als die
|
||||||
|
weiterentwickelte und sicherere Version von SSL, gewährleistet, dass
|
||||||
|
alle Datenübertragungen den höchsten Sicherheitsstandards entsprechen.
|
||||||
|
Wenn eine Website durch ein SSL-/TLS-Zertifikat gesichert ist, wird dies
|
||||||
|
durch die Anzeige von HTTPS in der URL signalisiert. Dies dient als ein
|
||||||
|
Indikator für die Nutzer, dass ihre Daten sicher und verschlüsselt
|
||||||
|
übertragen werden.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="m25">Übermittlung von personenbezogenen Daten</h2>
|
||||||
|
<p>
|
||||||
|
Im Rahmen unserer Verarbeitung von personenbezogenen Daten kommt es vor,
|
||||||
|
dass diese an andere Stellen, Unternehmen, rechtlich selbstständige
|
||||||
|
Organisationseinheiten oder Personen übermittelt beziehungsweise ihnen
|
||||||
|
gegenüber offengelegt werden. Zu den Empfängern dieser Daten können z.
|
||||||
|
B. mit IT-Aufgaben beauftragte Dienstleister gehören oder Anbieter von
|
||||||
|
Diensten und Inhalten, die in eine Website eingebunden sind. In solchen
|
||||||
|
Fällen beachten wir die gesetzlichen Vorgaben und schließen insbesondere
|
||||||
|
entsprechende Verträge bzw. Vereinbarungen, die dem Schutz Ihrer Daten
|
||||||
|
dienen, mit den Empfängern Ihrer Daten ab.
|
||||||
|
</p>
|
||||||
|
<h2 id="m328">Plug-ins und eingebettete Funktionen sowie Inhalte</h2>
|
||||||
|
<p>
|
||||||
|
Wir binden Funktions- und Inhaltselemente in unser Onlineangebot ein,
|
||||||
|
die von den Servern ihrer jeweiligen Anbieter (nachfolgend als
|
||||||
|
„Drittanbieter“ bezeichnet) bezogen werden. Dabei kann es sich zum
|
||||||
|
Beispiel um Grafiken, Videos oder Stadtpläne handeln (nachfolgend
|
||||||
|
einheitlich als „Inhalte“ bezeichnet).
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Die Einbindung setzt immer voraus, dass die Drittanbieter dieser Inhalte
|
||||||
|
die IP-Adresse der Nutzer verarbeiten, da sie ohne IP-Adresse die
|
||||||
|
Inhalte nicht an deren Browser senden könnten. Die IP-Adresse ist damit
|
||||||
|
für die Darstellung dieser Inhalte oder Funktionen erforderlich. Wir
|
||||||
|
bemühen uns, nur solche Inhalte zu verwenden, deren jeweilige Anbieter
|
||||||
|
die IP-Adresse lediglich zur Auslieferung der Inhalte anzuwenden.
|
||||||
|
Drittanbieter können ferner sogenannte Pixel-Tags (unsichtbare Grafiken,
|
||||||
|
auch als „Web Beacons“ bezeichnet) für statistische oder Marketingzwecke
|
||||||
|
einsetzen. Durch die „Pixel-Tags“ können Informationen, wie etwa der
|
||||||
|
Besucherverkehr auf den Seiten dieser Website, ausgewertet werden. Die
|
||||||
|
pseudonymen Informationen können darüber hinaus in Cookies auf dem Gerät
|
||||||
|
der Nutzer gespeichert werden und unter anderem technische Auskünfte zum
|
||||||
|
Browser und zum Betriebssystem, zu verweisenden Websites, zur
|
||||||
|
Besuchszeit sowie weitere Angaben zur Nutzung unseres Onlineangebots
|
||||||
|
enthalten, aber auch mit solchen Informationen aus anderen Quellen
|
||||||
|
verbunden werden.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Hinweise zu Rechtsgrundlagen:</strong> Sofern wir die Nutzer um
|
||||||
|
ihre Einwilligung in den Einsatz der Drittanbieter bitten, stellt die
|
||||||
|
Rechtsgrundlage der Datenverarbeitung die Erlaubnis dar. Ansonsten
|
||||||
|
werden die Nutzerdaten auf Grundlage unserer berechtigten Interessen (d.
|
||||||
|
h. Interesse an effizienten, wirtschaftlichen und empfängerfreundlichen
|
||||||
|
Leistungen) verarbeitet. In diesem Zusammenhang möchten wir Sie auch auf
|
||||||
|
die Informationen zur Verwendung von Cookies in dieser
|
||||||
|
Datenschutzerklärung hinweisen.
|
||||||
|
</p>
|
||||||
|
<ul className="m-elements">
|
||||||
|
<li>
|
||||||
|
<strong>Verarbeitete Datenarten:</strong> Nutzungsdaten (z. B.
|
||||||
|
Seitenaufrufe und Verweildauer, Klickpfade, Nutzungsintensität und
|
||||||
|
-frequenz, verwendete Gerätetypen und Betriebssysteme, Interaktionen
|
||||||
|
mit Inhalten und Funktionen). Meta-, Kommunikations- und
|
||||||
|
Verfahrensdaten (z. B. IP-Adressen, Zeitangaben,
|
||||||
|
Identifikationsnummern, beteiligte Personen).
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Betroffene Personen:</strong> Nutzer (z. B. Webseitenbesucher,
|
||||||
|
Nutzer von Onlinediensten).
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Zwecke der Verarbeitung:</strong> Bereitstellung unseres
|
||||||
|
Onlineangebotes und Nutzerfreundlichkeit.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Aufbewahrung und Löschung:</strong> Löschung entsprechend
|
||||||
|
Angaben im Abschnitt "Allgemeine Informationen zur Datenspeicherung
|
||||||
|
und Löschung". Speicherung von Cookies von bis zu 2 Jahren (Sofern
|
||||||
|
nicht anders angegeben, können Cookies und ähnliche Speichermethoden
|
||||||
|
für einen Zeitraum von zwei Jahren auf den Geräten der Nutzer
|
||||||
|
gespeichert werden.).
|
||||||
|
</li>
|
||||||
|
<li className="">
|
||||||
|
<strong>Rechtsgrundlagen:</strong> Einwilligung (Art. 6 Abs. 1 S. 1
|
||||||
|
lit. a) DSGVO). Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f)
|
||||||
|
DSGVO).
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="mRights">Ihre Rechte als betroffene Person</h2>
|
||||||
|
<p>
|
||||||
|
Sie haben das Recht auf Auskunft über die Verarbeitung Ihrer
|
||||||
|
personenbezogenen Daten durch uns (Art. 15 DSGVO), das Recht auf
|
||||||
|
Berichtigung unrichtiger Daten (Art. 16 DSGVO), das Recht auf Löschung
|
||||||
|
Ihrer Daten (Art. 17 DSGVO), das Recht auf Einschränkung der
|
||||||
|
Verarbeitung (Art. 18 DSGVO), das Recht auf Datenübertragbarkeit (Art.
|
||||||
|
20 DSGVO) sowie das Recht, Widerspruch gegen die Verarbeitung Ihrer
|
||||||
|
Daten einzulegen (Art. 21 DSGVO) und das Recht auf Beschwerde bei einer
|
||||||
|
Aufsichtsbehörde (Art. 77 DSGVO).
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Bitte beachten Sie bezüglich der Server-Logfiles, dass wir in der Regel
|
||||||
|
keinen direkten Zugriff auf alle durch unseren Hosting-Anbieter
|
||||||
|
gespeicherten Protokolle haben. Die uns zugänglichen Informationen
|
||||||
|
beschränken sich auf die über Nginx und das Linux-System
|
||||||
|
bereitgestellten Logdaten. Anfragen auf Auskunft oder Löschung, die über
|
||||||
|
diese zugänglichen Daten hinausgehen, können wir daher möglicherweise
|
||||||
|
nicht direkt erfüllen. In solchen Fällen empfehlen wir Ihnen, sich
|
||||||
|
direkt an unseren Hosting-Anbieter zu wenden. Die Kontaktdaten unseres
|
||||||
|
Hosting-Anbieters können Sie auf Anfrage erhalten.
|
||||||
|
</p>
|
||||||
|
<p className="seal">
|
||||||
|
<a
|
||||||
|
href="https://datenschutz-generator.de/"
|
||||||
|
title="Rechtstext von Dr. Schwenke - für weitere Informationen bitte anklicken."
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer nofollow"
|
||||||
|
>
|
||||||
|
Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas
|
||||||
|
Schwenke
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<h2>Verwendung von Cookies</h2>
|
||||||
|
<p>Diese Website verwendet keine Cookies.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PrivacyPage;
|
||||||
14
src/index.js
Normal file
14
src/index.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import "bootstrap/dist/css/bootstrap.min.css";
|
||||||
|
import './styles/styles.css';
|
||||||
|
import App from "./components/app";
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<div className="app-container"> {/* Das ist entscheidend! */}
|
||||||
|
<App />
|
||||||
|
</div>
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
66
src/styles/styles.css
Normal file
66
src/styles/styles.css
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-titles h1, .center-titles h2, .center-titles h3{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered-list-container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered-list {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left; /* Text innerhalb der Liste links ausrichten */
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user