Creative portfolio — 2023
Software Engineer
A motion-led personal portfolio with an unmistakable point of view — the studio's own calling card.
Live- Client
- Studio Hadi (self-initiated)
- Sector
- Creative portfolio
- Role
- Design, Motion & Development
- Year
- 2023
- Timeline
- Self-initiated
Scope
- Art direction
- Motion design
- Build
- Performance
Built with
- Next.js
- React
- GSAP
- WebGL
(01) — The brief
The problem on the table.
Every studio's hardest client is itself. The portfolio had to prove craft and point of view in seconds — the kind of site that makes a prospective client stop scrolling and trust that the work will be different.
The challenge was doing that with motion and ambition without sacrificing speed or turning into a slideshow of effects for their own sake.
(02) — The approach
How I solved it.
I treated motion as language, not decoration: scroll-driven storytelling, considered transitions and micro-interactions that guide attention and reward exploration rather than just spin.
Underneath the showmanship sits engineering discipline — GPU-friendly animation, reduced-motion support and a performance budget — so the site stays fast and respectful while still feeling alive.
(03) — What I built
The pieces that matter.
Scroll-driven storytelling
Motion that paces the narrative and leads the eye, built to feel inevitable rather than busy.
Distinct point of view
A bold editorial identity that reads as a studio with taste, not a template with a theme.
Performance-minded motion
GPU-friendly animation and a reduced-motion fallback so the energy never costs speed or comfort.
Built to convert
Designed to turn a first impression into a conversation — the studio's working calling card.
(04) — The outcome
The portfolio doubles as proof of craft: it sets the studio's tone, demonstrates the motion-led approach end to end, and is the reason a number of clients reached out in the first place.
Next project
Proffessor
A refined, editorial brand presence built for clarity, craft and quiet confidence.
Read the case study→