I wanted to build a portfolio that felt like something you'd actually explore, rather than another page with a photo, skills section, and a list of projects.
So I turned my career into a small pixel-art world.
Different islands represent different parts of my journey, with buildings and locations representing my education, work experience, projects, and other things I've built along the way.
The idea
The first version didn't work.
I originally built a side-scrolling coastal town, but after spending time with it, I realized it wasn't communicating my experience clearly enough. So I scrapped it and started again.
The second version became an island-based map where exploration is part of the experience, while still keeping the actual information accessible.
What I used
- Next.js
- TypeScript
- Tailwind CSS
- PixiJS
- Framer Motion
- Howler
- Zustand
The interesting part wasn't just putting these technologies together. I had to think about how animations, interactions, navigation, audio, and actual portfolio content could coexist without making the site frustrating to use.
What I was trying to solve
A developer portfolio has two competing goals:
Show personality while still making your experience easy to understand.
I wanted someone to be able to explore the world if they wanted to, but also quickly find my experience, projects, skills, and background.
I'm still improving the mobile experience and performance, so feedback is very welcome.
Take a look
Portfolio: https://fatimazehrashakeel.netlify.app/
Story behind it: https://www.linkedin.com/feed/update/urn:li:activity:7507031808652455936
If you build portfolios or interactive web experiences, I'd especially love to hear what you think about the balance between creativity and usability.