An Open Source Modern Developer Portfolio Built with Next.js

In today’s competitive developer landscape, a strong personal website is more than just a digital résumé — it’s your technical identity.

That’s why I built and open-sourced Modern — Personal Website, a modern, fully responsive portfolio powered by Next.js App Router and TypeScript, designed for developers who want a clean, scalable, and production-ready foundation for their personal brand.

This project is completely open source and free for anyone to use, customize, and deploy.

Live Demo

• Portfolio: https://mehedi-h.vercel.app
• Source Code: https://github.com/mehedi-hasan1102/Open-Source-Modern-Developer-Portfolio

Demo Video

Watch a walkthrough of the portfolio on YouTube:

Why I Built This

Most portfolio templates online either:

• Feel outdated
• Lack proper architecture
• Don’t use modern Next.js patterns
• Or are overly complex to customize

I wanted to create something that:

• Uses modern Next.js App Router
• Is fully typed with TypeScript
• Has clean architecture
• Includes real-world production patterns
• Is lightweight yet extensible
• Is beginner-friendly to modify

This portfolio is structured the way production applications are structured — not just visually attractive, but architecturally sound.

Tech Stack

Frontend Core

• Next.js (App Router)
• TypeScript
• TailwindCSS
• DaisyUI
• Framer Motion

Tools & Integrations

• GitHub API (for contribution visualization)
• Local Markdown / MDX blog system
• Vercel for hosting and CI/CD

Core Features

Modern Architecture (Next.js App Router)

The project leverages the App Router pattern, enabling:

• Nested layouts
• Server & Client Components
• Streaming & performance improvements
• Clean route organization

This ensures long-term scalability.

Type-Safe Codebase

Everything is written in TypeScript to ensure:

• Better Developer Experience (DX)
• Fewer runtime errors
• Safer refactoring
• Strong component contracts

Dynamic Projects Section

The projects section is fully data-driven.

You can easily showcase:

• MERN stack projects
• Frontend applications
• Full-stack systems
• Case studies

Updating projects requires modifying structured data — no UI rewrites needed.

Blog System with Markdown / MDX

The portfolio includes a centralized blog system powered by MDX.

You can:

• Write technical articles
• Publish tutorials
• Add custom React components inside articles
• Organize posts cleanly inside the /data directory

This makes the portfolio more than a showcase — it becomes a publishing platform.

GitHub Contribution Calendar

A GitHub contribution graph visualizes coding consistency using the GitHub API.

This adds transparency and strengthens credibility when recruiters or clients review your profile.

Theme Switcher (Abyss / Lemonade)

Using DaisyUI theme utilities, users can toggle between:

• Dark Mode (Abyss)
• Light Mode (Lemonade)

Theme state is managed with clean, reusable logic.

Demo Authentication Context

The project includes a lightweight authentication context layer to:

• Simulate login/logout flows
• Experiment with protected routes
• Test gated UI components

This is ideal for developers learning route protection in Next.js without implementing a full authentication backend.

Fully Responsive Design

The layout is optimized across:

• Mobile
• Tablet
• Desktop
• Large displays

The UI maintains spacing, typography balance, and structural integrity on all devices.

Project Structure

├── app/                # Next.js App Router pages
├── components/         # Reusable UI components
├── public/             # Static assets
├── data/               # Blog posts & structured JSON
├── hooks/              # Custom React hooks
├── context/            # Demo authentication context
└── styles/             # Global styling and configuration

The architecture follows scalable frontend engineering principles and separation of concerns.

Installation & Setup

Clone the repository:

git clone https://github.com/mehedi-hasan1102/m-hasan.vercel.app
cd m-hasan.vercel.app
pnpm install
pnpm run dev

Then open http://localhost:3000 in your browser.

You can deploy instantly using Vercel or your preferred hosting platform.

Who Is This For?

This open source portfolio is ideal for:

• Beginner developers building their first professional portfolio
• MERN stack developers
• Frontend engineers
• Students preparing for internships
• Developers transitioning into full-stack roles
• Anyone wanting a modern, clean portfolio foundation

Open Source & Free to Use

This project is licensed under the MIT License.

You are free to:

• Fork it
• Modify it
• Use it commercially
• Customize it for clients
• Extend and improve it

Attribution is appreciated but not required.