Kijk onder de motorkap.
Dit admin-panel is geen plaatje — alles werkt. De tokens hieronder zijn de échte variabelen waar deze site op draait, de formulieren valideren live, en de tabel zoekt, sorteert en pagineert. Handgebouwd, zonder UI-library.
Kleur-tokens
Elke kleur op deze site komt uit één set CSS-variabelen — de vlakken hieronder
renderen live via var(--…), dus deze pagina kan nooit uit de pas
lopen met de echte stylesheet.
Typografie
Drie lettertypes, elk met één taak: Orbitron voor identiteit, Inter voor leesbaarheid, JetBrains Mono voor het HUD-laagje.
Display / Orbitron 900
QUANTUM LEAP
Heading / Orbitron 700 · 26px
Systemen die omzet draaien
Body / Inter 400 · 16px · lh 1.6
Websites, platformen en bedrijfssystemen op robuuste architectuur.
HUD / JetBrains Mono 700 · 12px · tracking 0.14em
SYSTEEM_ONLINE · 0 DOWNTIME
Spacing-schaal
Ritme op een 4px-grid — geen willekeurige marges, elke afstand komt uit deze reeks.
Form controls & live validatie
Valideert bij het verlaten van een veld én bij verzenden; fouten verschijnen bij het veld zelf en het eerste ongeldige veld krijgt focus. Probeer het maar.
Datatabel — zoeken, sorteren, pagineren
57 demo-reserveringen zoals in het Mesa Lock-beheerpanel. Zoek op naam of locatie, klik op een kolomkop om te sorteren, blader met de paginering.
| ID | Klant | Locatie | Datum | Gasten | Bedrag | Status | Acties |
|---|
Empty, loading & error
De drie schermen die goedkope bureaus vergeten te bouwen — en die bepalen hoe professioneel je systeem aanvoelt op de slechtste dag. Alle drie live hieronder; de error-state kun je zelf afspelen.
EMPTY_STATE
Nog geen reserveringen
Je eerste boeking verschijnt hier zodra hij binnenkomt.
LOADING_STATE
Skeleton in plaats van een spinner: de bezoeker ziet de vorm van wat komt.
ERROR_STATE
Verbinding met API mislukt
HTTP 503 · SERVICE_UNAVAILABLE
Duidelijke oorzaak, duidelijke uitweg — nooit een dood scherm.
Backend & data
→ De backend van Mesa Lock & EPA Storage
→ Widget ↔ beheerpanel ↔ betalingen, realtime gekoppeld
→ Multi-tenant datamodellen voor SaaS-platformen
Frontend
→ Beheerpanelen & SaaS-frontends in dagelijks gebruik
→ Lighthouse-scores van 98–100 op elke site
→ Het complete 3D Lab op deze site
Cloud & operatie
→ Hosting, pipelines en monitoring van 10+ systemen
→ Monitoring en back-ups op elk live systeem
→ NL/EN/ES-sites met vindbaarheid als ontwerpprincipe
Bewezen in productie
Geen cursus-certificaten maar draaiende systemen: elke balk hierboven is gedekt door code die nu live staat — van SaaS-backend tot de 3D-scenes in het lab.