MEHDI.
RETURN_TO_INDEX

Building a System-Driven Portfolio

2 min read
#architecture#design#nextjs

Redefining the Developer Portfolio

Most developer portfolios fall into the exact same trap: a friendly photo on the left, a "Hi, I'm a fullstack developer" headline on the right, and a soft, rounded bento grid below.

While functional, it's completely forgettable.

The Anti-Safe Harbor Approach

For this iteration of my portfolio, I established strict constraints:

  1. Geometry: Only 0px or 2px border radiuses.
  2. Palette: True black (#0f1110) and Acid Green (#b2fc3a). No safe "fintech blue".
  3. Typography: Massive, imposing display fonts for headers contrasted against utilitarian monospace fonts for data.

The Stack

The site is statically generated using Next.js 15 (App Router) and styled with pure Tailwind CSS. I explicitly avoided UI libraries like shadcn/ui to force myself to build custom primitives that match the brutalist aesthetic.

// Custom button primitive enforcing sharp geometry
const variants = {
  primary: "bg-accent text-background hover:bg-accent-hover rounded-none border border-accent",
  outline: "border border-border bg-transparent hover:border-accent hover:text-accent rounded-none",
}

"If my layout structure is predictable, I have failed."

This constraint led to the complete abandonment of the standard navigation bar, replaced instead by a dynamic Framer Motion spring layout.

Next Steps

I'll be using this space to document technical experiments, homelab server configurations, and deep-dives into React rendering architectures.