Skip to content
Enjoy some plunky browse music :)

PORTFOLIO REDESIGN · 2025

TheSamulation

I rebuilt my portfolio from scratch as a dual-view experience — a 2D editorial site and an interactive 3D workstation, running from one React codebase.

The Samulation — 3D workstation experience
3D Workstation

At a glance

What
This site — an explorable 3D desk with real work behind every object
My role
Design, build, and the 3D scene
Outcome
You're inside it right now
Stack
React · Vite · Spline · Tailwind

2

Parallel Experiences

5+

Case Studies

6

Interactive Objects

Zero

Templates Used

01The Problem

My old site was fine. That was the problem.

I graduated from Michigan State, put up a portfolio, and didn't touch it for years. White background, teal accent, eight categories in the nav. It said "here's who I am" but never showed what I could actually build. That bugged me more the longer I left it.

Interactive

Drag to compare

New SiteOld Site
Old Site
New Site
02The Brief

I wrote four rules before touching any code.

01

Actually Use AI

Not as a gimmick. I wanted AI woven into the build process itself — 3D asset generation, code iteration, the whole pipeline.

02

Level Up Technically

Go from flat HTML/CSS to a real React architecture. Routing, state management, components that compose properly.

03

Build in 3D

I'd been playing with Spline and wanted to make something spatial — an environment people would actually explore, not just scroll past.

04

Prove the Thesis

If I claim I think in systems, the portfolio itself should prove it. Not describe it. Prove it.

03Design Philosophy

Tech-Noir Aesthetics

I kept gravitating toward teal on charcoal. The old site was white and open — this one needed to feel like it had a point of view. Sharp type, subtle gradients, dark everywhere.

The Samulation 2D experience — teal on charcoal
The 2D editorial experience

Editorial Minimalism

Let content breathe. The 2D side should read like a magazine spread, not a corporate brochure. Big type, whitespace, no clutter.

React component architecture in VS Code
Component architecture in TypeScript

Human Touch

I added ambient audio, gave my cat Sesame her own card, and wired the guitar to open my About page. A portfolio should feel like it belongs to a person, not a LinkedIn profile.

04The Architecture

One codebase, two ways in.

The whole thing runs from a single React app. A toggle flips between the two experiences — same content, same routes, different wrapper.

2D editorial mobile view
LAYER 01

2D Editorial

The clean, scrollable version. Mobile visitors and lower-spec machines get this by default. Reads well, loads fast, doesn't ask your GPU for anything.

3D workstation desktop view
LAYER 02

3D Workstation

A Spline-powered room where you're at my desk. Orbit the camera, click objects — each one maps to a content theme. The guitar opens my About page.

Site Architecture

Two entry points, shared navigation, one content source. Here's how it all connects.

Interactive Site Map

Click to expand
05The Build

Spline, Meshy, React, ship.

The workflow bounced between spatial design in Spline, AI-generated 3D models from Meshy.ai, and stitching it all together in React. Lots of back and forth, lots of "wait, that doesn't look right."

Building the 3D workstation in Spline
Spline workspace

Every object placed, lit, and animated by hand. The monitors, desk, and guitar are all clickable — each one mapped to a content theme.

1Design
2Generate
3Develop
4Ship

Drag to explore

Stack

React 19TypeScript 5.8Vite 6Tailwind v4React Router v7SplineMeshy.aiClaude AI
06The Result

Two experiences, one codebase, zero templates.

The new hero section — desktop view

Projects & Artifacts — the full archive

Mobile — responsive 2D experience

The resume page — clean, data-rich, and printable

07Decisions

Questions I got asked a lot.

Not every device can handle WebGL. Not every visitor wants it, either. The site checks what you're running and serves the right version. Mobile gets the editorial view. Desktop users can opt into the full 3D thing.

Both paths surface the same content — nobody misses anything regardless of which one they land on.

People remember "the site with the desk" more than "the site with the nice resume." It proves I can ship 3D, manage WebGL performance, and think spatially.

It also grows with me. New content is just a new desk object. No redesign required.

I wanted the portfolio to be the proof, not just the container. If I'm going to claim I think in systems, the site itself should demonstrate that. Templates are useful, but they tell a different story.

Every component, every animation, every layout call was mine.

Claude was basically my pair programmer — debugging weird CSS spec behavior, iterating on scroll animations, tuning ambient particles across probably 14 rounds of back and forth. We went deep.

Meshy.ai generated the 3D assets for the Spline scene. AI made me faster. The creative calls were still mine.

08Reflection
“Accessibility isn't a nice-to-have.”

The dual-view system and progressive fallbacks aren't compromises I made grudgingly. They make the product better for everyone — including people on the best hardware. I'm genuinely proud of how gracefully this degrades.

“Nobody notices performance until it's bad.”

I killed backdrop-blur over WebGL, swapped useState scroll handlers for direct DOM refs, replaced overflow-x: hidden with clip. Nobody can name what changed. The site just feels right now.

“Done is a direction, not a destination.”

The case studies went from header-heavy to prose-first. The particles got tuned, re-tuned, and tuned again. The Clyde logo went through six SVG iterations. I keep finding things to improve, and I think that's the point.

GET IN TOUCH

Like what you see?

I'm always open to discussing new opportunities, creative projects, or just nerding out about design and technology.

Built with React 19 · TypeScript · Tailwind v4 · Spline · Claude AI

View open source repository →
Next ProjectThe D-CadeResurrecting a custom Sega Dreamcast arcade cabinet with Raspberry Pi, 3D printing, and A/V conversion. Now serving a medical waiting room.