Portfolio Achievement System

Most developer portfolios are designed to be browsed. Visitors look through a few projects, read a case study, and perhaps get in touch. I wanted to give people a reason to explore further.

What started as a few hidden Easter eggs gradually evolved into a persistent, event-driven achievement system. Visitors can unlock achievements by reading case studies, discovering hidden interactions, experimenting with developer tools, and even connecting to a separate SSH-based portfolio. The goal was to reward curiosity without interrupting the normal browsing experience.

Rather than implementing achievement checks independently across React components, I built a centralized, event-driven engine. A declarative registry defines each achievement's identifier, metadata, rarity, and unlock requirements, while application events report relevant interactions to the engine.

This separation keeps achievement evaluation independent from its presentation. Reading a case study, activating the Konami code, discovering a hidden route, or clicking a particular link can all use the same underlying mechanism.

The engine handles unlocking, partial progress, persistence, and notifications consistently. Achievements appear in a dedicated drawer, with undiscovered challenges represented by cryptic hints rather than revealing their exact requirements.

The final completionist achievement, Touch Grass., dynamically evaluates the other achievements, so introducing a new challenge doesn't require manually updating a separate completion checklist.

Achievement progress is stored in localStorage, allowing visitors to return later without losing previously unlocked rewards. The engine restores persisted state during initialization and maintains partial progress for achievements that require more than one interaction.

Some achievements accumulate activity over time. No Life, for example, tracks time spent with the browser tab visible, while Lore Master requires reading every available case study.

Persisting progress client-side avoids introducing user accounts or a dedicated achievement backend. Visitors can participate without registering or signing in.

However, this also means the stored data cannot be considered trustworthy. The browser belongs to the visitor, and anything persisted there can be inspected, modified, or deleted. That limitation led to one of the more entertaining parts of the implementation.

Because achievement progress is stored in the browser, visitors can inspect and manipulate it through developer tools. Instead of trying to prevent every possible modification, I turned casual tampering into another hidden achievement: Cheater, Cheater!

The persistence layer uses SHA-256 checksums to detect unexpected changes to stored progress. Validation occurs when data is restored and at relevant browser lifecycle events, including returning to the tab.

This is deliberately not a security boundary. Since both the data and checksum exist client-side, a determined visitor can modify or bypass them. The purpose is to recognize simple tampering while avoiding false positives caused by legitimate state changes.

The result is an integrity mechanism that exists largely to reward people for attempting to bypass an achievement system that awards imaginary trophies.

Terminally Online is an achievement that requires visitors to connect to a separate SSH-based version of my portfolio, built in Go using Wish, Bubble Tea, and Lip Gloss.

The challenge was associating a browser visitor with a successful SSH session without introducing accounts, authentication, or an additional identity service.

The website generates a short random token and embeds it into the username of the SSH command copied by the visitor. When the Go application receives a successful interactive connection with a recognized token-bearing username, it hashes the token and records the result in the shared SQLite database.

Next.js can then check for the corresponding record and unlock the achievement. Visitors connecting to the SSH portfolio normally, without a token, retain full access.

The mechanism is deliberately lightweight. The token is a correlation identifier, not an authentication credential, and exists solely to confirm a low-stakes achievement.

My original solution for Terminally Online involved matching browser and SSH visitors through hashed IP addresses stored in SQLite.

The approach seemed reasonable until the network environment got involved. The website operates behind Cloudflare, while the SSH service is accessed separately. A browser could connect over IPv6 while the SSH client used IPv4, producing entirely different addresses for the same visitor.

Hashing the addresses did nothing to solve the mismatch.

I explored ways to work around the problem, but each approach introduced more complexity into a feature that was supposed to be a small Easter egg.

The eventual solution was almost embarrassingly simple: SSH already supports usernames. Encoding a short correlation token in the username eliminated the dependency on IP addresses entirely.

It was a useful reminder that simplifying the problem is often more effective than engineering around a flawed assumption.

Completing every other achievement unlocks Touch Grass., the final achievement in the system.

Rather than displaying a normal notification, I built a full-screen Star Wars-inspired opening crawl featuring a starfield, perspective-scrolling text, and a dramatic soundtrack.

The cinematic recounts the visitor's journey through the portfolio while repeatedly questioning why they have spent so much time doing any of it.

The animation required more attention than expected. The initial implementation moved the text through the readable area too quickly, then spent an excessive amount of time letting it disappear into the distance. I adjusted the perspective and travel calculations so the text remained readable for most of the sequence.

The finale can be skipped or replayed without affecting achievement progress. Once completed, it reveals the ultimate reward.

A color scheme and a cat.

What started as a few Easter eggs became a surprisingly useful exercise in software architecture, browser state management, and communication between applications.

The centralized achievement engine helped keep features extensible without tying their logic to individual components. Client-side persistence required a realistic understanding of integrity and trust boundaries. The SSH integration pushed me to solve a cross-application correlation problem without introducing unnecessary authentication infrastructure.

The biggest lesson came from the failed IP-based approach. It was technically interesting, but depended on assumptions about network behavior that did not hold in practice. Using SSH usernames produced a simpler and more reliable solution with fewer moving parts.

More importantly, the project reminded me why I enjoy building personal software in the first place. Not every feature needs a business justification. Sometimes the point is to experiment, solve interesting problems, and make something unexpectedly fun.

Will most visitors ever unlock the finale? Probably not.

But the entire system is there for anyone curious enough to find it.