HamishMW Portfolio: The Revolutionary 3D Developer Tool

Tired of static, cookie-cutter portfolio websites that blend into the digital void? HamishMW Portfolio shatters conventions by merging Remix's blazing performance with Three.js immersive 3D graphics. This open-source powerhouse transforms your personal brand into an unforgettable interactive experience. In this deep-dive guide, you'll discover how to install, customize, and deploy your own jaw-dropping 3D portfolio that commands attention and showcases your skills like never before.

What is HamishMW Portfolio?

HamishMW Portfolio is a cutting-edge personal website template engineered by developer Hamish Williams, designed to showcase creative work through a mesmerizing blend of React-based architecture and WebGL-powered 3D visuals. Unlike traditional portfolio sites that rely on static images and basic animations, this project leverages Remix's server-side rendering capabilities, Three.js for hardware-accelerated 3D graphics, and Framer Motion for silky-smooth transitions.

The repository gained rapid traction in the developer community for demonstrating how modern web technologies can create portfolio experiences that feel more like interactive art installations than traditional websites. At its core, the project features a signature DisplacementSphere—a morphing, blob-like background element that responds to user interaction, creating an immediate "wow" factor that keeps visitors engaged.

Built with Node.js 19.9.0+ and npm 9.6.3+, the stack represents the bleeding edge of web development. Remix provides robust routing and data loading, Three.js unlocks GPU-powered 3D rendering directly in the browser, and Framer Motion adds production-ready animations without the performance overhead. The live demonstration at hamishw.com serves as both a portfolio and a testament to what's possible when creative vision meets technical execution.

Key Features That Make It Stand Out

🚀 Remix Framework Foundation

The project harnesses Remix's full-stack capabilities, enabling server-side rendering for optimal SEO while maintaining client-side interactivity. This eliminates the traditional trade-off between performance and dynamic content. Remix's nested routing system allows each portfolio section to load independently, reducing initial bundle size and improving Core Web Vitals scores.

🎮 Three.js 3D Integration

Three.js powers the immersive background elements and interactive 3D models. The implementation uses modern WebGL2 features, including custom shaders for the DisplacementSphere effect. This isn't just decorative—the 3D layer responds to scroll position and mouse movement, creating a parallax effect that adds depth without sacrificing accessibility.

✨ Framer Motion Animations

Every transition, from page navigation to component mounting, leverages Framer Motion's physics-based animation engine. The library's AnimatePresence API handles exit animations flawlessly, preventing the jarring flashes common in React applications. Spring animations create natural, satisfying movements that feel tactile and responsive.

🎨 DisplacementSphere Shader

The signature background element uses a custom fragment shader for real-time distortion effects. This GLSL code runs directly on the GPU, enabling 60fps morphing animations that would be impossible with JavaScript alone. The shader manipulates vertex positions based on sine wave functions and noise algorithms, creating that distinctive "blobby" appearance.

📱 Responsive 3D Design

Unlike many 3D websites that break on mobile, this portfolio implements adaptive quality settings. The Three.js renderer automatically detects device capabilities, reducing polygon count and disabling intensive effects on lower-powered devices while maintaining visual fidelity on desktop workstations.

📖 Storybook Integration

The included Storybook setup at storybook.hamishw.com allows component-driven development. Each UI element can be developed and tested in isolation, accelerating customization. This is crucial for developers who want to maintain the 3D effects while swapping out colors, typography, and layout structures.

☁️ Cloudflare Pages Deployment

Pre-configured for Cloudflare Pages, the deployment pipeline includes edge caching and automatic HTTPS. The npm run deploy command streamlines production pushes, while environment variable management through Cloudflare's dashboard simplifies contact form configuration.

📧 Production-Ready Contact Form

The contact form integrates with AWS SES for reliable email delivery. The server-side handler validates input, prevents spam through honeypot fields, and provides success/error feedback via Remix's action system. For simpler setups, the documentation suggests nodemailer with Gmail as an alternative.

Real-World Use Cases

1. Creative Developer Branding

Stand out in competitive job markets by presenting code samples and project case studies within an interactive 3D environment. Recruiters remember portfolios that demonstrate both technical skill and creative vision. The DisplacementSphere becomes your digital signature—immediately recognizable and impossible to ignore.

2. Digital Agency Showcase

Creative agencies can adapt the template to present client work in a gallery format. Each project becomes a 3D card that users can navigate through, with Framer Motion handling smooth transitions between case studies. The Three.js scene can showcase 3D product models or architectural visualizations directly in the browser.

3. Game Developer Portfolio

For game developers, this template is perfect. Embed WebGL builds of mini-games or interactive demos alongside traditional project descriptions. The performance optimizations ensure even complex 3D scenes run smoothly, letting potential employers play your creations instantly.

4. Product Designer Gallery

Product designers can use the 3D space to display 360° product renders. The responsive design ensures these interactive showcases look stunning on any device, while the Storybook integration makes it easy to swap in new product models without breaking the overall aesthetic.

5. Tech Startup Landing Page

Early-stage startups can repurpose the portfolio structure into a product landing page. The 3D background creates immediate emotional impact, while Remix's SEO capabilities ensure Google properly indexes your content. The contact form handles lead generation out of the box.

Step-by-Step Installation & Setup Guide

Prerequisites

Before cloning, verify your development environment meets the requirements:

node --version  # Must be 19.9.0 or higher
npm --version   # Must be 9.6.3 or higher

If your versions are outdated, use nvm (Node Version Manager) to install the correct versions:

nvm install 19.9.0
nvm use 19.9.0

Clone and Install

Navigate to your projects directory and clone the repository:

git clone https://github.com/HamishMW/portfolio.git
cd portfolio
npm install

The npm install command downloads approximately 200MB of dependencies, including Three.js, Remix, and Framer Motion. This process typically takes 2-3 minutes on a standard broadband connection.

Local Development Server

Launch the development environment:

npm run dev

This command starts Remix's development server with hot module replacement. Your default browser should automatically open to http://localhost:3000. The server watches for file changes and rebuilds instantly, preserving 3D scene state during development.

Storybook Component Workshop

To develop UI components in isolation:

npm run dev:storybook

Storybook launches on http://localhost:6006, providing a sandbox for testing props, animations, and responsive breakpoints without navigating the full 3D scene. This is essential when customizing the design system.

Environment Configuration

Create a .env file in the project root for local secrets:

cp .dev.vars.example .dev.vars

Edit .dev.vars with your AWS SES credentials or Gmail settings for the contact form. Never commit this file to version control—it's already listed in .gitignore.

Production Deployment

Deploy to Cloudflare Pages with a single command:

npm run deploy

This script builds the optimized production bundle, uploads assets to Cloudflare's edge network, and configures edge functions for the contact form. The entire process takes under 2 minutes, after which your portfolio is live on a *.pages.dev domain.

REAL Code Examples from the Repository

1. Installation Command Execution

The README provides the exact installation workflow. Let's break down what happens:

# This command installs all dependencies defined in package.json
# including @remix-run/react, three, and framer-motion
npm install

What this does: The command reads package-lock.json to ensure deterministic builds, downloading pre-compiled binaries for Three.js's WebGL dependencies. It creates a node_modules folder with over 1,000 packages optimized for the Remix ecosystem.

2. Development Server Startup

# Launches the Remix development server with 3D scene hot reloading
npm run dev

Behind the scenes: This executes remix dev which spins up a Vite-based development server. Unlike Create React App, Remix preserves the Three.js WebGL context during hot reloads, preventing the 3D scene from reinitializing on every code change—a critical feature for shader development.

3. Storybook Development Command

# Starts the component isolation environment
npm run dev:storybook

Technical details: This runs storybook dev -p 6006, scanning the project for *.stories.tsx files. Each story mounts components without the full 3D scene overhead, enabling rapid iteration on the React UI layer while the 3D background continues rendering in the main app.

4. Cloudflare Deployment Pipeline

# Builds and deploys to Cloudflare Pages edge network
npm run deploy

Production magic: This triggers npm run build && wrangler pages deploy ./public, which first runs Remix's compiler to generate server and client bundles. The build process tree-shakes unused Three.js modules, reducing the initial JavaScript payload by 60%. Wrangler then uploads assets to 300+ global edge locations.

5. Contact Form Environment Variables

# Copy example environment file
cp .dev.vars.example .dev.vars

Configuration structure: The .dev.vars file contains:

AWS_REGION=us-east-1
AWS_ACCESS_KEY_ID=your_key_here
AWS_SECRET_ACCESS_KEY=your_secret_here
SES_FROM_EMAIL=your@email.com
SES_TO_EMAIL=portfolio@yourdomain.com

Security note: These variables are injected into Remix's server-side loader functions at runtime, never exposing credentials to the client bundle. Cloudflare Pages encrypts these values at rest and in transit.

Advanced Usage & Best Practices

Optimizing 3D Performance

Enable Three.js's power preferences for better GPU utilization:

// In your Three.js renderer configuration
const renderer = new THREE.WebGLRenderer({
  powerPreference: 'high-performance',
  antialias: true,
  alpha: true
});

This hints to the browser to use discrete GPUs on laptops, dramatically improving frame rates. Monitor performance with Three.js's built-in stats panel during development.

Customizing the DisplacementSphere

Modify the fragment shader in /app/components/DisplacementSphere/shader.frag:

// Adjust the u_time multiplier to change animation speed
float distortion = sin(vUv.x * 10.0 + u_time * 0.5) * 0.1;

Pro tip: Use Shaderfrog or glslViewer to prototype shaders outside the React component lifecycle, then port the final GLSL code back into the component.

Animation Performance with Framer Motion

Leverage will-change CSS property for 3D transforms:

<motion.div
  style={{ willChange: 'transform' }}
  animate={{ rotateY: 360 }}
  transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
/>

This tells the browser to optimize for transform changes, preventing layout thrashing during complex 3D animations.

SEO for 3D Content

Since Three.js content isn't crawlable, use Remix's MetaFunction:

export const meta = () => ({
  title: 'Your 3D Portfolio',
  description: 'Interactive WebGL portfolio built with Remix and Three.js',
  'og:image': '/social-preview.png'
});

Always provide fallback 2D screenshots for social media sharing, as Open Graph crawlers can't execute WebGL.

Comparison with Alternatives

Why choose HamishMW? It eliminates weeks of boilerplate setup while delivering production-ready 3D performance. The pre-integrated stack means you spend time creating, not configuring.

Frequently Asked Questions

How do I change the DisplacementSphere color?

Edit the fragment shader's uniform values in /app/components/DisplacementSphere/index.tsx. The color is controlled by a u_color uniform passed from the React component. Modify the hex value and the shader recompiles automatically in development.

What if I don't have AWS SES for the contact form?

The documentation suggests nodemailer with Gmail as a simpler alternative. Update the server action in /app/routes/contact.tsx to use nodemailer's SMTP transport instead of AWS SDK. For testing locally, use Ethereal Email to capture emails without real delivery.

Can I use this for commercial client projects?

Yes, but with attribution. The license permits commercial use, but if the design remains largely unmodified, you must credit Hamish Williams as the designer. For heavily modified versions, attribution is appreciated but not required.

How mobile-friendly is the 3D content?

The Three.js renderer detects GPU capabilities and automatically scales quality. On mobile devices, it reduces geometric complexity and disables post-processing effects, maintaining 30fps even on mid-range phones. Always test on real devices using Chrome DevTools' device emulation.

Will this slow down my website?

The initial bundle includes Three.js, but tree-shaking removes unused modules. The production build is ~350KB gzipped, comparable to image-heavy portfolios. The 3D scene uses requestAnimationFrame efficiently, pausing when the tab is inactive to preserve battery life.

How do I add my own 3D models?

Place GLTF/GLB files in /public/models/ and use @react-three/drei's useGLTF hook:

import { useGLTF } from '@react-three/drei';

function MyModel() {
  const { scene } = useGLTF('/models/my-project.glb');
  return <primitive object={scene} />;
}

Is WebGL support required for all visitors?

The site gracefully degrades to a static background if WebGL is unavailable. Use Three.js's WebGL.isWebGLAvailable() check to conditionally render the 3D scene, ensuring accessibility for users on older browsers or corporate networks with GPU restrictions.

Conclusion

HamishMW Portfolio represents a paradigm shift in how developers and designers present themselves online. By combining Remix's architectural brilliance, Three.js's graphical prowess, and Framer Motion's fluid animations, it delivers an experience that is both technically impressive and emotionally resonant.

The repository's true power lies not just in its visual wow-factor, but in its thoughtful engineering. Every performance optimization, from shader compilation to bundle splitting, demonstrates production-ready craftsmanship. Whether you're job hunting, attracting freelance clients, or simply want a digital presence that reflects your skills, this template provides a rock-solid foundation.

Ready to build your own 3D portfolio? Clone the repository today and join the next generation of web creators who refuse to settle for static. The future of personal branding is interactive, immersive, and undeniably memorable.

Get started now: https://github.com/HamishMW/portfolio