diff --git a/README.md b/README.md index a4f05f5..530b624 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,66 @@ -# GitHub Avatar Frame API +# ๐ŸŽจ GitHub Avatar Frame API -A free and open-source API that allows you to frame your GitHub profile picture with creative themes! Easily embed styled avatars in your README files, portfolios, or social media. +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 -## ๐ŸŒ Live API -Access the API at: -**https://frame-api.vercel.app** ---- +## ๐Ÿš€ Project Purpose -## ๐Ÿ“‚ Usage +This project is a base skeleton API that currently includes only the `code` theme. Contributors can: -### โœ… Frame URL format +- Add new frame themes ๐ŸŽจ +- Propose new features โšก +- Improve documentation and examples โœ๏ธ -`https://frame-api.vercel.app/api/frame/{theme}/{username}` +The goal is to build a creative, community-driven way to style GitHub avatars. -- `{theme}` โ€“ The frame theme (e.g., `code`) -- `{username}` โ€“ Your GitHub username +## ๐Ÿ›  Run Locally -**Example:** +### Fork the Repository +Click on the **Fork** button at the top right of this repository to create a copy under your GitHub account. -![Code Avatar](https://frame-api.vercel.app/api/frame/code/octocat) +### Clone Your Fork +```bash +git clone https://github.com/TechQuanta/github-avatar-frame-api.git +cd github-avatar-frame-api +``` ---- +### Install Dependencies +```bash +npm install +``` -### โœ… List of Available Themes +### Start the Development Server +```bash +npm run dev +``` -Fetch all available themes dynamically: +Now open: http://localhost:3000 -`https://frame-api.vercel.app/api/themes` +## ๐Ÿ“‚ Usage +### Frame URL Format +``` +https://frame-api.vercel.app/api/frame/{theme}/{username} +``` -**Example response:** +- `{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:** ```json { "themes": [ @@ -47,73 +73,63 @@ Fetch all available themes dynamically: } ``` -### โœ… Collage Example (Optional) - -Combine multiple avatars into one frame: - -[https://frame-api.vercel.app/api/collage/community?users=octocat,mojombo,torvalds](https://frame-api.vercel.app/api/collage/community?users=octocat,mojombo,torvalds) - -### ๐Ÿ–ผ Example Themes ------------------ - -Theme Description codeTech-inspired - frame with brackets and linesopen-source Showcase, open-source contributions collaboration Highlight teamwork and partnerships hackathon Event badges with futuristic designs beginner Soft pastel frame for learnersproSleek minimalistic professional frame community, Group-oriented connecting elementsevents Calendar and schedule designs, funComic-style vibrant, framedark-modeNeon dark overlays for modern aesthetics +### How to Use in README +Embed a framed avatar in your README: +```markdown +![My Avatar](https://frame-api.vercel.app/api/frame/code/your-username) +``` -> Note: Only the code theme is included by default. Others can be added by the community following the +Replace `your-username` with your actual GitHub username. -[CONTRIBUTING.md](./CONTRIBUTING.md) +## ๐Ÿค Contributing -๐Ÿ“– How to Use in README +We welcome contributions of all kinds: -Embed an avatar with a frame: +- **New themes** in `public/frames/` +- **New features** for the API +- **Documentation** updates +- **Bug fixes** and improvements -![My Avatar](https://frame-api.vercel.app/api/frame/code/octocat) +### 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 -* Replace code with your desired theme - -* Replace octocat with your GitHub username +### 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 -* ๐Ÿค Contribute - -* We welcome new themes, improvements, and ideas! See [CONTRIBUTING.md](./CONTRIBUTING.md) to learn how to add themes and submit pull requests. - -* **Contribution Flow:** - -* Use the working base theme (code) to test the API. - -* Add new frames or themes in public/frames/. - -* Submit a pull request for review. +๐Ÿ‘‰ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed contribution steps. +๐Ÿ‘‰ All contributors must follow our [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md). +## โš™ Tech Stack -### โš™ Tech Stack - -* **Node.js & Express.js (TypeScript)** โ€“ API backend - -* **Sharp** โ€“ Image processing - -* **Vercel** โ€“ Serverless deployment - -* **MongoDB (optional)** โ€“ For caching or metadata in the future - -* **TypeScript** โ€“ Type safety and better development experience +- **Node.js & Express.js (TypeScript)** โ†’ API backend +- **Sharp** โ†’ Image processing +- **Vercel** โ†’ Serverless deployment +- **MongoDB** (optional) โ†’ Future caching/metadata +- **TypeScript** โ†’ Type safety and better development -### โœ… Key Features of This README: +## ๐Ÿ”— Links -* **Highlights the working base** (code theme) so users can see the API in action. - -* **Explains URL format** and shows example usage. - -* **Dynamic themes endpoint** explained. - -* **Collage feature** included as optional. - -* **Encourages contribution** with clear steps. - -* **Professional open-source structure** matching GSSoC projects. +- **Live API:** https://frame-api.vercel.app +- **Contributing Guidelines:** [CONTRIBUTING.md](CONTRIBUTING.md) +- **Code of Conduct:** [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) +- **Issues:** [GitHub Issues](https://github.com/TechQuanta/github-avatar-frame-api/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](https://github.com/TechQuanta/github-avatar-frame-api/issues) +- ๐Ÿค **Contribute** new themes and improvements +- ๐Ÿ“ข **Share** it with the developer community -If you want, I can **now create a ready-to-use `metadata.json` template and a starter theme folder** that fits this TypeScript + Node + Sharp structure so contributors know exactly how to add new themes. +## ๐Ÿ“œ License -Do you want me to do that next? +This project is licensed under the MIT License. \ No newline at end of file