IN PROGRESS

yashikabaan.com

Designed and built this site as a terminal/retro-hardware-themed alternative to a résumé, with a real Matter.js physics simulation, GSAP-driven carousels, and a from-scratch mobile redesign rather than a shrunk-down desktop layout.

Sole designer & engineer · 2026 – ongoing

Next.jsTypeScriptTailwind CSS v4GSAPMatter.js

[PROBLEM]

A résumé and a LinkedIn profile compress a person into a list of bullet points. I wanted something that showed both engineering craft and a bit of personality, without turning into a gimmick that gets in the way of the actual work.

[APPROACH]

Built the whole thing as a small, hand-written CMS (all real copy lives in one data.ts file) rendered through a consistent design system — a four-color accent cycle, a shared Card/Chassis component set, and a terminal/retro-hardware visual language applied consistently rather than per-page.

[TECHNICAL_DECISIONS]

→A real Matter.js physics simulation for the footer's "TV wall" (draggable, gravity-driven rigid bodies) instead of a static image grid.
→A shared useTiltShine hook for the 3D tilt-on-hover interaction, reused across seven different widget types instead of duplicated per component.
→Mobile handled as its own deliberate layout (collapsible nav, swipeable carousels, a trimmed TV set, single-column timeline) rather than the desktop layout scaled down.

[CHALLENGES]

→Designing for yourself means too many opinions and no external deadline — the annotation/grid-guide system went through a full add-then-remove cycle after it turned out to add more visual noise than clarity.
→Matter.js's own Mouse module quietly swallows unrelated browser behavior (wheel-scroll, tap-to-click) via internal preventDefault calls, which took real debugging to track down on both counts.

[RESULT]

A fast, fully responsive site with no horizontal scroll on any breakpoint, real hover/tilt interactions instead of generic card shadows, and a content model that keeps every real update to a single data file.

[WHAT_I_LEARNED]

How much of a "nice interaction" is actually restraint — the shine/glare hover effects and the dashed-line annotation system both looked technically impressive and were still the right call to cut once they were tested against actual readability.

[NEXT_STEPS]

→Add finished product work.
→Write complete case studies for real projects.
→Keep the interface focused on the work.

← Back to projects