# 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 (``) - 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 ``) - Zeichnet einen animierten Hintergrund auf ein ``-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 (`` im ``) | Einheitliches Design auf allen Seiten | | `js/script.js` | Nur `index.html` (am Ende von ``, 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 (`` im ``) | 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.