How I Built My Portfolio Website: A Next.js Developer's Story

Why I Rebuilt My Portfolio

I am Abdur Razzak, a Full-Stack Web Developer based in Dhaka, Bangladesh. My portfolio at abdur-razzak.site has gone through multiple iterations. The latest version is built with Next.js 14, Tailwind CSS, Framer Motion, and a separate Express.js + MongoDB backend. I rebuilt it because my previous version was static — it did not reflect my current skills or make it easy for clients to find me online.

Architecture: Two-Part System

The portfolio is split into two parts: the Next.js frontend (static export deployed to Vercel) and the Express.js backend (deployed to Railway with MongoDB Atlas as the database). This separation lets the frontend deploy to Vercel's global CDN for maximum performance while the backend handles dynamic data: blog posts, project listings, and contact form submissions. The frontend fetches data from the backend API at build time for static generation.

Design System: Two Themes

One of the distinctive features of my portfolio is having two complete UI themes: V1 (cyan color scheme) and V2 (violet color scheme). This demonstrates my ability to implement different design systems in the same codebase. Both versions use the same MongoDB data layer, the same component logic, but completely different visual styling. I built the entire component library with Tailwind CSS, allowing theme switching through CSS variables.

Animations with Framer Motion

Framer Motion handles all animations on the portfolio. The hero section has a staggered entrance animation. Project cards use hover animations with scale and shadow transitions. The blog list uses scroll-triggered reveals using useInView. Page transitions use AnimatePresence. I kept animations subtle and purposeful — they guide attention and make the interface feel polished without being distracting to clients evaluating my work.

SEO Strategy for Client Acquisition

The blog section of my portfolio is my primary SEO tool. By publishing 100+ articles targeting keywords like 'React developer Bangladesh', 'Next.js freelancer', 'MERN stack developer', and 'hire web developer Dhaka', I attract organic search traffic from potential clients. Each post demonstrates my technical depth while also ranking for relevant searches. This passive client acquisition channel complements my active Upwork presence.

Lessons Learned

Building your own portfolio is different from client work — you are simultaneously the developer, the designer, the content writer, and the client. I learned to prioritize ruthlessly: what actually generates client inquiries? The answer was a clear skills section, visible Upwork reviews, and a technical blog. The fancy animations are nice, but clients care about seeing relevant work, reading testimonials, and finding a way to contact me easily. Design for your client's decision-making process, not for your own aesthetic preferences.