

# 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.