I Built My Developer Portfolio as a Pixel-Art World

Fatima Zehra Shakeel — Sun, 20 Sep 2026 14:41:18 +0000

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.

DEV Community: Fatima Zehra Shakeel

I Built My Developer Portfolio as a Pixel-Art World

The idea

What I used

What I was trying to solve

Take a look