Interactive circle portfolio interface

Preview image. Unlock full-res

Interactive circle UI overlay on a cityscape, with fallback message for a portfolio site demo.

Summary

Two slides demonstrating an interactive circle-based UI component. The first overlays animated white circles on a grayscale cityscape background; the second shows a minimal interface with scattered circles and a message about an experimental portfolio site.

Visual description

First slide: a black-and-white photograph of a city rooftop is covered with a grid of large white circles (appears to be interactive hotspots). Top left navigation shows "Archive" and "Social" in small sans-serif type. The circles suggest draggable or clickable interface elements. Second slide: a light gray background with the same scattered white circles. Minimal text in the top left reads "Rory Phia - Don't Contact Me" and below it "Not sure what to do with my website. Try again soon." The layout is sparse and the circles are the dominant visual.

Key takeaway

Using abstract, oversized circles as the primary UI element creates a playful and unconventional portfolio interface. The layering of circles over photography and the combination with witty copy makes the experiment feel intentional and design-forward. Interactive elements need not be obvious buttons or forms.

Reuse notes

Effective for experimental portfolio sites, personal brand pages, or interfaces where playfulness and uniqueness matter more than immediate usability. The scale and placement of circles can anchor a layout without traditional hierarchy. Works well in a carousel or multi-state demo to show the before/after or different states of interaction.

More like this