How I Built My Project Showcase

Posted on May 14, 2025

When I started designing my portfolio, I knew I wanted my projects to feel alive — not just a list of screenshots or links. That’s why I built my showcase using live iframes embedded directly into the site. Visitors can actually interact with each project in real-time without leaving the page.

The idea came from wanting a more immersive presentation. I took advantage of responsive CSS grid to display each project card, styled each iframe inside a rounded container with subtle hover animations, and added lazy loading for performance.

I also chose to keep the showcase under a dedicated page — projects.html — to separate it from my blog and make navigation clearer. That way, the blog can focus more on ideas, code journaling, and developer insights.

This kind of interactive layout isn’t just flashy — it helps convey skill and attention to UX, which I think sets a stronger impression than static portfolios.

If you’re building a dev portfolio yourself, I definitely recommend going beyond screenshots. Let your code live!