Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/muzaffar640/commitpress

This is a full-stack system where you can have a blog feature in your portfolio without needing a proper backend with a database.
https://github.com/muzaffar640/commitpress

blog blogging-platform freelancer mdx nextjs nextjs-template open-source portfolio

Last synced: 3 months ago
JSON representation

This is a full-stack system where you can have a blog feature in your portfolio without needing a proper backend with a database.

Awesome Lists containing this project

README 

          
# 🚀 CommitPress



> **The complete portfolio + blog system.** Beautiful portfolio UI with database-free blogging. Perfect for developers, designers, writers, and any professional. **Now with AI-powered formatting.**



**[🔗 View on GitHub](https://github.com/muzaffar640/commitpress)** • **[📖 Live Demo](https://commitpress.vercel.app)** • **[🚀 Deploy Now](https://vercel.com/new/clone?repository-url=https://github.com/muzaffar640/commitpress)**



[![Next.js](https://img.shields.io/badge/Next.js-15-black?logo=next.js)](https://nextjs.org/)

[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)](https://www.typescriptlang.org/)

[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3-38B2AC?logo=tailwind-css)](https://tailwindcss.com/)

[![MDX](https://img.shields.io/badge/MDX-3-1C1E24?logo=mdx)](https://mdxjs.com/)

[![AI-Powered](https://img.shields.io/badge/AI-Powered-brightgreen?logo=cursor)](https://cursor.sh/)



https://github.com/user-attachments/assets/969c4d33-aaf5-4f12-993a-dbfe72e4fb4b



## 🎯 What You Get



**Complete Professional Portfolio + Blog System:**



- 🎨 **Stunning Portfolio UI** - Hero, About, Experience, Skills sections

- 📝 **Database-Free Blog** - Write in Markdown, publish with Git

- 🤖 **AI-Powered Content** - Automatic formatting with Cursor

- 📱 **Fully Responsive** - Perfect on all devices

- ⚡ **Lightning Fast** - Static generation for optimal performance

- 🔍 **SEO Optimized** - Built-in meta tags and social sharing



## 👥 Perfect For



- **Software Engineers** - Showcase projects and share technical knowledge

- **Designers** - Display portfolio work and design insights

- **Writers & Content Creators** - Professional presence with easy blogging

- **Consultants & Freelancers** - Establish credibility and thought leadership

- **Students & Job Seekers** - Stand out with a professional online presence

- **Any Professional** - Clean, modern portfolio with integrated blogging



## 🤔 The Problem



Traditional solutions are **unnecessarily complex**:



- 🗄️ Database setup and management

- 🔐 Admin panels and authentication

- 💰 Database hosting costs

- 🐛 Complex deployment pipelines

- 📝 Separate portfolio and blog systems

- 🎨 Limited design customization



## ✨ The Solution



**What if your portfolio + blog could work like your code?**



1. ✍️ Write your content in Markdown (`.mdx`)

2. 📝 Commit to git

3. 🚀 Push to deploy

4. ✅ **That's it!**



## 🎯 Why This Approach Wins



| Traditional Setup      | CommitPress     |

| ---------------------- | --------------- |

| Portfolio + Blog + CMS | Single Solution |

| Database + Admin Panel | Just Git        |

| Complex deployment     | Simple push     |

| Hosting costs          | Static hosting  |

| Data backups           | Git history     |

| Limited customization  | Full control    |



## 🚀 Quick Start



### 1. Clone & Install



```bash

git clone https://github.com/muzaffar640/commitpress.git

cd commitpress

npm install

```



### 2. Run Development Server



```bash

npm run dev

```



Open [http://localhost:3000](http://localhost:3000) to see your portfolio + blog.



### 3. Customize Your Portfolio



Update the portfolio sections in the components:



- **Hero Section**: `src/components/Hero.tsx` - Your name, title, and intro

- **About Section**: `src/components/About.tsx` - Your story and background

- **Experience**: `src/components/ExperienceAndSkills.tsx` - Work history and skills

- **Contact**: Update social links and contact information



### 4. Write Your First Blog Post



Create a new file in `src/app/content/my-first-post.mdx`:



```mdx

---

title: "My First CommitPress Post"

date: "2024-01-15"

author: "Your Name"

coverImage: "/images/my-cover.jpg"

tags: ["CommitPress", "portfolio", "professional"]

excerpt: "This is how easy it is to publish without a database!"

---



# Hello World!



This post lives in a `.mdx` file. When I commit and push this file,

it automatically becomes a live blog post. No database required!



## What I Love About CommitPress:



- ✅ Beautiful portfolio design

- ✅ Integrated blog functionality

- ✅ Syntax highlighting for code

- ✅ SEO optimization

- ✅ Professional appearance

- ✅ Easy to maintain

```



### 5. Publish Your Content



```bash

git add .

git commit -m "Add: Updated portfolio and first blog post"

git push origin main

```



**🎉 Your portfolio + blog is now live!**



## 🤖 AI-Powered Writing with Cursor



This project includes **Cursor AI rules** that automatically format content into proper MDX structure.



### Writing with AI Assistance



1. **Open Cursor** with this project

2. **Create a new `.mdx` file** in `src/app/content/`

3. **Paste your raw content** (from any source)

4. **Ask Cursor AI** to format it as a blog post

5. **Commit and publish**



### What the AI Rules Do



- ✅ **Auto-format** raw text into proper MDX structure

- ✅ **Generate frontmatter** with proper metadata

- ✅ **Add syntax highlighting** for code blocks

- ✅ **Structure headings** with semantic hierarchy

- ✅ **Optimize for SEO** and accessibility

- ✅ **Maintain consistency** across all posts



### Content Migration Made Easy



Got content from Medium, LinkedIn articles, or anywhere else? Just paste it:



```bash

# 1. Create new post file

touch src/app/content/my-migrated-post.mdx



# 2. Open in Cursor and paste your content

# 3. Ask AI to format it as a blog post

# 4. Commit and publish

git add . && git commit -m "Add: Migrated post" && git push

```



### AI Workflow Comparison



**Traditional:**



- Use separate portfolio builder

- Set up blog with database

- Manually format content

- Manage multiple platforms



**AI-Powered CommitPress:**



- One beautiful system for everything

- Paste raw content anywhere

- AI formats everything automatically

- Single Git workflow



## 📁 Project Structure



```

src/

├── app/

│   ├── content/          # 📝 Your blog posts (MDX files)

│   │   ├── my-post.mdx

│   │   └── another-post.mdx

│   ├── blog/

│   │   ├── page.tsx      # 📋 Blog listing page

│   │   └── [slug]/       # 📄 Individual post pages

│   └── globals.css

├── components/           # 🧩 Reusable components

│   ├── Hero.tsx         # 🌟 Hero section

│   ├── About.tsx        # 👤 About section

│   ├── ExperienceAndSkills.tsx  # 💼 Experience & skills

│   ├── Blog/            # 📝 Blog components

│   └── ui/              # 🎨 UI components

├── utils/

│   └── mdx.ts           # 🔧 MDX processing logic

├── types/               # 📘 TypeScript definitions

└── .cursor/rules/       # 🤖 AI formatting rules

```



## 🎨 Features



### Portfolio Features



- **🌟 Professional Hero Section** - Eye-catching introduction

- **👤 About Section** - Tell your story professionally

- **💼 Experience Timeline** - Showcase your work history

- **🛠️ Skills Display** - Highlight your expertise

- **📱 Responsive Design** - Perfect on all devices

- **🎨 Modern UI** - Built with Tailwind CSS + Shadcn/ui



### Blog Features



- **🎯 Zero Database** - Content stored as MDX files

- **🤖 AI-Powered Formatting** - Automatic content formatting

- **📝 MDX Support** - Markdown + React components

- **🏷️ Tag System** - Organize posts with tags

- **📊 Reading Time** - Auto-calculated estimates

- **🎨 Syntax Highlighting** - Beautiful code blocks



### Technical Features



- **⚡ Static Generation** - Blazing fast, SEO-friendly

- **🔍 SEO Optimized** - Meta tags, OpenGraph, structured data

- **⚙️ TypeScript** - Full type safety

- **🚀 Easy Deployment** - Deploy anywhere static hosting works



## 🚀 Deployment



### Deploy to Vercel (Recommended) for FREE



1. Push your code to GitHub

2. Connect your repo to [Vercel](https://vercel.com)

3. Deploy with zero configuration



### Deploy to Any Static Host



```bash

npm run build

npm run export

# Upload the 'out' folder to your host

```



## 🛠️ Customization



### Portfolio Customization



**Update Your Information:**



- Edit `src/components/Hero.tsx` for name, title, and bio

- Modify `src/components/About.tsx` for your story

- Update `src/components/ExperienceAndSkills.tsx` for work history

- Change social links in `src/components/Footer.tsx`



**Styling:**



- Edit `src/app/globals.css` for global styles

- Modify `tailwind.config.ts` for theme customization

- All components use Tailwind CSS + Shadcn/ui



### Adding Blog Components



Edit `src/components/MDX/MDXComponents.tsx` to add custom components:



```tsx

export const MDXComponents = {

  // Custom components available in all MDX files

  YouTubeEmbed: ({ videoId }: { videoId: string }) => (

    

  ),

  // ... other components

};

```



## 🤝 Contributing



1. Fork the repository

2. Create your feature branch (`git checkout -b feature/amazing-feature`)

3. Commit your changes (`git commit -m 'Add some amazing feature'`)

4. Push to the branch (`git push origin feature/amazing-feature`)

5. Open a Pull Request



## 📄 License



This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.



## 🌟 Show Your Support



If this project helped you, please give it a ⭐ and share it with others!



## 🤔 FAQ



**Q: Is this just for developers?**

A: No! It's perfect for any professional - designers, writers, consultants, freelancers, students, or anyone who needs a professional online presence.



**Q: How do I customize the portfolio sections?**

A: Edit the component files in `src/components/` - Hero.tsx, About.tsx, ExperienceAndSkills.tsx, etc.



**Q: How do the AI rules work?**

A: Install [Cursor](https://cursor.sh/), open the project, paste any content, and ask AI to "format this as a blog post."



**Q: Can I migrate content from other platforms?**

A: Yes! Copy content from Medium, LinkedIn, Dev.to, WordPress, or Google Docs. The AI will format it properly.



**Q: How do I handle images?**

A: Store images in the `public`