Digital Experience / Engineering
LiveSHAN HUB
A custom digital studio platform combining high-performance frontend engineering, interactive systems and secure client inquiry infrastructure.
Visit live siteOverview
SHAN HUB is the studio's own digital product: a focused place to present engineering work, explain capabilities and open a secure project conversation.
- Role
- Product direction, interface design, frontend engineering, interaction development and secure backend implementation.
- Status
- Live
Context
Why this exists.
The platform needed to express technical character without sacrificing clarity, accessibility or production discipline.
Objective
What the system needs to accomplish.
Build an authored, responsive studio experience where visual ambition and dependable engineering reinforce each other.
Architecture
Structured for change.
- Next.js App Router with server-first page composition
- Isolated client components for navigation, forms, motion and WebGL
- Typed project data powering the homepage and case studies
- Server-only Resend API delivery behind validated API routes
Engineering decisions
Constraints made explicit.
- Keep semantic content independent from the 3D layer
- Use one adaptive WebGL canvas rather than multiple scenes
- Make reduced-motion and WebGL fallbacks first-class states
- Preserve strict validation, rate limiting and origin controls
Interaction / Visual system
Character with a job to do.
A restrained industrial system derived from the SHAN HUB logo: titanium surfaces, deep graphite, controlled cyan energy and sparse red diagnostics.
Technology
Tools by function.
Security
Controls remain structural.
- Exact-origin allowlisting
- Server-side Zod validation
- Honeypot and rate limiting
- Escaped HTML email output
Performance
Complexity is budgeted.
- Dynamically loaded 3D
- Adaptive DPR
- Texture-free core geometry
- Server-rendered primary content
Current result