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 — exploring how the web is built, who controls it, and how it shapes and reflects culture. Rather than submitting work through a learning management system, the format required building and maintaining a public portfolio site throughout the semester.

The portfolio became more than an archive container. It was a design and engineering challenge: how do you build something that feels as considered and creative as the work it's housing? The answer was a fully interactive 3D scene — each course project represented as a floating 3D object in space, clickable to reveal its details.

A Three.js 3D scene as an interface

The portfolio is built with Three.js and Vite — not a static HTML page, but a fully rendered WebGL scene. Nine 3D GLTF models (a book, clock, globe, tape, cube, and others) float and drift continuously across the viewport, each one representing a course project. Clicking an object opens a modal with the project description and a link.

Key technical systems built for the portfolio:

• Custom physics simulation — each object has its own velocity and angular velocity, updated every frame. Collision detection between objects uses radius-based overlap resolution to keep them from passing through each other. Objects bounce off the viewport bounds with restitution, and a slow random drift keeps the scene feeling alive.
• GLTF model loading — 3D assets are loaded with GLTFLoader, automatically scaled and centered from their bounding boxes. A loading screen tracks progress across all model load promises before the scene becomes interactive.
• Raycasting for interaction — mouse position is converted to normalized device coordinates each frame, and a Three.js Raycaster detects which object the cursor is over. Hovered objects scale up with a GSAP spring animation; click opens the modal.
• Lighting setup — ambient, directional, hemisphere, and rim lights are combined with a PMREMGenerator environment map for physically accurate reflections on the 3D models.
• GSAP animations — modal open/close, hover scale effects, and camera reset transitions are all handled with GSAP for smooth, spring-based motion.
• OrbitControls — the camera can be freely orbited, panned, and zoomed within set distance limits, with damping for a smooth feel.

Styled with SCSS and built with Vite for fast development and an optimized production bundle.

Eight projects across the semester, each a different medium

The course moved through a different web technology or concept each week. The projects archived in the portfolio span a wide range of tools and ideas:

• F1 ASCII Animation — CSS/HTML animation of a Formula 1 race using ASCII characters.
• CSS Still Life — An 800×600 still life composed entirely from CSS: divs, gradients, layering, and keyframe animation. No images.
• Blue Mixtape — A multi-page personal music zine built with HTML and CSS grid/flex layout, designed as a navigable site rather than a document.
• Data Footprints — An interactive single-page site with hover and selector-driven responses exploring personal data and web tracking, built with vanilla JS.
• p5.js Clock — A generative clock built in p5.js where seconds, minutes, and hours each drive their own looping visual system.
• Tame the Cat — A scripted browser game with chance elements and a state machine controlling a cat character's reactions to player input, built with vanilla JS.
• QuadTree Painter — A generative Mondrian-style quadtree painter built with the Canvas API. Randomized recursive splits produce compositions in a de Stijl palette, with user interaction to trigger new generations.
• API Tool Pitch — A team project: a single-page site pitching an IFTTT-linked assistive tool concept, built collaboratively via VS Code Live Share.

When the container is as interesting as the content

The decision to build the portfolio as a Three.js scene rather than a conventional page came from a genuine question: if the course is about using the web as a creative medium, shouldn't the portfolio demonstrate that same principle? A flat HTML list of links would be accurate but boring. A 3D physics scene where you literally pick up and inspect each project felt more true to the course's spirit.

Building real-time physics and interaction from scratch — without a game engine, without a physics library — meant working through the math directly: velocity, restitution, bounding volume collision. That kind of low-level problem-solving, combined with the design constraints of making it feel playful and usable rather than technically impressive but confusing, is the part of this project I found most satisfying.