MiPiBoy Blog

MiPiBoy Blog is a personal technical blog and portfolio built with Next.js, MDX, and Tailwind CSS. It is designed to share frontend engineering knowledge, product thinking, UI/UX insights, and technical experiences in a clean, professional, and readable format.

Live site: https://mipiboy.ir

This project is a personal website and blog platform, not a public open‑source template.

About the blog

This project is centered around one idea: writing high‑quality technical content and presenting it in a strong personal brand experience.

The blog is used to publish:

• frontend tutorials and implementation notes
• React and Next.js technical articles
• CSS and UI engineering insights
• UX and performance best practices
• project case studies and engineering reflections
• personal learning notes and industry observations

The result is a website that feels both like a portfolio and a professional knowledge base.

Why this blog matters

A strong blog is not only about publishing content — it is about showing how a developer thinks, learns, and communicates.

This project helps present:

• technical depth in frontend development
• clarity in explaining complex ideas
• product‑minded thinking and UX awareness
• structured content as a professional signal
• consistency and craftsmanship in visual design

For recruiters and collaborators, this is a powerful signal: the person behind the site can both build polished interfaces and explain them clearly.

Blog focus areas

The content strategy is aligned around the topics that matter most for modern frontend and product work:

• React and Next.js
• TypeScript and frontend architecture
• Tailwind CSS and scalable UI systems
• UI/UX design and interaction quality
• SEO and content structure
• web performance and optimization
• developer experience and practical coding workflows

This makes the blog feel relevant, useful, and credible for both technical readers and hiring teams.

Core features

• Modern personal homepage with strong visual identity
• Blog‑powered content system using MDX
• Structured article pages with metadata and tags
• Support for technical writing and tutorials
• Responsive design for mobile and desktop
• Premium dark/light theme experience
• Smooth motion and interaction design
• SEO‑friendly structure for content visibility
• Portfolio sections that complement the blog

Tech stack

Project structure

What makes this project strong

1. It is a personal brand platform

The site communicates more than just code; it communicates taste, clarity, and professionalism.

2. It showcases writing ability

Technical writing is one of the strongest signals for engineers, especially in frontend, product, and content‑heavy roles.

3. It presents real product thinking

The interface is not only attractive — it is structured to reflect product thinking, composition, UX decisions, and user experience quality.

4. It is built for long‑term growth

This blog can grow into a rich technical archive, portfolio, and personal knowledge base.

Local setup

Requirements

• Node.js 18+
• pnpm

Install and run

git clone https://github.com/MiPiBoy/MiPiBoy-Blog.git
cd MiPiBoy-Blog

pnpm install

pnpm dev

pnpm build

Content model

The blog supports article writing with MDX and frontmatter. A typical post includes fields like:

---
title: "Your Article Title"
description: "A brief description of the article"
date: "2026-08-29"
tags: ["React", "Next.js", "Tutorial"]
featured: true
readTime: "8"
author: "mortezaAghaei"
thumbnail: "/images/example.webp"
dir: "ltr"
---

## Introduction

Your article content here.

This structure is perfect for technical content, tutorials, notes, and case studies.

Author configuration

Author information is managed in the project config:

export const authors: Record<string, Author> = {
  mortezaAghaei: {
    name: "Morteza Aghaei",
    position: "Front-end Developer",
    avatar: "/authors/morteza-aghaei-3d.webp",
  },
};

To use this author in an article:

author: "mortezaAghaei"

Career signal

This project is especially relevant for roles like:

• Front-end Developer
• React Developer
• Next.js Developer
• UI Engineer
• UX‑focused Frontend Developer
• Product‑minded Web Developer

It demonstrates not only coding ability, but also communication, design thinking, and product awareness.

Frequently Asked Questions

Connect

If you are interested in collaboration, hiring, or discussing digital product development:

License

This project is a personal portfolio and blog — it is not an open‑source template. All rights reserved.

Summary

MiPiBoy Blog is a personal technical blog and portfolio built with Next.js, React, TypeScript, Tailwind CSS, and Fumadocs MDX. It is designed to present frontend engineering skills, product thinking, and clear technical communication in a polished, professional format.

The site serves as an effective personal brand platform for recruiters, collaborators, and technical readers who want to understand both the quality of the work and the depth of the thinking behind it.