Merge pull request #124 from rahuldkjain/donate

[add]: donate below markdown-box

README.md

@@ -39,7 +39,7 @@
 </p>
 
 <p align="center">
-<i>Loved the tool? Please consider <a href="https://paypal.me/rahuldkjain">donating</a>  💸 to help it improve!</i>
+<i>Loved the tool? Please consider <a href="https://paypal.me/rahuldkjain/10">donating</a>  💸 to help it improve!</i>
 </p>
 
 <p align="center">
@@ -144,7 +144,7 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
 ## 🙏 Support
 
 <p align="left">
-<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
+<a href="https://www.paypal.me/rahuldkjain/10"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
 </a>
 <a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
 <img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>

src/components/donate.js

@@ -0,0 +1,77 @@
+import React from "react"
+const Donate = () => {
+  return (
+    <>
+      <div className="text-center text-4xl my-2">Support 🙏</div>
+      <div className="flex flex-col sm:flex-row items-start justify-between">
+        <div className="w-full sm:w-2/3">
+          <div className="text-2xl mb-2">
+            Are you using the tool and happy with it to create your GitHub
+            Profile?
+          </div>
+          <div className="text-lg">
+            Your kind support keeps open-source tools like this free for others.
+          </div>
+          <div className="mt-4">
+            <a
+              className="flex items-center justify-start w-20"
+              href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+            >
+              <img
+                className="w-20"
+                src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+                alt="tweet github profile readme generator"
+              />
+            </a>
+            Let the world know how you feel using this tool. Share with others
+            on twitter.
+          </div>
+        </div>
+        <div className="w-full sm:w-1/3 flex flex-col justify-center items-center">
+          Tip💰
+          {/* Ko-Fi */}
+          <a
+            href="https://ko-fi.com/A0A81XXSX"
+            className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
+            target="_blank"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://www.vectorlogo.zone/logos/ko-fi/ko-fi-icon.svg"
+              alt="Buy ko-fi for rahuldkjain"
+            />
+            Buy me a ko-fi
+          </a>
+          {/* Paypal */}
+          <a
+            href="https://www.paypal.me/rahuldkjain/10"
+            className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
+            target="_blank"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://cdn.worldvectorlogo.com/logos/paypal-icon.svg"
+              alt="Donate rahuldkjain via paypal"
+            />
+            Paypal
+          </a>
+          {/* BuyMeACoffee */}
+          <a
+            href="https://www.buymeacoffee.com/rahuldkjain"
+            className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
+            target="_blank"
+          >
+            <img
+              className="w-6 h-6 mr-2"
+              src="https://www.vectorlogo.zone/logos/buymeacoffee/buymeacoffee-icon.svg"
+              alt="Buy rahuldkjain A Coffee"
+            />
+            Buy me a coffee
+          </a>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Donate

src/markdown-pages/support.md

@@ -11,7 +11,7 @@ title: "💵 Support OSS"
 You can come forward to support the developers by making small donations. You will never know what this support mean to them. If you find the tool really helpful, then it will be very grateful to support the tool 🙇.
 
 <p align="left">
-  <a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
+  <a href="https://www.paypal.me/rahuldkjain/10"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
   </a>
 
 <a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />

src/pages/index.js

@@ -8,6 +8,7 @@ import Work from "../components/work"
 import Social from "../components/social"
 import Addons from "../components/addons"
 import Skills from "../components/skills"
+import Donate from "../components/donate";
 import { initialSkillState } from "../constants/skills"
 import gsap from "gsap"
 import Loader from "../components/loader"
@@ -191,6 +192,17 @@ const IndexPage = () => {
           ease: "Linear.easeNone",
         }
       )
+      gsap.fromTo(
+        "#support",
+        {
+          autoAlpha: 0,
+        },
+        {
+          autoAlpha: 1,
+          duration: 2,
+          ease: "Linear.easeNone",
+        }
+      )
       document.body.scrollTop = 0 // For Safari
       document.documentElement.scrollTop = 0 // For Chrome, Firefox, IE and Opera
     }, 3000)
@@ -616,6 +628,9 @@ const IndexPage = () => {
                 )}
               </div>
             </div>
+            <div className="mt-10" id="support">
+              <Donate />
+            </div>
           </div>
         ) : (
           ""