How I Built This Site, and the Easter Eggs Hiding In It

This is a living log, but the short answer is stable: akoum.me is a Next.js portfolio whose optional soundtrack drives a three-layer WebGL visualizer in real time. Low, mid, and high frequencies each have their own shape and color. The phase comes from the track's actual playback position, so the image follows the music instead of running beside it and slowly drifting away.

The system at a glance#

• The site is a portfolio, a listening experience, and a technical demonstration in one surface.
• Air Song is analyzed into low, mid, and high frequency bands; each band gets both continuous energy and a separate transient pulse.
• One fullscreen shader renders all three layers in a single draw call, with geometry constrained to visible safe zones on portrait and landscape screens.
• Sound is opt-in, reduced-motion visitors do not load the WebGL experience, and the page remains complete when audio or WebGL is unavailable.
• The hidden rewards are tied to completed listens, not fake timers or scroll tricks.

Why the site is built like this#

Most engineer portfolios are a résumé with a dark theme. I wanted the opposite: a thing you experience that happens to also tell you what I do. I build software and I make music, so the site had to prove both at once instead of listing them in separate boxes.

The through-line is a single idea: everything you see, hear, and read is a taste decision. The site therefore had to demonstrate taste, not announce that I have it. That is the same argument I make in Taste Is the New 10x, except here the argument is executable.

The background is one song split into three visual strata#

The background is not a pre-rendered video and it is not a waveform with nicer colors. It listens to Air Song through the Web Audio API, reads the live frequency spectrum, and maps it into three overlapping musical bands.

The current analysis is deliberately based on hertz, not fixed FFT-bin numbers. Device sample rates and FFT sizes vary; frequency ranges are the stable language. Roughly:

The ranges overlap at their edges on purpose. Music does not respect three hard buckets, and hard cutoffs made the image twitch whenever energy crossed a boundary. Each band fades in through a weighted edge, measures a mixture of RMS body and peak strength, then passes through separate attack and release envelopes.

There are actually two signals per band. Energy holds a sustained note on screen. Pulse compares a fast follower with a slower baseline so an upward onset can make a short visual hit. Without that distinction, held bass looks like a permanent kick drum; with it, the body can remain while the transient travels outward.

That analysis is frame-rate independent. The smoothing is based on elapsed time, so a display running at 30, 60, or 120 frames per second should tell the same musical story instead of changing the envelope because the hardware changed.

Why the layers stay in sync#

The first versions used animation time as if the visualizer were a music video. That looked synchronized for a moment and then exposed the lie: pausing, tab switches, or a slow device let visual time and audio time separate.

The current shader receives the media element's real playback position every frame. Audio time controls motion; live spectral energy controls morphology. If the track pauses, the visual phase pauses. If playback resumes, the visual field continues from the same musical moment.

One fullscreen plane and one shader draw all three strata. That matters for performance, but it also makes composition easier: the low layer is bounded to the lower-middle safe zone, the mid ribbons stay in the center, and the high filaments have their own upper zone. Aspect ratio cannot push the bass below the screen or let the high layer clip above it. The words keep a calm center because readability is part of the composition, not a constraint added afterward.

What I threw away#

The site looks intentional now because several versions were not.

• An always-on waveform turned the page into a media-player skin.
• Four perspective bass lines looked dramatic but spent too much time at the edge of mobile screens.
• A single "overall loudness" value made every visual layer move together, which is synchronization in the loosest and least musical sense.
• A green palette made the experience feel borrowed from somebody else's cyberpunk mood board.
• A generative soundtrack introduced phantom activity during passages that were supposed to breathe.

The final system uses independent low, mid, and high energy because the ear hears arrangement, not a volume meter. Killing the more obvious versions was most of the design work.

The music behaves like part of the page#

The soundtrack is one of my actual releases, not stock ambience pasted beneath a portfolio. The page treats it as a participant:

• Sound begins only after an explicit choice, at a visible starting volume.
• The music and video sections intentionally pause the score, then resume it from the same position.
• Leaving or hiding the page pauses the experience; returning resumes without pretending time passed in the song.
• The visual renderer stops when the document is hidden and runs only while audio is active or the envelopes are settling.
• Fades are gradual. Nothing should feel like a light switch.

If you want the track without the interface, Air Song is also a free 320 kbps download.

Performance is a design feature#

WebGL can turn a beautiful page into a hot laptop quickly, so the rendering budget is explicit.

Three.js loads after hydration and only for visitors who have not requested reduced motion. The canvas caps device-pixel ratio more aggressively on mobile, targets no more than 60 renders per second on high-refresh displays, and uses one draw call. The render loop sleeps when the track is inactive, stops when the tab is hidden, and recovers cleanly if the WebGL context is lost. Geometry, material, renderer, animation frames, observers, and event listeners are disposed when the component leaves.

If WebGL cannot initialize, CSS provides a quiet fallback. A failed visual effect must never become a failed portfolio.

Accessibility changes the experience without reducing it#

The first question is not "can the browser play audio?" It is "does the visitor want audio?" The invitation offers Play the experience and Continue quietly as equal paths. The sound controls remain available afterward, with mute and volume controls that have real labels.

Visitors who request reduced motion skip the animated WebGL layer. Completion messages are proper modal dialogs with focus management, an Escape path, and a visible way to keep exploring. The rest of the page does not depend on hearing the soundtrack, and the public Air Song download does not depend on triggering an easter egg.

That is not a compliance layer around the art. It is the art behaving like it has a guest.

The easter eggs, precisely#

I am telling you these because half the point was the possibility that someone would find them.

Finish one full play. A small thank-you appears with two honest options: replay the song or keep exploring. No automatic sales pitch.

Finish a second full play. The track rests and a larger invitation appears. Connect with me and I will personally send the Night Session music-making kit when it is ready. The promise is real; delivery is personal rather than a fake instant download of an unfinished product.

The logos know where they came from. The tools under the hero are attached to projects where I used them, rather than serving as an undifferentiated wall of technology badges.

The fourth wall breaks once. A line near the top points out that the page itself is a taste decision. That is not decoration. It is the thesis admitting that it knows it is the thesis.

The checklist I would keep if I rebuilt it tomorrow#

The implementation can change again. These constraints would not:

1. Start from the emotional beat, not the shader.
2. Derive visual time from real media time.
3. Give musically different frequency regions independent behavior.
4. Keep every layer inside a tested screen-space safe zone.
5. Make the silent path complete, not second-class.
6. Stop work when the page is not visible.
7. Treat fallback and cleanup code as part of the visual design.
8. Test the idea on a small phone before polishing it on a large monitor.

Innovation on top, polish underneath. That is the philosophy of this site and of the human-led AI music workflow I use. The log will keep changing, but that boundary is the part I intend to keep.