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

• F1 ASCII Animation: a Formula 1 race animated in pure CSS/HTML with ASCII characters.
• CSS Still Life: an 800×600 still life built entirely from divs, gradients, and keyframes. No images.
• Blue Mixtape: a multi-page music zine as a navigable site (HTML + CSS grid/flex).
• Data Footprints: an interactive site on personal data and web tracking, in vanilla JS.
• p5.js Clock: a generative clock where seconds, minutes, and hours each drive their own visual system.
• Tame the Cat: a scripted browser game with a state machine and chance elements.
• QuadTree Painter: a generative Mondrian-style painter (Canvas API) from recursive quadtree splits.
• API Tool Pitch: a team single-page pitch for an IFTTT-linked assistive tool.

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.