My Portal · Personal Portal

Why I built it

I wanted a place to lay out the things I’ve made and write down the ideas behind them — and the place itself should carry my taste: restrained, precise, with a bit of tech that won’t age.

The reference locked in quickly: Apple’s event pages — pure black background, one object lit to perfection, oversized type, scroll-driven storytelling.

Three teardowns

The most honest story of this site is its iteration history (v1 through v19):

1. Add first: a Lusion-style particle field, bloom post-processing, galaxy morphs, meteors, shockwaves… effects piled up through v17. Visual impact went up, but the overall vibe started drifting toward “nightclub”.
2. Then learn to subtract: redo it with “what would Apple do” as the yardstick — particles went from colorful noise to a silver-white frosted planet, the whole page kept exactly one color (the Apple-blue orbital ring), meteors and shockwaves deleted. The page instantly went quiet.
3. Finally set the skeleton: the works section went from “card flipping” to continuous editorial layout; the data source moved from the GitHub API to local maintenance — zero external requests at build time, the site no longer depends on any third party staying alive.

Technical highlights

• Astro static site: all content is Markdown (Content Collections + schema validation); adding a work or a post is just committing one .md file
• Three.js particle field: custom shaders (per-particle size and phase), scroll-driven three-state morphing (planet ⇄ galaxy ⇄ wave grid), spring-mass physics plowed open by the pointer
• GSAP + Lenis: inertial smooth scrolling, with every entrance animation degrading gracefully under prefers-reduced-motion
• Zero external requests: no API calls at build time; stats and copy maintained locally

One design rule

The most valuable rule this project distilled: one visual protagonist per page. On the hero it’s the planet; in the works section it’s the type. When an element wants to steal the scene, ask whether it’s the protagonist of this screen — if not, dim it, shrink it, push it back.