Engineering an Interactive 3D Portfolio: Remix, Three.js & Modern Web Security

The Vision Behind the Architecture

As a Computer Science undergraduate at IILM University focused on Full-Stack engineering and Cybersecurity, I wanted my portfolio to be more than a static digital resume. In a landscape dominated by generic portfolio templates, I set out to construct an interactive, production-grade web experience that unites:

1. Edge-Rendered Performance: Sub-second initial page loads powered by server-side rendering (SSR).
2. Interactive 3D WebGL Graphics: Real-time shader displacement and 3D device canvas models running at 60 frames per second.
3. Resilient Design Systems: Zero-runtime vanilla CSS with fluid typography, responsive layout tokens, and seamless dark/light theme switching.
4. Security-First Engineering: Hardened API mutations, input validation pipelines, honeypot defenses, and strict security headers.

Here is an architectural walkthrough of how every layer of this site was conceived and engineered.

The Core Framework: Remix, Vite & Cloudflare Pages

Choosing the foundational framework meant prioritizing user experience, developer velocity, and deployment economics. I selected Remix paired with Vite and deployed via Cloudflare Pages.

Why Remix over Standard SPAs?

• Edge Execution & Minimal TTFB: Traditional Single Page Applications (SPAs) ship an empty HTML shell and require client-side JavaScript to execute before users see anything. With Remix running on Cloudflare Workers at the edge, HTML is pre-rendered in close proximity to the user, driving Time-to-First-Byte (TTFB) down significantly.
• Nested Routing & Parallel Data Loading: Remix eliminates data-loading waterfalls. Layouts and routes declare their data dependencies via server loader functions that execute in parallel before rendering the page.
• Vite Build Pipeline: Migrating to the Vite-powered Remix compiler provides near-instant Hot Module Replacement (HMR) during local development and fine-grained ESM chunking in production.

3D Graphics with Three.js & Custom GLSL Shaders

The centerpiece of the homepage is the interactive rotating displacement sphere. Rather than relying on static images or pre-rendered videos, it is rendered in real time using Three.js and customized OpenGL Shading Language (GLSL) programs.

1. Vertex Displacement via Procedural Noise

In displacement-sphere-vertex.glsl, each vertex of an IcosahedronGeometry is continuously displaced along its normal vector using 3D simplex noise:

// Vertex displacement calculation
vec3 displacedPosition = position + normal * (noise(position * frequency + time * speed) * amplitude);
vNormal = normalMatrix * normal;
vPosition = (modelViewMatrix * vec4(displacedPosition, 1.0)).xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4(displacedPosition, 1.0);

By computing vertex displacement directly on the GPU, the CPU remains free to handle interface interactions and DOM mutations without dropping frames.

2. Custom Fragment Shading & Fresnel Rim Lighting

To give the sphere its luminous, holographic appearance, the fragment shader computes a Fresnel effect. By calculating the dot product between the normalized camera viewing vector and the surface normal, pixels grazing the edge of the sphere reflect an ethereal cyan-tinted highlight:

// Fresnel highlight calculation
float fresnel = pow(1.0 - dot(normalize(-vPosition), normalize(vNormal)), 2.5);
vec3 finalColor = mix(baseColor, rimColor, fresnel * intensity);
gl_FragColor = vec4(finalColor, opacity);

As the visitor moves their cursor across the viewport, normalized mouse coordinates are passed as uniforms into the shader, dynamically shifting the lighting angle and rotational velocity.

3. Geometry Compression with Draco WASM

3D assets can quickly bloat bundle sizes if left uncompressed. For the 3D laptop and phone mockups featured in the project showcases, I utilized Google's Draco geometry compression algorithm:

• Compressed .glb assets down by over 75% relative to raw polygonal files.
• Prefetched the Draco WebAssembly decompression engine (draco_decoder.wasm) during idle browser cycles.
• Offloaded geometry decoding to web workers, preventing UI thread stutters during scene initialization.

// Prefetching Draco WebAssembly binaries in root links
export const links = () => [
  {
    rel: 'prefetch',
    href: '/draco/draco_decoder.wasm',
    as: 'fetch',
    type: 'application/wasm',
  },
];

4. GPU Power Management via Intersection Observers

Continuous WebGL rendering can drain battery life if not managed responsibly. I attached an IntersectionObserver to the 3D canvas viewport. When the sphere scrolls out of the active screen area, the requestAnimationFrame render loop pauses immediately, saving CPU and GPU cycles until the user scrolls back.

Design System: Modern Vanilla CSS & Responsive Tokens

While CSS-in-JS libraries like Styled Components were popular in past years, they introduce significant JavaScript bundle overhead and runtime style recalculations. For this portfolio, I adhered strictly to Vanilla CSS Modules and modern web platform features:

1. Fluid Typography with clamp()

Rather than writing fragmented media queries at dozens of arbitrary breakpoints, typography and spacing scale fluidly based on the viewport width:

/* Responsive heading typography token */
--fontSizeHeading: clamp(2rem, 1.2rem + 3.5vw, 4.5rem);
--spacingSection: clamp(64px, 10vw, 160px);

2. Zero-FOUC Dark/Light Theme Switching

Theme state is handled using CSS custom properties mapped to HTML attributes ([data-theme='light'] and [data-theme='dark']). To eliminate the dreaded Flash of Unstyled Content (FOUC):

1. The user's active preference is stored both in a persistent HTTP-only cookie and localStorage.
2. The server root.jsx loader reads the cookie on the incoming request and injects the proper data-theme attribute directly onto the initial HTML payload.
3. If no cookie exists, client-side scripts synchronize seamlessly with prefers-color-scheme.

Security Engineering: Hardening the Frontend & Backend

With a background in Security Engineering and Splunk log analysis, implementing robust security practices across this portfolio was non-negotiable.

1. Contact Form Hardening & Bot Mitigation

Web contact forms are notorious targets for automated spam and abuse. The contact action route implements multi-layered defensive controls:

• Honeypot Trap: An invisible, accessibility-hidden input field (name). Automated spam bots invariably fill out every input field they find; human visitors do not. If the honeypot contains data, the server immediately discards the submission silently.
• Strict Payload Constraints: Email addresses are capped at 512 bytes and validated against strict RFC-compliant regex patterns. Message bodies are capped at 4096 bytes to prevent buffer and memory starvation exploits.
• Principle of Least Privilege with Amazon SES: Outgoing notification emails are dispatched via Amazon SES using IAM service credentials restricted strictly to ses:SendEmail for a single verified domain.

2. Security Headers & Zero-Trust Principles

Static assets and server responses are protected using configured HTTP headers:

• Cache-Control: immutable headers for hashed font and asset files.
• X-Content-Type-Options: nosniff preventing MIME-type sniffing attacks.
• X-Robots-Tag: noindex for preview branch deployments, keeping staging environments unindexed by search engine crawlers.

Summary & Next Steps

Building this portfolio was an opportunity to synthesize computer science fundamentals with modern production engineering:

• Remix delivers unmatched routing ergonomics and edge execution.
• Three.js & GLSL provide immersive, dynamic 3D visual fidelity.
• Modern CSS ensures lightweight, instantaneous responsive rendering without framework bloat.
• Security Engineering protects user communications and backend services from abuse.

As I continue my studies at IILM University and build out new projects in full-stack engineering and cloud security, this platform serves as the living canvas for my work.

Explore the source code on GitHub or connect with me via the contact page.