Add badges

README.md

@@ -1,12 +1,25 @@
-<h1 align="center">GitProfile</h1>
+<br/>
-<p align="center">Easy to use automatic portfolio builder for every GitHub user!</p>
 
 <p align="center">
+  <img src="https://user-images.githubusercontent.com/45073703/177566625-9b84e793-4559-4475-ba54-8d3d5f4123d4.png" width="35%">
+
+  <h4 align="center">Easy to use automatic portfolio builder for every GitHub user!</h4>
+
+  <p align="center">
+    <a href="https://github.com/arifszn/gitprofile/blob/main/LICENSE">
+      <img src="https://img.shields.io/github/license/arifszn/gitprofile"/>
+    </a>
+    <a href="https://github.com/arifszn/gitprofile/blob/main/package-lock.json">
+      <img src="https://img.shields.io/snyk/vulnerabilities/github/arifszn/gitprofile"/>
+    </a>
+    <a href="https://github.com/arifszn/gitprofile/issues">
+      <img src="https://img.shields.io/github/issues/arifszn/gitprofile"/>
+    </a>
     <a href="https://github.com/arifszn/gitprofile/blob/main/CONTRIBUTING.md">
       <img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat"/>
     </a>
-  <a href="https://github.com/arifszn/gitprofile/blob/main/LICENSE">
+    <a href="https://www.buymeacoffee.com/arifszn">
-    <img src="https://img.shields.io/github/license/arifszn/gitprofile"/>
+      <img src="https://img.shields.io/badge/sponsor-buy%20me%20a%20coffee-yellow?logo=buymeacoffee"/>
     </a>
     <a href="https://twitter.com/intent/tweet?text=Check%20out%20the%20portfolio%20builder.%20Create%20an%20automatic%20portfolio%20based%20on%20GitHub%20profile.&url=https://github.com/arifszn/gitprofile&hashtags=javascript,opensource,js,webdev,developers">
       <img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Farifszn%2Fgitprofile"/>
@@ -14,14 +27,21 @@
   </p>
 
   <p align="center">
-  <a href="https://arifszn.github.io/gitprofile">
+    <a href="https://arifszn.github.io/gitprofile">View Demo</a>
-      <img src="https://arifszn.github.io/assets/img/hosted/gitprofile/preview.gif" alt="Preview"/>
+    ·
-  </a>
+    <a href="https://github.com/arifszn/gitprofile/issues">Report Bug</a>
-  <br/>
+    ·
-  <a href="#arifszn"><img src="https://arifszn.github.io/assets/img/drop-shadow.png" width="80%" alt="Shadow"/></a>
+    <a href="https://github.com/arifszn/gitprofile/discussions">Request Feature</a>
+  </p>
 </p>
 
-What if you could create your portfolio in 5 minutes just by providing your GitHub username and even host it without any cost? Do you want to display your skills, job history, education, or blog posts on your portfolio? Introducing **GitProfile**.
+<p align="center">
+  <a href="https://arifszn.github.io/gitprofile">
+      <img src="https://arifszn.github.io/assets/img/hosted/gitprofile/preview.gif" alt="Preview" width="60%"/>
+  </a>
+  <br/>
+  <a href="#arifszn"><img src="https://arifszn.github.io/assets/img/drop-shadow.png" width="50%" alt="Shadow"/></a>
+</p>
 
 **GitProfile** is an easy to use portfolio builder where you can create a portfolio page automatically by just providing your GitHub username. It is built using React.js on top of Vite.js. But it's not necessary to have knowledge on these to get you started. You can make your own copy with zero coding experience.
 
@@ -48,10 +68,10 @@ Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
 
 There are two ways to use **GitProfile**. Use either one.
 
-<details>
+- Forking this repo
-<summary>Forking this repo (Click to expand)</summary>
+- Installing as package
 
-<br/>
+### Forking this repo
 
 These instructions will get you a copy of the project and deploy your portfolio online!
 
@@ -84,16 +104,9 @@ If you see only `README` at `username.github.io`, be sure to change your GitHub
 
 As this is a vite project, you can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this [doc](https://vitejs.dev/guide/static-deploy.html) for a detailed deployment guide to other services.
 
-</details>
+### Installing as package
 
-Or
+You can also use **GitProfile** by installing as an NPM package. First Install **GitProfile** via <a href="https://www.npmjs.com/package/@arifszn/gitprofile">NPM</a>.
-
-<details>
-<summary>Installing as package (Click to expand)</summary>
-
-<br/>
-
-First Install **GitProfile** via <a href="https://www.npmjs.com/package/@arifszn/gitprofile">NPM</a>.
 
 ```sh
 npm install @arifszn/gitprofile
@@ -128,8 +141,6 @@ export default App;
 
 List of all config [here](#-customization).
 
-</details>
-
 **If you face any problems or have any questions, open an issue [here](https://github.com/arifszn/gitprofile/issues).**
 
 ## 🎨 Customization
@@ -477,12 +488,13 @@ module.exports = {
 
 ![Blog](https://arifszn.github.io/assets/img/hosted/gitprofile/blog.png)
 
-The posts are fetched by [Blog-js](https://github.com/arifszn/blog-js).
+The posts are fetched by [blog.js](https://github.com/arifszn/blog.js).
 
 ## 💖 Support
 
-<a href="https://www.buymeacoffee.com/arifszn" target="_blank">
+<p>You can show your support by starring this project.</p>
-  <img src="https://raw.githubusercontent.com/arifszn/arifszn/main/assets/bmc-button.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
+<a href="https://github.com/arifszn/gitprofile/stargazers">
+  <img src="https://img.shields.io/github/stars/arifszn/gitprofile?style=social" alt="Github Star">
 </a>
 
 ## 💡 Contribute
@@ -491,4 +503,4 @@ To contribute, see the [Contributing guide](https://github.com/arifszn/gitprofil
 
 ## 📄 License
 
-**GitProfile** is licensed under the [Apache-2.0 License](https://github.com/arifszn/gitprofile/blob/main/LICENSE).
+[Apache-2.0 License](https://github.com/arifszn/gitprofile/blob/main/LICENSE)