Bringing my portfolio to life

When I started designing my portfolio, I didn’t want it to feel like a brochure. I wanted it to feel like a playground, a space where every corner sparks curiosity, and maybe even a little delight. I wanted everything on this site to come together to create something that feels unmistakably me.

‍

Before diving into the behind-the-scenes and the tools I used, I need to give credit where it’s due. Big thanks to Josh W. Comeau and Odubu Studio, their interactive work inspired me to explore and build my own.

‍

Here’s what I’ll cover in this article:

• Why I chose Webflow
• How I integrated the 2D physics engine Matter.js
• Building the interactive like buttons for this blog

Why I Chose Webflow

From the start, I wanted full creative freedom without the constraints of traditional front-end development. Webflow gave me exactly that: a visual playground with clean code output.

‍

I’ve spent a lot of time working with Webflow and know its ins and outs, which really sped up my build process. What I appreciate the most is its hosting feature, that can also be a downside for others, but the convenience of built-in preproduction, production environments, and one-click deployment is a game-changer compared to other no-code tools.

‍

What I loved about using Webflow:

• The visual builder: The ability to fully build a responsive page in just a few minutes is incredibly powerful.
• CMS collections: Not too complex, not too limited, Webflow’s CMS simply covers all my needs.
• Interactions & animations: Webflow’s animation tool make it is so easy to create smooth animations, feels like cheating.
• Production & staging environments: Webflow’s built-in hosting makes deploying to production or creating a staging version one click away.

The 2D physics engine : Matter.js

The centerpiece of my homepage is an interactive 2D scene that responds to user interactions, my goal was to make the hero section truly captivating.

‍

To bring these animations to life, I used Matter.js, a powerful 2D physics engine that simulates behaviors like gravity, collisions, and elasticity.

I started by creating SVG assets, which I then process using Poly Decomp and Path Seg to break them down into simple shapes that Matter.js can understand and animate. This approach allowed me to craft custom, dynamic objects that naturally interact with each others and with user inputs. I later reused this technique to build the interactive animation on my About page.

‍

Thanks to its lightweight size, solid performance, and impressive flexibility, Matter.js is a tool I’ll definitely keep using in future projects.

‍

What I loved about using matter.js:

• Easy to setup: Straightforward and easy to understand, once you’ve created an animation you can easily reuse it to quickly build new ones.
• The tool’s flexibility: This engine gives you full creative control over how objects behave and interact. I was even able to create a custom gravity effect that responds to page scrolling !
• Lightweight and high-performing: Matter.js consistently delivered smooth animations, with minimal performance impact.
• Actively supported: Active community, solid documentation, and regular updates made working with it a great experience.

Building the interactive like buttons

I wanted bring interactivity right down to my articles, so I designed a custom interactive like system that gives immediate, satisfying feedback when clicked.

‍

Each time you hit the like button the counter smoothly increments, and a small animated burst appears around the icon to reward your action. I built it entirely custom using JS and a Firebase database to store and sync the like counts across all visitors and devices in real time.

‍

To prevent spamming, I added a limit based on the user's IP address. For privacy and security, I also hashed each IP before storing it. As I write this, I haven’t fully implemented the system yet, but hopefully by the time you’re reading this, it’s live and you can try it out yourself!

Wrapping it up

Bringing this website to life has been an amazing journey of experiments, trials, and plenty of errors. Alongside showcasing my work, my main goal for this blog is to share quick-win articles that can help or inspire others to build their own projects.

‍

Thanks for stopping by. See you around! ✌️