Project Overview

Chapter 1: Why I Built It

Before the current portfolio you’re viewing now, I built a highly modern, technically advanced personal portfolio website. I was proud of every part of it, from the animations to the structure, the way the tabs opened, the dark aesthetics, the storytelling… everything felt polished and expressive.

I used it to present myself as a senior full stack engineer. I showcased complex projects like Solana bots, eCommerce platforms, AI tools, and Web3 systems. The site highlighted my international work  across Morocco, Dubai, Europe, and the US. From a design and technical standpoint, it felt like a “10 out of 10” build.

But there was a problem, users didn’t know how to use it.

Chapter 2: The Reality Check

After launching it and linking it everywhere (LinkedIn, email signatures, etc.), I monitored the traffic. I integrated Google Analytics and Microsoft Clarity, and what I saw was clear: people were confused. They didn’t explore much. They didn’t interact with the tabs. Most users bounced early, and many didn’t even realize the sections were clickable.

That’s when it hit me: it doesn’t matter how nice a UI is if people don’t get it.

So I stepped back and accepted that I needed to rebuild, not because the code was bad, but because the UX didn’t serve the user. That realization is why you’re now seeing the portfolio I rebuilt from scratch. This one. The clearer one.

Chapter 3: Tech Stack

That previous portfolio wasn’t just a static website. It was a full-blown Next.js app with animations, carousels, and integrated Web3 tools. Here’s what powered it:

• Frontend Framework: Next.js (React-based, app router)
• Language: TypeScript (strictly typed)
• Styling: Tailwind CSS, custom CSS, PostCSS
• UI Libraries: Radix UI, Framer Motion, Lucide React
• State & Forms: React Hook Form, Zod
• Backend: Next.js API routes (serverless), Node.js
• Integrations: EmailJS (contact), Sonner (notifications), Recharts, Joyride (UX help)
• Analytics: Google Analytics, Microsoft Clarity
• Linting/Tooling: ESLint, Autoprefixer, tsconfig, etc.

Chapter 4: Structure and Features

This site was designed with a modular file structure and clean scalability:

• app/: All main routes (about, projects, contact, etc.)
• components/: Reusable UI elements
• lib/, hooks/, scripts/: Custom logic, form logic
• public/: Static media (videos, thumbnails, icons)
• Contact form integration with mail delivery
• Project modals with live previews, full tech stack breakdowns
• Responsive layout, dark mode, and animation layer via Framer Motion
• Strong SEO practices and header optimization

Chapter 5: Why I Abandoned It

It wasn’t because it lacked quality, it had that. It wasn’t because the design wasn’t impressive it definitely was. The problem was that it was too clever for its own good.

I overdesigned it.

The interactions that I thought were “clean and minimal” turned out to be confusing. The sections weren’t obvious. People didn’t know where to click. The project modals were too hidden maybe. Even with tutorials and smooth transitions, users didn’t engage the way I expected.

So despite its elegance and complexity, I realized it wasn’t working. That’s why I scrapped it and started fresh. I now prioritize clarity, speed, and accessibility over clever transitions and dark-themed elegance. It was a tough call, but the right one :/ .

Final Words

My old portfolio was a reflection of my capabilities as a developer and designer. It taught me how to push the limits of Next.js, Tailwind, and UI libraries but more importantly, it taught me about users.

If people don’t understand how to use what you build, it doesn’t matter how advanced it is.

I still look at that project as a win  not because it stayed live, but because it helped me evolve. That’s what being a developer is really about.