Case Study: Next.js Client Portfolio Architecture | Alfaz Mahmud Rizve

This technical breakdown contains affiliate links. If you deploy this stack using my links, I earn a commission at no extra cost to you.

By Alfaz Mahmud Rizve | RevOps & Full Stack Automation Architect at whoisalfaz.me

By Alfaz Mahmud Rizve | RevOps & Full Stack Automation Architect

The Problem: The Ceiling of "No-Code"

When approached by Abu Zubayer, an established Customer Service Specialist and English Literature Scholar, his personal brand and professional history were housed on a free Google Sites domain.

While functional, the site was entirely static. It lacked modern aesthetic refinement, and more importantly, it offered zero capability for content expansion. Every time Abu wanted to publish a new scholarly article or update his work history at Genex Infosys or Apollo Imperial Hospitals, he had to manually drag-and-drop text blocks in a rigid, unversioned WYSIWYG editor.

He needed to transition from a digital brochure to an authoritative digital presence.

The Architecture Decision: Next.js App Router + Prisma CMS

The mandate was to build a visually striking, highly performant application that provided the client with complete autonomy over their content without requiring technical knowledge post-handoff.

I selected the Next.js 14 App Router for the frontend to ensure optimal SEO visibility via Server-Side Rendering (SSR) and edge caching.

For the data layer, relying on a headless CMS like Sanity or Contentful would have introduced unnecessary recurring monthly costs for a personal portfolio. Instead, I architected a custom CMS directly into the Next.js application using Prisma ORM backed by a PostgreSQL database.

This approach guarantees data ownership and zero monthly scaling fees.

Technical Blueprint: Immersive Presentation

The UI was designed to feel heavy, premium, and inherently trustworthy.

1. The Hero Component (Hero.tsx)

The initial touchpoint sets the tone. Instead of a standard grid layout, the landing section utilizes framer-motion for staggered, physics-based entrance animations.

// Excerpt from Hero.tsx
<motion.div
  initial={{ opacity: 0, x: -30 }}
  animate={{ opacity: 1, x: 0 }}
  transition={{ duration: 0.8, ease: "easeOut" }}
>
  <h1 className="text-5xl md:text-6xl lg:text-7xl font-serif">
    {profile?.headline || "Elevating Customer Experience through Empathy & Precision."}
  </h1>
</motion.div>

The background is a complex composition of absolute <divs> mapping SVG noise filters over animated, blurred indigo gradients (bg-indigo-800/20 blur-[120px] animate-pulse). This creates a deep, atmospheric aesthetic without the performance penalty of loading large video or image assets.

2. Timeline Architecture (ExperienceTimeline.tsx)

A core requirement was showcasing a rigorous work history. I built a custom vertical timeline component that reads dynamically from the Prisma database.

It maps through the Experience schema, rendering alternating nodes connected by a central gradient spine. This ensures perfectly unified spacing and responsive scaling on mobile devices, which was impossible on the old Google Site.

3. The Custom Content Engine

The most critical delivery was the integrated blog system. The client specifically requested the "freedom to express, write, and grow."

The custom Prisma implementation provides a secure, gated administrative route where the client can draft, format, and publish articles. Because it is deeply integrated into the Next.js App router, publishing an article triggers an instant localized revalidation, pushing the new content to the edge network instantly around the world.

The Client's Verdict

The transition from a Google Site to a proprietary, high-performance ecosystem resulted in immediate professional impact.

"A huge thank you to Alfaz Mahmud Rizve for creating such a dynamic and impressive website for me. It has truly transformed my portfolio into something eye-catching, smart, and professional. I especially loved the customizability and the smooth blog-posting feature — it gives me the freedom to express, write, and grow." — Abu Zubayer, Customer Service Specialist & Scholar

Results & Metrics

• Platform Independence: 100% departure from Google Sites vendor lock-in.
• Content Velocity: The custom Prisma CMS enables the client to publish new scholarly articles in minutes without touching a line of code.
• Brand Authority: The bespoke design language positions the client visually alongside top-tier industry executives.