The original site was hand-coded as a browser experience rather than built from a portfolio template.
PROJECT 13 / INTERACTIVE / WEB
CHE PORTALS
A coded portfolio disguised as a retro art gallery. Instead of navigating a conventional grid of projects, visitors move through a room, discover clickable artworks, open media inside the environment and use a portal to enter or exit the experience.
SEE HOW IT WORKS01 / PREMISE
A portfolio you move through.
Che Portals was built around a simple rejection of the standard portfolio page. I wanted the work to exist inside a place rather than inside a stack of thumbnails. The interface became a stylized art gallery where individual pieces on the walls function as navigation and the room itself becomes part of the presentation.
That small shift turns web browsing into a lightweight game-like experience. The visitor has to look around, recognize interactive regions and choose what to open. The projects are still ordinary web content underneath, but spatial composition, hidden click targets and portal-based navigation make the act of finding them feel closer to exploring an environment.
02 / SPATIAL INTERFACE
Turn perspective into interface geometry.
The gallery is a flat browser composition, but its interaction layer follows the perspective of the artwork inside the scene. Instead of relying only on rectangular buttons, I mapped invisible SVG regions over the room using rectangles, polygons and custom paths. Angled works can therefore have angled clickable areas that better match what the visitor actually sees.
This is where the project becomes more than a themed image map. The hit regions were authored around the visual architecture of the gallery, including trapezoidal and irregular shapes. On hover those zones can become faintly visible, giving the user just enough feedback to understand that the artwork itself is interactive.
01 / 04
INTERACTION 01
SCENE / GALLERY
A single illustrated room establishes the spatial metaphor. Projects appear as objects mounted inside the environment rather than detached navigation cards.
03 / MEDIA OBJECTS
The wall becomes the project browser.
Clicking an artwork opens its content as an overlay rather than taking the visitor out of the gallery. The original build mixes still images, locally hosted video and embedded Vimeo media, allowing different kinds of portfolio material to share one interaction model.
The popups are created and controlled in JavaScript. Individual pieces can carry their own image, label or video while using shared open-and-close behavior. Video playback is also managed as part of the interaction so media can pause or reset when the visitor exits a piece instead of continuing invisibly in the background.
GALLERY / MEDIA
▶
ENTER
04 / THE PORTAL
PORTAL / NAVIGATION
↗
ENTER
A doorway instead of a menu item.
The portal is the most important conceptual piece in the project. The entry page presents a doorway as an actual clickable object. Entering it loads the gallery, and a corresponding doorway inside the gallery returns the visitor to the exterior scene. Navigation is represented as crossing a threshold.
That idea predates the current Neon Doorway language, but the connection is clear: a website can contain places that are entered rather than pages that are merely selected. The portal also suggests a future use beyond conventional navigation, where doorways can function as backdoor access to hidden work, alternate spaces, unreleased material or experiences that only become visible when a visitor finds the correct threshold.
05 / BUILD WORKFLOW
Build a world from ordinary browser primitives.
The project is useful precisely because the technology is straightforward. HTML establishes the pages and media containers. SVG creates a coordinate system over the artwork. CSS controls hover feedback, overlays and responsive presentation. JavaScript turns those regions into interactive objects and manages the media that appears when they are selected.
The experience therefore demonstrates an early version of a workflow that continues into later Neon Doorway work: begin with a visual world, identify where interaction belongs inside it, map those interactions to browser behavior, and let the interface disappear into the environment as much as possible.
An SVG coordinate layer sits over the gallery artwork so the visual scene can become an interface.
Different SVG geometries follow artwork perspective, including angled and irregular clickable regions.
Click handlers connect individual gallery objects to overlays, media and navigation behavior.
Multiple content types are surfaced through a shared gallery interaction instead of separate project pages.
Open, close, pause and reset behavior keeps interactive media tied to the object the visitor selected.
06 / EXPERIENCE FLOW
From arrival to discovery to exit.
Che Portals is small enough that its entire interaction model can be understood as a sequence. The visitor arrives outside, identifies a doorway, enters the gallery, discovers work by moving attention across the walls, opens individual pieces, closes them and eventually crosses back through the portal.
That sequence is what makes the portfolio feel lightly gamified. There is no score or explicit game system. The game-like quality comes from discovery, spatial memory and the satisfaction of understanding what parts of the environment respond.
FLOW 01
ARRIVE
EXTERIOR WORLDThe visitor begins outside the gallery. The scene acts as a visual landing page with a doorway embedded directly into the environment.
07 / PRECURSOR
The doorway was already becoming the system.
In retrospect, Che Portals contains an early version of the idea that eventually became central to Neon Doorway. The site is not immersive because it uses advanced 3D technology. It is immersive because navigation is treated as movement between authored spaces and because media is embedded into the world rather than laid over it as conventional interface chrome.
That makes the project useful as a historical artifact in the portfolio. It shows the conceptual through-line before the later AR, spatial web and world-building work: websites can be destinations, thresholds can be interfaces, and a doorway can be both a visual object and a functional way into another layer of content.
08 / LIVE EXPERIENCE
Enter the original experience.
Che Portals has been relaunched so the original interaction can be experienced directly. The roughness is part of the value: it preserves an earlier web-building language while making the connection to the later Neon Doorway approach visible.
The live build lets the case study end where the project itself begins. Read about the hitboxes, overlays and portal logic here, then cross into the original site and experience those decisions as they were intended to work.
CHE PORTALS / LIVE
↗
ENTER
LIVE EXPERIENCE
Enter the original retro portfolio.
EXPERIENCE CHE PORTALS