Portfolio Webseite Dokumentation¶

📁 Projektstruktur¶

Die Webseite ist wie folgt strukturiert:

PORTFOLIO/
├── images/
│   ├── Joel_Mazurek.jpeg
│   ├── Joel_Mazurek2.jpeg
│   ├── projects.jpeg
│   └── skills.jpeg
├── index.html
├── script.js
└── style.css

🌐 HTML-Struktur und Komponenten¶

Grundlegende HTML-Struktur¶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Joel Mazurek</title>
    <!-- External CSS and Scripts -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="style.css">
</head>

Dieser Teil definiert:

Die Dokumentensprache (Englisch)
Meta-Tags für Zeichenkodierung und mobile Ansicht
Einbindung externer Ressourcen (Font Awesome Icons, AOS Animation Library)
Verlinkung zur eigenen style.css

<nav>
    <div class="nav-container">
        <div class="logo" data-aos="zoom-in" data-aos-duration="1500">
            Joel <span>Mazurek</span>
        </div>
        <div class="links">
            <div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                <a href="#home">Home</a>
            </div>
            <!-- weitere Links -->
        </div>
        <i class="fa-solid fa-bars hamburg" onclick="hamburg()"></i>
    </div>
    <!-- Dropdown für mobile Ansicht -->
</nav>

Dieser Navigationsteil enthält:

Logo mit Animation (AOS Library)
Navigationslinks mit verzögerten Fade-Animationen
Hamburger-Menü für mobile Ansicht
Dropdown-Menü für responsive Navigation

Home-Sektion¶

<section id="home">
    <div class="main-container">
        <div class="image" data-aos="zoom-out" data-aos-duration="3000">
            <img src="images/Joel_Mazurek2.jpeg" alt="Joel Mazurek">
        </div>
        <div class="content">
            <h1>Hey, I'm <span>Joel</span></h1>
            <div class="typewriter">
                <!-- Typewriter-Effekt -->
            </div>
            <!-- Social Links und Hire-Button -->
        </div>
    </div>
</section>

Die Home-Sektion beinhaltet:

Profilbild mit Zoom-Animation
Überschrift mit Namen
Typewriter-Effekt für dynamischen Text
Social Media Links
"Hire me" Button

About-Sektion¶

<section id="about">
    <div class="main-container about-container">
        <div class="content" data-aos="fade-right">
            <h1>About <span>Me</span></h1>
            <p>
                <!-- Persönliche Beschreibung -->
            </p>
            <!-- Kontakt-Button -->
        </div>
        <div class="image about-image">
            <!-- Weiteres Profilbild -->
        </div>
    </div>
</section>

Diese Sektion enthält:

Persönliche Beschreibung
Fade-Animation von rechts
Weiteres Profilbild
Kontakt-Button

Skills-Sektion¶

<section id="skills">
    <div class="main-container">
        <div class="content">
            <h1>My <span>Skills</span></h1>
            <!-- Sprachkenntnisse -->
            <h2>Language Skills</h2>
            <div class="skill">
                <!-- Fortschrittsbalken für Sprachen -->
            </div>

            <!-- Technische Fähigkeiten -->
            <h2>Technical Skills</h2>
            <!-- Fortschrittsbalken für technische Skills -->

            <!-- Persönliche Fähigkeiten -->
            <h2>Personal Skills</h2>
            <!-- Fortschrittsbalken für persönliche Skills -->
        </div>
    </div>
</section>

Die Skills-Sektion zeigt:

Drei Kategorien von Fähigkeiten (Sprachen, Technisch, Persönlich)
Animierte Fortschrittsbalken
Prozentuale Bewertung der Fähigkeiten

Projekte-Sektion¶

<section id="projects">
    <div class="main-container">
        <div class="content">
            <h1>My <span>Projects</span></h1>
            <div class="projects-list">
                <!-- Projektboxen -->
            </div>
        </div>
    </div>
</section>

Dieser Teil enthält:

Liste der Projekte
Links zu GitHub-Repositories
Beschreibungen der Projekte

Kontakt-Sektion¶

<section id="contact">
    <div class="main-container contact-container">
        <div class="content">
            <h1>Get in <span>Touch</span></h1>
            <div class="contact-info">
                <!-- Kontaktinformationen -->
                <!-- Social Media Links -->
            </div>
        </div>
    </div>
</section>

Die Kontakt-Sektion bietet:

E-Mail-Adresse mit Mailto-Link
Telefonnummer mit Tel-Link
Standortinformation
Social Media Verlinkungen

<footer class="footer">
    <div class="footer-container">
        <h2>Legal Notice</h2>
        <!-- Rechtliche Informationen -->
    </div>
</footer>

Der Footer enthält:

Rechtliche Hinweise
Copyright-Information
Kontaktdaten
Verantwortlichkeiten

JavaScript-Einbindung¶

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
    AOS.init({offset: 0});
</script>
<script src="script.js"></script>

Am Ende des Dokuments:

Einbindung der AOS Animation Library
Initialisierung der Animationen
Einbindung der eigenen JavaScript-Datei

🎯 Besondere Features¶

Animationen
Verwendung der AOS (Animate On Scroll) Library
Verschiedene Animations-Effekte wie fade-up, zoom-in, fade-right
Verzögerte Animationen für gestaffeltes Erscheinen
Responsive Design
Hamburger-Menü für mobile Ansicht
Anpassungsfähiges Layout für verschiedene Bildschirmgrößen
Flexbox-basierte Layoutstruktur
Interaktive Elemente
Typewriter-Effekt im Home-Bereich
Animierte Fortschrittsbalken bei Skills
Hover-Effekte auf Buttons und Links
"Back to Top" Button
Performance
Externe Ressourcen von CDNs
Optimierte Bildeinbindung
Modulare Codestruktur

Vollständige Portfolio Code-Dokumentation¶

1. Grundlegende Einrichtung¶

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

*{
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: auto;
    background-color: black;
    scroll-behavior: smooth;
}

Erklärung:

@import: Lädt die Poppins-Schriftart in verschiedenen Stärken
*: Ein "Reset" für alle Elemente:
Entfernt Standard-Abstände
Setzt die Schriftart
Verwendet das border-box Model für konsistente Größenberechnung
body: Grundeinstellungen für die gesamte Seite:
Schwarzer Hintergrund
Volle Breite
Geschmeidiges Scrollverhalten

nav{
    width: 100%;
    height: 10vh;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.8);
}

.nav-container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Erklärung:

Die Navigationsleiste:
Nimmt 10% der Bildschirmhöhe ein
Bleibt oben fixiert (sticky)
Hat einen halbtransparenten schwarzen Hintergrund
Liegt über anderen Elementen (z-index)
Der Container in der Navigation:
Verwendet Flexbox für die Ausrichtung
Verteilt Elemente gleichmäßig
Zentriert Elemente vertikal

.logo{
    color: white;
    font-size: 2rem;
    font-weight: bold;
}

.logo span{
    color: #077b32;
    text-shadow: 0 0 10px #077b32;
}

.nav-container .links{
    display: flex;
}

.nav-container .links a{
    position: relative;
    font-size: 1.2rem;
    color: white;
    margin: 0 20px;
    text-decoration: none;
    font-weight: 550;
    transition: 0.3s linear;
}

Erklärung:

Logo-Styling:
Weiße Farbe
Große Schrift (2rem = 32px)
Grüne Akzente mit Leuchteffekt
Navigationlinks:
Horizontal angeordnet (flex)
Weißer Text
Abstände zwischen Links (20px)
Sanfte Übergänge bei Hover

4. Hover-Effekte für Links¶

.nav-container .links a::before{
    position: absolute;
    content: "";
    bottom: -3px;
    left: 0;
    width: 0%;
    height: 3px;
    background-color: #077b32;
    transition: 0.2s linear;
}

.nav-container .links a:hover::before{
    width: 100%;
}

.nav-container .links a:hover{
    color: #077b32;
}

Erklärung:

Erstellt eine animierte Unterstreichung:
Beginnt mit 0% Breite
Wächst auf 100% bei Hover
Grüne Linie unter dem Text
Farbe ändert sich zu Grün bei Hover
Sanfte Übergänge für beide Effekte

.dropdown{
    z-index: 100;
    position: absolute;
    top: 0;
    transform: translateY(-500px);
    width: 100%;
    height: auto;
    backdrop-filter: blur(4px) brightness(40%);
    box-shadow: 0 0 20px black;
    transition: 0.2s linear;
}

.dropdown .links a{
    display: flex;
    color: white;
    text-decoration: none;
    justify-content: center;
    padding: 15px 0;
    align-items: center;
    transition: 0.2s linear;
}

Erklärung:

Dropdown-Menü für mobile Ansicht:
Standardmäßig außerhalb des Bildschirms (-500px)
Verschwommener, dunkler Hintergrund
Schattenwurf für Tiefeneffekt
Links im Dropdown:
Zentriert
Volle Breite
Padding für Touch-Targets

6. Hauptcontainer und Content¶

.main-container{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 50px 0;
}

.content{
    color: white;
    width: 40%;
    min-height: 100px;
}

Erklärung:

Hauptcontainer:
Mindesthöhe einer Bildschirmhöhe
Flex für Zentrierung und Ausrichtung
Gleichmäßige Verteilung der Elemente
Content-Bereich:
40% der Containerbreite
Weißer Text
Minimalhöhe für Inhalt

7. Überschriften und Text¶

.content h1{
    font-size: clamp(1rem, 1rem + 5vw, 2.5rem);
}

.content h1 span{
    color: #077b32;
    text-shadow: 0 0 10px #077b32;
}

.content h2{
    color: #077b32;
    margin-top: 20px;
    font-size: 1.8rem;
}

.content p{
    font-size: clamp(0.8rem, 0.2rem + 9vw, 1rem);
    margin: 10px 0;
    line-height: 1.6;
}

Erklärung:

Responsive Schriftgrößen mit clamp():
Minimum, bevorzugt und Maximum
Passt sich an Bildschirmgröße an
Grüne Akzente mit Leuchteffekt
Angenehme Zeilenhöhe für Lesbarkeit

8. Buttons¶

.content button{
    width: 50%;
    height: 6vh;
    margin: 30px;
    background-color: #077b32;
    color: white;
    border: none;
    outline: none;
    font-size: 120%;
    font-weight: 700;
    border-radius: 5px;
    transition: 0.2s linear;
    cursor: pointer;
}

.content button:hover{
    transform: scale(1.1);
    color: #077b32;
    border: 2px solid #077b32;
    background-color: transparent;
    font-weight: 700;
    box-shadow: 0 0 40px #077b32;
}

Erklärung:

Button-Styling:
50% Breite
Grüner Hintergrund
Abgerundete Ecken
Fette Schrift
Hover-Effekte:
Vergrößerung (110%)
Farbwechsel
Leuchtender Rahmen
Transparenter Hintergrund

9. Profilbild¶

.main-container .image{
    width: 400px;
    height: auto;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 0 0 50px #077b32;
}

.main-container .image img{
    width: 100%;
    height: auto;
}

.main-container .image:hover{
    animation: animate 1.5s ease-in-out infinite;
}

Erklärung:

Rundes Profilbild:
Feste Breite von 400px
Kreisförmig durch border-radius
Grüner Leuchteffekt
Hover-Animation:
Sanftes Pulsieren
Endlosschleife

.social-links i{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    background-color: transparent;
    border: 0.2rem solid #077b32;
    border-radius: 50%;
    color: #077b32;
    margin: 5px 15px;
    font-size: 1.5rem;
    transition: 0.2s linear;
}

.social-links i:hover{
    transform: scale(1.3);
    color: black;
    background-color: #077b32;
    filter: drop-shadow(0 0 10px #077b32);
}

Erklärung:

Social Media Icons:
Kreisförmige Rahmen
Grüner Rahmen und Icon
Zentrierte Icons
Hover-Effekte:
Vergrößerung
Farbwechsel
Leuchteffekt

11. Skills-Bereich¶

.skill {
    margin: 15px 0;
}

.progress-bar {
    width: 100%;
    background-color: #333;
    border-radius: 10px;
    overflow: hidden;
    margin: 5px 0;
}

.progress {
    height: 15px;
    background-color: #077b32;
    text-align: right;
    padding-right: 10px;
    line-height: 15px;
    color: white;
    font-size: 0.9rem;
    border-radius: 10px;
    animation: fillProgress 1.5s ease-in-out forwards;
}

Erklärung:

Skill-Balken:
Grauer Hintergrund
Abgerundete Ecken
Animierte Füllung
Progress-Animation:
Sanftes Auffüllen
Prozentanzeige rechts
Grüne Fortschrittsfarbe

12. JavaScript-Funktionalitäten¶

// Back to Top Button
window.addEventListener('scroll', function() {
    const backToTopButton = document.querySelector('.back-to-top');
    if (window.pageYOffset > 300) {
        backToTopButton.classList.add('active');
    } else {
        backToTopButton.classList.remove('active');
    }
});

// Schreibmaschineneffekt
function type() {
    if (letterIndex < words[wordIndex].length) {
        typewriterText.textContent += words[wordIndex][letterIndex];
        letterIndex++;
        setTimeout(type, 150);
    } else {
        setTimeout(erase, 1500);
    }
}

Erklärung:

Scroll-to-Top Button:
Erscheint nach 300px Scroll
Animiertes Ein-/Ausblenden
Schreibmaschineneffekt:
Buchstabe für Buchstabe
Wechselnde Texte
Tipp- und Löschanimation

13. Responsive Design¶

@media (max-width:884px) {
    .nav-container .links{
        display: none;
    }

    .hamburg,
    .cancel{
        display: block;
    }

    .main-container {
        flex-direction: column;
    }

    .content {
        width: 80%;
        text-align: center;
    }
}

@media (max-width:440px){
    .main-container .image{
        width: 80%;
    }
}

Erklärung:

Tablet-Ansicht (bis 884px):
Versteckt normale Navigation
Zeigt Hamburger-Menü
Vertikales Layout
Breiterer Content
Mobile-Ansicht (bis 440px):
Größeres Profilbild
Angepasste Abstände

Portfolio Webseite Dokumentation¶

📁 Projektstruktur¶

🌐 HTML-Struktur und Komponenten¶

Grundlegende HTML-Struktur¶

Navigation¶

Home-Sektion¶

About-Sektion¶

Skills-Sektion¶

Projekte-Sektion¶

Kontakt-Sektion¶

Footer & Legal Notice¶

JavaScript-Einbindung¶

🎯 Besondere Features¶

Vollständige Portfolio Code-Dokumentation¶

1. Grundlegende Einrichtung¶

2. Navigation¶

3. Logo und Navigation Links¶

4. Hover-Effekte für Links¶

6. Hauptcontainer und Content¶

7. Überschriften und Text¶

8. Buttons¶

9. Profilbild¶

11. Skills-Bereich¶

12. JavaScript-Funktionalitäten¶

13. Responsive Design¶

Portfolio Webseite Dokumentation¶

📁 Projektstruktur¶

🌐 HTML-Struktur und Komponenten¶

Grundlegende HTML-Struktur¶

Navigation¶

Home-Sektion¶

About-Sektion¶

Skills-Sektion¶

Projekte-Sektion¶

Kontakt-Sektion¶

Footer & Legal Notice¶

JavaScript-Einbindung¶

🎯 Besondere Features¶

Vollständige Portfolio Code-Dokumentation¶

1. Grundlegende Einrichtung¶

2. Navigation¶

3. Logo und Navigation Links¶

4. Hover-Effekte für Links¶

5. Mobile Menü (Dropdown)¶

6. Hauptcontainer und Content¶

7. Überschriften und Text¶

8. Buttons¶

9. Profilbild¶

10. Social Media Links¶

11. Skills-Bereich¶

12. JavaScript-Funktionalitäten¶

13. Responsive Design¶