Introduction

This portfolio is a personal developer website built from scratch to present my projects, work experience, technical skills, and online presence in one polished place. It is designed to be fast, accessible, and easy to maintain, with content driven by MDX files and a clean component architecture.

Key Features

• Project Showcase: Dedicated pages for each project with rich MDX content, tech stack badges, and image galleries.
• Work Timeline: A clean presentation of professional roles and freelancing experience.
• GitHub & LeetCode Activity: Live stats pulled from my public profiles.
• Blog: MDX-based blog posts for sharing learnings and deep dives.
• Responsive Design: Fully responsive layout powered by Tailwind CSS.
• Theme Switching: Light/dark mode with accent color customization.
• SEO & Performance: Metadata, sitemap, Open Graph images, and optimized images via Next.js.

Technical Insights

• Framework: Next.js 16 with the App Router for server components and static generation.
• Language: TypeScript for type safety across components and data utilities.
• Styling: Tailwind CSS v4 with custom accent theming and dark mode support.
• Content: MDX files for projects, work, and blog posts, parsed with next-mdx-remote.
• Animation: Framer Motion for scroll reveals, hover effects, and page transitions.
• Testing: Vitest and React Testing Library for unit and component tests.

Live Demo

Visit the live site at abdurdev.blog.

Source Code

View the full implementation on GitHub: rahim709/abdur-portfolio.