Erstellung der Readme Datei
This commit is contained in:
isa7 server
parent
1ae681523f
commit
fa9f001e97
1 changed files with 142 additions and 0 deletions
142
README.md
142
README.md
|
|
@ -0,0 +1,142 @@
|
|||
|
||||
|
||||
# Glück Auf – Persönliche Webseite
|
||||
|
||||
Ein statisches Webprojekt bestehend aus mehreren HTML-Seiten mit einheitlichem Design im dunklen Blau-Stil. Erstellt als Lernprojekt.
|
||||
|
||||
## Pfad auf dem Server:
|
||||
/home/isa7/public_html
|
||||
|
||||
---
|
||||
|
||||
## Projektstruktur
|
||||
|
||||
```
|
||||
public_html/
|
||||
├── index.html ← Startseite
|
||||
├── ueber_mich.html ← Persönliche Vorstellungsseite
|
||||
├── eis_projekt.html ← Projektseite (Glück Auf Lernprojekt)
|
||||
├── kontakt.html ← Kontaktformular
|
||||
├── impressum.html ← Impressum / rechtliche Angaben
|
||||
├── README.md ← Diese Datei
|
||||
│
|
||||
├── css/
|
||||
│ └── style.css ← Zentrales Stylesheet für alle Seiten
|
||||
│
|
||||
├── js/
|
||||
│ └── script.js ← JavaScript für Partikel-Animation (nur index.html)
|
||||
│
|
||||
├── img/
|
||||
│ └── Hintergrund.jpg ← Hintergrundbild für den Hero-Bereich
|
||||
│
|
||||
└── assets/ ← Reserviert für zukünftige Medien (aktuell leer)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dateibeschreibungen
|
||||
|
||||
### HTML-Seiten
|
||||
|
||||
#### `index.html` – Startseite
|
||||
- Einstiegspunkt der Website
|
||||
- Enthält einen **Hero-Bereich** mit Hintergrundbild und animiertem Partikel-Canvas
|
||||
- Begrüßungstext mit Button-Link zu `ueber_mich.html`
|
||||
- Drei Info-Cards: Über mich, Projekte, Kontakt (nur Textelemente, keine Links)
|
||||
- Footer mit Links zu `impressum.html` und `kontakt.html`
|
||||
- Einzige Seite, die `script.js` einbindet (Canvas-Animation)
|
||||
|
||||
#### `ueber_mich.html` – Über mich
|
||||
- Persönliche Vorstellungsseite (Inhaberin: Mara)
|
||||
- Kurze Bio-Texte als Platzhalter
|
||||
- Auflistung von Kenntnissen als Skill-Badges: HTML, CSS, JavaScript, Python, Webdesign, Linux
|
||||
- Footer mit Links zu `impressum.html` und `kontakt.html`
|
||||
|
||||
#### `eis_projekt.html` – Projektseite
|
||||
- Präsentation des Glück Auf Lernprojekts
|
||||
- Inhalt noch in Vorbereitung (`<!-- Projektinhalt hier einfügen -->`)
|
||||
- Footer mit Links zu `impressum.html` und `kontakt.html`
|
||||
|
||||
#### `kontakt.html` – Kontakt
|
||||
- Kontaktformular mit den Feldern: Name, E-Mail, Nachricht
|
||||
- Absenden-Button (aktuell ohne Backend-Anbindung)
|
||||
- Footer mit Links zu `impressum.html` und `kontakt.html`
|
||||
|
||||
#### `impressum.html` – Impressum
|
||||
- Pflichtangaben gemäß § 5 TMG (Musterdaten als Platzhalter)
|
||||
- Abschnitte: Angaben zum Betreiber, Kontakt (E-Mail), Haftungsausschlüsse, Urheberrecht
|
||||
- Footer mit Links zu `impressum.html` und `kontakt.html`
|
||||
|
||||
---
|
||||
|
||||
### Stylesheet
|
||||
|
||||
#### `css/style.css` – Zentrales Stylesheet
|
||||
- Wird von **allen fünf HTML-Seiten** eingebunden
|
||||
- Definiert CSS-Variablen (Custom Properties) für die Farbpalette:
|
||||
- `--royal` `--royal-light` `--royal-dark` → Blautöne
|
||||
- `--white` → Helles Weiß
|
||||
- `--muted` → Halbtransparentes Weiß für Nebentext
|
||||
- Stile für: Navigation (`nav`), Hero-Bereich, Cards, Buttons, Footer
|
||||
- Einbindung der Google Fonts: **Bebas Neue** (Überschriften) und **Barlow** (Fließtext)
|
||||
- `@keyframes fadeUp` – Einblende-Animation für den Hero-Inhalt
|
||||
|
||||
---
|
||||
|
||||
### JavaScript
|
||||
|
||||
#### `js/script.js` – Partikel-Animation
|
||||
- Wird **ausschließlich von `index.html`** eingebunden (am Ende von `<body>`)
|
||||
- Zeichnet einen animierten Hintergrund auf ein `<canvas>`-Element (`id="bg"`)
|
||||
- Funktionen:
|
||||
- `resize()` – Passt Canvas-Größe ans Fenster an
|
||||
- `createParticles()` – Generiert Partikel zufällig, Anzahl abhängig von der Fenstergröße
|
||||
- `drawBg()` – Zeichnet radialen Verlaufshintergrund in Blautönen
|
||||
- `animate()` – Animationsschleife: bewegt Partikel, zeichnet Verbindungslinien bei Nähe < 120px
|
||||
- Reagiert auf `resize`-Events des Fensters
|
||||
- Gibt `"Meine Seite läuft!"` in der Browser-Konsole aus
|
||||
|
||||
---
|
||||
|
||||
### Medien
|
||||
|
||||
#### `img/Hintergrund.jpg` – Hintergrundbild
|
||||
- Verwendet im Hero-Bereich von `index.html`
|
||||
- Eingebunden via CSS in `style.css` als `background-image` der `.hero`-Klasse
|
||||
- Wird durch einen halbtransparenten Dunkel-Overlay überlagert
|
||||
|
||||
---
|
||||
|
||||
## Verlinkungsübersicht
|
||||
|
||||
Diese Tabelle zeigt, welche Datei wo verlinkt ist und warum.
|
||||
|
||||
| Verlinkte Datei | Verlinkt in | Zweck |
|
||||
|--------------------|--------------------------------------------------------------------|--------------------------------------------|
|
||||
| `index.html` | Allen Seiten (Navigation) | Rückkehr zur Startseite |
|
||||
| `ueber_mich.html` | Allen Seiten (Navigation), `index.html` (Hero-Button) | Vorstellungsseite erreichbar machen |
|
||||
| `eis_projekt.html` | Allen Seiten (Navigation) | Projektseite erreichbar machen |
|
||||
| `kontakt.html` | Allen Seiten (Navigation + Footer) | Kontaktformular erreichbar machen |
|
||||
| `impressum.html` | Allen Seiten (Navigation + Footer) | Rechtliche Pflichtangabe erreichbar machen |
|
||||
| `css/style.css` | Allen fünf HTML-Seiten (`<link rel="stylesheet">` im `<head>`) | Einheitliches Design auf allen Seiten |
|
||||
| `js/script.js` | Nur `index.html` (am Ende von `<body>`, nach dem Canvas-Element) | Partikel-Animation nur auf der Startseite |
|
||||
| `img/Hintergrund.jpg` | `css/style.css` (`.hero`-Klasse) | Hero-Hintergrundbild der Startseite |
|
||||
| Google Fonts (CDN) | Allen fünf HTML-Seiten (`<link>` im `<head>`) | Schriftarten Bebas Neue & Barlow laden |
|
||||
|
||||
---
|
||||
|
||||
## Technologien
|
||||
|
||||
- HTML5
|
||||
- CSS3 (Custom Properties, Grid, Flexbox, Animationen)
|
||||
- JavaScript (Canvas API, `requestAnimationFrame`)
|
||||
- Google Fonts (Bebas Neue, Barlow)
|
||||
|
||||
---
|
||||
|
||||
## Hinweise
|
||||
|
||||
- Das Kontaktformular sendet aktuell keine Daten ab – es fehlt eine Backend-Anbindung.
|
||||
- Der Inhalt von `eis_projekt.html` ist noch nicht befüllt.
|
||||
- Die Angaben im Impressum sind Platzhalterdaten und müssen vor Veröffentlichung ersetzt werden.
|
||||
- Der `assets/`-Ordner ist aktuell leer und für zukünftige Ressourcen vorgesehen.
|
||||
Loading…
Reference in a new issue