🎨 GitHub Avatar Frame API

A free and open-source API that lets you frame your GitHub profile picture with creative themes. Use it in your README files, portfolios, or social media to showcase styled avatars.

🌐 Live API: https://frame-api.vercel.app

Example:

🚀 Project Purpose

This project is a base skeleton API that currently includes only the code theme. Contributors can:

• Add new frame themes 🎨
• Propose new features ⚡
• Improve documentation and examples ✍️

The goal is to build a creative, community-driven way to style GitHub avatars.

🛠 Run Locally

Fork the Repository

Click on the Fork button at the top right of this repository to create a copy under your GitHub account.

Clone Your Fork

git clone https://github.com/TechQuanta/github-avatar-frame-api.git
cd github-avatar-frame-api

Install Dependencies

npm install

Start the Development Server

npm run dev

Now open: http://localhost:3000

📂 Usage

Frame URL Format

https://frame-api.vercel.app/api/frame/{theme}/{username}

• {theme} → The frame theme (e.g., code)
• {username} → Your GitHub username

Example:

https://frame-api.vercel.app/api/frame/code/octocat

List Available Themes

Check all available themes dynamically:

https://frame-api.vercel.app/api/themes

Example response:

{
  "themes": [
    {
      "id": "code",
      "name": "Code Frame",
      "description": "Tech-inspired frame with brackets and lines"
    }
  ]
}

How to Use in README

Embed a framed avatar in your README:

![My Avatar](https://frame-api.vercel.app/api/frame/code/your-username)

Replace your-username with your actual GitHub username.

🤝 Contributing

We welcome contributions of all kinds:

• New themes in public/frames/
• New features for the API
• Documentation updates
• Bug fixes and improvements

Quick Start for Contributors:

1. 🍴 Fork the repository
2. 🌿 Create a new branch for your feature
3. 🎨 Add your theme or improvement
4. 🧪 Test your changes locally
5. 📝 Submit a pull request

Ways to Contribute:

• 🎨 Design new themes - Create unique frames for different use cases
• 🐛 Fix bugs - Help improve stability and performance
• ✨ Add features - Implement new functionality like animated frames
• 📚 Improve docs - Help others understand and use the project
• 🧪 Write tests - Ensure code quality and reliability

👉 See CONTRIBUTING.md for detailed contribution steps. 👉 All contributors must follow our CODE_OF_CONDUCT.md.

⚙ Tech Stack

• Node.js & Express.js (TypeScript) → API backend
• Sharp → Image processing
• Vercel → Serverless deployment
• MongoDB (optional) → Future caching/metadata
• TypeScript → Type safety and better development

🔗 Links

• Live API: https://frame-api.vercel.app
• Contributing Guidelines: CONTRIBUTING.md
• Code of Conduct: CODE_OF_CONDUCT.md
• Issues: GitHub Issues

🌟 Show Your Support

If you find this project useful, please consider:

• ⭐ Star this repository - It helps others discover the project
• 🐛 Report bugs or suggest features in Issues
• 🤝 Contribute new themes and improvements
• 📢 Share it with the developer community

📜 License

This project is licensed under the MIT License.