Boston Void

Boston Void ist ein Frontend-Konzept für die Website einer fiktiven Hardcore-Band. Ziel war es, die rohe DIY-Ästhetik von Konzertflyern, Zines und Keller-Shows in eine moderne One-Page-Website zu übertragen. Statt einer klassischen Landingpage entstand eine Seite, die sich bewusst an der Bildsprache der Hardcore-Szene orientiert und Atmosphäre ebenso wichtig nimmt wie Technik.

Stack

HTML
CSS
Vanilla JavaScript
IntersectionObserver
GitHub Pages

Focus

Branding
UI Design
Frontend Development
Responsive Design
Motion Design

Design

DIY Hardcore Aesthetic
Glitch Typography
Responsive
Analog Textures
Dark Theme
WCAG AA

Kontext

Eigenprojekt
Frontend Showcase
Branding Concept
Experimentelles UI
Ohne Frameworks

Projektüberblick

Boston Void entstand aus der Idee, eine fiktive amerikanische Hardcore-Band nicht nur grafisch zu gestalten, sondern ihr eine glaubwürdige digitale Identität zu geben.

Statt einer klassischen Portfolio-Landingpage stand die Atmosphäre im Mittelpunkt. Inspiration lieferten handgeklebte Konzertflyer, gestempelte Fanzines, Kellerkonzerte und die raue DIY-Kultur der Hardcore-Szene.

Das Ziel war es, diese analoge Stimmung in modernes Frontend zu übersetzen – mit bewusst reduzierter Navigation, subtilen Animationen und einer Gestaltung, die sich eher wie bedrucktes Papier als wie eine gewöhnliche Website anfühlt.

Design & Layout

Gestaltung einer authentischen Band-Website
Typografie im Stil klassischer Hardcore- und Punk-Flyer
Glitch-Effekte als Teil der visuellen Sprache
Einsatz von Grunge-, Papier- und Drucktexturen
Farbwelt und Bildsprache angelehnt an DIY-Zines und Konzertposter
Responsive Umsetzung mit Fokus auf Atmosphäre statt Effekthascherei

Abseits der eigentlichen One-Page entstand zusätzlich eine experimentelle Showcase-Seite, auf der alternative CSS-Effekte und physische Illusionen getestet werden.

Technische Umsetzung

Semantisches HTML5
Modular aufgebaute CSS-Struktur
Komponentenbasierter Stylesheet-Aufbau
IntersectionObserver für aktive Navigation
Responsive Breakpoints
prefers-reduced-motion-Unterstützung
GitHub Pages Deployment

Keine Frameworks. Keine Templates. Keine Abhängigkeiten. Der Fokus lag bewusst auf sauberem Frontend mit HTML, CSS und einer kleinen Menge JavaScript.

GitHub Repo

Live Demo

Script-Logik

Die JavaScript-Logik übernimmt ausschließlich interaktive Aufgaben und bleibt bewusst schlank.

Dazu gehören unter anderem:

automatische Hervorhebung des aktiven Navigationspunkts beim Scrollen
Steuerung kleiner Interaktionen
responsive Anpassungen für Animationen
Trennung von Präsentation (CSS) und Funktionalität (JavaScript)

Experimentelle Animationen wie die schwebenden Flyer wurden vollständig mit CSS umgesetzt und für mobile Geräte gezielt reduziert, um Performance und Bedienbarkeit zu erhalten.

    // ===================================
// MOBILE TOGGLE
// ===================================

const toggle = document.querySelector('.nav-toggle');
const links = document.querySelector('.nav-links');

if (toggle && links) {
    toggle.addEventListener('click', function () {
        const isOpen = links.classList.toggle('open');
        toggle.classList.toggle('open');

        // Accessibility: aria-expanded
        toggle.setAttribute('aria-expanded', isOpen);
    });

    // Menu schließen bei Link-Klick
    links.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
            links.classList.remove('open');
            toggle.classList.remove('open');
            toggle.setAttribute('aria-expanded', 'false');
        });
    });
}

// ============================================
// SCROLLSPY (Clean Version)
// ============================================

const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');

// Helper: Set active link
function setActive(id) {
    navLinks.forEach(link => link.classList.remove('active'));
    const activeLink = document.querySelector(`.nav-link[href="#${id}"]`);
    if (activeLink) {
        activeLink.classList.add('active');
    }
}

// Intersection Observer
const observer = new IntersectionObserver((entries) => {

    let visibleSections = entries
        .filter(entry => entry.isIntersecting)
        .sort((a, b) => b.intersectionRatio - a.intersectionRatio);

    if (visibleSections.length > 0) {
        setActive(visibleSections[0].target.id);
    }

}, {
    root: null,
    threshold: [0.3, 0.6, 0.9]
});

// Observe all sections
sections.forEach(section => observer.observe(section));


// Ensure Home is active on load if at top
window.addEventListener('load', () => {
    if (window.scrollY < 50) {
        setActive('home');
    }
});


// Fallback: If user scrolls back to very top
window.addEventListener('scroll', () => {
    if (window.scrollY < 50) {
        setActive('home');
    }
});

// ===================================
// SCROLL TO TOP BUTTON
// ===================================

const scrollTopBtn = document.getElementById('scrollTopBtn');

if (scrollTopBtn) {
    // Show Button 
    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            scrollTopBtn.classList.add('visible');
        } else {
            scrollTopBtn.classList.remove('visible');
        }
    });

    // Scroll to top
    scrollTopBtn.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    window.addEventListener('scroll', () => {

        // Wenn ganz oben → Home aktivieren
        if (window.scrollY < 100) {
            setHomeActive();
        }

    });
}