I Rebuilt My Personal Portal as an Apple Keynote

The starting point: one sentence of requirements

“Build me a personal portal that shows off my GitHub projects.” — that was the entire brief. The first version came together quickly: dark background, a particle sphere, giant typography. Pretty, honestly pretty.

But between “pretty” and “right” lies an entire taste system.

The first detour: treating “cool” as the goal

After seeing lusion.co I understood the feeling I wanted, so I started chasing it: a Three.js particle field, bloom post-processing, galaxy morphs, meteors, click shockwaves… the version number rolled all the way to 17.

Then the user (me) said something fatal: “It feels un-sci-fi somehow. Like a nightclub.”

That sentence was worth a thousand words. It exposed the fundamental problem with piling on effects: effects are additive, but sophistication is subtractive. Colorful noise particles + full-screen bloom + everything moving = every element screaming = no protagonist at all.

Swapping the yardstick: “What would Apple do?”

With the new yardstick, every decision became easy:

• Only one visual protagonist per page → particles went from colorful noise to a silver-white frosted planet, lit like a physical object
• One color for the whole page → the Apple-blue orbital ring; everything else black, white, and gray
• Every effect must carry structural meaning → keep breathing, the orbital ring, scroll morphing; delete the meteors and shockwaves
• Text is content, not decoration → remove the shimmer gradients and the HUD corner labels and coordinate readouts

Looking back at v17 after those changes, it wasn’t “simplified” — it looked like a product for the first time.

There were detours in the middle, too

Not every “more Apple” instinct was right. At one point I made the works section a full-screen card deck that flipped one at a time — and got slapped back with one sentence: “You’ve turned this into a PowerPoint.” The real issue: Apple’s pages flow continuously; there is no discrete ‘flip’ action. The final version is a continuous editorial layout: generous whitespace, hairline rules, content fading in as you scroll, the particle field flowing behind the text the whole way.

Three rules that stuck

1. One protagonist per screen — everything else gets dimmed, shrunk, or pushed back like a supporting actor
2. Motion must carry structural meaning — it either guides the eye or explains a state; anything that’s just showing off gets cut
3. Restraint is a reusable currency — spend color and motion sparingly, and bank the attention you save for the one moment that matters

This site is still iterating, but those three rules aren’t going to change.