Zurück zu den Projekten

Case Study

Full Stack2026

CodeMirror

Scrollgesteuerte Unternehmenswebsite mit Content-Admin für ein Design-, Entwicklungs- und Automatisierungsstudio in Pune.

CodeMirror ist ein Technologiepartner aus Pune, der digitale Produkte gestaltet, entwickelt und automatisiert. Ich habe die neue Website komplett gebaut – einen scrollgesteuerten Partikel-Hero, gepinnte Services- und Prozess-Szenen, SEO-fähige Leistungsseiten und ein Admin-Panel, in dem das Team Leistungen, Projekte, Bewertungen, Stellen und Anfragen ohne Code pflegt.

Live site
CodeMirror homepage hero with the scroll-driven particle field and company headline.
Next.jsTypeScriptTailwind CSSGSAPLenisThree.jsSupabase

Galerie

Beitrag

  • Den Bau der neuen CodeMirror-Website geleitet – vom ersten Layout bis zur produktionsreifen Next.js-App.
  • Einen scrollgesteuerten Three.js-Partikel-Hero gebaut, der durch die Phasen Design, Entwicklung und Automatisierung wechselt.
  • Das gepinnte Services-Deck und die horizontale Prozess-Zeitleiste mit GSAP ScrollTrigger und Lenis umgesetzt.
  • SEO-fähige Leistungsseiten mit eigenen Metadaten, FAQs, Sitemap, robots und JSON-LD ausgeliefert.
  • Ein Admin-Panel auf Supabase für Leistungen, Projekte, Bewertungen, Stellen, Anfragen und Website-Einstellungen gebaut.

Ergebnis

Eine moderne, im Admin bearbeitbare Unternehmenswebsite geliefert, die CodeMirrors Design-, Entwicklungs- und Automatisierungsarbeit in einer klaren Scroll-Geschichte zeigt.

Technische Entscheidungen

  • Scroll-choreografierte Marketingseite

    Eine Next.js-App-Router-Seite, auf der GSAP ScrollTrigger und Lenis Hero, Services-Deck und Prozess-Zeitleiste über einen gemeinsamen Scroll-Takt steuern.

    Next.js · GSAP · Lenis · Three.js

  • Inhalte außerhalb des Codes

    Leistungen, Projekte, Bewertungen, Stellen und Einstellungen liegen hinter einer schlanken Store-Schicht in Supabase und werden beim ersten Start mit Startinhalten befüllt.

    Supabase · TypeScript

  • Admin-Panel für das Team

    Ein geschützter Admin-Bereich zum Bearbeiten aller öffentlichen Bereiche, Lesen von Kontaktanfragen und Veröffentlichen von Stellen – Änderungen brauchen keinen Entwickler mehr.

    Next.js · Supabase

Herausforderungen

  • Viel Bewegung ohne langsame Seite

    Ein WebGL-Partikel-Hero und mehrere gepinnte Scroll-Szenen können Ladezeiten verschlechtern und auf Smartphones ruckeln.

    Lösung: Partikel-Shader schlank gehalten, Szenen nur bei genug Platz gepinnt und auf kleinen Bildschirmen sowie bei reduzierter Bewegung einfache Layouts genutzt.

  • Ein Team, viele Leistungen

    Acht Leistungen aus Design, Entwicklung und Automatisierung sollten klar wirken, ohne die Startseite zum Katalog zu machen.

    Lösung: Die Startseite in die Phasen Design, Entwicklung und Automatisierung gegliedert und jeder Leistung eine eigene SEO-Seite für Details gegeben.