Bürgermeisterwahl Herzogenrath 2025: Kandidaten-Analyse-Portal

💰 Was dieses Portal leistet

Zur Bürgermeisterwahl am 14. September 2025 traten in Herzogenrath fünf Kandidaten an. Dieses Portal analysierte ihre Profile, Stärken, Social-Media-Präsenz und visualisierte eine datenbasierte Wahlprognose mit Chart.js — ein Tool, das zeigt, wie politische Information modern und interaktiv aufbereitet werden kann.

💻 Code-Einblicke

Ein Blick unter die Haube — so ist das Kandidaten-Portal technisch umgesetzt:

📊 Interaktive Chart.js-Wahlprognose

Ein animierter Doughnut-Chart mit parteifarbigen Segmenten und Tooltip-Anzeige — initialisiert beim DOM-Ready:

function initPrognoseChart() {
    const ctx = document.getElementById('prognoseChart');
    if (!ctx) return;
    
    const chartData = {
        labels: ['Dr. B. Fadavian (SPD)', 'F. Birken (CDU)', 
                 'M. Verkooyen (Volt)', 'F. Müller (Linke)', 
                 'B. Bock (FDP)'],
        datasets: [{
            label: 'Prognostizierte Stimmenanteile (%)',
            data: [45, 28, 12, 8, 7],
            backgroundColor: [
                '#e3000f', // SPD Red
                '#000000', // CDU Black
                '#502379', // Volt Purple
                '#be3075', // Linke Purple
                '#ffed00'  // FDP Yellow
            ],
            borderWidth: 2,
            hoverOffset: 4
        }]
    };
    
    new Chart(ctx, {
        type: 'doughnut',
        data: chartData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 20, usePointStyle: true }
                },
                tooltip: {
                    callbacks: {
                        label: ctx => ctx.label + ': ' + ctx.parsed + '%'
                    }
                }
            },
            animation: {
                animateRotate: true,
                duration: 2000
            }
        }
    });
}

🔍 Partei-Filter für Kandidaten

Klick auf einen Partei-Button filtert die Kandidaten-Ansicht — live, ohne Page-Reload:

function initCandidateFilter() {
    const filterButtons = document.querySelectorAll('.candidate-filter');
    const candidateCards = document.querySelectorAll('.candidate-card');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            const party = this.getAttribute('data-party');
            
            // Aktiven Button highlighten
            filterButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            // Karten filtern mit Fade-Animation
            candidateCards.forEach(card => {
                if (party === 'all' || 
                    card.getAttribute('data-party') === party) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
}

🖱️ Smooth-Scrolling & Scroll-Animations

Navigation-Links scrollen sanft zum Ziel, Observer-basierte Fade-In-Animationen beim Scrollen:

function initSmoothScrolling() {
    document.querySelectorAll('a[href^="#"]').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                window.scrollTo({
                    top: target.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
}

function initAnimations() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in-up');
            }
        });
    }, { threshold: 0.1 });
    
    document.querySelectorAll('.card, .hero-section h1, .hero-section p')
        .forEach(el => observer.observe(el));
}

📱 Responsives Navbar-Layout mit Bootstrap

Das HTML-Grundgerüst mit sticky Navbar, Kandidaten-Hero und Bootstrap-Grid:

<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">Marcel Verkooyen • Volt</a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li><a class="nav-link" href="#marcel-program">Meine Ziele</a></li>
                <li><a class="nav-link" href="#candidates">Alle Kandidaten</a></li>
                <li><a class="nav-link" href="#prognose">Wahlprognose</a></li>
            </ul>
        </div>
    </div>
</nav>

⚙️ So funktioniert's

Vom Aufruf der Seite bis zur gefilterten Analyse.

🔧 Technische Umsetzung

Reines Frontend-Projekt — kein Backend nötig. Statisches HTML mit Bootstrap 5, Chart.js und Custom JavaScript. Hosting auf jedem beliebigen Webserver möglich, kein Build-Step.

🛠️ Tech Stack

🚀 Gebaut mit Vibecoding — in Tagen statt Wochen

🎯 Strategische Erkenntnisse aus diesem Projekt

Ein politisches Analyseportal lehrt mehr über Datenvisualisierung und User Engagement als die meisten Business-Tools.