Building an Anonymous Pixel-Space Portfolio

Today I built an alternate homepage for this website.

The goal was not to replace the existing homepage. I wanted a separate space where I could explore a much louder visual direction without compromising the quieter main experience.

What started as a minimalist pixel experiment gradually became a complete arcade world set in outer space.

You can explore the result at /pixel.

Starting with an Alternate Route

The first decision was to keep the experiment isolated.

Instead of redesigning the main homepage immediately, I created a new /pixel route. This made it possible to test typography, colors, interactions, responsive behavior, and unusual visual ideas while keeping the original website intact.

The earliest version was still restrained. It used hard borders, simple cards, and a few references to old games. It looked clean, but it did not yet feel like a game world.

The direction became clearer after removing the minimalist constraint:

If the page is inspired by old games, it should feel playful before it feels polished.

From Portfolio to Space Transmission

The visual concept eventually moved away from a familiar retro landscape and into outer space.

This shift solved two problems at once. It gave the page a stronger visual identity, and it allowed me to become less literal about representing myself.

Instead of presenting a portrait, name, and location as the main identity, the page now introduces an anonymous character:

• call sign: NOVA-08
• identity: Unknown Operator
• origin: Unknown Sector
• character: a green pixel alien

The navigation also became part of the fiction. Work became missions, journal entries became logs, and the contact section became an incoming transmission.

The portfolio still contains real work and real ways to contact me. The anonymity is in the presentation, giving the page a character without making the content inaccessible.

Building the Visual Language

The visual system combines the limitations of early games with an intentionally intense color palette.

The foundation includes:

• Press Start 2P for the interface voice
• hard three- and four-pixel borders
• offset shadows without blur
• grid and scanline textures
• animations built with stepped timing
• large typographic statements
• tiny labels that resemble status screens

The colors do not follow a conventional product palette. Each section behaves like a different planet:

• deep black and ultraviolet for the main void
• acid lime for alien signals
• plasma pink for active quests
• cyan for data and communication
• cosmic orange for the journey map
• moon-dust cream for readable surfaces

The result is deliberately inconsistent in mood while remaining consistent in construction. Colors can change dramatically, but borders, shadows, spacing, and typography keep the worlds connected.

Making the Interface Playable

The small control panel in the corner originally looked functional but did not do anything. It now represents real controls.

Visitors can use W, A, S, and D to move between links and press Enter to select one. The active item receives a high-contrast arcade focus state, so the interaction remains visible instead of becoming a hidden keyboard shortcut.

I also added a mini-game called Star Hunt.

The player controls a tiny alien pilot, collects five energy stars, and avoids asteroid blocks. The game supports:

• keyboard and arrow-key movement
• a touch-friendly directional pad
• score and countdown displays
• collision feedback
• persistent high scores
• achievements stored in the browser

The mini-game is intentionally small. Its role is not to compete with the portfolio content, but to make the fictional world feel real.

Responsive Without Losing the Game

Dense retro interfaces can break quickly on smaller screens.

The page therefore changes structure instead of simply shrinking. Navigation moves into two rows, the hero becomes a single column, cards stack vertically, the world map becomes a timeline, and the game cabinet separates the board from its controls.

Touch targets remain at least 44 pixels, focus states stay visible, and longer descriptions use a more readable body typeface instead of forcing every sentence into the pixel font.

The planet decoration at the end of the hero also needed refinement. Its first version crossed through the scrolling ticker and made the layers difficult to understand. The final version is smaller and sits behind a clear horizon, keeping the decoration playful without interrupting the content boundary.

Extracting a Design System

Once the page felt coherent, I translated its visual DNA into a portrait design-system specimen.

The poster documents four parts of the system:

1. chromatic DNA
2. type transmission
3. component lab
4. system signals

Turning the page into a single 9:16 image helped reveal which decisions were reusable and which were only decoration. The strongest rules were not individual colors or shapes, but the relationships between them: hard edges, offset depth, oversized statements, tiny system labels, and bright signals against a dark void.

What I Learned

This experiment reminded me that a portfolio does not always need to behave like a neutral container.

It can also be a playable environment.

The important part is giving visual experimentation a structure. Once the rules for type, borders, motion, spacing, and interaction were clear, the page could become much more colorful without feeling arbitrary.

The main homepage remains unchanged. The pixel-space edition now exists beside it as a different way to enter the same body of work.