RADhuus Nortrup

Static business website for a local bicycle shop in Lower Saxony

Project Overview

RADhuus Nortrup is a static information website for a local bicycle shop in Lower Saxony, Germany. The site serves as a digital business card for existing and new customers — presenting the shop's products, services, and pricing with direct contact options via phone, email, WhatsApp, and Google Maps.

✓ Live Website

Live: radhuus-nortrup.de

Client project – Built for Christian Quiring, owner of RADhuus Nortrup bicycle shop.

Status

Live

Development completed

Client

Christian Quiring

RADhuus Nortrup

Scope

8 Pages + Extras

E-Bike guide & custom 404

Case Study

Problem

A local bicycle shop in rural Lower Saxony needed an online presence to reach new customers and provide existing customers with quick access to services and pricing. The requirements were:

  • Present the shop's product range, services, and pricing clearly
  • Provide multiple contact options (phone, email, WhatsApp, Google Maps)
  • Full GDPR compliance without cookies or external trackers
  • Fast loading times even on slower rural mobile connections
  • No CMS dependency — low maintenance, no recurring costs

Solution

Built a performant, static website with modern web technologies:

  • Static Architecture: Pure HTML/CSS/JS — no framework overhead, no CMS, no database
  • Image Optimization: WebP with JPEG fallback via <picture> elements, reducing image payload from ~38 MB to ~8 MB
  • Modern CSS: Custom Properties, clamp() for fluid typography, color-mix(), scroll-driven animations
  • Accessibility: Semantic HTML, skip links, aria-labels, focus indicators

My Responsibilities

  • Design: Complete UI/UX design with mobile-first approach and Dark/Light Mode support
  • Development: Full frontend implementation with semantic HTML5, modern CSS3, and Vanilla JavaScript
  • Photography: Image optimization pipeline — WebP conversion, compression, responsive sizing
  • SEO: Schema.org LocalBusiness structured data, Open Graph meta tags, sitemap
  • Legal: GDPR-compliant legal notice and privacy policy, cookie-free architecture
  • Deployment: netcup hosting setup, DNS configuration

Status

Development Completed – The website is live at radhuus-nortrup.de, hosted on netcup.

Features

📱

Responsive Design

Mobile-first layout optimized for all device sizes — from smartphones to desktop screens.

🌓

Dark / Light Mode

Automatic theme switching via prefers-color-scheme — respects user system preferences.

📷

Photo Gallery with Lightbox

Category filters, keyboard navigation, touch swipe gestures, and image preloading for a smooth browsing experience.

✨

Scroll Animations

CSS-based scroll-reveal animations using animation-timeline: view() — no JavaScript animation libraries needed.

🔍

SEO Optimized

Schema.org LocalBusiness structured data, Open Graph meta tags, XML sitemap for optimal search engine visibility.

🔒

GDPR Compliant

Legal notice (§5 TMG), privacy policy (Art. 6 GDPR), no cookies, no external trackers.

♿

Accessibility

Skip links, aria-labels, semantic HTML, focus indicators — built for inclusive access.

⚡

Performance

Compressed WebP images, zero framework overhead — ~8 MB total image payload instead of ~38 MB.

Technology Stack

Markup

  • HTML5: Semantic structure with Schema.org LocalBusiness microdata
  • 8 content pages + E-Bike guide + custom 404 page

Styling

  • CSS3: Custom Properties for theming
  • clamp(): Fluid typography and spacing
  • color-mix(): Dynamic color blending
  • prefers-color-scheme: Automatic Dark/Light Mode
  • animation-timeline: view(): CSS-only scroll animations

Interactivity

  • Vanilla JavaScript: No frameworks — lightweight and fast
  • Lightbox Gallery: Custom implementation with keyboard & touch support
  • Category Filters: Dynamic content filtering

Images

  • <picture> element: WebP with JPEG fallback
  • Compression: ~80% payload reduction (38 MB → 8 MB)
  • Responsive: Appropriate sizing for each breakpoint

Hosting & Deployment

  • netcup: Static site hosting
  • Git / GitHub: Version control
  • Custom Domain: radhuus-nortrup.de (DNS pending)

Architecture Overview

The website follows a simple, maintainable static architecture with no build step:

  • No CMS / No Database: Pure static files — zero server-side dependencies
  • Progressive Enhancement: Core content accessible without JavaScript, enhanced features layered on top
  • Image Pipeline: Source images converted to WebP with JPEG fallback via <picture> elements
  • SEO Layer: Schema.org structured data, Open Graph tags, and XML sitemap for search visibility
  • Legal Compliance: GDPR-compliant by design — no cookies, no tracking, no external requests

Screenshots

RADhuus Nortrup Homepage
📸

Homepage

Hero section, services overview

Homepage - Hero section and services overview

RADhuus Nortrup Photo Gallery
📸

Photo Gallery

Lightbox with category filters

Photo Gallery - Lightbox with category filters and touch navigation

RADhuus Nortrup Mobile View
📸

Mobile View

Responsive mobile-first layout

Mobile View - Responsive mobile-first layout