mehdibha.com is an open-source personal website template built on the Next.js React framework with Tailwind CSS, intended to run a portfolio and a blog from MDX content.
What is mehdibha.com?
mehdibha.com is the public GitHub repository behind a developer's personal website, described in its metadata simply as "My personal website." It is built with Next.js, styled with Tailwind CSS, and uses the MDX format for blog posts so content can include JSX components. The repository also depends on content-collections for managing content files and dotui as its React UI component library. As of the repository metadata, it has earned 248 stars, making it a popular reference for personal site setups.
Key Features
- Next.js framework — The site runs on Next.js, the React meta-framework known for hybrid static and server rendering.
- Tailwind CSS styling — All styles are authored with Tailwind CSS utility classes, enabling rapid custom theming.
- MDX blog engine — Blog posts are written in MDX (Markdown with JSX), so writers can embed interactive React components directly in articles.
- content-collections integration — Content is loaded through content-collections, giving type-safe access to frontmatter and body data.
- dotui component library — The UI is assembled with dotui, a collection of accessible React components.
- Open source and self-hosted — The complete source code is available on GitHub for anyone to fork and deploy their own version.
Who is it for?
- Developers who want a modern personal site with a blog and portfolio can fork this repository and replace the content with their own.
- Technical bloggers who prefer writing in Markdown and want the power to drop React components into their posts will benefit from the MDX setup.
- Job seekers building a personal brand can use it to present projects and articles in a clean, Tailwind-based layout.
Use cases
- Personal portfolio — Display your projects and highlights on a Next.js page with Tailwind styling.
- Technical blog — Publish MDX articles that support code syntax highlighting and embedded demos.
- Starter template — Use the structure as a base for a new Next.js project, borrowing its content pipeline and UI components.
