docs: update .all-contributorsrc [skip ci]

[add]: Resume field in the work section

.all-contributorsrc

@@ -0,0 +1,42 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "contributors": [
+    {
+      "login": "sarbikbetal",
+      "name": "Sarbik Betal",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/41508422?v=4",
+      "profile": "https://github.com/sarbikbetal",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "antonkomarev",
+      "name": "Anton Komarev",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1849174?v=4",
+      "profile": "https://komarev.com",
+      "contributions": [
+        "plugin"
+      ]
+    },
+    {
+      "login": "avnish1306",
+      "name": "avnish kumar",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/28188933?v=4",
+      "profile": "https://github.com/avnish1306",
+      "contributions": [
+        "code"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "projectName": "github-profile-readme-generator",
+  "projectOwner": "rahuldkjain",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "skipCi": true
+}

.github/FUNDING.yml

@@ -2,7 +2,7 @@
 
 github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
+open_collective: github-profile-readme-generator
 ko_fi: rahuldkjain
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry

.github/ISSUE_TEMPLATE/bug_report.md

@@ -38,3 +38,6 @@ If applicable, add screenshots to help explain your problem.
 
 **Additional context**
 Add any other context about the problem here.
+
+Join the **Discord Server** for further discussions.
+Server Link: https://discord.gg/HHMs7Eg

.github/ISSUE_TEMPLATE/feature-enhancement-request.md

@@ -17,3 +17,7 @@ A clear and concise description of any alternative solutions or features you've
 
 **Additional context**
 Add any other context or screenshots about the feature request here.
+
+Join the **Discord Server** for further discussions.
+
+Server Link: https://discord.gg/HHMs7Eg

.github/config.yml

@@ -0,0 +1,17 @@
+# Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome
+
+# Comment to be posted to on first time issues
+newIssueWelcomeComment: >
+  Thanks for opening your first issue here! Your contribution means alot. 🙌 Join Discord Server (https://discord.gg/HHMs7Eg) for discussing issues, pull-requests, new features, etc.
+
+# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
+
+# Comment to be posted to on PRs from first time contributors in your repository
+newPRWelcomeComment: >
+  Thanks for opening this pull request! Make sure you have assigned an issue to this respective PR 😇
+
+# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
+
+# Comment to be posted to on pull requests merged by a first time user
+firstPRMergeComment: >
+  Congrats on merging your first pull request🎉! Thanks alot for your contribution. 🙏

CONTRIBUTING.md

@@ -3,7 +3,7 @@
 When contributing to this repository, please first discuss the change you wish to make via issue,
 email, or any other method with the owners of this repository before making a change.
 
-<a href="https://discord.gg/U7YU3J" target="blank">
+<a href="https://discord.gg/HHMs7Eg" target="blank">
 <img src="https://img.shields.io/discord/735303195105951764?color=%23677BC4&label=Join%20Community&style=flat-square" alt="join discord community of github profile readme generator"/>
 </a>
 

README.md

@@ -23,7 +23,7 @@
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls" target="blank">
 <img src="https://img.shields.io/github/issues-pr/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator pull-requests"/>
 </a>
-<a href="https://discord.gg/U7YU3J" target="blank">
+<a href="https://discord.gg/HHMs7Eg" target="blank">
 <img src="https://img.shields.io/discord/735303195105951764?label=Join%20Community&logo=discord&style=flat-square" alt="join discord community of github profile readme generator"/>
 </a>
 </p>
@@ -84,8 +84,6 @@ Just fill in the details such as `Name`, `Tagline`, `Dev Platforms Username`, `C
 
 - **Wakatime Stats** [contribute](https://github.com/rahuldkjain/github-profile-readme-generator/issues/115)
 
-- **YouTube Stats** [contribute](https://github.com/rahuldkjain/github-profile-readme-generator/issues/119)
-
 Click on `Generate README` to get your README in `markdown`.
 You can preview the README too.
 
@@ -157,6 +155,27 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
   <a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
 </p>
 
+## Contributors ✨
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://github.com/sarbikbetal"><img src="https://avatars2.githubusercontent.com/u/41508422?v=4" width="100px;" alt=""/><br /><sub><b>Sarbik Betal</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=sarbikbetal" title="Code">💻</a></td>
+    <td align="center"><a href="https://komarev.com"><img src="https://avatars0.githubusercontent.com/u/1849174?v=4" width="100px;" alt=""/><br /><sub><b>Anton Komarev</b></sub></a><br /><a href="#plugin-antonkomarev" title="Plugin/utility libraries">🔌</a></td>
+    <td align="center"><a href="https://github.com/avnish1306"><img src="https://avatars0.githubusercontent.com/u/28188933?v=4" width="100px;" alt=""/><br /><sub><b>avnish kumar</b></sub></a><br /><a href="https://github.com/rahuldkjain/github-profile-readme-generator/commits?author=avnish1306" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
 <hr>
 <p align="center">
 Developed with ❤️ in India 🇮🇳 

package-lock.json

@@ -10987,6 +10987,18 @@
       "requires": {
         "is-empty": "^1.2.0",
         "is-whitespace": "^0.3.0"
+      },
+      "dependencies": {
+        "is-empty": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/is-empty/-/is-empty-1.2.0.tgz",
+          "integrity": "sha1-3pu1snhzigWgsJpX4ftNSjQan2s="
+        },
+        "is-whitespace": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz",
+          "integrity": "sha1-Fjnssb4DauxppUy7QBz77XEUq38="
+        }
       }
     },
     "is-buffer": {
@@ -11098,11 +11110,6 @@
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.0.0.tgz",
       "integrity": "sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ=="
     },
-    "is-empty": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-empty/-/is-empty-1.2.0.tgz",
-      "integrity": "sha1-3pu1snhzigWgsJpX4ftNSjQan2s="
-    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -11381,11 +11388,6 @@
         "is-invalid-path": "^0.1.0"
       }
     },
-    "is-whitespace": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz",
-      "integrity": "sha1-Fjnssb4DauxppUy7QBz77XEUq38="
-    },
     "is-whitespace-character": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",

src/components/addons.js

@@ -1,9 +1,110 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import { withPrefix } from "gatsby"
 import { latestBlogs } from "../utils/workflows"
 import links from "../constants/page-links"
-import { isMediumUsernameValid } from "../utils/validation"
+import { isMediumUsernameValid, isGitHubUsernameValid } from "../utils/validation"
+import { ToolsIcon, XCircleIcon } from "@primer/octicons-react";
+
+const AddonsItem = ({inputId, inputChecked, onInputChange, Icon, onIconClick, ...props}) => {
+  return (
+    <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+      <label htmlFor={inputId} className="cursor-pointer flex items-center">
+        <input
+          type="checkbox"
+          id={inputId}
+          checked={inputChecked}
+          onChange={onInputChange}
+        />
+        <span className="pl-4">{props.children}</span>
+      </label>
+      {
+        Icon?
+          <button onClick={onIconClick} className="flex ml-3 focus:bg-gray-400" style={{outline: "none"}}>
+            <Icon className="transform scale-100 md:scale-125" />
+          </button>
+          :''
+      }
+    </div>
+  )
+}
+
+const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) =>  {
+  return (
+    <div className={`border-2 border-solid border-gray-900 bg-gray-100 p-2 ml-8`} style={{maxWidth: '21rem'}}>
+      <header className="text-base sm:text-lg">Customize Badge</header>
+      <hr className="border-gray-500"/>
+      <div className="text-sm sm:text-lg flex flex-col mt-2 ml-0 md:ml-4">
+        <label htmlFor="badge-style">Style:&nbsp;
+          <select 
+            id="badge-style" 
+            onChange={(e) => onBadgeUpdate('badgeStyle', e.target.value)} 
+            value = {badgeOptions.badgeStyle}
+          >
+            <option value="flat">Flat</option>
+            <option value="flat-square">Flat Square</option>
+            <option value="plastic">Plastic</option>
+          </select> 
+        </label>
+        
+        <label htmlFor="badge-color">Color:&nbsp;
+          <input 
+            type="color" 
+            id="badge-color" 
+            defaultValue={`#${badgeOptions.badgeColor}`} 
+            className="w-6"
+            onChange={(e) => onBadgeUpdate('badgeColor', e.target.value.replace('#', ''))}
+          />
+        </label>
+        
+        <label htmlFor="badge-label-text">Label Text:&nbsp;
+          <input 
+            type="text" 
+            id="badge-label-text" 
+            placeholder="Profile views" 
+            className="w-2/4 bg-gray-300 pl-2"
+            onChange={(e) => onBadgeUpdate('badgeLabel', e.target.value.trim())}
+            defaultValue={badgeOptions.badgeLabel}
+          />
+        </label>
+        
+        <span className="mt-2 flex items-center">
+          Preview:&nbsp;
+          {
+            isGitHubUsernameValid(githubName)?
+              <img 
+                src={`https://komarev.com/ghpvc/`
+                    + `?username=${githubName}`
+                    + `&label=${encodeURI(badgeOptions.badgeLabel)}`
+                    + `&color=${badgeOptions.badgeColor}`
+                    + `&style=${badgeOptions.badgeStyle}`
+                    }
+              />
+            : <span className="text-xxs md:text-sm text-red-600">Invalid GitHub username</span>
+          }
+          
+        </span>
+      </div>
+    </div>
+  )
+}
+
 const Addons = props => {
+  const [customizeBadgeOpen, setCustomizeOpen] = useState(false);
+  const [debounce, setDebounce] = useState(undefined);
+  const [badgeOptions, setBadgeOptions] = useState({
+    badgeStyle: props.data.badgeStyle, 
+    badgeColor: props.data.badgeColor, 
+    badgeLabel: props.data.badgeLabel
+  });
+
+  useEffect(() => {
+    setBadgeOptions({
+      badgeStyle: props.data.badgeStyle, 
+      badgeColor: props.data.badgeColor, 
+      badgeLabel: props.data.badgeLabel
+    })
+  }, [props.data.badgeStyle, props.data.badgeColor, props.data.badgeLabel])
+
   const blogPostPorkflow = () => {
     let payload = {
       dev: {
@@ -31,78 +132,92 @@ const Addons = props => {
     tempElement.click()
     document.body.removeChild(tempElement)
   }
+
+  const onCustomizeClick = () => {
+    setCustomizeOpen(!customizeBadgeOpen);
+  }
+
+  const onBadgeUpdate = (option, value) => {
+    const callback = () => {
+      let newVal = (option==='badgeLabel' && value==='')?'Profile views':value;
+      setBadgeOptions({...badgeOptions, [option]: newVal});
+      props.handleDataChange(option, {target: {value: newVal}})
+    }
+    clearTimeout(debounce);
+    setDebounce(setTimeout(callback, 300));
+  }
   return (
     <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
       <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
         Add-ons
       </div>
-      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-        <label htmlFor="visitors-count" className="cursor-pointer">
-          <input
-            type="checkbox"
-            id="visitors-count"
-            checked={props.data.visitorsBadge}
-            onChange={event => props.handleCheckChange("visitorsBadge")}
+      <AddonsItem
+        inputId="visitors-count"
+        inputChecked={props.data.visitorsBadge}
+        onInputChange={() => props.handleCheckChange("visitorsBadge")}
+        Icon={ customizeBadgeOpen ? XCircleIcon : ToolsIcon }
+        onIconClick={onCustomizeClick}
+      >
+        display visitors count badge
+      </AddonsItem>
+      {
+        customizeBadgeOpen?
+          <CustomizeBadge 
+            githubName={props.social.github} 
+            badgeOptions={badgeOptions}
+            onBadgeUpdate={onBadgeUpdate}
           />
-          &nbsp; display visitors count badge
-        </label>
-      </div>
-      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-        <label htmlFor="github-stats" className="cursor-pointer">
-          <input
-            id="github-stats"
-            type="checkbox"
-            checked={props.data.githubStats}
-            onChange={event => props.handleCheckChange("githubStats")}
-          />
-          &nbsp; display github profile stats card
-        </label>
-      </div>
-      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-        <label htmlFor="top-languages" className="cursor-pointer">
-          <input
-            id="top-languages"
-            type="checkbox"
-            checked={props.data.topLanguages}
-            onChange={event => props.handleCheckChange("topLanguages")}
-          />
-          &nbsp; display top skills
-        </label>
-      </div>
-      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-        <label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
-          <input
-            id="dev-dynamic-blogs"
-            type="checkbox"
-            checked={props.data.devDynamicBlogs}
-            onChange={event => props.handleCheckChange("devDynamicBlogs")}
-          />
-          &nbsp; display latest dev.to blogs dynamically (GitHub Action)
-        </label>
-      </div>
-      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-        <label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
-          <input
-            id="medium-dynamic-blogs"
-            type="checkbox"
-            checked={props.data.mediumDynamicBlogs}
-            onChange={event => props.handleCheckChange("mediumDynamicBlogs")}
-          />
-          &nbsp; display latest medium blogs dynamically (GitHub Action)
-        </label>
-      </div>
-      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-        <label htmlFor="rss-dynamic-blogs" className="cursor-pointer">
-          <input
-            id="rss-dynamic-blogs"
-            type="checkbox"
-            checked={props.data.rssDynamicBlogs}
-            onChange={event => props.handleCheckChange("rssDynamicBlogs")}
-          />
-          &nbsp; display latest blogs from your personal blog dynamically
-          (GitHub Action)
-        </label>
-      </div>
+        : ''
+      }
+      <AddonsItem
+        inputId="github-profile-trophy"
+        inputChecked={props.data.githubProfileTrophy}
+        onInputChange={() => props.handleCheckChange("githubProfileTrophy")}
+      >
+        display github trophy
+      </AddonsItem>
+      <AddonsItem
+        inputId="github-stats"
+        inputChecked={props.data.githubStats}
+        onInputChange={() => props.handleCheckChange("githubStats")}
+      >
+        display github profile stats card
+      </AddonsItem>
+      <AddonsItem
+        inputId="top-languages"
+        inputChecked={props.data.topLanguages}
+        onInputChange={() => props.handleCheckChange("topLanguages")}
+      >
+        display top skills
+      </AddonsItem>
+      <AddonsItem
+        inputId="twitter-badge"
+        inputChecked={props.data.twitterBadge}
+        onInputChange={() => props.handleCheckChange("twitterBadge")}
+      >
+        display twitter badge
+      </AddonsItem>
+      <AddonsItem
+        inputId="dev-dynamic-blogs"
+        inputChecked={props.data.devDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("devDynamicBlogs")}
+      >
+        display latest dev.to blogs dynamically (GitHub Action)
+      </AddonsItem>
+      <AddonsItem
+        inputId="medium-dynamic-blogs"
+        inputChecked={props.data.mediumDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("mediumDynamicBlogs")}
+      >
+        display latest medium blogs dynamically (GitHub Action)
+      </AddonsItem>
+      <AddonsItem
+        inputId="rss-dynamic-blogs"
+        inputChecked={props.data.rssDynamicBlogs}
+        onInputChange={() => props.handleCheckChange("rssDynamicBlogs")}
+      >
+        display latest blogs from your personal blog dynamically (GitHub Action)
+      </AddonsItem>
 
       {(props.data.devDynamicBlogs && props.social.dev) ||
       (props.data.rssDynamicBlogs && props.social.rssurl) ||
@@ -114,6 +229,7 @@ const Addons = props => {
             download
             <span
               onClick={blogPostPorkflow}
+              onKeyDown={(e) => e.keyCode === 13 && blogPostPorkflow()}
               role="button"
               tabIndex="0"
               style={{ cursor: "pointer", color: "#002ead" }}

src/components/donate.js

@@ -2,7 +2,9 @@ import React from "react"
 const Donate = () => {
   return (
     <>
-      <div className="text-center text-4xl my-2">Support 🙏</div>
+      <div className="text-center text-4xl my-2">Support&nbsp;
+        <span role="img" aria-label="praying hand emoji">🙏</span>
+      </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">
@@ -28,12 +30,13 @@ const Donate = () => {
           </div>
         </div>
         <div className="w-full sm:w-1/3 flex flex-col justify-center items-center">
-          Tip💰
+          <span>Tip<span role="img" aria-label="Dollar medal">💰</span></span>
           {/* 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"
+            rel="noreferrer"
           >
             <img
               className="w-6 h-6 mr-2"
@@ -47,6 +50,7 @@ const Donate = () => {
             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"
+            rel="noreferrer"
           >
             <img
               className="w-6 h-6 mr-2"
@@ -60,6 +64,7 @@ const Donate = () => {
             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"
+            rel="noreferrer"
           >
             <img
               className="w-6 h-6 mr-2"

src/components/markdown.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { isMediumUsernameValid } from "../utils/validation"
-import { icons, skills } from "../constants/skills"
+import { icons, skills, skillWebsites } from "../constants/skills"
 
 const Markdown = props => {
   const Title = props => {
@@ -26,6 +26,17 @@ const Markdown = props => {
     }
     return ""
   }
+  const SectionTitle = props => {
+    if (props.label) {
+      return (
+        <>
+          {`<h3 align="left">${props.label}</h3>`}
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
   const DisplayWork = props => {
     if (props.prefix && props.project) {
       if (props.link) {
@@ -61,7 +72,7 @@ const Markdown = props => {
     if (props.username) {
       return (
         <>
-          {`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}
+          {`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="40" /></a>`}
           <br />
         </>
       )
@@ -69,7 +80,11 @@ const Markdown = props => {
     return ""
   }
   const VisitorsBadge = props => {
-    let link = "https://komarev.com/ghpvc/?username=" + props.github
+    let link = "https://komarev.com/ghpvc/?username=" 
+                + props.github
+                + `&label=${props.badgeOptions.badgeLabel}`
+                + `&color=${props.badgeOptions.badgeColor}`
+                + `&style=${props.badgeOptions.badgeStyle}`
     if (props.show) {
       return (
         <>
@@ -81,6 +96,33 @@ const Markdown = props => {
     }
     return ""
   }
+  const TwitterBadge = props => {
+    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
+    if (props.show) {
+      return (
+        <>
+          {`<p align="left"> <img src="${link}" alt="${props.twitter}" /> </p>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
+  const GithubProfileTrophy = props => {
+    let link =
+      "https://github-profile-trophy.vercel.app/?username=" + props.github
+    if (props.show) {
+      return (
+        <>
+          {`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${props.github}" /></a> </p>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
   const GitHubStats = props => {
     let link =
       "https://github-readme-stats.vercel.app/api?username=" +
@@ -127,12 +169,17 @@ const Markdown = props => {
     skills.forEach(skill => {
       if (props.skills[skill]) {
         listChosenSkills.push(
-          `<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`
+          `
+          <a href="${skillWebsites[skill]}" target="_blank">
+            <img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
+          </a>
+          `
         )
       }
     })
     return listChosenSkills.length > 0 ? (
       <>
+        <SectionTitle label="Languages and Tools:" />
         {`<p align="left">${listChosenSkills.join(" ")}</p>`}
         <br />
         <br />
@@ -193,6 +240,21 @@ const Markdown = props => {
         <VisitorsBadge
           show={props.data.visitorsBadge}
           github={props.social.github}
+          badgeOptions={{
+            badgeLabel: encodeURI(props.data.badgeLabel),
+            badgeColor: props.data.badgeColor,
+            badgeStyle: props.data.badgeStyle
+          }}
+        />
+      </>
+      <>
+        <GithubProfileTrophy
+          show={props.data.githubProfileTrophy}
+          github={props.social.github}
+        />
+        <TwitterBadge
+          show={props.data.twitterBadge}
+          twitter={props.social.twitter}
         />
       </>
       <>
@@ -240,6 +302,9 @@ const Markdown = props => {
           project={props.data.contact}
         />
       </>
+      <>
+        <DisplayWork prefix={props.prefix.resume} link={props.link.resume} />
+      </>
       <>
         <DisplayWork
           prefix={props.prefix.funFact}
@@ -257,23 +322,10 @@ const Markdown = props => {
           }
         />
       </>
+      {isSocial(props.social) ? `<p align="left">` : ""} <br />
       <>
-        <DisplaySkills skills={props.skills} />
+        <SectionTitle label="Connect with me:" />
       </>
-      <>
-        <DisplayTopLanguages
-          show={props.data.topLanguages}
-          showStats={props.data.githubStats}
-          github={props.social.github}
-        />
-      </>
-      <>
-        <GitHubStats
-          show={props.data.githubStats}
-          github={props.social.github}
-        />
-      </>
-      {isSocial(props.social) ? `<p align="center">` : ""} <br />
       <>
         <DisplaySocial
           base="https://codepen.io"
@@ -421,7 +473,31 @@ const Markdown = props => {
           username={props.social.rssurl}
         />
       </>
-      {isSocial(props.social) ? `</p>` : ""}
+      {isSocial(props.social) ? (
+        <>
+          {`</p>`}
+          <br />
+          <br />
+        </>
+      ) : (
+        ""
+      )}
+      <>
+        <DisplaySkills skills={props.skills} />
+      </>
+      <>
+        <DisplayTopLanguages
+          show={props.data.topLanguages}
+          showStats={props.data.githubStats}
+          github={props.social.github}
+        />
+      </>
+      <>
+        <GitHubStats
+          show={props.data.githubStats}
+          github={props.social.github}
+        />
+      </>
     </div>
   )
 }

src/components/markdownPreview.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { icons, skills } from "../constants/skills"
+import { icons, skills, skillWebsites } from "../constants/skills"
 
 const MarkdownPreview = props => {
   const TitlePreview = props => {
@@ -18,6 +18,12 @@ const MarkdownPreview = props => {
     }
     return null
   }
+  const SectionTitle = props => {
+    if (props.label) {
+      return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
+    }
+    return null
+  }
   const DisplayWork = props => {
     if (props.prefix && props.project) {
       if (props.link) {
@@ -83,6 +89,7 @@ const MarkdownPreview = props => {
         <DisplayWork prefix={prefix.ama} project={data.ama} />
         <DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
         <DisplayWork prefix={prefix.blog} link={link.blog} />
+        <DisplayWork prefix={prefix.resume} link={link.resume} />
         <DisplayWork prefix={prefix.contact} project={data.contact} />
         <DisplayWork prefix={prefix.funFact} project={data.funFact} />
       </>
@@ -104,7 +111,8 @@ const MarkdownPreview = props => {
   }
   const SocialPreview = props => {
     return (
-      <div className="flex justify-center items-end">
+      <div className="flex justify-start items-end flex-wrap">
+        <SectionTitle label="Connect with me:" />
         <DisplaySocial
           base="https://codepen.io"
           icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
@@ -215,7 +223,11 @@ const MarkdownPreview = props => {
     )
   }
   const VisitorsBadgePreview = props => {
-    let link = "https://komarev.com/ghpvc/?username=" + props.github
+    let link = "https://komarev.com/ghpvc/?username=" 
+                + props.github
+                + `&label=${props.badgeOptions.badgeLabel}`
+                + `&color=${props.badgeOptions.badgeColor}`
+                + `&style=${props.badgeOptions.badgeStyle}`
     if (props.show) {
       return (
         <div className="text-left my-2">
@@ -226,6 +238,33 @@ const MarkdownPreview = props => {
     }
     return null
   }
+  const TwitterBadgePreview = props => {
+    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
+    if (props.show) {
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <img className="h-4 sm:h-6" src={link} alt={props.twitter} />{" "}
+        </div>
+      )
+    }
+    return null
+  }
+  const GithubProfileTrophyPreview = props => {
+    let link =
+      "https://github-profile-trophy.vercel.app/?username=" + props.github
+    if (props.show) {
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <a href="https://github.com/ryo-ma/github-profile-trophy">
+            <img src={link} alt={props.github} />
+          </a>{" "}
+        </div>
+      )
+    }
+    return null
+  }
   const GitHubStatsPreview = props => {
     let link =
       "https://github-readme-stats.vercel.app/api?username=" +
@@ -259,17 +298,20 @@ const MarkdownPreview = props => {
     skills.forEach(skill => {
       if (props.skills[skill]) {
         listSkills.push(
-          <img
-            className="my-4 mx-4 h-6 w-6 sm:h-10 sm:w-10"
-            key={skill}
-            src={icons[skill]}
-            alt={skill}
-          />
+          <a href={skillWebsites[skill]} target="_blank" rel="noreferrer">
+            <img
+              className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
+              key={skill}
+              src={icons[skill]}
+              alt={skill}
+            />
+          </a>
         )
       }
     })
     return listSkills.length > 0 ? (
       <div className="flex flex-wrap justify-start items-center">
+        <SectionTitle label="Languages and Tools:" />
         {listSkills}
       </div>
     ) : (
@@ -283,8 +325,22 @@ const MarkdownPreview = props => {
       <VisitorsBadgePreview
         show={props.data.visitorsBadge}
         github={props.social.github}
+        badgeOptions={{
+          badgeLabel: encodeURI(props.data.badgeLabel),
+          badgeColor: props.data.badgeColor,
+          badgeStyle: props.data.badgeStyle
+        }}
+      />
+      <GithubProfileTrophyPreview
+        show={props.data.githubProfileTrophy}
+        github={props.social.github}
+      />
+      <TwitterBadgePreview
+        show={props.data.twitterBadge}
+        twitter={props.social.twitter}
       />
       <WorkPreview work={props} />
+      <SocialPreview social={props.social} />
       <SkillsPreview skills={props.skills} />
       <div className="block sm:flex sm:justify-center sm:items-start">
         <TopLanguagesPreview
@@ -296,7 +352,6 @@ const MarkdownPreview = props => {
           github={props.social.github}
         />
       </div>
-      <SocialPreview social={props.social} />
     </div>
   )
 }

src/components/skills.js

@@ -34,7 +34,7 @@ const Skills = props => {
 
       {Object.keys(categorizedSkills).map(key => (
         <div key={key}>
-          <h4 className="text-sm sm:text-xl text-gray-900 text-center">
+          <h4 className="text-sm sm:text-xl text-gray-900 text-left">
             {categorizedSkills[key].title}
           </h4>
           <div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">

src/components/work.js

@@ -151,6 +151,22 @@ const Work = props => {
           onChange={event => props.handleLinkChange("blog", event)}
         />
       </div>
+      <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
+        <input
+          id="resume-prefix"
+          className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          value={props.prefix.resume}
+          onChange={event => props.handlePrefixChange("resume", event)}
+        />
+        <input
+          id="resume"
+          placeholder="resume link"
+          className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          value={props.link.resume}
+          onChange={event => props.handleLinkChange("resume", event)}
+        />
+      </div>
+      
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="funFact-prefix"
@@ -160,7 +176,7 @@ const Work = props => {
         />
         <input
           id="funFact"
-          placeholder="Chai over Coffee"
+          placeholder="I think I am funny"
           className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.funFact}
           onChange={event => props.handleDataChange("funFact", event)}

src/constants/skills.js

@@ -11,6 +11,7 @@ const categorizedSkills = {
       "javascript",
       "typescript",
       "php",
+      "perl",
       "ruby",
       "scala",
       "python",
@@ -56,11 +57,13 @@ const categorizedSkills = {
       "nodejs",
       "spring",
       "express",
+      "graphql",
       "kafka",
       "solr",
       "rabbitMQ",
       "hadoop",
       "nginx",
+      "openresty",
     ],
   },
 
@@ -96,12 +99,14 @@ const categorizedSkills = {
       "hive",
       "realm",
       "mariadb",
+      "cockroachdb",
+      "elasticsearch",
     ],
   },
 
   data_visualization: {
     title: "Data Visualization",
-    skills: ["d3js", "chartjs", "canvasjs"],
+    skills: ["d3js", "chartjs", "canvasjs", "kibana", "grafana"],
   },
 
   devops: {
@@ -115,6 +120,7 @@ const categorizedSkills = {
       "bash",
       "azure",
       "vagrant",
+      "circleci"
     ],
   },
 
@@ -134,6 +140,7 @@ const categorizedSkills = {
       "codeigniter",
       "rails",
       "flask",
+      "quasar"
     ],
   },
 
@@ -155,6 +162,7 @@ const categorizedSkills = {
     skills: [
       "illustrator",
       "photoshop",
+      "xd",
       "figma",
       "blender",
       "sketch",
@@ -165,7 +173,23 @@ const categorizedSkills = {
 
   static_site_generator: {
     title: "Static Site Generators",
-    skills: ["gatsby", "gridsome", "hugo", "jekyll", "nextjs", "nuxtjs"],
+    skills: [
+      "gatsby", 
+      "gridsome", 
+      "hugo", 
+      "jekyll", 
+      "nextjs", 
+      "nuxtjs", 
+      "11ty", 
+      "scully",
+      "sculpin",
+      "sapper",
+    ],
+  },
+
+  game_engines:{
+    title: "Game Engines",
+    skills: ["unity"],
   },
 
   other: {
@@ -214,6 +238,7 @@ const icons = {
   express:
     "https://devicons.github.io/devicon/devicon.git/icons/express/express-original-wordmark.svg",
   go: "https://devicons.github.io/devicon/devicon.git/icons/go/go-original.svg",
+  graphql: "https://www.vectorlogo.zone/logos/graphql/graphql-icon.svg",
   gulp:
     "https://devicons.github.io/devicon/devicon.git/icons/gulp/gulp-plain.svg",
   html5:
@@ -236,12 +261,18 @@ const icons = {
     "https://devicons.github.io/devicon/devicon.git/icons/nginx/nginx-original.svg",
   nodejs:
     "https://devicons.github.io/devicon/devicon.git/icons/nodejs/nodejs-original-wordmark.svg",
+  openresty:
+    "https://symbols-electrical.getvecta.com/stencil_25/66_openresty.403a21ca72.svg",
   oracle:
     "https://devicons.github.io/devicon/devicon.git/icons/oracle/oracle-original.svg",
   photoshop:
     "https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg",
+  xd:
+    "https://cdn.worldvectorlogo.com/logos/adobe-xd.svg",
   php:
     "https://devicons.github.io/devicon/devicon.git/icons/php/php-original.svg",
+  perl:
+    "https://api.iconify.design/logos-perl.svg",
   postgresql:
     "https://devicons.github.io/devicon/devicon.git/icons/postgresql/postgresql-original-wordmark.svg",
   python:
@@ -329,6 +360,7 @@ const icons = {
   nextjs: "https://cdn.worldvectorlogo.com/logos/nextjs-3.svg",
   reactnative: "https://reactnative.dev/img/header_logo.svg",
   mariadb: "https://www.vectorlogo.zone/logos/mariadb/mariadb-icon.svg",
+  cockroachdb:  "https://worldvectorlogo.com/es/download/cockroachdb.svg",
   objectivec:
     "https://www.vectorlogo.zone/logos/apple_objectivec/apple_objectivec-icon.svg",
   clojure:
@@ -356,6 +388,157 @@ const icons = {
     "https://devicons.github.io/devicon/devicon.git/icons/ember/ember-original-wordmark.svg",
   scikit_learn:
     "https://upload.wikimedia.org/wikipedia/commons/0/05/Scikit_learn_logo_small.svg",
+  quasar:
+    "https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
+  kibana:
+    "https://www.vectorlogo.zone/logos/elasticco_kibana/elasticco_kibana-icon.svg",
+  grafana:
+    "https://www.vectorlogo.zone/logos/grafana/grafana-icon.svg",
+  elasticsearch:
+    "https://www.vectorlogo.zone/logos/elastic/elastic-icon.svg",
+  circleci:
+    "https://www.vectorlogo.zone/logos/circleci/circleci-icon.svg",
+  scully:
+    "https://raw.githubusercontent.com/scullyio/scully/main/assets/logos/SVG/scullyio-icon.svg",
+  "11ty":
+    "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/f4c85cce5790758286b8f155ef9a177710b995df/11ty.svg",
+  sculpin:
+    "https://gist.githubusercontent.com/vivek32ta/c7f7bf583c1fb1c58d89301ea40f37fd/raw/1782aef8672484698c0dd407f900c4a329ed5bc4/sculpin.svg",
+  sapper:
+    "https://raw.githubusercontent.com/bestofjs/bestofjs-webui/master/public/logos/sapper.svg", 
+  unity:
+    "https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg"
+}
+
+const skillWebsites = {
+  vuejs: "https://vuejs.org/",
+  react: "https://reactjs.org/",
+  angularjs: "https://angular.io",
+  aws: "https://aws.amazon.com",
+  android: "https://developer.android.com",
+  backbonejs: "https://backbonejs.org",
+  bootstrap: "https://getbootstrap.com",
+  c: "https://www.cprogramming.com/",
+  canvasjs: "https://canvasjs.com",
+  coffeescript: "https://offeescript.org",
+  codeigniter: "https://codeigniter.com",
+  cplusplus: "https://www.w3schools.com/cpp/",
+  css3: "https://www.w3schools.com/css/",
+  csharp: "https://www.w3schools.com/cs/",
+  d3js: "https://d3js.org/",
+  django: "https://www.djangoproject.com/",
+  docker: "https://www.docker.com/",
+  dotnet: "https://dotnet.microsoft.com/",
+  electron: "https://www.electronjs.org",
+  express: "https://expressjs.com",
+  go: "https://golang.org",
+  graphql: "https://graphql.org",
+  gulp: "https://gulpjs.com",
+  html5: "https://www.w3.org/html/",
+  hugo: "https://gohugo.io/",
+  java: "https://www.java.com",
+  javascript: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
+  ionic: "https://ionicframework.com",
+  laravel: "https://laravel.com/",
+  meteor: "https://www.meteor.com/",
+  mongodb: "https://www.mongodb.com/",
+  mysql: "https://www.mysql.com/",
+  nginx: "https://www.nginx.com",
+  nodejs: "https://nodejs.org",
+  openresty: "https://openresty.org/",
+  oracle: "https://www.oracle.com/",
+  photoshop: "https://www.photoshop.com/en",
+  xd: "https://www.adobe.com/products/xd.html",
+  php: "https://www.php.net",
+  perl: "https://www.perl.org/",
+  postgresql: "https://www.postgresql.org",
+  python: "https://www.python.org",
+  rails: "https://rubyonrails.org",
+  redis: "https://redis.io",
+  ruby: "https://www.ruby-lang.org/en/",
+  rust: "https://www.rust-lang.org",
+  sass: "https://sass-lang.com",
+  scala: "https://www.scala-lang.org",
+  symfony: "https://symfony.com",
+  spring: "",
+  swift: "",
+  typescript: "https://www.typescriptlang.org/",
+  linux: "https://www.linux.org/",
+  redux: "https://redux.js.org",
+  webpack: "https://webpack.js.org",
+  flutter: "https://flutter.dev",
+  dart: "https://dart.dev",
+  kotlin: "https://kotlinlang.org",
+  tensorflow: "https://www.tensorflow.org",
+  chartjs: "https://www.chartjs.org",
+  jenkins: "https://www.jenkins.io",
+  gcp: "https://cloud.google.com",
+  kubernetes: "https://kubernetes.io",
+  azure: "https://azure.microsoft.com/en-in/",
+  git: "https://git-scm.com/",
+  kafka: "https://kafka.apache.org/",
+  solr: "https://lucene.apache.org/solr/",
+  cassandra: "https://cassandra.apache.org/",
+  rabbitMQ: "https://www.rabbitmq.com",
+  hadoop: "https://hadoop.apache.org/",
+  bash: "https://www.gnu.org/software/bash/",
+  pytorch: "https://pytorch.org/",
+  opencv: "https://opencv.org/",
+  illustrator: "https://www.adobe.com/in/products/illustrator.html",
+  figma: "https://www.figma.com/",
+  blender: "",
+  babel: "https://babeljs.io/",
+  sketch: "https://www.sketch.com/",
+  flask: "",
+  nativescript: "https://nativescript.org/",
+  xamarin: "https://dotnet.microsoft.com/apps/xamarin",
+  vagrant: "",
+  tailwind: "https://tailwindcss.com/",
+  materialize: "https://materializecss.com/",
+  invision: "https://www.invisionapp.com/",
+  framer: "",
+  bulma: "https://bulma.io/",
+  couchdb: "",
+  firebase: "https://firebase.google.com/",
+  amplify: "https://aws.amazon.com/amplify/",
+  hive: "",
+  realm: "",
+  gatsby: "https://www.gatsbyjs.com/",
+  gridsome: "",
+  nuxtjs: "https://nuxtjs.org/",
+  jekyll: "https://jekyllrb.com/",
+  nextjs: "https://nextjs.org/",
+  reactnative: "https://reactnative.dev/",
+  mariadb: "https://mariadb.org/",
+  cockroachdb: "https://www.cockroachlabs.com/product/cockroachdb/",
+  objectivec: "",
+  clojure: "",
+  haskell: "",
+  svelte: "https://svelte.dev",
+  vuetify: "https://vuetifyjs.com/en/",
+  pug: "https://pugjs.org",
+  mocha: "https://mochajs.org",
+  jest: "https://jestjs.io",
+  cypress: "https://www.cypress.io",
+  selenium: "https://www.selenium.dev",
+  puppeteer: "https://github.com/puppeteer/puppeteer",
+  karma: "https://karma-runner.github.io/latest/index.html",
+  jasmine: "https://jasmine.github.io/",
+  gtk: "",
+  qt: "",
+  wx_widgets: "",
+  ember: "",
+  scikit_learn: "",
+  quasar: "https://quasar.dev/",
+  kibana: "https://www.elastic.co/kibana",
+  grafana: "https://grafana.com",
+  elasticsearch: "https://www.elastic.co",
+  circleci: "https://circleci.com",
+  scully: "https://scully.io/",
+  sculpin: "https://sculpin.io/",
+  "11ty": "https://www.11ty.dev/",
+  sapper: "https://sapper.svelte.dev/",
+  unity: "https://unity.com/"
 }
 
 const initialSkillState = {}
@@ -371,4 +554,11 @@ skills.forEach(skill => {
 
 const categories = Object.keys(categorizedSkills)
 
-export { initialSkillState, icons, skills, categorizedSkills, categories }
+export {
+  initialSkillState,
+  icons,
+  skills,
+  skillWebsites,
+  categorizedSkills,
+  categories,
+}

src/images/icons/mysqlworkbench.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" version="1"><rect width="28" height="28" x="-30" y="-30" fill="#26557c" rx="1.4" ry="1.4" transform="matrix(0,-1,-1,0,0,0)"/><path d="m8.0254 8.0001c-0.7825-0.0166-1.1494 0.5244-0.9883 1.457 0.052 0.3006 0.3152 0.7299 0.8828 1.4419 0.63122 0.7909 0.88514 1.2227 1.1602 1.9707 0.4336 1.1793 0.63403 1.5748 0.98633 1.9434 0.27366 0.2863 0.27369 0.28712 0.08984 0.87109-0.28507 0.90556-0.34407 2.7207-0.11523 3.5742 0.34248 1.2774 0.76402 1.8574 1.3516 1.8574 0.41968 0 0.76364-0.35092 0.88672-0.9043 0.04268-0.19186 0.12249-0.46607 0.17773-0.60938 0.09535-0.24728 0.12093-0.22818 0.49414 0.38086 0.21628 0.35296 0.62866 0.87861 0.91602 1.168 0.6638 0.66845 1.5749 1.4217 1.6406 1.3574 0.02775-0.02713-0.238-0.42177-0.58984-0.87891s-1.0151-1.5189-1.4746-2.3594c-0.53593-0.98029-0.8997-1.5286-1.0137-1.5293-0.37045-0.0025-0.71588 0.58004-0.91602 1.5469-0.23056 1.1138-0.63675 0.92708-0.9668-0.44531-0.19019-0.79085-0.09106-1.856 0.26367-2.8535 0.16137-0.45376 0.29297-0.87373 0.29297-0.93164s-0.25731-0.54348-0.57227-1.0801c-0.315-0.537-0.6851-1.297-0.822-1.69-0.3326-0.954-0.4905-1.232-1.1582-2.043-0.6879-0.8346-0.753-1.2203-0.2051-1.2166 0.42554 0.00281 1.1123 0.28944 1.8027 0.75391 0.4371 0.29404 0.58523 0.33398 1.2871 0.33398 0.88142 0 1.0709 0.0722 2.293 0.87695 1.2445 0.81958 2.1722 1.5813 2.8145 2.3125 0.5704 0.64937 0.88201 1.2138 2.5605 4.6562 0.64433 1.3214 1.2158 1.9593 2.0039 2.2324 1.2173 0.42185 1.6317 0.61314 2.168 0.99805l0.56641 0.40625-0.38086 0.07422c-0.2103 0.04033-0.66847 0.10616-1.0176 0.14648-0.72741 0.084-1.2031 0.38573-1.2031 0.76367 0 0.42592 1.4513 1.6453 2.9062 2.4414 0.69903 0.38247 1.3716 0.75927 1.4941 0.83789 0.32598 0.20922 0.41424 0.18389 0.33008-0.0918-0.17624-0.57738-0.77279-1.1398-2.4297-2.2949-0.97197-0.6776-0.98199-0.65244 0.31641-0.78125 0.925-0.091 1.392-0.249 1.392-0.472 0-0.102-0.47-0.644-1.045-1.203-0.9-0.876-1.204-1.094-2.195-1.577-1.35-0.656-1.842-1.177-2.153-2.283-0.464-1.649-1.712-3.587-3.371-5.23-1.712-1.696-3.347-2.6344-4.845-2.7814-0.609-0.0598-0.924-0.1522-1.239-0.3653-0.5332-0.3611-1.7717-0.7684-2.3766-0.7812zm2.9629 3.002c-0.12266-0.0079-0.22945 0.0085-0.30273 0.05859-0.27341 0.18699-0.24099 0.41504 0.08008 0.55664 0.15092 0.06656 0.36501 0.30147 0.47656 0.52148 0.3751 0.73978 0.94985 0.2445 0.69336-0.59766-0.08085-0.26546-0.5793-0.51547-0.94727-0.53906z" opacity=".2"/><path fill="#fff" d="m8.0254 7c-0.7825-0.0166-1.1494 0.5244-0.9883 1.457 0.052 0.3006 0.3152 0.7302 0.8828 1.4414 0.6312 0.7906 0.8852 1.2226 1.1602 1.9706 0.4336 1.179 0.634 1.575 0.9859 1.943 0.274 0.287 0.274 0.288 0.09 0.872-0.2848 0.905-0.3438 2.72-0.115 3.574 0.342 1.277 0.764 1.857 1.352 1.857 0.419 0 0.763-0.351 0.886-0.904 0.043-0.192 0.123-0.466 0.178-0.609 0.095-0.248 0.121-0.229 0.494 0.38 0.216 0.353 0.629 0.879 0.916 1.168 0.664 0.669 1.575 1.422 1.641 1.358 0.028-0.027-0.238-0.422-0.59-0.879s-1.015-1.519-1.475-2.359c-0.536-0.981-0.899-1.529-1.013-1.53-0.371-0.002-0.716 0.58-0.916 1.547-0.231 1.114-0.637 0.927-0.967-0.445-0.19-0.791-0.091-1.856 0.264-2.854 0.161-0.453 0.293-0.873 0.293-0.931s-0.258-0.544-0.573-1.08c-0.315-0.537-0.6851-1.297-0.822-1.69-0.3326-0.954-0.4905-1.232-1.1582-2.0429-0.6879-0.8348-0.753-1.2204-0.2051-1.2168 0.4255 0.0029 1.1123 0.2895 1.8023 0.7539 0.438 0.2941 0.586 0.334 1.288 0.334 0.881 0 1.07 0.0722 2.293 0.877 1.244 0.8198 2.172 1.5818 2.814 2.3128 0.57 0.649 0.882 1.214 2.561 4.656 0.644 1.321 1.215 1.959 2.003 2.232 1.218 0.422 1.632 0.613 2.168 0.998l0.567 0.407-0.381 0.074c-0.21 0.04-0.669 0.106-1.018 0.146-0.727 0.084-1.203 0.386-1.203 0.764 0 0.426 1.451 1.645 2.906 2.441 0.7 0.383 1.372 0.76 1.495 0.838 0.326 0.21 0.414 0.184 0.33-0.091-0.177-0.578-0.773-1.14-2.43-2.295-0.972-0.678-0.982-0.653 0.316-0.782 0.926-0.092 1.393-0.25 1.393-0.472 0-0.102-0.47-0.644-1.045-1.203-0.9-0.877-1.204-1.094-2.195-1.577-1.35-0.656-1.842-1.177-2.153-2.283-0.464-1.65-1.712-3.587-3.371-5.23-1.712-1.6965-3.347-2.6345-4.845-2.7815-0.609-0.0598-0.924-0.1522-1.239-0.3653-0.5332-0.3611-1.7717-0.7684-2.3766-0.7812zm2.9626 3.002c-0.122-0.0079-0.229 0.008-0.302 0.059-0.274 0.187-0.241 0.415 0.08 0.556 0.151 0.067 0.365 0.302 0.476 0.522 0.375 0.739 0.95 0.244 0.694-0.598-0.081-0.265-0.58-0.515-0.948-0.539z"/><path fill="#fff" d="m3.4004 2c-0.7756 0-1.4004 0.6248-1.4004 1.4004v1c0-0.7756 0.6248-1.4004 1.4004-1.4004h25.2c0.775 0 1.4 0.6248 1.4 1.4004v-1c0-0.7756-0.625-1.4004-1.4-1.4004h-25.2z" opacity=".1"/><path d="m2 28.6v1c0 0.775 0.6248 1.4 1.4004 1.4h25.2c0.775 0 1.4-0.625 1.4-1.4v-1c0 0.775-0.625 1.4-1.4 1.4h-25.2c-0.7752 0-1.4-0.625-1.4-1.4z" opacity=".2"/></svg>

src/pages/index.js

@@ -8,7 +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 Donate from "../components/donate"
 import { initialSkillState } from "../constants/skills"
 import gsap from "gsap"
 import Loader from "../components/loader"
@@ -38,9 +38,11 @@ const DEFAULT_PREFIX = {
   helpWith: "🤝 I’m looking for help with",
   ama: "💬 Ask me about",
   contact: "📫 How to reach me",
+  resume: "📄 Know about my experiences",
   funFact: "⚡ Fun fact",
   portfolio: "👨‍💻 All of my projects are available at",
   blog: "📝 I regulary write articles on",
+  
 }
 
 const DEFAULT_DATA = {
@@ -53,7 +55,12 @@ const DEFAULT_DATA = {
   ama: "",
   contact: "",
   funFact: "",
+  twitterBadge: false,
   visitorsBadge: false,
+  badgeStyle: "flat",
+  badgeColor: "0e75b6",
+  badgeLabel: "Profile views",
+  githubProfileTrophy: false,
   githubStats: false,
   topLanguages: false,
   devDynamicBlogs: false,
@@ -67,6 +74,7 @@ const DEFAULT_LINK = {
   helpWith: "",
   portfolio: "",
   blog: "",
+  resume: "",
 }
 
 const DEFAULT_SOCIAL = {
@@ -221,10 +229,19 @@ const IndexPage = () => {
     trimDataValues(social, setSocial)
     trimDataValues(link, setLink)
     resetCopyMarkdownButton()
-    if (data.visitorsBadge || data.githubStats || data.topLanguages) {
+    if (
+      data.visitorsBadge ||
+      data.githubProfileTrophy ||
+      data.githubStats ||
+      data.topLanguages
+    ) {
       if (social.github && isGitHubUsernameValid(social.github)) {
         generate()
       }
+    } else if (data.twitterBadge) {
+      if (social.twitter) {
+        generate()
+      }
     } else if (social.github) {
       if (isGitHubUsernameValid(social.github)) {
         generate()
@@ -359,10 +376,10 @@ const IndexPage = () => {
       return
     }
 
-    setPrefix(cache.prefix || DEFAULT_PREFIX)
-    setData(cache.data || DEFAULT_DATA)
-    setLink(cache.link || DEFAULT_LINK)
-    setSocial(cache.social || DEFAULT_SOCIAL)
+    setPrefix(cache.prefix ? {...DEFAULT_PREFIX, ...cache.prefix} : DEFAULT_PREFIX)
+    setData(cache.data ? {...DEFAULT_DATA, ...cache.data} : DEFAULT_DATA)
+    setLink(cache.link ? {...DEFAULT_LINK, ...cache.link} : DEFAULT_LINK)
+    setSocial(cache.social ? {...DEFAULT_SOCIAL, ...cache.social} : DEFAULT_SOCIAL)
 
     const cacheSkills = mergeDefaultWithNewDataSkills(
       DEFAULT_SKILLS,
@@ -464,9 +481,13 @@ const IndexPage = () => {
             data={data}
             social={social}
             handleCheckChange={handleCheckChange}
+            handleDataChange={handleDataChange}
           />
           <div className="section">
-            {(data.visitorsBadge || data.githubStats || data.topLanguages) &&
+            {(data.visitorsBadge ||
+              data.githubProfileTrophy ||
+              data.githubStats ||
+              data.topLanguages) &&
             !social.github ? (
               <div className="warning">
                 * Please add github username to use these add-ons
@@ -511,6 +532,13 @@ const IndexPage = () => {
             ) : (
               ""
             )}
+            {(data.twitterBadge && !social.twitter) ? (
+              <div className="warning">
+                * Please add twitter username to use these add-ons
+              </div>
+            ) : (
+              ""
+            )}
           </div>
           <div className="flex items-center justify-center w-full">
             <div
@@ -518,6 +546,7 @@ const IndexPage = () => {
               tabIndex="0"
               role="button"
               onClick={handleGenerate}
+              onKeyDown={(e) => e.keyCode === 13 && handleGenerate()}
             >
               Generate README
             </div>
@@ -529,21 +558,17 @@ const IndexPage = () => {
         {generateMarkdown || generatePreview ? (
           <div className="markdown-section p-4 sm:py-4 sm:px-10">
             <div className="w-full flex justify-between items-center">
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
-                role="button"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                 onClick={handleBackToEdit}
               >
-                <ArrowLeftIcon size={16} />
+                <ArrowLeftIcon size={24} />
                 <span className="hidden sm:block"> back to edit</span>
-              </div>
+              </button>
 
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                 id="copy-button"
-                role="button"
                 onClick={handleCopyToClipboard}
               >
                 {copyObj.isCopied === true ? (
@@ -554,38 +579,32 @@ const IndexPage = () => {
                 <span className="hidden sm:block" id="copy-markdown">
                   {copyObj.copiedText}
                 </span>
-              </div>
+              </button>
 
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                 id="download-md-button"
-                role="button"
                 onClick={handleDownloadMarkdown}
               >
                 <DownloadIcon size={24} />
                 <span className="hidden sm:block" id="download-markdown">
                   download markdown
                 </span>
-              </div>
+              </button>
 
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                 id="download-json-button"
-                role="button"
                 onClick={handleDownloadJson}
               >
                 <FileCodeIcon size={24} />
                 <span className="hidden sm:block" id="download-json">
                   download backup
                 </span>
-              </div>
+              </button>
 
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
-                role="button"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                 onClick={handleGeneratePreview}
               >
                 {previewMarkdown.isPreview ? (
@@ -596,7 +615,7 @@ const IndexPage = () => {
                 <span className="hidden sm:block ml-1" id="preview-markdown">
                   {previewMarkdown.buttonText}
                 </span>
-              </div>
+              </button>
             </div>
 
             <div className="w-full flex justify-center items-center">
@@ -648,14 +667,12 @@ const IndexPage = () => {
                 new feature
               </span>
             </div>
-            <div
+            <button
               className="text-xxs sm:text-sm border-2 w-auto px-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center"
-              role="button"
-              tabIndex="0"
               onClick={handleResetForm}
             >
               Reset form
-            </div>
+            </button>
           </div>
           <div className="w-full flex justify-start items-center my-4">
             <input
@@ -665,14 +682,12 @@ const IndexPage = () => {
               value={restore}
               onChange={e => setRestore(e.target.value)}
             />
-            <div
+            <button
               className="text-xxs sm:text-sm border-2 w-32 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1"
-              role="button"
-              tabIndex="0"
               onClick={handleRestore}
             >
               Restore
-            </div>
+            </button>
           </div>
           <div className="flex flex-col items-start justify-center">
             <div className="text-green-700 font-medium">Tips</div>