142 lines
No EOL
5.9 KiB
Markdown
142 lines
No EOL
5.9 KiB
Markdown
|
||
|
||
# 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. |