01 · Überblick
Momentum statt Rätselraten
Bootcamp-Marketing läuft auf zwei Dingen: einer Gehaltszahl und einem Stockfoto von jemandem, der sich über einen Laptop freut. Brightloops eigentliches Produkt ist Struktur — Live-Kohorten, Mentoren aus der Branche, Portfolio-first-Projekte, sechs Monate, neben dem Job. Struktur ist das, was gezeigt werden muss, und ein Foto kann sie nicht zeigen.
Also hat die Seite gar keine Fotografie. Dreizehn Inline-SVGs tragen das gesamte visuelle System, und die Belege sind Instrumente: Fortschrittsringe, die sich füllen, Balken, die wachsen, Zahlen, die zählen. Alle laufen über dieselbe Scroll-Variable und denselben Observer — die Seite vermisst sich selbst, ohne das Frame-Budget zu strapazieren.
02 · Die Idee
Instrumente, keine Illustrationen
Auf der Live-Seite füllt sich jedes Instrument aus einer Custom Property, die einmal pro Frame geschrieben wird, solange ihre Sektion im Bild ist. Drei Ringe, drei Balken, ein Schreibzugriff. Die Zahlen unten sind Konzeptinhalte, gebaut, um das Muster animierter Instrumente an plausibel geformten Zahlen zu testen — keine Statistiken einer echten Kohorte.
91%
Vermittlungsquote, für dieses Konzept.
4.9/5
Fiktive Alumni-Bewertung.
310
Fiktive Zahl der Partnerunternehmen.
03 · Ziele
Was die Seite leisten musste
Eine Schleife erklären, keinen Hörsaal
Das Curriculum ist iterativ, also wird es als Schleife in Tabs präsentiert statt als lineare Wochentabelle.
Sechs Programme, ein Ergebnis
Data-, Design- und Engineering-Tracks, die alle auf dasselbe Versprechen hinauslaufen — ohne sechs nahezu identische Landingpages.
Ehrlich bepreisen
Monatlich zahlen, nur während des Kurses — als Überschrift gesagt statt hinter einem Formular vergraben.
Mit Zahlen belegen, die sich benehmen
Jede Statistik animiert genau einmal, aus einer gemeinsamen Pipeline, und erscheint unter Reduced Motion sofort.
04 · Bauablauf
Zwölf Module, eine Pipeline
Tokens und die Schattenskala
Zwanzig Custom Properties. Navy, Kobalt, Koralle, Amber, eine Tönung, eine Haarlinie — plus eine dreistufige Schattenskala, die die gesamte Elevationsarbeit leistet.
Die Animieren-wenn-gesehen-Pipeline
Der Schlussstein: Ein Observer speist Ringe, Balken und Count-ups. Drei Effekte, ein Registrierungspunkt, eine Stelle, um einen Bug zu beheben.
Die SVG-Instrumente
Ringe auf Basis von
pathLength="100", die Mathematik besteht also aus Prozenten statt aus Umfang — nirgendwo Radius-Arithmetik.Die Curriculum-Tabs
Drei Panels, Roving Tabindex, korrektes
aria-selected, und der Panel-Inhalt steht im Markup, statt nachgeladen zu werden.Tiefenparallaxe
Die Mock-Karten im Hero driften mit Koeffizienten, die in
data-depth-Attributen deklariert sind — der Effekt wird im Markup verfasst statt hartkodiert.
05 · Architektur
Drei Dateien
├── index.html 48.6 KB — 8 Sektionen, 13 Inline-SVG, 0 Bilder
├── styles.css 42.1 KB — 20 Custom Properties, 4 Media Queries
└── script.js 20.3 KB — 653 Zeilen, 12 nummerierte Module
Der Stack
- Inline SVG
- pathLength
- IntersectionObserver
- data-depth
- Sora
- Public Sans
Barrierefreiheit
- Roving tabindex
- aria-selected
- SVG role + label
- aria-live
- Reduced motion
06 · Was sich gewehrt hat
Was sich gewehrt hat
SVG-Fortschrittsringe brauchen normalerweise den aus dem Radius berechneten Umfang — eine magische Zahl im CSS, die bricht, sobald sich die Geometrie ändert.
pathLength="100" definiert die Länge des Pfads als 100 Einheiten um, stroke-dasharray und stroke-dashoffset sind damit buchstäblich Prozente. Der Ring kann jede Größe haben; die Mathematik ändert sich nie.
Ringe, Balken und Count-ups sind drei Effekte, die alle „starten, wenn sichtbar“ bedeuten. Drei Observer sind drei Verstecke für denselben Bug.
Ein Observer, ein Registrierungsattribut, drei Renderer. Ein viertes Instrument später ist ein Renderer, kein weiterer Observer — und der Reduced-Motion-Pfad ist nur einmal geschrieben.
Ein dekoratives SVG-Chart ist für einen Screenreader unsichtbar, und eine animierende Zahl darin ist schlimmer als unsichtbar.
Jedes Instrument trägt role="img" und ein aria-label, das den Endwert in Worten nennt, und die animierte Zahl daneben steht in keiner Live-Region. Der Wert wird einmal angekündigt, korrekt, egal bei welcher Bewegungseinstellung.
Hero-Parallaxe mit Koeffizienten pro Element im JavaScript heißt: das Skript editieren, um eine Karte zu verschieben — das Design lebt in der falschen Datei.
Jede Karte deklariert ihr eigenes data-depth. Das Skript liest es; die Komposition bleibt im Markup, wo Designer sie ändern können.
07 · Was bleibt
Die Teile, die bleiben
In drei Zügen von festgefahren zu eingestellt
Das ganze Angebot in einer Zeile, vor jedem Preis- und Programmdetail.
Eine Schleife, kein Hörsaal
Die Curriculum-Tabs, die eine iterative Struktur ohne Diagramm lesbar machen.
Unterrichtet von Leuten, die einstellen
Mentoren, vorgestellt über die Rollen, für die sie rekrutieren — der überzeugendste Block der ganzen Seite.
Nur solange Sie lernen
Monatspreise, die enden, wenn der Kurs endet — schlicht in der Überschrift gesagt.
Der Data-Track
Analytics, SQL und die Statistik, die man braucht, um eine Schlussfolgerung im Meeting zu verteidigen. Das Portfolio-Projekt ist ein echter Datensatz mit einer echten Stakeholder-Frage daran — denn genau darum wird es im Vorstellungsgespräch gehen.
- SQL
- Python
- Dashboards
- Experiment design
Der Design-Track
Produktdesign von der Recherche bis zum ausgelieferten Interface, unterrichtet von Leuten, die Designer einstellen. Das Ergebnis ist eine Fallstudie — das Artefakt, das der Arbeitsmarkt tatsächlich liest.
- Research
- Systems
- Prototyping
- Case studies
Der Engineering-Track
Frontend- und Backend-Grundlagen mit ausdrücklichem Hang zum Ausliefern. Vier Projekte auf einer öffentlichen URL schlagen zwölf Tutorials in einer Sandbox.
- JavaScript
- APIs
- Testing
- Deployment
08 · Live starten
Hier ausprobieren
Der echte Build, eingebettet und lauffähig. Er lädt erst auf Abruf — nichts wird geholt, bevor Sie es anfordern.
Live-Vorschau überspringen
Der echte Build, direkt in der Seite. Die Live-Vorschau ist eine eingebettete Seite; mit Escape verlassen Sie sie.
Im Vollbild öffnen ↗
