bylx.dev — Case Study

• HTML
• CSS
• Vanilla JS
• PHP

The question

Developer portfolios all look the same: hero, grid, footer. Mine had to prove something instead of claiming it. Could a pixel-art desk — where Rio de Janeiro and Lisbon share a window — carry an entire portfolio, built with nothing but the fundamentals?

What I built

An interactive scene where every object does what it looks like it should: the camera opens the gallery, the phone opens the contact form, the MP3 player opens a working player, the mouse runs from your cursor, and the keyboard lights up as you type.

• Pixel-art parallax hero on a 64×64 grid with layered PNGs
• Object hotspots with sprite-sheet and steps() hover animations
• Custom pixel cursor with sakura-petal trail
• Working MP3 player with a 17-track lo-fi playlist
• PHP contact form with honeypot and graceful non-JS fallback
• Keyboard-accessible case-study modals

Technical decisions

Vanilla ES modules — parallax, cursor, audio, modals and forms are isolated modules with a single init each. There is nothing to hydrate, so a framework would only add weight.

Coordinate-driven scene — layers map pixel-grid references to CSS custom properties; the whole parallax is one rAF listener writing --move-x and --move-y.

CSS partials with explicit import order — tokens → base → cursor → hero → sections → responsive. The design system lives in :root.

steps() everywhere — easing is quantised so motion stays pixel-crisp instead of smoothly un-retro.

What I learned

Constraints are a design system. Refusing frameworks forced clean module boundaries; refusing smooth easing forced intentional animation. And accessibility inside a fully custom scene — focus states, aria labels, a form that works without JS — is where the real engineering happened.