Projekt: GitHub Portfolio | Programmieren Lernen

In diesem Abschlussprojekt erstellst du ein professionelles GitHub-Portfolio. Du wendest alle Git-Kenntnisse an, die du in diesem Kurs gelernt hast, und erstellst gleichzeitig etwas, das dir bei Bewerbungen und in der Entwickler-Community hilft.

Was wir bauen

Am Ende dieses Kapitels hast du:

Ein Profil-README auf GitHub
Eine Portfolio-Webseite mit GitHub Pages
Mindestens 3 vorzeigbare Projekte mit guten READMEs
Einen professionellen Git-Workflow mit sauberer Historie

Teil 1: Profil-README erstellen

Repository anlegen

# Repository mit deinem Benutzernamen erstellen
# Wenn dein GitHub-Name "max-dev" ist:
mkdir max-dev
cd max-dev
git init

README.md gestalten

Erstelle eine README.md mit folgendem Aufbau:

# Hallo! Ich bin Max 👋

Angehender Web-Entwickler aus Berlin. Ich baue gerne Webseiten
und lerne taeglich Neues ueber moderne Webtechnologien.

## 🛠️ Technologien

![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=flat&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=flat&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black)
![Git](https://img.shields.io/badge/Git-F05032?style=flat&logo=git&logoColor=white)
![React](https://img.shields.io/badge/React-61DAFB?style=flat&logo=react&logoColor=black)

## 📊 GitHub Stats

![GitHub Stats](https://github-readme-stats.vercel.app/api?username=max-dev&show_icons=true&theme=default)

## 🔗 Links

- 🌐 [Portfolio](https://max-dev.github.io/portfolio)
- 💼 [LinkedIn](https://linkedin.com/in/max-dev)

Committen und pushen

git add README.md
git commit -m "feat: Profil-README mit Badges und Stats erstellt"

# Repository auf GitHub erstellen (Name = Benutzername!)
git remote add origin https://github.com/max-dev/max-dev.git
git push -u origin main

Besuche dein GitHub-Profil - die README wird angezeigt!

Teil 2: Portfolio-Webseite

Projekt aufsetzen

# Neues Verzeichnis (ausserhalb des Profil-Repos)
cd ..
mkdir portfolio
cd portfolio
git init

# .gitignore als Erstes!
cat > .gitignore << 'EOF'
.DS_Store
Thumbs.db
.vscode/
.env
*.log
EOF

git add .gitignore
git commit -m "chore: .gitignore erstellt"

Projektstruktur

mkdir -p css js images
touch index.html css/style.css js/main.js

index.html erstellen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Max Mustermann - Web Developer Portfolio</title>
    <meta name="description" content="Portfolio von Max Mustermann - Web Developer aus Berlin">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <a href="#" class="logo">Max.dev</a>
            <ul class="nav-links">
                <li><a href="#about">Ueber mich</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projekte</a></li>
                <li><a href="#contact">Kontakt</a></li>
            </ul>
        </div>
    </nav>

    <section class="hero">
        <div class="container">
            <h1>Hallo, ich bin <span class="highlight">Max</span></h1>
            <p class="subtitle">Web Developer aus Berlin</p>
            <p class="hero-text">
                Ich baue moderne, responsive Webseiten und lerne
                taeglich Neues ueber Webtechnologien.
            </p>
            <a href="#projects" class="btn">Meine Projekte</a>
        </div>
    </section>

    <section id="about" class="section">
        <div class="container">
            <h2>Ueber mich</h2>
            <p>
                Ich bin ein angehender Web-Entwickler mit Leidenschaft
                fuer sauberen Code und gutes Design. Aktuell vertiefe
                ich meine Kenntnisse in JavaScript und React.
            </p>
        </div>
    </section>

    <section id="skills" class="section section-alt">
        <div class="container">
            <h2>Skills</h2>
            <div class="skills-grid">
                <div class="skill-card">
                    <h3>Frontend</h3>
                    <ul>
                        <li>HTML5 & CSS3</li>
                        <li>JavaScript (ES6+)</li>
                        <li>React</li>
                        <li>Responsive Design</li>
                    </ul>
                </div>
                <div class="skill-card">
                    <h3>Tools</h3>
                    <ul>
                        <li>Git & GitHub</li>
                        <li>VS Code</li>
                        <li>npm</li>
                        <li>Chrome DevTools</li>
                    </ul>
                </div>
                <div class="skill-card">
                    <h3>Lernt gerade</h3>
                    <ul>
                        <li>TypeScript</li>
                        <li>Node.js</li>
                        <li>Datenbanken</li>
                        <li>Testing</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section id="projects" class="section">
        <div class="container">
            <h2>Projekte</h2>
            <div class="projects-grid">
                <article class="project-card">
                    <h3>Wetter-App</h3>
                    <p>Wettervorhersage mit der OpenWeather API. Zeigt aktuelle Daten und 5-Tage-Prognose.</p>
                    <div class="tags">
                        <span class="tag">JavaScript</span>
                        <span class="tag">API</span>
                        <span class="tag">CSS</span>
                    </div>
                    <div class="project-links">
                        <a href="#" class="btn-small">Live Demo</a>
                        <a href="#" class="btn-small btn-outline">GitHub</a>
                    </div>
                </article>
                <article class="project-card">
                    <h3>Todo-App</h3>
                    <p>Aufgabenverwaltung mit LocalStorage. Aufgaben erstellen, bearbeiten, loeschen und filtern.</p>
                    <div class="tags">
                        <span class="tag">React</span>
                        <span class="tag">CSS</span>
                    </div>
                    <div class="project-links">
                        <a href="#" class="btn-small">Live Demo</a>
                        <a href="#" class="btn-small btn-outline">GitHub</a>
                    </div>
                </article>
                <article class="project-card">
                    <h3>Blog</h3>
                    <p>Persoenlicher Blog mit Markdown-Unterstuetzung und Tag-Filterung.</p>
                    <div class="tags">
                        <span class="tag">HTML</span>
                        <span class="tag">CSS</span>
                        <span class="tag">JavaScript</span>
                    </div>
                    <div class="project-links">
                        <a href="#" class="btn-small">Live Demo</a>
                        <a href="#" class="btn-small btn-outline">GitHub</a>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <section id="contact" class="section section-alt">
        <div class="container">
            <h2>Kontakt</h2>
            <p>Interesse an einer Zusammenarbeit? Schreib mir!</p>
            <div class="contact-links">
                <a href="mailto:max@beispiel.de">E-Mail</a>
                <a href="https://github.com/max-dev">GitHub</a>
                <a href="https://linkedin.com/in/max-dev">LinkedIn</a>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>2026 Max Mustermann. Mit Git und GitHub gebaut.</p>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>

Erster Commit

git add .
git commit -m "feat: Portfolio-Grundstruktur mit HTML erstellt"

CSS-Styling in einem Feature-Branch

git switch -c feature/styling

Erstelle css/style.css:

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --text: #1f2937;
    --text-light: #6b7280;
    --bg: #ffffff;
    --bg-alt: #f9fafb;
    --border: #e5e7eb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.7;
    color: var(--text);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    z-index: 100;
    padding: 1rem 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--primary);
}

/* Hero */
.hero {
    padding: 8rem 0 4rem;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.highlight {
    color: var(--primary);
}

.subtitle {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.hero-text {
    max-width: 600px;
    margin: 0 auto 2rem;
    color: var(--text-light);
}

.btn {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}

.btn:hover {
    background: var(--primary-dark);
}

/* Sections */
.section {
    padding: 4rem 0;
}

.section-alt {
    background: var(--bg-alt);
}

.section h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Skills */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.skill-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.skill-card h3 {
    color: var(--primary);
    margin-bottom: 1rem;
}

.skill-card ul {
    list-style: none;
}

.skill-card li {
    padding: 0.25rem 0;
    color: var(--text-light);
}

/* Projects */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.project-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: box-shadow 0.3s;
}

.project-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.project-card h3 {
    margin-bottom: 0.5rem;
}

.tags {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.tag {
    background: var(--bg-alt);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.project-links {
    display: flex;
    gap: 0.75rem;
}

.btn-small {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    background: var(--primary);
    color: white;
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}

/* Contact */
.contact-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
}

.contact-links a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-light);
    border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }

    .nav-links {
        display: none;
    }
}

Commits und PR

git add css/style.css
git commit -m "style: Komplettes Portfolio-Styling mit CSS Custom Properties"

git push -u origin feature/styling

Erstelle einen PR auf GitHub und merge ihn.

JavaScript hinzufuegen

git switch main
git pull
git switch -c feature/interaktivitaet

Erstelle js/main.js:

// Smooth Scrolling fuer Navigation
document.querySelectorAll('a[href^="#"]').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const target = document.querySelector(link.getAttribute('href'));
        if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
        }
    });
});

// Navbar-Schatten beim Scrollen
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
        navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
    } else {
        navbar.style.boxShadow = 'none';
    }
});

// Fade-In Animation fuer Sektionen
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, { threshold: 0.1 });

document.querySelectorAll('.section').forEach(section => {
    section.style.opacity = '0';
    section.style.transform = 'translateY(20px)';
    section.style.transition = 'opacity 0.6s, transform 0.6s';
    observer.observe(section);
});

git add js/main.js
git commit -m "feat: Smooth Scrolling, Scroll-Effekte und Fade-In Animationen"
git push -u origin feature/interaktivitaet

PR erstellen und mergen.

Teil 3: GitHub Pages aktivieren

git switch main
git pull

Gehe auf GitHub → Repository Settings → Pages
Source: Deploy from a branch
Branch: main, Folder: / (root)
Klicke Save

Nach wenigen Minuten ist dein Portfolio live unter: https://max-dev.github.io/portfolio/

Teil 4: Projekt-READMEs aufpolieren

Erstelle fuer dein Portfolio-Repository eine gute README:

git switch -c docs/readme

Erstelle eine README.md:

# Portfolio - Max Mustermann

Mein persoenliches Developer-Portfolio, gebaut mit HTML, CSS und JavaScript.

🔗 **Live Demo:** [max-dev.github.io/portfolio](https://max-dev.github.io/portfolio)

## Features

- Responsives Design (Mobile-First)
- Smooth Scrolling Navigation
- Fade-In Animationen beim Scrollen
- CSS Custom Properties fuer einfache Anpassung
- Keine Frameworks - reines HTML, CSS, JS

## Technologien

- HTML5 (Semantisches Markup)
- CSS3 (Grid, Flexbox, Custom Properties)
- JavaScript (IntersectionObserver, Smooth Scroll)
- Git & GitHub (Feature-Branch Workflow)
- GitHub Pages (Deployment)

## Lokale Entwicklung

1. Repository klonen:
   ```bash
   git clone https://github.com/max-dev/portfolio.git

Im Browser oeffnen:
```
cd portfolio
open index.html
```

Lizenz

MIT License


```bash
git add README.md
git commit -m "docs: Ausfuehrliche README mit Features und Anleitung"
git push -u origin docs/readme

PR erstellen und mergen.

Teil 5: Abschluss-Checkliste

Pruefe, ob alles vollstaendig ist:

GitHub-Profil

Portfolio-Webseite

Auf GitHub Pages deployed und erreichbar
Responsive Design funktioniert
Alle Links funktionieren
Navigation scrollt smooth
README im Repository ist vollstaendig

Git-Workflow

Saubere Commit-Historie (aussagekraeftige Messages)
Feature-Branches fuer alle Aenderungen genutzt
Pull Requests mit Beschreibung erstellt
.gitignore ist korrekt konfiguriert
Keine sensiblen Daten im Repository

Bonus

Weitere Projekte hinzugefuegt (Todo-App, Wetter-App, etc.)
Alle Projekte haben gute READMEs
GitHub Actions fuer automatisches Deployment eingerichtet
Custom Domain fuer GitHub Pages konfiguriert

Uebungen

Erstelle das komplette Portfolio wie beschrieben
Fuege mindestens ein weiteres Projekt-Repository hinzu
Pinne deine besten Projekte auf deinem GitHub-Profil
Bitte einen Freund, dein Portfolio und dein GitHub-Profil zu reviewen
Mache deinen ersten Beitrag zu einem Open-Source-Projekt

Zusammenfassung des gesamten Kurses

Glueckwunsch! Du hast den kompletten Git & GitHub Kurs abgeschlossen. Hier ist, was du gelernt hast:

Git-Grundlagen

Repository erstellen und verwalten
Staging Area und Commits verstehen
Commit-Messages nach Conventional Commits schreiben
Historie durchsuchen und filtern

Branches und Merging

Branches erstellen und zwischen ihnen wechseln
Merges durchfuehren und Konflikte loesen
Rebase als Alternative zu Merge

GitHub und Zusammenarbeit

Remote Repositories verwalten
Push und Pull fuer Synchronisation
Pull Requests erstellen und reviewen
Forks fuer Open-Source-Beitraege
GitHub Pages fuer kostenloses Hosting

Fortgeschrittene Techniken

Stash fuer Zwischenspeicherung
.gitignore fuer saubere Repos
Team-Workflows in der Praxis

Du bist jetzt bereit, Git und GitHub professionell einzusetzen - sei es im Team, fuer eigene Projekte oder fuer Open-Source-Beitraege. Bleib dran und committe weiter!

Pro-Tipp: Dein Portfolio ist nie “fertig” - es ist ein lebendes Dokument. Aktualisiere es regelmaessig mit neuen Projekten, Skills und Erfahrungen. Jeder Commit zeigt potenziellen Arbeitgebern, dass du aktiv und engagiert bist. Und denk daran: Der beste Zeitpunkt, mit Open Source anzufangen, ist jetzt!