Nova Digital Studio's website serves a dual purpose: it's the storefront that attracts clients to the agency, and it's a working demonstration of the exact web, 3D, and motion capabilities I offer. Rather than a typical agency site built from templates, I designed and built it as a direct showcase of premium, high-performance 3D web design, applied to my own brand first.

My Role: UX/UI Design, Frontend Development, 3D Implementation, Motion Design, Backend Infrastructure

The visual system centers on a dark, high-contrast palette with violet and pink accent gradients, built to feel premium and technical at once. The homepage leads with a bold statement, “Digital Product Studio,” and a continuously animated 3D centerpiece, communicating capability immediately rather than easing into it.

Navigation is kept minimal, Home, Services, Work, and Let’s Talk, so the focus stays on the visual craft. Clear dual CTAs, “Explore Our Work” and “Our Services,” guide visitors toward proof of work or a direct next step.

Ambient 3D Centerpiece: A custom 3D torus-knot form rotates continuously in the hero section, a deliberate, non-interactive animation. The goal was constant, ambient motion that signals sophistication at a glance without requiring visitor input to activate it.

Layout & Page Transitions: Built as a single-page application with client-side routing, so moving between sections like Work and Services feels instant and seamless, without full page reloads breaking the experience.

Responsive Motion Design: Animations, spacing, and layout are tuned to hold their premium feel across devices, not just on desktop.

React 19 & TypeScript: The foundational framework, with strict type safety for a maintainable codebase.

Vite: Ultra-fast build tooling for instant development and compilation.

Three.js & React Three Fiber: Powers the real-time 3D rendering of the rotating hero centerpiece, built declaratively as reusable components.

@react-three/drei & @react-three/postprocessing: Handles environment lighting and cinematic effects like bloom, without sacrificing performance.

Tailwind CSS v4: Enforces the design system across layout, spacing, and the custom color palette.

Framer Motion: Drives layout transitions, scroll reveals, and fluid spring-physics animation throughout.

React Router DOM v7: Handles multi-page navigation architecture without reloading the browser.

Node.js & Express: A lightweight backend server handling secure API routes, including contact form submissions.

Resend & Nodemailer: Server-side email dispatch for the contact form, keeping credentials secure and off the browser.