GitFlex - Flex 💪 Your GitHub Profile

Transform your GitHub profile into a beautiful, professional showcase

✨ Features

🎨 Neomorphic Design

• Modern, elegant UI with soft shadows and depth
• Beautiful light and dark themes with smooth transitions
• Responsive design that works perfectly on all devices

📊 Rich Data Visualization

• Interactive contribution graphs and heatmaps
• Language distribution charts
• Repository statistics and trends
• Activity timelines and insights

⚡ Performance First

• Lightning-fast loading with intelligent caching
• Lazy loading and code splitting
• Optimized bundle size and runtime performance
• Progressive Web App capabilities

🔐 Privacy Focused

• No data collection or tracking
• Uses only public GitHub API data
• Completely client-side application
• Optional GitHub token for higher rate limits

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm 9+
• A modern web browser
• Optional: GitHub Personal Access Token for higher API rate limits

Installation

1. Clone the repository

   git clone https://github.com/nishadkindre/gitflex.git
   cd gitflex

2. Install dependencies

   npm install

3. Set up environment variables (optional)

   cp .env.example .env
   # Edit .env and add your GitHub token if needed

4. Start the development server

   npm run dev

5. Open your browser Navigate to http://localhost:5173

🛠️ Tech Stack

• Frontend: React 18+ with modern hooks
• Styling: Tailwind CSS with custom neomorphism design system
• Animation: Framer Motion for smooth, performant animations
• Routing: React Router for client-side navigation
• Charts: Chart.js with React integration
• Icons: Lucide React for consistent iconography
• HTTP Client: Axios with intelligent caching
• Build Tool: Vite for fast development and optimized production builds
• Code Quality: ESLint + Prettier for consistent code formatting

📁 Project Structure

gitflex/
├── docs/               # Documentation files
├── public/              # Static assets
├── src/
│   ├── components/      # Reusable UI components
│   │   ├── ui/         # Base UI components
│   │   ├── common/     # Layout components
│   │   └── profile/    # Profile-specific components
│   ├── pages/          # Page components
│   ├── hooks/          # Custom React hooks
│   ├── services/       # API services
│   ├── utils/          # Utility functions
│   ├── context/        # React contexts
│   └── main.jsx        # Application entry point
├── tailwind.config.js  # Tailwind configuration
└── vite.config.js     # Vite configuration

🎯 Usage

1. Visit the landing page and enter any GitHub username
2. Explore the profile with beautiful visualizations
3. Use filters and search to find specific repositories
4. Toggle between themes using the theme switcher
5. View contribution patterns and coding statistics

Example URLs

• https://gitflexx.vercel.app/octocat - View GitHub's mascot profile
• https://gitflexx.vercel.app/torvalds - View Linus Torvalds' profile
• https://gitflexx.vercel.app/microsoft - View Microsoft's organization

🔧 Configuration

Environment Variables

Create a .env file based on .env.example:

# Optional: GitHub Personal Access Token for higher rate limits
VITE_GITHUB_TOKEN=your_token_here

# API Configuration
VITE_API_BASE_URL=https://api.github.com

GitHub API Rate Limits

• Without token: 60 requests per hour
• With token: 5000 requests per hour

To get a GitHub token:

1. Go to GitHub Settings > Developer Settings > Personal Access Tokens
2. Generate a new token with public repository access
3. Add it to your .env file

🚢 Deployment

Vercel (Recommended)

Netlify

Manual Deployment

1. Build the project

   npm run build

2. Deploy the dist folder to your preferred hosting service

🧪 Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint
npm run lint:fix

# Format code
npm run format
npm run format:check

# Clean build artifacts
npm run clean

Code Style

This project uses ESLint and Prettier for consistent code formatting. The configuration follows React best practices and modern JavaScript standards.

🎨 Design System

GitFlex uses a custom neomorphic design system built on top of Tailwind CSS:

Colors

• Light Mode: Soft grays with subtle shadows
• Dark Mode: Deep grays with inner/outer shadows
• Accent: Vibrant blue (#007AFF) and green (#34C759)

Typography

• Headings: Inter or SF Pro Display
• Code: JetBrains Mono
• Body: Inter with fluid scaling

Shadows

• Multiple shadow layers for depth
• Responsive shadow system
• Theme-aware shadow colors

🤝 Contributing

We welcome contributions from the community! Please see our Contributing Guide for details.

Quick Contribution Steps

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add 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.

🙏 Acknowledgments

• devb.io for inspiration on design and layout
• GitHub API for providing the data
• Vercel for free hosting and deployment

📊 Stats

---

Made with ❤️ by Nishad Kindre

Live Demo • Report Bug • Request Feature