Blor - Gradient Avatar Generator

Beautiful gradient avatar generator built with Next.js and deployed on Cloudflare Pages

Overview

A modern gradient avatar generator that creates beautiful, customizable gradient circles perfect for profile pictures, social media avatars, and digital identities. Built with Next.js 14, TypeScript, and Tailwind CSS.

Features

• 🎨 Beautiful Gradients: Generate stunning gradient avatars with customizable colors
• 🎯 Multiple Patterns: Various gradient styles and patterns to choose from
• 📱 Responsive Design: Works perfectly on desktop and mobile devices
• ⚡ Fast & Optimized: Built with Next.js 14 and optimized for performance
• 🌙 Dark Mode: Supports light and dark themes
• 📊 Analytics: Integrated with Cloudflare Web Analytics

Live Demo

Your project is live at: https://blor.pages.dev

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI
• Icons: Lucide React
• Deployment: Cloudflare Pages
• Analytics: Cloudflare Web Analytics

Development

Prerequisites

• Node.js 18+ or Bun
• Git

Getting Started

1. Clone the repository:

git clone https://github.com/uxmohamed/blor.git
cd blor

2. Install dependencies:

bun install
# or
npm install

3. Run the development server:

bun dev
# or
npm run dev

4. Open http://localhost:3000 in your browser.

Build for Production

bun build
# or
npm run build

Deployment

This project is configured for deployment on Cloudflare Pages with static export. The build process generates a static site that can be served directly from Cloudflare's edge network.

Build Configuration

• Build Command: npm run build or bun build
• Build Output Directory: out
• Node.js Version: 18.x (specified in .node-version)

Project Structure

├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── ui/               # Reusable UI components
│   └── gradient-circle-generator.tsx
├── lib/                  # Utility functions
├── public/               # Static assets
└── ...

Contributing

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.

Acknowledgments

• Built with Next.js
• Styled with Tailwind CSS
• UI components from Radix UI
• Deployed on Cloudflare Pages