Building My Personal Portfolio: A Journey in Code
6 min readBy Sidahmed Frioui

Building My Personal Portfolio: A Journey in Code

How I designed and developed my personal portfolio from scratch using Next.js, Tailwind CSS, and my signature blue-purple gradients.

#Portfolio#Next.js#TailwindCSS#Frontend#Web Development

Creating a personal portfolio is more than just putting your projects online — it’s a statement of who you are as a developer. I wanted mine to reflect not only my technical skills but also my style and personality.

Why I Built It

I needed a portfolio that:

  • Showcases my projects clearly.
  • Feels modern and interactive.
  • Uses clean, maintainable code.
  • Highlights my frontend skills with React, Next.js, and Tailwind CSS.

Instead of following a template blindly, I designed every component with purpose: gradients, animations, and hover effects that give it life.

Technical Stack

  • Next.js for server-side rendering and fast performance.
  • React for modular, reusable components.
  • Tailwind CSS for rapid styling and gradient control.
  • TypeScript to prevent stupid bugs (seriously, don’t skip TS).

Lessons Learned

Building my portfolio taught me:

  • How to structure a full React/Next.js project from scratch.
  • How to integrate dynamic content like a blog with Markdown and remark.
  • How to design a modern UI while keeping the code maintainable.
  • That small touches, like gradient hover effects and animated orbs, can make a huge difference.

Next Steps

I’m planning to add:

  • A projects filter to sort by skill, technology, or type.
  • Dark/light mode toggle for user preference.
  • More personal blog posts about coding, tech, and design.

Building this portfolio isn’t the end; it’s just the start of sharing my journey as a software engineer. If you’re reading this, thanks for checking it out — there’s much more to come.