Skip to content

Commit c3ae0db

Browse files
ashmeet07ashmeet07
authored
Update README.md
1 parent 27a69a1 commit c3ae0db

File tree

1 file changed

+215
-150
lines changed

1 file changed

+215
-150
lines changed

‎README.md‎

Lines changed: 215 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,248 @@
1-
<!-- GSSoC banner and project insights -->
2-
<h1 align="center">
1+
<!-- GSSoC Banner -->
2+
<h1 align="center" style="font-size: 3em; color: #ff4081;">
33
GitHub Avatar Frame API
44
</h1>
55

6-
<p align="center">
7-
<b>This project is now OFFICIALLY accepted for:</b>
6+
<p align="center" style="font-size: 1.3em;">
7+
<b>Officially accepted for <span style="color: #2196f3;">GSSoC!</span></b>
88
</p>
99

1010
<div align="center">
11-
<img src="public/assets/gssoc.png" alt="GSSOC" width="80%">
11+
<img src="public/assets/gssoc.png" alt="GSSOC" width="80%" style="border-radius: 15px; box-shadow: 0px 5px 15px rgba(0,0,0,0.2);">
1212
</div>
1313

14-
**📊 Project Insights**
15-
16-
<table align="center">
17-
<thead align="center">
18-
<tr>
19-
<td><b>🌟 Stars</b></td>
20-
<td><b>🍴 Forks</b></td>
21-
<td><b>🐛 Issues</b></td>
22-
<td><b>🔔 Open PRs</b></td>
23-
<td><b>🔕 Closed PRs</b></td>
24-
<td><b>🛠️ Languages</b></td>
25-
<td><b>👥 Contributors</b></td>
26-
</tr>
27-
</thead>
28-
<tbody>
29-
<tr>
30-
<td><img alt="Stars" src="https://img.shields.io/github/stars/TechQuanta/github-avatar-frame-api?style=flat&logo=github"/></td>
31-
<td><img alt="Forks" src="https://img.shields.io/github/forks/TechQuanta/github-avatar-frame-api?style=flat&logo=github"/></td>
32-
<td><img alt="Issues" src="https://img.shields.io/github/issues/TechQuanta/github-avatar-frame-api?style=flat&logo=github"/></td>
33-
<td><img alt="Open PRs" src="https://img.shields.io/github/issues-pr/TechQuanta/github-avatar-frame-api?style=flat&logo=github"/></td>
34-
<td><img alt="Closed PRs" src="https://img.shields.io/github/issues-pr-closed/TechQuanta/github-avatar-frame-api?style=flat&color=critical&logo=github"/></td>
35-
<td><img alt="Languages Count" src="https://img.shields.io/github/languages/count/TechQuanta/github-avatar-frame-api?style=flat&color=green&logo=github"></td>
36-
<td><img alt="Contributors Count" src="https://img.shields.io/github/contributors/TechQuanta/github-avatar-frame-api?style=flat&color=blue&logo=github"/></td>
37-
</tr>
38-
</tbody>
14+
<br>
15+
16+
<h2 align="center" style="color:#ff5722;">📊 Project Insights</h2>
17+
18+
<table align="center" style="width: 90%; border-collapse: collapse; font-size: 0.95em;">
19+
<thead>
20+
<tr style="background-color:#f5f5f5; text-align:center;">
21+
<th>🌟 Stars</th>
22+
<th>🍴 Forks</th>
23+
<th>🐛 Issues</th>
24+
<th>🔔 Open PRs</th>
25+
<th>🔕 Closed PRs</th>
26+
<th>🛠️ Languages</th>
27+
<th>👥 Contributors</th>
28+
</tr>
29+
</thead>
30+
<tbody align="center">
31+
<tr style="background-color:#fafafa;">
32+
<td><img alt="Stars" src="https://img.shields.io/github/stars/TechQuanta/github-avatar-frame-api?style=flat&logo=github"/></td>
33+
<td><img alt="Forks" src="https://img.shields.io/github/forks/TechQuanta/github-avatar-frame-api?style=flat&logo=github"/></td>
34+
<td><img alt="Issues" src="https://img.shields.io/github/issues/TechQuanta/github-avatar-frame-api?style=flat&logo=github"/></td>
35+
<td><img alt="Open PRs" src="https://img.shields.io/github/issues-pr/TechQuanta/github-avatar-frame-api?style=flat&logo=github"/></td>
36+
<td><img alt="Closed PRs" src="https://img.shields.io/github/issues-pr-closed/TechQuanta/github-avatar-frame-api?style=flat&color=critical&logo=github"/></td>
37+
<td><img alt="Languages Count" src="https://img.shields.io/github/languages/count/TechQuanta/github-avatar-frame-api?style=flat&color=green&logo=github"/></td>
38+
<td><img alt="Contributors Count" src="https://img.shields.io/github/contributors/TechQuanta/github-avatar-frame-api?style=flat&color=blue&logo=github"/></td>
39+
</tr>
40+
</tbody>
3941
</table>
4042

41-
# 🎨 GitHub Avatar Frame API
43+
<br><hr><br>
4244

43-
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.
45+
<h2 style="color:#673ab7;">🎨 About GitHub Avatar Frame API</h2>
4446

45-
**🌐 Live API:** https://frame-api.vercel.app
46-
47-
## Example:
48-
<div align=center>
49-
<a href="https://techquanta.tech">
50-
<img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/techquanta?theme=flamingo&size=256" alt="avatar-api">
51-
</a>
52-
53-
</div>
54-
55-
56-
57-
## 🚀 Project Purpose
58-
59-
This project is a base skeleton API that currently includes only the `code` theme. Contributors can:
60-
61-
- Add new frame themes 🎨
62-
- Propose new features ⚡
63-
- Improve documentation and examples ✍️
64-
65-
The goal is to build a creative, community-driven way to style GitHub avatars.
47+
<p style="font-size: 1.1em;">
48+
A free and open-source API to frame your GitHub avatar using creative themes. Perfect for README files, portfolios, or social media.
49+
</p>
6650

67-
## 🛠 Run Locally
51+
<p style="font-size: 1.1em;">
52+
<b>🌐 Live API:</b> <a href="https://github-avatar-frame-api.onrender.com" style="color:#ff4081; font-weight:bold;">https://github-avatar-frame-api.onrender.com</a>
53+
</p>
6854

69-
### Fork the Repository
70-
Click on the **Fork** button at the top right of this repository to create a copy under your GitHub account.
55+
<br>
56+
57+
<h2 style="color:#3f51b5;">📌 API Usage</h2>
58+
59+
<p style="font-size:1.05em;"><b>Base Endpoint:</b></p>
60+
<pre style="background-color:#f9f9f9; padding:10px; border-radius:10px;">
61+
https://github-avatar-frame-api.onrender.com/api/framed-avatar/{username}?theme={theme}&size={size}&canvas={canvas}&shape={shape}&radius={radius}
62+
</pre>
63+
64+
<h3 style="color:#009688;">Query Parameters:</h3>
65+
66+
<table style="width:100%; border-collapse:collapse; font-size:1.05em;">
67+
<thead style="background-color:#f5f5f5; text-align:center;">
68+
<tr>
69+
<th>Parameter</th>
70+
<th>Type</th>
71+
<th>Default</th>
72+
<th>Description</th>
73+
<th>Example</th>
74+
</tr>
75+
</thead>
76+
<tbody style="text-align:center;">
77+
<tr><td>username</td><td>string</td><td>required</td><td>GitHub username</td><td>octocat</td></tr>
78+
<tr><td>theme</td><td>string</td><td>base</td><td>Frame theme (eternity, base, flamingo)</td><td>flamingo</td></tr>
79+
<tr><td>size</td><td>integer</td><td>256</td><td>Avatar size in px (64–1024)</td><td>300</td></tr>
80+
<tr><td>canvas</td><td>string</td><td>light</td><td>Background color of avatar canvas: light / dark</td><td>dark</td></tr>
81+
<tr><td>shape</td><td>string</td><td>circle</td><td>Avatar shape: circle or rounded</td><td>rounded</td></tr>
82+
<tr><td>radius</td><td>integer</td><td>25</td><td>Corner radius for rounded shape in px</td><td>50</td></tr>
83+
</tbody>
84+
</table>
7185

72-
### Clone Your Fork
73-
```bash
74-
git clone https://github.com/TechQuanta/github-avatar-frame-api.git
75-
cd github-avatar-frame-api
76-
```
86+
<br>
87+
88+
<h3 style="color:#ff4081;">Canvas, Shape & Radius Explained</h3>
89+
90+
<ul style="font-size:1.05em;">
91+
<li><b>canvas</b>: Sets the avatar background color. Options: <code>light</code> or <code>dark</code>.</li>
92+
<li><b>shape</b>: Sets the avatar outline. Options: <code>circle</code> or <code>rounded</code>.</li>
93+
<li><b>radius</b>: Controls corner rounding in px when <code>shape=rounded</code>. 0 = square, higher = more rounded.</li>
94+
</ul>
95+
96+
<p>Combine all three to customize your avatar:</p>
97+
98+
<table style="width:100%; border-collapse:collapse; font-size:1.05em; text-align:center;">
99+
<thead style="background-color:#f5f5f5;">
100+
<tr>
101+
<th>Canvas</th>
102+
<th>Shape</th>
103+
<th>Radius</th>
104+
<th>Example URL</th>
105+
<th>Preview</th>
106+
</tr>
107+
</thead>
108+
<tbody>
109+
<tr>
110+
<td>light</td>
111+
<td>circle</td>
112+
<td>-</td>
113+
<td><a href="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?canvas=light&shape=circle" target="_blank">URL</a></td>
114+
<td><img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?canvas=light&shape=circle&size=100&theme=base" width="80"></td>
115+
</tr>
116+
<tr>
117+
<td>dark</td>
118+
<td>circle</td>
119+
<td>-</td>
120+
<td><a href="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?canvas=dark&shape=circle" target="_blank">URL</a></td>
121+
<td><img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?canvas=dark&shape=circle&size=100&theme=base" width="80"></td>
122+
</tr>
123+
<tr>
124+
<td>light</td>
125+
<td>rounded</td>
126+
<td>20</td>
127+
<td><a href="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?canvas=light&shape=rounded&radius=20" target="_blank">URL</a></td>
128+
<td><img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?canvas=light&shape=rounded&radius=20&size=100&theme=base" width="80"></td>
129+
</tr>
130+
<tr>
131+
<td>dark</td>
132+
<td>rounded</td>
133+
<td>50</td>
134+
<td><a href="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?canvas=dark&shape=rounded&radius=50" target="_blank">URL</a></td>
135+
<td><img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?canvas=dark&shape=rounded&radius=50&size=100&theme=base" width="80"></td>
136+
</tr>
137+
</tbody>
138+
</table>
77139

78-
### Install Dependencies
79-
```bash
80-
npm install
81-
```
140+
<br>
141+
142+
<h3 style="color:#ff4081;">Live Examples by Theme</h3>
143+
144+
<table style="width:100%; border-collapse:collapse; font-size:1.05em; text-align:center;">
145+
<thead style="background-color:#f5f5f5;">
146+
<tr>
147+
<th>Theme</th>
148+
<th>Canvas / Shape / Radius</th>
149+
<th>Preview</th>
150+
<th>Description</th>
151+
</tr>
152+
</thead>
153+
<tbody>
154+
<tr>
155+
<td>eternity</td>
156+
<td>light / circle / 0</td>
157+
<td><img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?theme=eternity&size=100&canvas=light&shape=circle&radius=0" width="80"></td>
158+
<td>Classic eternity theme, light background, circular avatar</td>
159+
</tr>
160+
<tr>
161+
<td>eternity</td>
162+
<td>dark / circle / 0</td>
163+
<td><img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?theme=eternity&size=100&canvas=dark&shape=circle&radius=0" width="80"></td>
164+
<td>Dark canvas version of eternity theme</td>
165+
</tr>
166+
<tr>
167+
<td>base</td>
168+
<td>light / rounded / 20</td>
169+
<td><img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?theme=base&size=100&canvas=light&shape=rounded&radius=20" width="80"></td>
170+
<td>Base theme, light background, rounded corners 20px</td>
171+
</tr>
172+
<tr>
173+
<td>base</td>
174+
<td>light / rounded / 50</td>
175+
<td><img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?theme=base&size=100&canvas=light&shape=rounded&radius=50" width="80"></td>
176+
<td>Base theme, light background, rounded corners 50px</td>
177+
</tr>
178+
<tr>
179+
<td>flamingo</td>
180+
<td>dark / circle / 0</td>
181+
<td><img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?theme=flamingo&size=100&canvas=dark&shape=circle&radius=0" width="80"></td>
182+
<td>Flamingo theme, dark canvas</td>
183+
</tr>
184+
<tr>
185+
<td>flamingo</td>
186+
<td>light / rounded / 30</td>
187+
<td><img src="https://github-avatar-frame-api.onrender.com/api/framed-avatar/octocat?theme=flamingo&size=100&canvas=light&shape=rounded&radius=30" width="80"></td>
188+
<td>Flamingo theme, light canvas, rounded corners 30px</td>
189+
</tr>
190+
</tbody>
191+
</table>
82192

83-
### Start the Development Server
84-
```bash
85-
npm run dev
86-
```
193+
<br>
87194

88-
Now open: http://localhost:3000
195+
<h3 style="color:#3f51b5;">Embed in README</h3>
89196

90-
## 📂 Usage
197+
<pre style="background-color:#f0f0f0; padding:10px; border-radius:10px;">
198+
![My Avatar](https://github-avatar-frame-api.onrender.com/api/framed-avatar/your-username?theme=flamingo&size=256&canvas=dark&shape=rounded&radius=20)
199+
</pre>
91200

92-
### Frame URL Format
93-
```
94-
https://frame-api.vercel.app/api/frame/{theme}/{username}
95-
```
201+
---
96202

97-
- `{theme}` → The frame theme (e.g., `code`)
98-
- `{username}` → Your GitHub username
203+
<h2 style="color:#ff5722;">🤝 Contributing</h2>
99204

100-
**Example:**
101-
```
102-
https://frame-api.vercel.app/api/frame/code/octocat
103-
```
205+
<ul style="font-size:1.05em;">
206+
<li>🎨 Add new themes in <code>public/frames/</code></li>
207+
<li>🐛 Bug fixes</li>
208+
<li>✨ New features</li>
209+
<li>📚 Improve documentation</li>
210+
</ul>
104211

105-
### List Available Themes
106-
Check all available themes dynamically:
107-
```
108-
https://frame-api.vercel.app/api/themes
109-
```
212+
---
110213

111-
**Example response:**
112-
```json
113-
{
114-
"themes": [
115-
{
116-
"id": "code",
117-
"name": "Code Frame",
118-
"description": "Tech-inspired frame with brackets and lines"
119-
}
120-
]
121-
}
122-
```
214+
<h2 style="color:#673ab7;">⚙ Tech Stack</h2>
123215

124-
### How to Use in README
125-
Embed a framed avatar in your README:
126-
```markdown
127-
![My Avatar](https://frame-api.vercel.app/api/frame/code/your-username)
128-
```
216+
<ul style="font-size:1.05em;">
217+
<li>Node.js & Express.js (TypeScript)</li>
218+
<li>Sharp (image processing)</li>
219+
<li>Render (hosting)</li>
220+
<li>TypeScript</li>
221+
</ul>
129222

130-
Replace `your-username` with your actual GitHub username.
223+
---
131224

132-
## 🤝 Contributing
225+
<h2 style="color:#3f51b5;">🔗 Links</h2>
133226

134-
We welcome contributions of all kinds:
227+
<ul style="font-size:1.05em;">
228+
<li>Live API: <a href="https://github-avatar-frame-api.onrender.com">https://github-avatar-frame-api.onrender.com</a></li>
229+
<li>Issues: <a href="https://github.com/TechQuanta/github-avatar-frame-api/issues">GitHub Issues</a></li>
230+
<li>Contributing Guidelines: <a href="CONTRIBUTING.md">CONTRIBUTING.md</a></li>
231+
<li>Code of Conduct: <a href="CODE_OF_CONDUCT.md">CODE_OF_CONDUCT.md</a></li>
232+
</ul>
135233

136-
- **New themes** in `public/frames/`
137-
- **New features** for the API
138-
- **Documentation** updates
139-
- **Bug fixes** and improvements
234+
---
140235

141-
### Quick Start for Contributors:
142-
1. 🍴 Fork the repository
143-
2. 🌿 Create a new branch for your feature
144-
3. 🎨 Add your theme or improvement
145-
4. 🧪 Test your changes locally
146-
5. 📝 Submit a pull request
236+
<h2 style="color:#ff4081;">🌟 Show Your Support</h2>
147237

148-
### Ways to Contribute:
149-
- 🎨 **Design new themes** - Create unique frames for different use cases
150-
- 🐛 **Fix bugs** - Help improve stability and performance
151-
- ✨ **Add features** - Implement new functionality like animated frames
152-
- 📚 **Improve docs** - Help others understand and use the project
153-
- 🧪 **Write tests** - Ensure code quality and reliability
238+
<ul style="font-size:1.05em;">
239+
<li>⭐ Star the repository</li>
240+
<li>🐛 Report bugs or suggest features</li>
241+
<li>🤝 Contribute new themes</li>
242+
<li>📢 Share with the community</li>
243+
</ul>
154244

155-
👉 See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed contribution steps.
156-
👉 All contributors must follow our [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md).
245+
---
157246

158-
## ⚙ Tech Stack
159-
160-
- **Node.js & Express.js (TypeScript)** → API backend
161-
- **Sharp** → Image processing
162-
- **Vercel** → Serverless deployment
163-
- **MongoDB** (optional) → Future caching/metadata
164-
- **TypeScript** → Type safety and better development
165-
166-
## 🔗 Links
167-
168-
- **Live API:** https://frame-api.vercel.app
169-
- **Contributing Guidelines:** [CONTRIBUTING.md](CONTRIBUTING.md)
170-
- **Code of Conduct:** [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
171-
- **Issues:** [GitHub Issues](https://github.com/TechQuanta/github-avatar-frame-api/issues)
172-
173-
## 🌟 Show Your Support
174-
175-
If you find this project useful, please consider:
176-
- ⭐ **Star this repository** - It helps others discover the project
177-
- 🐛 **Report bugs** or suggest features in [Issues](https://github.com/TechQuanta/github-avatar-frame-api/issues)
178-
- 🤝 **Contribute** new themes and improvements
179-
- 📢 **Share** it with the developer community
180-
181-
## 📜 License
182-
183-
This project is licensed under the MIT License.
247+
<h2 style="color:#009688;">📜 License</h2>
248+
<p style="font-size:1.05em;">MIT License</p>

0 commit comments

Comments
 (0)