HTML Bio Generator 🚀

A modern, intuitive tool for creating beautiful HTML bio pages with ease. Perfect for developers, freelancers, content creators, and anyone who wants to showcase their professional presence online.

✨ Features

• 🎨 Beautiful Templates - Choose from professionally designed bio page templates
• ⚡ Lightning Fast - Built with Next.js 15 and optimized for speed
• 📱 Fully Responsive - Perfect on desktop, tablet, and mobile devices
• 🌙 Dark Mode Support - Toggle between light and dark themes
• 🔧 Easy Customization - Intuitive interface for personalizing your bio
• 📊 SEO Optimized - Built-in SEO best practices for better discoverability
• 🚀 One-Click Deploy - Ready for Cloudflare Pages deployment
• ♿ Accessible - Built with accessibility in mind
• 🔒 Privacy-First - No tracking, no data collection

🌐 Live Demo

Check out the live demo at: html-bio-generator.pages.dev

📸 Screenshot

Beautiful, responsive bio pages generated with ease

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository

   git clone https://github.com/yuis-ice/html-bio-generator.git
   cd html-bio-generator

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Start the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser Navigate to http://localhost:3000 to see the application.

📦 Deployment

Deploy to Cloudflare Pages

This project is optimized for Cloudflare Pages deployment:

1. Build for Cloudflare Pages

   npm run pages:build

2. Deploy to Cloudflare Pages

   npm run pages:deploy

Other Deployment Options

• Vercel: One-click deploy with the Vercel button
• Netlify: Deploy directly from your Git repository
• Traditional Hosting: Build and deploy the static files

🛠️ Technology Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI
• Icons: Lucide React
• Deployment: Cloudflare Pages
• Build Tools: Next.js with SWC compiler

🎯 Use Cases

• Developers: Showcase your skills and projects
• Freelancers: Create a professional landing page
• Content Creators: Display your social media presence
• Students: Build your academic portfolio
• Professionals: Create a modern business card
• Artists: Showcase your creative work

🎨 Customization

The HTML Bio Generator offers extensive customization options:

• Personal Information: Name, title, description, contact details
• Social Links: Add links to your social media profiles
• Color Themes: Choose from predefined themes or create custom colors
• Layout Options: Different layouts to suit your style
• Typography: Select from various font combinations
• Images: Upload profile pictures and background images

📁 Project Structure

html-bio-generator/
├── app/                    # Next.js app directory
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout component
│   └── page.tsx           # Home page
├── components/            # Reusable React components
│   ├── ui/               # UI component library
│   └── theme-provider.tsx
├── lib/                  # Utility functions
├── public/               # Static assets
├── .github/              # GitHub templates and workflows
├── wrangler.toml         # Cloudflare Pages configuration
└── package.json          # Project dependencies

🤝 Contributing

We welcome contributions from the community! Please read our Contributing Guide for details on how to get started.

Ways to Contribute

• 🐛 Report Bugs: Help us identify and fix issues
• ✨ Request Features: Suggest new features and improvements
• 💻 Submit Code: Contribute code improvements and new features
• 📝 Improve Documentation: Help make our docs better
• 🎨 Design: Contribute new templates and themes
• 🧪 Testing: Help test new features and report feedback

Development Workflow

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

📊 Performance

• Lighthouse Score: 100/100 for Performance, Accessibility, Best Practices, and SEO
• Core Web Vitals: Optimized for excellent user experience
• Bundle Size: Minimal JavaScript footprint
• Loading Speed: Sub-second initial page load

🔧 Scripts

Script	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint
npm run pages:build	Build for Cloudflare Pages
npm run pages:deploy	Deploy to Cloudflare Pages

🐛 Bug Reports

Found a bug? Please check our existing issues first, then create a new issue using our bug report template.

💡 Feature Requests

Have an idea for a new feature? We'd love to hear it! Please use our feature request template.

📞 Support

• 💬 GitHub Discussions: Ask questions and share ideas
• 🐛 Issues: Report bugs
• 📧 Email: Contact the maintainers for urgent matters

📈 Roadmap

• More Templates: Additional bio page designs
• Export Options: Download as HTML, PDF, or image
• Analytics Integration: Optional usage analytics
• Custom Domain: Support for custom domains
• Team Collaboration: Multi-user editing capabilities
• API Access: Programmatic bio generation
• Mobile App: Native mobile applications

🏆 Contributors

Thanks to all the contributors who have helped make this project better!

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js team for the amazing framework
• Tailwind CSS for the utility-first CSS framework
• Radix UI for accessible UI components
• Cloudflare for free hosting and edge computing
• All contributors and users who help improve this project

🌟 Star History

If you find this project useful, please consider giving it a star on GitHub!

---

🌐 Live Demo • 📚 Documentation • 🐛 Report Bug • ✨ Request Feature

Made with ❤️ by yuis-ice