How I Built My Portfolio with Next.js and Framer Motion

Why I Rebuilt My Portfolio

I am Abdur Razzak, a Full-Stack Web Developer from Dhaka, Bangladesh. My portfolio at abdur-razzak.site is one of my most-visited projects, and I rebuilt it from scratch to showcase my skills in Next.js, Framer Motion, and MERN stack development. The old version was a simple static page — the new version has smooth animations, a dynamic blog, live project showcase, and a MongoDB-backed contact system.

Tech Stack Decisions

I chose Next.js 14 with the App Router for the frontend — it gives me SSG for fast page loads, excellent SEO out of the box, and a smooth developer experience. For animations, Framer Motion is my go-to: it handles enter/exit animations, scroll-triggered reveals, and drag interactions with a clean declarative API. The backend is Express.js + MongoDB Atlas, deployed separately on Railway, serving blog posts, projects, and contact form submissions.

The Animation System with Framer Motion

I built a reusable AnimateIn component that wraps any section and reveals it with a slide-up + fade animation when it enters the viewport, using Framer Motion's useInView hook. Page transitions use AnimatePresence with a fade animation. The hero section has a staggered animation sequence — name, title, and CTA buttons appear in sequence with 0.15s delays. This creates a polished first impression without being distracting.

Two UI Versions: V1 and V2

My portfolio features two distinct design versions: V1 with a cyan color scheme and V2 with a violet theme. This demonstrates my ability to implement different design languages in the same codebase. Both versions use the same data layer (MongoDB API) but have completely separate component trees and color systems. Users can switch between versions to see my range — a talking point I use in client introductions.

SEO and Performance Optimization

As a React developer Bangladesh searching for international clients, SEO is critical for my portfolio. I implemented dynamic metadata for every page, JSON-LD structured data for my Person profile, and a sitemap. All 135+ blog posts target long-tail keywords relevant to my skills. The site scores 95+ on PageSpeed Insights thanks to Next.js image optimization, static generation, and Vercel's edge CDN.

Key Lessons from Building My Own Portfolio

Building your own portfolio teaches you things client projects don't — you are the client and the developer simultaneously. I learned to prioritize ruthlessly (what actually matters to clients vs what is interesting to build), to write content that targets search intent (not just show off code), and to measure real metrics (traffic, time on site, contact form submissions). My portfolio generates 2-3 inbound client inquiries per month from Upwork and Google combined.