🚀 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 • 📖 Live Demo • 🚀 Deploy Now

portfolio.mp4

🎯 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

git clone https://github.com/muzaffar640/commitpress.git
cd commitpress
npm install

2. Run Development Server

npm run dev

Open 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:

---
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

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:

# 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
3. Deploy with zero configuration

Deploy to Any Static Host

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:

export const MDXComponents = {
  // Custom components available in all MDX files
  YouTubeEmbed: ({ videoId }: { videoId: string }) => (
    <iframe
      src={`https://youtube.com/embed/${videoId}`}
      className="w-full aspect-video rounded-lg"
    />
  ),
  // ... 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 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, 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