GitIntro

A modern, intuitive web application for creating beautiful GitHub profile READMEs with ease. Choose from professionally designed templates, customize them to your needs, and generate markdown ready to showcase your profile.

Features

• 6 Professional Templates - Minimalist Dev, Portfolio Showcase, Technical Writer, Indie Hacker, Social Connector, and Blank Canvas
• Interactive Editor - Real-time preview with side-by-side editing
• Tech Stack Selector - Easily add technology badges with auto-complete
• GitHub Stats Integration - Multiple stat cards and activity graphs
• Dark/Light Mode - Seamless theme switching
• Auto-save Drafts - Never lose your progress with local storage
• Fully Responsive - Works perfectly on all devices
• Live Markdown Preview - See exactly how your README will look
• One-Click Copy - Copy generated markdown instantly
• Direct Download - Download as README.md file

Tech Stack

• Frontend Framework: React 19 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS 4 + Framer Motion
• UI Components: Radix UI primitives
• Routing: React Router DOM
• State Management: React Hooks + Custom Hooks
• Markdown Preview: @uiw/react-markdown-preview
• Icons: Lucide React + Tabler Icons

Installation

# Clone the repository
git clone https://github.com/Akai771/GitIntro.git

# Navigate to project directory
cd gitintro/grm

# Install dependencies
npm install

# Start development server
npm run dev

🛠️ Available Scripts

• npm run dev - Start development server (default: http://localhost:5173)
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📖 Usage

1. Choose a Template - Browse through 6 professionally designed templates
2. Customize Content - Fill in your information in the intuitive form editor
3. Select Tech Stack - Use the tech stack selector to add your skills with badges
4. Enable Stats - Toggle GitHub stats cards and activity graphs
5. Preview in Real-time - See your README update live as you type
6. Copy or Download - Get your markdown with one click

Template Gallery

Template	Description	Best For
Minimalist Dev	Clean, text-focused layout	Backend developers, minimalists
Portfolio Showcase	Visual-heavy design	Frontend developers, designers
Technical Writer	Documentation-oriented	Content creators, educators
Indie Hacker	Product and revenue focused	Entrepreneurs, indie makers
Social Connector	Social media hub	Community builders, influencers
Blank Canvas	Start from scratch	Advanced users, unique layouts

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/FeatureName)
3. Commit your changes (git commit -m 'Add some FeatureName')
4. Push to the branch (git push origin feature/FeatureName)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Acknowledgments

• Shields.io - Badge generation
• GitHub Readme Stats - GitHub statistics
• Radix UI - Accessible UI components
• Lucide - Beautiful icons

Contact

Found a bug or have a feature request? Please open an issue.

---

Made with ❤️ for the GitHub community