React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

🌐 How to Access

🚀 Live Website (Recommended for Users)

Simply visit: https://codinxpro.github.io/ProfileCraft/

✅ No installation
✅ No login required
✅ 100% free
✅ Works in any browser

Steps:

1. Click the link above
2. Choose a template
3. Customize your design
4. Click "Export" (or Ctrl+S)
5. Download PNG
6. Upload to GitHub! 🎉

📦 GitHub Releases

Download pre-built releases: https://github.com/CODINXPRO/ProfileCraft/releases

Each release includes:

• Pre-built static files
• Complete source code
• Release notes

📚 GitHub Packages (NPM)

npm install @codinxpro/profilecraft

Available at: https://github.com/CODINXPRO/ProfileCraft/packages

🎯 Quick Start

For Developers

✨ Features

🎬 30+ Text Animations

• Entrance: Fade, Slide, Zoom, Bounce, and more
• Continuous: Pulse, Glow, Float, Rainbow, Waveforms
• Special: Glitch, Matrix Rain, Typewriter, Hologram, Cyberpunk Scan

🔤 30+ Professional Fonts

• Professional, Creative, Technical, Modern, Bold, Elegant categories
• Google Fonts integration for crisp text rendering
• Organized by personality for easy discovery

✨ 15+ Particle Effects

• Dots, Stars, Sparkles, DNA Helix, Orbits, and more
• Behaviors: Float, Fall, Spiral, Explode, Connect, Gravity
• Full customization: Density, Speed, Size, Glow, Trails

🎨 25+ Background Effects

• Gradients, Patterns, Animated (Waves, Aurora, Rain, Snow, Fire)
• Real-time rendering with smooth performance
• Opacity and color customization

📋 35+ Pre-designed Templates

• Professional, Developer, Creative, Unique, and Seasonal templates
• Hand-crafted designs ready to use or customize
• Each with unique color schemes and animations

🎯 Advanced Features

• Multi-layer text (up to 5 layers) with independent controls
• Real-time animation preview with play/pause
• Export to PNG (1280×400px GitHub-ready)
• Undo/Redo support (20-step history)
• Keyboard shortcuts for power users

📊 By The Numbers

⌨️ Keyboard Shortcuts

🚀 Quick Start

Online (No Installation)

1. Visit ProfileCraft Pro
2. Choose a template
3. Customize and export
4. Done! 🎉

Local Development

# Clone repository
git clone https://github.com/CODINXPRO/ProfileCraft.git
cd ProfileCraft

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

📁 Project Structure

src/
├── data/
│   ├── animations.ts       # 30+ animations with CSS keyframes
│   ├── fonts.ts            # 30 fonts across 6 categories
│   ├── particles.ts        # 15+ particle effects
│   ├── backgrounds.ts      # 25+ background effects
│   └── templates.ts        # 35+ pre-designed templates
├── App.tsx                 # Main React component
├── App.css                 # Styling
└── main.tsx                # React entry point

🛠️ Tech Stack

• React 19.1.1 - UI framework
• TypeScript - Type safety
• Vite (Rolldown) - Fast build tool
• CSS3 - Modern animations
• html2canvas - PNG export
• Google Fonts - Typography

🎯 How to Use

1. Select a Template - Browse 35+ designs organized by category
2. Edit Text - Customize up to 5 independent text layers
3. Choose Animation - Pick from 30+ entrance and continuous animations
4. Add Effects - Apply particles and background effects
5. Adjust Duration - Set animation speed (0.3s - 8s) and delays
6. Preview - See changes in real-time with play button
7. Export - Download as PNG ready for GitHub
8. Share - Upload to your GitHub profile header!

🎨 Customization

Add Your Own Animation

Edit src/data/animations.ts and add a new animation object with custom CSS keyframes.

Add Custom Font

Edit src/data/fonts.ts and include Google Fonts URL for web font integration.

Create Template

Edit src/data/templates.ts using the createTemplate() helper function.

🚀 Deployment

Live at: https://codinxpro.github.io/ProfileCraft/

• Hosted on GitHub Pages
• Auto-deployed on push to master
• Built with Vite for optimal performance

🐛 Reporting Issues

Found a bug? Open an issue

📄 License

MIT License - Free to use and modify

⭐ Love It?

If ProfileCraft Pro helps you create amazing GitHub headers, please give it a ⭐ on GitHub!

Made with ❤️ by CODINXPRO

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])