SHEET 06 · Web Platforms
Brettelberg Architecture Site
Vanilla HTML/CSS/JS architecture showcase — orbital animations, ERDs, and state machine diagrams for the Brettelberg four-app ecosystem
no public build · runs locally
2024localWeb Platforms
About
A polished, no-framework single-page site that visually maps the architecture of the Brettelberg production ecosystem I direct — four integrated applications (Next.js portal, Python voice AI, Flutter mobile, Flask Slack bridge). Features an animated orbital hero, interactive ERDs with key annotations, state machine visualizations, and user story walkthroughs. Its counter animations are a snapshot of the platform as it stood when the site was built — 323+ API endpoints, 158 DB migrations, 5 user roles — against 747 routes and 369 migrations today.
Key features
- 01Animated orbital hero visualization showing four systems
- 02Layered architecture diagram with integration flows
- 03Tabbed deep-dive panels for each subsystem
- 04Interactive ERD diagrams with key annotations
- 05State machine visualizations for voice AI flow
- 06Clean architecture layer breakdowns
- 07Data flow section with numbered pipeline steps
- 08User stories illustrating real-world scenarios
- 09Counter animation for hero statistics
- 10Fully responsive dark theme with gradient accents
Nearby
SHEET 01 · Web Platforms
Brettelberg
369 Supabase migrations, five portals, live weather at 10,700 ft, 20+ 3D labs, and a booking engine — built as Executive Director for a 26-unit ski resort
2024live4,878 commits668k lines tracked
SHEET 07 · Web Platforms
no public build · runs locally
HOA Meeting Manager
Production board meeting platform — WebRTC video, live AI transcription, motion voting, CCIOA compliance, and role-specific AI co-pilots
2024local
SHEET 08 · Web Platforms
ThaiScriptMaster
CEFR-aligned Thai learning platform — 147 routes, a tone-matching rhythm game with a custom Web Audio engine, three.js handwriting recognition, and a Reddit-scale content pipeline
2026live147 routes50,480 comments corpus