Art of the Web.

A portfolio that is itself a project

Art of the Web is a course about the internet as a creative and cultural medium: how the web is built, who controls it, how it shapes culture. Instead of submitting work through an LMS, the format required building and maintaining a public portfolio all semester.

So the portfolio became the project: how do you build something that feels as considered as the work it houses? The answer was a fully interactive 3D scene where each course project floats in space, clickable to reveal its details.

A Three.js scene as an interface

It's built with Three.js and Vite, not a static page but a rendered WebGL scene. Nine GLTF models (a book, clock, globe, tape, cube, and others) drift continuously across the viewport, each one a course project; clicking opens a modal with its details.

• Custom physics: per-object velocity + angular velocity each frame, radius-based collision resolution, restitution off the viewport bounds, and a slow random drift to keep the scene alive.
• GLTF loading: GLTFLoader auto-scales and centers each model from its bounding box; a loading screen tracks all load promises before the scene goes interactive.
• Raycasting: mouse → normalized device coords each frame; a Raycaster detects the hovered object, which scales up on a GSAP spring; click opens the modal.
• Lighting: ambient, directional, hemisphere, and rim lights with a PMREM environment map for accurate reflections.
• GSAP + OrbitControls: spring-based modal, hover, and camera transitions; a freely orbitable camera with damping and distance limits.

Eight projects, each a different medium

• [object Object]
• [object Object]
• [object Object]
• [object Object]
• [object Object]
• [object Object]
• [object Object]
• [object Object]

When the container is as interesting as the content

Building the navigation as a physics scene made it more fun to make and to browse, and it taught me a lot about performance budgeting on the web, where one unoptimized GLTF can tank the frame rate.