make node version 14

fix: nextjs broken logo url

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "stable"
+  - "14"
 cache:
   directories:
     - "node_modules"

package-lock.json

@@ -8769,9 +8769,9 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
-      "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
+      "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
       "requires": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -22698,9 +22698,9 @@
       "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
     },
     "path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -27594,9 +27594,9 @@
       }
     },
     "tmpl": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
-      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
       "dev": true
     },
     "to-array": {

src/components/__tests__/__snapshots__/addons.test.js.snap

@@ -99,6 +99,24 @@ exports[`Addons renders correctly 1`] = `
   >
     display top skills
   </AddonsItem>
+  <AddonsItem
+    Options={
+      <CustomizeOptions
+        CustomizationOptions={
+          <CustomizeStreakStats
+            onUpdate={[Function]}
+            options={Object {}}
+            prefix="streak-stats"
+          />
+        }
+        title="Customize Streak Stats Card"
+      />
+    }
+    inputId="streak-stats"
+    onInputChange={[Function]}
+  >
+    display github streak stats
+  </AddonsItem>
   <AddonsItem
     inputChecked={false}
     inputId="twitter-badge"
@@ -339,15 +357,19 @@ exports[`Addons should render Customize Badges 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="visitors-count"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="visitors-count"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -510,15 +532,19 @@ exports[`Addons should render Customize Badges 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="github-profile-trophy"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="github-profile-trophy"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -558,15 +584,19 @@ exports[`Addons should render Customize Badges 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="github-stats"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="github-stats"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -644,15 +674,19 @@ exports[`Addons should render Customize Badges 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="top-languages"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="top-languages"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -699,6 +733,84 @@ exports[`Addons should render Customize Badges 1`] = `
         </button>
       </div>
     </AddonsItem>
+    <AddonsItem
+      Options={
+        <CustomizeOptions
+          CustomizationOptions={
+            <CustomizeStreakStats
+              onUpdate={[Function]}
+              options={Object {}}
+              prefix="streak-stats"
+            />
+          }
+          title="Customize Streak Stats Card"
+        />
+      }
+      inputId="streak-stats"
+      onInputChange={[Function]}
+    >
+      <div
+        className="py-2 flex justify-start items-center text-sm sm:text-lg"
+      >
+        <label
+          className="checkbox-label flex items-center"
+          htmlFor="streak-stats"
+        >
+          <input
+            className="checkbox-label__input"
+            id="streak-stats"
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            class="checkbox-label__control"
+          />
+          <span
+            className="pl-4"
+          >
+            display github streak stats
+          </span>
+        </label>
+        <button
+          className="flex ml-3 focus:bg-gray-400"
+          id="streak-stats-open-btn"
+          onClick={[Function]}
+          style={
+            Object {
+              "outline": "none",
+            }
+          }
+        >
+          <ToolsIcon
+            className="transform scale-100 md:scale-125"
+            size={16}
+            verticalAlign="text-bottom"
+          >
+            <svg
+              aria-hidden="true"
+              className="transform scale-100 md:scale-125"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.433 2.304A4.494 4.494 0 003.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 11-1.498-.073l.163-3.33c.002-.085-.05-.216-.207-.316A5.996 5.996 0 012 6a5.994 5.994 0 012.567-4.92 1.482 1.482 0 011.673-.04c.462.296.76.827.76 1.423v2.82c0 .082.041.16.11.206l.75.51a.25.25 0 00.28 0l.75-.51A.25.25 0 009 5.282V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 011.673.04A5.994 5.994 0 0114 6a5.996 5.996 0 01-2.786 5.068c-.157.1-.209.23-.207.315l.163 3.33a.75.75 0 11-1.498.074l-.164-3.345c-.027-.717.384-1.312.902-1.64A4.496 4.496 0 0012.5 6a4.494 4.494 0 00-1.933-3.696c-.024.017-.067.067-.067.16v2.818a1.75 1.75 0 01-.767 1.448l-.75.51a1.75 1.75 0 01-1.966 0l-.75-.51A1.75 1.75 0 015.5 5.282V2.463c0-.092-.043-.142-.067-.159zm.01-.005z\\"></path>",
+                }
+              }
+              fill="currentColor"
+              height={16}
+              role="img"
+              style={
+                Object {
+                  "display": "inline-block",
+                  "userSelect": "none",
+                  "verticalAlign": "text-bottom",
+                }
+              }
+              viewBox="0 0 16 16"
+              width={16}
+            />
+          </ToolsIcon>
+        </button>
+      </div>
+    </AddonsItem>
     <AddonsItem
       inputChecked={false}
       inputId="twitter-badge"
@@ -708,15 +820,19 @@ exports[`Addons should render Customize Badges 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="twitter-badge"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="twitter-badge"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -734,15 +850,19 @@ exports[`Addons should render Customize Badges 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="dev-dynamic-blogs"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="dev-dynamic-blogs"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -760,15 +880,19 @@ exports[`Addons should render Customize Badges 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="medium-dynamic-blogs"
         >
           <input
             checked="some-medium-blogs-value"
+            className="checkbox-label__input"
             id="medium-dynamic-blogs"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -786,15 +910,19 @@ exports[`Addons should render Customize Badges 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="rss-dynamic-blogs"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="rss-dynamic-blogs"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -931,15 +1059,19 @@ exports[`Addons should render Customize Github stats card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="visitors-count"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="visitors-count"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -995,15 +1127,19 @@ exports[`Addons should render Customize Github stats card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="github-profile-trophy"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="github-profile-trophy"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -1043,15 +1179,19 @@ exports[`Addons should render Customize Github stats card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="github-stats"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="github-stats"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -1254,15 +1394,20 @@ exports[`Addons should render Customize Github stats card 1`] = `
                 />
               </label>
               <label
+                className="checkbox-label"
                 htmlFor="stats-hide-border"
               >
                 Hide border: 
                 <input
                   checked={false}
+                  className="checkbox-label__input"
                   id="stats-hide-border"
                   onChange={[Function]}
                   type="checkbox"
                 />
+                <span
+                  class="checkbox-label__control"
+                />
               </label>
               <label
                 htmlFor="stats-cache-seconds"
@@ -1327,15 +1472,19 @@ exports[`Addons should render Customize Github stats card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="top-languages"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="top-languages"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -1382,6 +1531,84 @@ exports[`Addons should render Customize Github stats card 1`] = `
         </button>
       </div>
     </AddonsItem>
+    <AddonsItem
+      Options={
+        <CustomizeOptions
+          CustomizationOptions={
+            <CustomizeStreakStats
+              onUpdate={[Function]}
+              options={Object {}}
+              prefix="streak-stats"
+            />
+          }
+          title="Customize Streak Stats Card"
+        />
+      }
+      inputId="streak-stats"
+      onInputChange={[Function]}
+    >
+      <div
+        className="py-2 flex justify-start items-center text-sm sm:text-lg"
+      >
+        <label
+          className="checkbox-label flex items-center"
+          htmlFor="streak-stats"
+        >
+          <input
+            className="checkbox-label__input"
+            id="streak-stats"
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            class="checkbox-label__control"
+          />
+          <span
+            className="pl-4"
+          >
+            display github streak stats
+          </span>
+        </label>
+        <button
+          className="flex ml-3 focus:bg-gray-400"
+          id="streak-stats-open-btn"
+          onClick={[Function]}
+          style={
+            Object {
+              "outline": "none",
+            }
+          }
+        >
+          <ToolsIcon
+            className="transform scale-100 md:scale-125"
+            size={16}
+            verticalAlign="text-bottom"
+          >
+            <svg
+              aria-hidden="true"
+              className="transform scale-100 md:scale-125"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.433 2.304A4.494 4.494 0 003.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 11-1.498-.073l.163-3.33c.002-.085-.05-.216-.207-.316A5.996 5.996 0 012 6a5.994 5.994 0 012.567-4.92 1.482 1.482 0 011.673-.04c.462.296.76.827.76 1.423v2.82c0 .082.041.16.11.206l.75.51a.25.25 0 00.28 0l.75-.51A.25.25 0 009 5.282V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 011.673.04A5.994 5.994 0 0114 6a5.996 5.996 0 01-2.786 5.068c-.157.1-.209.23-.207.315l.163 3.33a.75.75 0 11-1.498.074l-.164-3.345c-.027-.717.384-1.312.902-1.64A4.496 4.496 0 0012.5 6a4.494 4.494 0 00-1.933-3.696c-.024.017-.067.067-.067.16v2.818a1.75 1.75 0 01-.767 1.448l-.75.51a1.75 1.75 0 01-1.966 0l-.75-.51A1.75 1.75 0 015.5 5.282V2.463c0-.092-.043-.142-.067-.159zm.01-.005z\\"></path>",
+                }
+              }
+              fill="currentColor"
+              height={16}
+              role="img"
+              style={
+                Object {
+                  "display": "inline-block",
+                  "userSelect": "none",
+                  "verticalAlign": "text-bottom",
+                }
+              }
+              viewBox="0 0 16 16"
+              width={16}
+            />
+          </ToolsIcon>
+        </button>
+      </div>
+    </AddonsItem>
     <AddonsItem
       inputChecked={false}
       inputId="twitter-badge"
@@ -1391,15 +1618,19 @@ exports[`Addons should render Customize Github stats card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="twitter-badge"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="twitter-badge"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -1417,15 +1648,19 @@ exports[`Addons should render Customize Github stats card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="dev-dynamic-blogs"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="dev-dynamic-blogs"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -1443,15 +1678,19 @@ exports[`Addons should render Customize Github stats card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="medium-dynamic-blogs"
         >
           <input
             checked="some-medium-blogs-value"
+            className="checkbox-label__input"
             id="medium-dynamic-blogs"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -1469,15 +1708,19 @@ exports[`Addons should render Customize Github stats card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="rss-dynamic-blogs"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="rss-dynamic-blogs"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -1614,15 +1857,19 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="visitors-count"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="visitors-count"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -1678,15 +1925,19 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="github-profile-trophy"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="github-profile-trophy"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -1726,15 +1977,19 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="github-stats"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="github-stats"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -1812,15 +2067,19 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="top-languages"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="top-languages"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -2023,15 +2282,20 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
                 />
               </label>
               <label
+                className="checkbox-label"
                 htmlFor="top-lang-hide-border"
               >
                 Hide border: 
                 <input
                   checked={false}
+                  className="checkbox-label__input"
                   id="top-lang-hide-border"
                   onChange={[Function]}
                   type="checkbox"
                 />
+                <span
+                  class="checkbox-label__control"
+                />
               </label>
               <label
                 htmlFor="top-lang-cache-seconds"
@@ -2065,6 +2329,84 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
         </div>
       </CustomizeOptions>
     </AddonsItem>
+    <AddonsItem
+      Options={
+        <CustomizeOptions
+          CustomizationOptions={
+            <CustomizeStreakStats
+              onUpdate={[Function]}
+              options={Object {}}
+              prefix="streak-stats"
+            />
+          }
+          title="Customize Streak Stats Card"
+        />
+      }
+      inputId="streak-stats"
+      onInputChange={[Function]}
+    >
+      <div
+        className="py-2 flex justify-start items-center text-sm sm:text-lg"
+      >
+        <label
+          className="checkbox-label flex items-center"
+          htmlFor="streak-stats"
+        >
+          <input
+            className="checkbox-label__input"
+            id="streak-stats"
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            class="checkbox-label__control"
+          />
+          <span
+            className="pl-4"
+          >
+            display github streak stats
+          </span>
+        </label>
+        <button
+          className="flex ml-3 focus:bg-gray-400"
+          id="streak-stats-open-btn"
+          onClick={[Function]}
+          style={
+            Object {
+              "outline": "none",
+            }
+          }
+        >
+          <ToolsIcon
+            className="transform scale-100 md:scale-125"
+            size={16}
+            verticalAlign="text-bottom"
+          >
+            <svg
+              aria-hidden="true"
+              className="transform scale-100 md:scale-125"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.433 2.304A4.494 4.494 0 003.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 11-1.498-.073l.163-3.33c.002-.085-.05-.216-.207-.316A5.996 5.996 0 012 6a5.994 5.994 0 012.567-4.92 1.482 1.482 0 011.673-.04c.462.296.76.827.76 1.423v2.82c0 .082.041.16.11.206l.75.51a.25.25 0 00.28 0l.75-.51A.25.25 0 009 5.282V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 011.673.04A5.994 5.994 0 0114 6a5.996 5.996 0 01-2.786 5.068c-.157.1-.209.23-.207.315l.163 3.33a.75.75 0 11-1.498.074l-.164-3.345c-.027-.717.384-1.312.902-1.64A4.496 4.496 0 0012.5 6a4.494 4.494 0 00-1.933-3.696c-.024.017-.067.067-.067.16v2.818a1.75 1.75 0 01-.767 1.448l-.75.51a1.75 1.75 0 01-1.966 0l-.75-.51A1.75 1.75 0 015.5 5.282V2.463c0-.092-.043-.142-.067-.159zm.01-.005z\\"></path>",
+                }
+              }
+              fill="currentColor"
+              height={16}
+              role="img"
+              style={
+                Object {
+                  "display": "inline-block",
+                  "userSelect": "none",
+                  "verticalAlign": "text-bottom",
+                }
+              }
+              viewBox="0 0 16 16"
+              width={16}
+            />
+          </ToolsIcon>
+        </button>
+      </div>
+    </AddonsItem>
     <AddonsItem
       inputChecked={false}
       inputId="twitter-badge"
@@ -2074,15 +2416,19 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="twitter-badge"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="twitter-badge"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -2100,15 +2446,19 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="dev-dynamic-blogs"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="dev-dynamic-blogs"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -2126,15 +2476,19 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="medium-dynamic-blogs"
         >
           <input
             checked="some-medium-blogs-value"
+            className="checkbox-label__input"
             id="medium-dynamic-blogs"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >
@@ -2152,15 +2506,19 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
         className="py-2 flex justify-start items-center text-sm sm:text-lg"
       >
         <label
-          className="cursor-pointer flex items-center"
+          className="checkbox-label flex items-center"
           htmlFor="rss-dynamic-blogs"
         >
           <input
             checked={false}
+            className="checkbox-label__input"
             id="rss-dynamic-blogs"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <span
             className="pl-4"
           >

src/components/__tests__/__snapshots__/donate.test.js.snap

@@ -71,17 +71,16 @@ exports[`Donate renders correctly 1`] = `
         Buy me a ko-fi
       </a>
       <a
-        className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
+        className="flex items-center justify-evenly bg-white-500 text-white py-2 px-4 my-2 border border-solid"
         href="https://www.paypal.me/rahuldkjain/10"
         rel="noreferrer"
         target="_blank"
       >
         <img
           alt="Donate rahuldkjain via paypal"
-          className="w-6 h-6 mr-2"
-          src="https://www.vectorlogo.zone/logos/paypal/paypal-ar21.svg"
+          className="w-32 h-4"
+          src="https://cdn.worldvectorlogo.com/logos/paypal-2.svg"
         />
-        Paypal
       </a>
       <a
         className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"

src/components/__tests__/__snapshots__/footer.test.js.snap

@@ -157,7 +157,7 @@ exports[`Footer component renders correctly 1`] = `
         </strong>
       </div>
       <div
-        class="ml-2 sm:ml-0"
+        className="ml-2 sm:ml-0"
       >
         <a
           aria-label="Discord of the community"

src/components/__tests__/__snapshots__/markdownPreview.test.js.snap

@@ -20,7 +20,7 @@ exports[`DisplayWork Preview renders correctly 1`] = `
 <div
   className="my-2"
 >
-  [object Object]
+  [object Object] 
   <a
     className="no-underline text-blue-700"
     href="https://dummy.com"
@@ -35,7 +35,7 @@ exports[`DisplayWork Preview renders correctly with no link 1`] = `
 <div
   className="my-2"
 >
-  [object Object]
+  [object Object] 
   <b>
     readme-generator
   </b>
@@ -52,7 +52,7 @@ exports[`DisplayWork Preview renders correctly with no project 1`] = `
 <div
   className="my-2"
 >
-  [object Object]
+  [object Object] 
   <a
     className="no-underline text-blue-700"
     href="https://dummy.com"
@@ -86,7 +86,7 @@ exports[`GithubProfileTrophy Preview renders correctly with show true 1`] = `
 <div
   className="text-left my-2"
 >
-
+   
   <a
     href="https://github.com/ryo-ma/github-profile-trophy"
   >
@@ -95,7 +95,7 @@ exports[`GithubProfileTrophy Preview renders correctly with show true 1`] = `
       src="https://github-profile-trophy.vercel.app/?username="
     />
   </a>
-
+   
 </div>
 `;
 
@@ -254,6 +254,7 @@ exports[`Markdown Preview renders correctly 1`] = `
   <SkillsPreview
     skills={Object {}}
   />
+  <SupportPreview />
   <div
     className="block sm:flex sm:justify-center sm:items-start"
   >
@@ -287,6 +288,9 @@ exports[`Markdown Preview renders correctly 1`] = `
       }
       show={false}
     />
+    <StreakStatsPreview
+      github=""
+    />
   </div>
 </div>
 `;
@@ -313,13 +317,13 @@ exports[`Skills Preview renders correctly 1`] = `
   />
   <a
     href="https://unity.com/"
+    key="unity"
     rel="noreferrer"
     target="_blank"
   >
     <img
       alt="unity"
       className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
-      key="unity"
       src="https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg"
     />
   </a>
@@ -338,112 +342,112 @@ exports[`Social Preview renders correctly 1`] = `
   />
   <DisplaySocial
     base="https://codepen.io"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codepen.svg"
     username="dummy"
   />
   <DisplaySocial
     base="https://dev.to"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/devto.svg"
     username=""
   />
   <DisplaySocial
     base="https://twitter.com"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg"
     username=""
   />
   <DisplaySocial
     base="https://linkedin.com/in"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/linked-in-alt.svg"
     username=""
   />
   <DisplaySocial
     base="https://stackoverflow.com/users"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/stack-overflow.svg"
     username=""
   />
   <DisplaySocial
     base="https://codesandbox.com"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codesandbox.svg"
     username=""
   />
   <DisplaySocial
     base="https://kaggle.com"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/kaggle.svg"
     username=""
   />
   <DisplaySocial
     base="https://fb.com"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/facebook.svg"
     username=""
   />
   <DisplaySocial
     base="https://instagram.com"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/instagram.svg"
     username=""
   />
   <DisplaySocial
     base="https://dribbble.com"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/dribbble.svg"
     username=""
   />
   <DisplaySocial
     base="https://www.behance.net"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/behance.svg"
     username=""
   />
   <DisplaySocial
     base="https://medium.com"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/medium.svg"
     username=""
   />
   <DisplaySocial
     base="https://www.youtube.com/c"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/youtube.svg"
     username=""
   />
   <DisplaySocial
     base="https://www.codechef.com/users"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://codeforces.com/profile"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
+    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
     username=""
   />
   <DisplaySocial
     base="https://www.hackerrank.com"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/hackerrank.svg"
     username=""
   />
   <DisplaySocial
-    base="https://auth.geeksforgeeks.org/user"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://www.hackerearth.com"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
-    username=""
-  />
-  <DisplaySocial
-    base="https://www.topcoder.com/members"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
+    base="https://codeforces.com/profile"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/codeforces.svg"
     username=""
   />
   <DisplaySocial
     base="https://www.leetcode.com"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/leet-code.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://www.hackerearth.com"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/hackerearth.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://auth.geeksforgeeks.org/user"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/geeks-for-geeks.svg"
+    username=""
+  />
+  <DisplaySocial
+    base="https://www.topcoder.com/members"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/topcoder.svg"
     username=""
   />
   <DisplaySocial
     base="https://discord.gg"
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/discord.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/discord.svg"
     username=""
   />
   <DisplaySocial
     base=""
-    icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
+    icon="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/rss.svg"
     username=""
   />
 </div>
@@ -498,7 +502,7 @@ exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `
 <div
   className="text-left my-2"
 >
-
+   
   <a
     href="https://twitter.com/\${props.twitter}"
     target="blank"
@@ -509,7 +513,7 @@ exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `
       src="https://img.shields.io/twitter/follow/?logo=twitter&style=for-the-badge"
     />
   </a>
-
+   
 </div>
 `;
 
@@ -519,13 +523,13 @@ exports[`VisitorsBadge Preview renders correctly with show true 1`] = `
 <div
   className="text-left my-2"
 >
-
+   
   <img
     alt=""
     className="h-4 sm:h-6"
     src="https://komarev.com/ghpvc/?username=&label=Profile%20views&color=0e75b6&style=flat"
   />
-
+   
 </div>
 `;
 

src/components/__tests__/__snapshots__/skills.test.js.snap

@@ -50,15 +50,19 @@ exports[`Skills renders correctly 1`] = `
         key="javascript"
       >
         <label
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          className="checkbox-label flex items-center justify-start"
           htmlFor="javascript"
         >
           <input
             checked={true}
+            className="checkbox-label__input"
             id="javascript"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <img
             alt="javascript"
             className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
@@ -90,14 +94,18 @@ exports[`Skills renders correctly 1`] = `
         key="react"
       >
         <label
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          className="checkbox-label flex items-center justify-start"
           htmlFor="react"
         >
           <input
+            className="checkbox-label__input"
             id="react"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <img
             alt="react"
             className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
@@ -115,14 +123,18 @@ exports[`Skills renders correctly 1`] = `
         key="svelte"
       >
         <label
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          className="checkbox-label flex items-center justify-start"
           htmlFor="svelte"
         >
           <input
+            className="checkbox-label__input"
             id="svelte"
             onChange={[Function]}
             type="checkbox"
           />
+          <span
+            class="checkbox-label__control"
+          />
           <img
             alt="svelte"
             className="ml-4 w-8 h-8 sm:w-10 sm:h-10"

src/components/addons.js

@@ -2,23 +2,35 @@ import React, { useState, useEffect } from "react"
 import { withPrefix } from "gatsby"
 import { latestBlogs } from "../utils/workflows"
 import links from "../constants/page-links"
-import { isMediumUsernameValid, isGitHubUsernameValid } from "../utils/validation"
-import { ToolsIcon, XCircleIcon } from "@primer/octicons-react";
+import {
+  isMediumUsernameValid,
+  isGitHubUsernameValid,
+} from "../utils/validation"
+import { ToolsIcon, XCircleIcon } from "@primer/octicons-react"
 
-const AddonsItem = ({ inputId, inputChecked, onInputChange, Options, onIconClick, ...props }) => {
-  const [open, setOpen] = useState(false);
-  const Icon = open ? XCircleIcon : ToolsIcon;
+const AddonsItem = ({
+  inputId,
+  inputChecked,
+  onInputChange,
+  Options,
+  onIconClick,
+  ...props
+}) => {
+  const [open, setOpen] = useState(false)
+  const Icon = open ? XCircleIcon : ToolsIcon
 
   return (
     <>
       <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-        <label htmlFor={inputId} className="cursor-pointer flex items-center">
+        <label htmlFor={inputId} className="checkbox-label flex items-center">
           <input
-            type="checkbox"
             id={inputId}
+            type="checkbox"
+            className="checkbox-label__input"
             checked={inputChecked}
             onChange={onInputChange}
           />
+          <span class="checkbox-label__control" />
           <span className="pl-4">{props.children}</span>
         </label>
         {Options && (
@@ -34,8 +46,8 @@ const AddonsItem = ({ inputId, inputChecked, onInputChange, Options, onIconClick
       </div>
       {Options && open && Options}
     </>
-  );
-};
+  )
+}
 
 const CustomizeOptions = ({ title, CustomizationOptions }) => (
   <div
@@ -48,143 +60,160 @@ const CustomizeOptions = ({ title, CustomizationOptions }) => (
       {CustomizationOptions}
     </div>
   </div>
-);
+)
 
-
-const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) =>  {
+const CustomizeBadge = ({ githubName, badgeOptions, onBadgeUpdate }) => {
   return (
     <>
-        <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>
+      <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("#", ""))
           }
-          
-        </span>
+        />
+      </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}`
+            }
+            alt="profile-visitors-count"
+          />
+        ) : (
+          <span className="text-xxs md:text-sm text-red-600">
+            Invalid GitHub username
+          </span>
+        )}
+      </span>
     </>
   )
 }
 
-const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) =>
-    <>
-      <label htmlFor={`${prefix}-theme`}>Theme:&nbsp;
-        <select
-          id={`${prefix}-theme`}
-          onChange={({target: { value }}) => onUpdate("theme", value)}
-          defaultValue={options.theme}
-        >
-          <option value="none">none</option>
-          <option value="dark">Dark</option>
-          <option value="radical">Radical</option>
-          <option value="merko">Merko</option>
-          <option value="gruvbox">Gruvbox</option>
-          <option value="tokyonight">Tokyonight</option>
-          <option value="onedark">Onedark</option>
-          <option value="cobalt">Cobalt</option>
-          <option value="synthwave">Synthwave</option>
-          <option value="highcontrast">Highcontrast</option>
-          <option value="dracula">Dracula</option>
-        </select>
-      </label>
-      <label htmlFor={`${prefix}-title-color`}>Title Color:&nbsp;
-        <input
-          type="color"
-          id={`${prefix}-title-color`}
-          defaultValue={`#${options.titleColor}`}
-          className="w-6"
-          onChange={(e) => onUpdate('titleColor', e.target.value.replace('#', ''))}
-        />
-      </label>
-      <label htmlFor={`${prefix}-text-color`}>Text Color:&nbsp;
-        <input
-          type="color"
-          id={`${prefix}-text-color`}
-          defaultValue={`#${options.textColor}`}
-          className="w-6"
-          onChange={(e) => onUpdate('textColor', e.target.value.replace('#', ''))}
-        />
-      </label>
-      <label htmlFor={`${prefix}-bg-color`}>Background Color:&nbsp;
-        <input
-          type="color"
-          id={`${prefix}-bg-color`}
-          defaultValue={`#${options.bgColor}`}
-          className="w-6"
-          onChange={(e) => onUpdate('bgColor', e.target.value.replace('#', ''))}
-        />
-      </label>
-      <label htmlFor={`${prefix}-hide-border`}>Hide border:&nbsp;
-        <input
-          id={`${prefix}-hide-border`}
-          type="checkbox"
-          checked={options.hideBorder}
-          onChange={(e) => onUpdate('hideBorder', e.target.checked)}
-        />
-      </label>
-      <label htmlFor={`${prefix}-cache-seconds`}>Cache Seconds:&nbsp;
-        <input
-          id={`${prefix}-cache-seconds`}
-          type="number"
-          min={1800}
-          max={86400}
-          placeholder={1800}
-          defaultValue={options.cacheSeconds}
-          onChange={(e) => onUpdate('cacheSeconds', e.target.value)}
-        />
-      </label>
-      <label htmlFor={`${prefix}-locale`}>Locale:&nbsp;
-        <input
-          id={`${prefix}-locale`}
-          type="text"
-          placeholder="en"
-          defaultValue={options.locale}
-          onChange={(e) => onUpdate('locale', e.target.value)}
-          size="2"
-        />
-      </label>
-    </>
+const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) => (
+  <>
+    <label htmlFor={`${prefix}-theme`}>
+      Theme:&nbsp;
+      <select
+        id={`${prefix}-theme`}
+        onChange={({ target: { value } }) => onUpdate("theme", value)}
+        defaultValue={options.theme}
+      >
+        <option value="none">none</option>
+        <option value="dark">Dark</option>
+        <option value="radical">Radical</option>
+        <option value="merko">Merko</option>
+        <option value="gruvbox">Gruvbox</option>
+        <option value="tokyonight">Tokyonight</option>
+        <option value="onedark">Onedark</option>
+        <option value="cobalt">Cobalt</option>
+        <option value="synthwave">Synthwave</option>
+        <option value="highcontrast">Highcontrast</option>
+        <option value="dracula">Dracula</option>
+      </select>
+    </label>
+    <label htmlFor={`${prefix}-title-color`}>
+      Title Color:&nbsp;
+      <input
+        type="color"
+        id={`${prefix}-title-color`}
+        defaultValue={`#${options.titleColor}`}
+        className="w-6"
+        onChange={e => onUpdate("titleColor", e.target.value.replace("#", ""))}
+      />
+    </label>
+    <label htmlFor={`${prefix}-text-color`}>
+      Text Color:&nbsp;
+      <input
+        type="color"
+        id={`${prefix}-text-color`}
+        defaultValue={`#${options.textColor}`}
+        className="w-6"
+        onChange={e => onUpdate("textColor", e.target.value.replace("#", ""))}
+      />
+    </label>
+    <label htmlFor={`${prefix}-bg-color`}>
+      Background Color:&nbsp;
+      <input
+        type="color"
+        id={`${prefix}-bg-color`}
+        defaultValue={`#${options.bgColor}`}
+        className="w-6"
+        onChange={e => onUpdate("bgColor", e.target.value.replace("#", ""))}
+      />
+    </label>
+    <label htmlFor={`${prefix}-hide-border`} className="checkbox-label">
+      Hide border:&nbsp;
+      <input
+        id={`${prefix}-hide-border`}
+        type="checkbox"
+        className="checkbox-label__input"
+        checked={options.hideBorder}
+        onChange={e => onUpdate("hideBorder", e.target.checked)}
+      />
+      <span class="checkbox-label__control" />
+    </label>
+    <label htmlFor={`${prefix}-cache-seconds`}>
+      Cache Seconds:&nbsp;
+      <input
+        id={`${prefix}-cache-seconds`}
+        type="number"
+        min={1800}
+        max={86400}
+        placeholder={1800}
+        defaultValue={options.cacheSeconds}
+        onChange={e => onUpdate("cacheSeconds", e.target.value)}
+      />
+    </label>
+    <label htmlFor={`${prefix}-locale`}>
+      Locale:&nbsp;
+      <input
+        id={`${prefix}-locale`}
+        type="text"
+        placeholder="en"
+        defaultValue={options.locale}
+        onChange={e => onUpdate("locale", e.target.value)}
+        size="2"
+      />
+    </label>
+  </>
+)
 
 const CustomizeStreakStats = ({ prefix, options, onUpdate }) => (
   <>
@@ -204,48 +233,48 @@ const CustomizeStreakStats = ({ prefix, options, onUpdate }) => (
 )
 
 const Addons = props => {
-  const [debounce, setDebounce] = useState(undefined);
+  const [debounce, setDebounce] = useState(undefined)
   const [badgeOptions, setBadgeOptions] = useState({
-    badgeStyle: props.data.badgeStyle, 
-    badgeColor: props.data.badgeColor, 
-    badgeLabel: props.data.badgeLabel
-  });
+    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
+      badgeStyle: props.data.badgeStyle,
+      badgeColor: props.data.badgeColor,
+      badgeLabel: props.data.badgeLabel,
     })
   }, [props.data.badgeStyle, props.data.badgeColor, props.data.badgeLabel])
 
   const [githubStatsOptions, setGithubStatsOptions] = useState({
     ...props.data.githubStatsOptions,
-  });
+  })
 
   useEffect(() => {
     setGithubStatsOptions({
-      ...props.data.githubStatsOptions
+      ...props.data.githubStatsOptions,
     })
   }, [props.data.githubStatsOptions])
 
   const [topLanguagesOptions, setTopLanguagesOptions] = useState({
     ...props.data.topLanguagesOptions,
-  });
+  })
 
   useEffect(() => {
     setTopLanguagesOptions({
-      ...props.data.topLanguagesOptions
+      ...props.data.topLanguagesOptions,
     })
   }, [props.data.topLanguagesOptions])
 
   const [streakStatsOptions, setStreakStatsOptions] = useState({
     ...props.data.streakStatsOptions,
-  });
+  })
 
   useEffect(() => {
     setStreakStatsOptions({
-      ...props.data.streakStatsOptions
+      ...props.data.streakStatsOptions,
     })
   }, [props.data.streakStatsOptions])
 
@@ -279,30 +308,37 @@ const Addons = props => {
 
   const onBadgeUpdate = (option, value) => {
     const callback = () => {
-      let newVal = (option==='badgeLabel' && value==='')?'Profile views':value;
-      setBadgeOptions({...badgeOptions, [option]: newVal});
-      props.handleDataChange(option, {target: {value: newVal}})
+      let newVal =
+        option === "badgeLabel" && value === "" ? "Profile views" : value
+      setBadgeOptions({ ...badgeOptions, [option]: newVal })
+      props.handleDataChange(option, { target: { value: newVal } })
     }
-    clearTimeout(debounce);
-    setDebounce(setTimeout(callback, 300));
+    clearTimeout(debounce)
+    setDebounce(setTimeout(callback, 300))
   }
 
   const onStatsUpdate = (option, value) => {
-    const newStatsOptions = {...githubStatsOptions, [option]: value}
+    const newStatsOptions = { ...githubStatsOptions, [option]: value }
     setGithubStatsOptions(newStatsOptions)
-    props.handleDataChange("githubStatsOptions", {target: {value: newStatsOptions}})
+    props.handleDataChange("githubStatsOptions", {
+      target: { value: newStatsOptions },
+    })
   }
 
   const onTopLangUpdate = (option, value) => {
-    const newLangOptions = {...topLanguagesOptions, [option]: value}
+    const newLangOptions = { ...topLanguagesOptions, [option]: value }
     setTopLanguagesOptions(newLangOptions)
-    props.handleDataChange("topLanguagesOptions", {target: {value: newLangOptions}})
+    props.handleDataChange("topLanguagesOptions", {
+      target: { value: newLangOptions },
+    })
   }
 
   const onStreakStatsUpdate = (option, value) => {
-    const newStreakStatsOptions = {...streakStatsOptions, [option]: value}
+    const newStreakStatsOptions = { ...streakStatsOptions, [option]: value }
     setStreakStatsOptions(newStreakStatsOptions)
-    props.handleDataChange("streakStatsOptions", {target: {value: newStreakStatsOptions}})
+    props.handleDataChange("streakStatsOptions", {
+      target: { value: newStreakStatsOptions },
+    })
   }
 
   return (
@@ -319,7 +355,7 @@ const Addons = props => {
             title="Customize Badge"
             CustomizationOptions={
               <CustomizeBadge
-                githubName={props.social.github} 
+                githubName={props.social.github}
                 badgeOptions={badgeOptions}
                 onBadgeUpdate={onBadgeUpdate}
               />
@@ -344,7 +380,11 @@ const Addons = props => {
           <CustomizeOptions
             title="Customize Github Stats Card"
             CustomizationOptions={
-          <CustomizeGithubStatsBase prefix="stats" options={githubStatsOptions} onUpdate={onStatsUpdate}/>
+              <CustomizeGithubStatsBase
+                prefix="stats"
+                options={githubStatsOptions}
+                onUpdate={onStatsUpdate}
+              />
             }
           />
         }
@@ -359,7 +399,11 @@ const Addons = props => {
           <CustomizeOptions
             title="Customize Top Skills Card"
             CustomizationOptions={
-            <CustomizeGithubStatsBase prefix="top-lang" options={topLanguagesOptions} onUpdate={onTopLangUpdate}/>
+              <CustomizeGithubStatsBase
+                prefix="top-lang"
+                options={topLanguagesOptions}
+                onUpdate={onTopLangUpdate}
+              />
             }
           />
         }
@@ -374,7 +418,11 @@ const Addons = props => {
           <CustomizeOptions
             title="Customize Streak Stats Card"
             CustomizationOptions={
-            <CustomizeStreakStats prefix="streak-stats" options={streakStatsOptions} onUpdate={onStreakStatsUpdate}/>
+              <CustomizeStreakStats
+                prefix="streak-stats"
+                options={streakStatsOptions}
+                onUpdate={onStreakStatsUpdate}
+              />
             }
           />
         }
@@ -421,7 +469,7 @@ const Addons = props => {
             <span
               id="blog-post-worklow-span"
               onClick={blogPostPorkflow}
-              onKeyDown={(e) => e.keyCode === 13 && blogPostPorkflow()}
+              onKeyDown={e => e.keyCode === 13 && blogPostPorkflow()}
               role="button"
               tabIndex="0"
               style={{ cursor: "pointer", color: "#002ead" }}

src/components/header.js

@@ -10,9 +10,9 @@ import { act } from "react-dom/test-utils"
 const Header = props => {
   const shouldRequestStats = () => {
     const isFirstRequest = stats.starsCount === 0
-    const isVisible = window.document.visibilityState === 'visible'
+    const isVisible = window.document.visibilityState === "visible"
     const hasFocus = window.document.hasFocus()
-    return isFirstRequest || isVisible && hasFocus
+    return isFirstRequest || (isVisible && hasFocus)
   }
 
   const fetchData = async () => {

src/components/markdown.js

@@ -177,7 +177,7 @@ const DisplaySkills = props => {
     if (props.skills[skill]) {
       listChosenSkills.push(
         `
-        <a href="${skillWebsites[skill]}" target="_blank">
+        <a href="${skillWebsites[skill]}" target="_blank" rel="noreferrer">
           <img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
         </a>
         `
@@ -266,6 +266,9 @@ const DisplaySupport = props => {
       {props.support.buyMeACoffee &&
         `<a href="https://www.buymeacoffee.com/${props.support.buyMeACoffee}">
       <img align="left" src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="${props.support.buyMeACoffee}" /></a>`}
+      {props.support.buyMeAKofi &&
+        `<a href="https://ko-fi.com/${props.support.buyMeAKofi}">
+      <img align="left" src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height="50" width="210" alt="${props.support.buyMeAKofi}" /></a>`}
       {`</p><br><br>`}
       <br />
       <br />
@@ -276,8 +279,8 @@ const DisplaySupport = props => {
 }
 const Markdown = props => {
   const icon_base_url =
-    "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/";
-    
+    "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/"
+
   return (
     <div id="markdown-content" className="break-words">
       <>
@@ -392,7 +395,7 @@ const Markdown = props => {
       <>
         <DisplaySocial
           base="https://dev.to"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+          icon={icon_base_url + "devto.svg"}
           username={props.social.dev}
         />
       </>
@@ -405,7 +408,7 @@ const Markdown = props => {
       </>
       <>
         <DisplaySocial
-          base="https://linkedin.com/in"    
+          base="https://linkedin.com/in"
           icon={icon_base_url + "linked-in-alt.svg"}
           username={props.social.linkedin}
         />
@@ -420,7 +423,7 @@ const Markdown = props => {
       <>
         <DisplaySocial
           base="https://codesandbox.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+          icon={icon_base_url + "codesandbox.svg"}
           username={props.social.codesandbox}
         />
       </>
@@ -490,21 +493,21 @@ const Markdown = props => {
       <>
         <DisplaySocial
           base="https://codeforces.com/profile"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
+          icon={icon_base_url + "codeforces.svg"}
           username={props.social.codeforces}
         />
       </>
       <>
         <DisplaySocial
           base="https://www.leetcode.com"
-          icon={icon_base_url+"leet-code.svg"}
+          icon={icon_base_url + "leet-code.svg"}
           username={props.social.leetcode}
         />
       </>
       <>
         <DisplaySocial
           base="https://www.hackerearth.com"
-          icon={icon_base_url+"hackerearth.svg"}
+          icon={icon_base_url + "hackerearth.svg"}
           username={props.social.hackerearth}
         />
       </>
@@ -518,7 +521,7 @@ const Markdown = props => {
       <>
         <DisplaySocial
           base="https://www.topcoder.com/members"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
+          icon={icon_base_url + "topcoder.svg"}
           username={props.social.topcoder}
         />
       </>

src/components/markdownPreview.js

@@ -122,10 +122,10 @@ export const DisplaySocial = props => {
 
 export const SocialPreview = props => {
   let viewSocial = false
-    const icon_base_url =
-    "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/";
+  const icon_base_url =
+    "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/"
   Object.keys(props.social).forEach(key => {
-    if (props.social[key] && key != "github") viewSocial = true
+    if (props.social[key] && key !== "github") viewSocial = true
   })
   return (
     <div className="flex justify-start items-end flex-wrap">
@@ -140,7 +140,7 @@ export const SocialPreview = props => {
       <>
         <DisplaySocial
           base="https://dev.to"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+          icon={icon_base_url + "devto.svg"}
           username={props.social.dev}
         />
       </>
@@ -153,7 +153,7 @@ export const SocialPreview = props => {
       </>
       <>
         <DisplaySocial
-          base="https://linkedin.com/in"    
+          base="https://linkedin.com/in"
           icon={icon_base_url + "linked-in-alt.svg"}
           username={props.social.linkedin}
         />
@@ -168,7 +168,7 @@ export const SocialPreview = props => {
       <>
         <DisplaySocial
           base="https://codesandbox.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+          icon={icon_base_url + "codesandbox.svg"}
           username={props.social.codesandbox}
         />
       </>
@@ -238,21 +238,21 @@ export const SocialPreview = props => {
       <>
         <DisplaySocial
           base="https://codeforces.com/profile"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
+          icon={icon_base_url + "codeforces.svg"}
           username={props.social.codeforces}
         />
       </>
       <>
         <DisplaySocial
           base="https://www.leetcode.com"
-          icon={icon_base_url+"leet-code.svg"}
+          icon={icon_base_url + "leet-code.svg"}
           username={props.social.leetcode}
         />
       </>
       <>
         <DisplaySocial
           base="https://www.hackerearth.com"
-          icon={icon_base_url+"hackerearth.svg"}
+          icon={icon_base_url + "hackerearth.svg"}
           username={props.social.hackerearth}
         />
       </>
@@ -266,7 +266,7 @@ export const SocialPreview = props => {
       <>
         <DisplaySocial
           base="https://www.topcoder.com/members"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
+          icon={icon_base_url + "topcoder.svg"}
           username={props.social.topcoder}
         />
       </>
@@ -315,7 +315,11 @@ export const TwitterBadgePreview = props => {
     return (
       <div className="text-left my-2">
         {" "}
-        <a href="https://twitter.com/${props.twitter}" target="blank">
+        <a
+          href="https://twitter.com/${props.twitter}"
+          target="_blank"
+          rel="noreferrer"
+        >
           <img className="h-4 sm:h-6" src={link} alt={props.twitter} />
         </a>{" "}
       </div>
@@ -413,24 +417,38 @@ export const SupportPreview = props => {
       viewSupport = true
     }
   })
-  return (
-    <div className="mb-4">
+  return props.support.buyMeACoffee || props.support.buyMeAKofi ? (
+    <div className="flex flex-wrap justify-start items-center">
       <SectionTitle label="Support:" visible={viewSupport} />
       {props.support.buyMeACoffee && (
-        <div style={{ width: "210px" }}>
-          <a
-            href={`https://www.buymeacoffee.com/` + props.support.buyMeACoffee}
-            target="_blank"
-          >
-            <img
-              src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
-              alt="Buy Me A Coffee"
-              className="w-36 h-8 sm:w-52 sm:h-12"
-            />
-          </a>
-        </div>
+        <a
+          href={`https://www.buymeacoffee.com/` + props.support.buyMeACoffee}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
+            alt="Buy Me A Coffee"
+            className="mb-4 mr-4 w-36 h-8 sm:w-52 sm:h-12"
+          />
+        </a>
+      )}
+      {props.support.buyMeAKofi && (
+        <a
+          href={`https://ko-fi.com/` + props.support.buyMeAKofi}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3"
+            alt="Buy Me A Ko-fi"
+            className="mb-4 mr-4 w-36 h-8 sm:w-52 sm:h-12"
+          />
+        </a>
       )}
     </div>
+  ) : (
+    ""
   )
 }
 

src/components/skills.js

@@ -12,14 +12,16 @@ const Skills = props => {
       <div className="w-1/3 sm:w-1/4 my-6" key={skill}>
         <label
           htmlFor={skill}
-          className="skillCheckboxLabel cursor-pointer flex items-center justify-start"
+          className="checkbox-label flex items-center justify-start"
         >
           <input
             id={skill}
             type="checkbox"
+            className="checkbox-label__input"
             checked={props.skills[skill]}
             onChange={event => props.handleSkillsChange(skill)}
           />
+          <span class="checkbox-label__control" />
           <img
             className="ml-4 w-8 h-8 sm:w-10 sm:h-10"
             src={icons[skill]}
@@ -101,4 +103,4 @@ const Skills = props => {
   ) 
 }
 
-export default Skills
+export default Skills

src/components/support.js

@@ -7,20 +7,34 @@ const Support = props => {
         Support
       </div>
       <div className="flex flex-wrap justify-start items-center">
-        <div className="w-2/5 flex justify-between items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+        <div className="w-1/2 flex justify-start items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
           <img
             src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
-            className="w-36 h-8 sm:w-52 sm:h-12"
+            className="w-36 h-8 sm:w-52 sm:h-12 mr-1 sm:mr-4"
             alt="buymeacoffee"
           />
           <input
             id="buy-me-a-coffee"
             placeholder="buymeacoffee username"
-            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 ml-2 sm:ml-0 focus:border-blue-700"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 focus:border-blue-700"
             value={props.support.buyMeACoffee || ""}
             onChange={event => props.handleSupportChange("buyMeACoffee", event)}
           />
         </div>
+        <div className="w-1/2 flex justify-start items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3"
+            className="w-36 h-8 sm:w-52 sm:h-12 mr-1 sm:mr-4"
+            alt="buymeakofi"
+          />
+          <input
+            id="buy-me-a-kofi"
+            placeholder="Ko-fi username"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-1 sm:px-2 ml-2 sm:ml-0 focus:border-blue-700"
+            value={props.support.buyMeAKofi || ""}
+            onChange={event => props.handleSupportChange("buyMeAKofi", event)}
+          />
+        </div>
       </div>
     </div>
   )

src/constants/skills.js

@@ -22,6 +22,7 @@ const categorizedSkills = {
       "coffeescript",
       "elixir",
       "erlang",
+      "nim",
     ],
   },
 
@@ -67,6 +68,7 @@ const categorizedSkills = {
       "hadoop",
       "nginx",
       "openresty",
+      "nestjs",
     ],
   },
 
@@ -87,7 +89,14 @@ const categorizedSkills = {
 
   ai: {
     title: "AI/ML",
-    skills: ["tensorflow", "pytorch", "opencv", "scikit_learn"],
+    skills: [
+      "tensorflow",
+      "pytorch",
+      "pandas",
+      "seaborn",
+      "opencv",
+      "scikit_learn",
+    ],
   },
 
   database: {
@@ -206,7 +215,7 @@ const categorizedSkills = {
 
   automation: {
     title: "Automation",
-    skills: ["zapier"],
+    skills: ["zapier", "ifttt"],
   },
 
   other: {
@@ -222,8 +231,7 @@ const icons = {
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg",
   angularjs:
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/angularjs/angularjs-original-wordmark.svg",
-  angular:
-    "https://angular.io/assets/images/logos/angular/angular.svg",
+  angular: "https://angular.io/assets/images/logos/angular/angular.svg",
   aws:
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg",
   android:
@@ -233,7 +241,8 @@ const icons = {
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/backbonejs/backbonejs-original-wordmark.svg",
   bootstrap:
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg",
-  c: "https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg",
+  c:
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg",
   canvasjs:
     "https://raw.githubusercontent.com/Hardik0307/Hardik0307/master/assets/canvasjs-charts.svg",
   coffeescript:
@@ -257,7 +266,8 @@ const icons = {
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/electron/electron-original.svg",
   express:
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/express/express-original-wordmark.svg",
-  go: "https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original.svg",
+  go:
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original.svg",
   graphql: "https://www.vectorlogo.zone/logos/graphql/graphql-icon.svg",
   gulp:
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/gulp/gulp-plain.svg",
@@ -277,12 +287,13 @@ const icons = {
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/mongodb/mongodb-original-wordmark.svg",
   mysql:
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/mysql/mysql-original-wordmark.svg",
+  nestjs:
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/nestjs/nestjs-plain.svg",
   nginx:
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/nginx/nginx-original.svg",
   nodejs:
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg",
-  openresty:
-    "https://openresty.org/images/logo.png",
+  openresty: "https://openresty.org/images/logo.png",
   oracle:
     "https://raw.githubusercontent.com/devicons/devicon/master/icons/oracle/oracle-original.svg",
   photoshop:
@@ -342,6 +353,9 @@ const icons = {
     "https://www.vectorlogo.zone/logos/apache_hadoop/apache_hadoop-icon.svg",
   bash: "https://www.vectorlogo.zone/logos/gnu_bash/gnu_bash-icon.svg",
   pytorch: "https://www.vectorlogo.zone/logos/pytorch/pytorch-icon.svg",
+  pandas:
+    "https://raw.githubusercontent.com/devicons/devicon/2ae2a900d2f041da66e950e4d48052658d850630/icons/pandas/pandas-original.svg",
+  seaborn: "https://seaborn.pydata.org/_images/logo-mark-lightbg.svg",
   opencv: "https://www.vectorlogo.zone/logos/opencv/opencv-icon.svg",
   illustrator:
     "https://www.vectorlogo.zone/logos/adobe_illustrator/adobe_illustrator-icon.svg",
@@ -376,7 +390,7 @@ const icons = {
   gridsome: "https://www.vectorlogo.zone/logos/gridsome/gridsome-icon.svg",
   nuxtjs: "https://www.vectorlogo.zone/logos/nuxtjs/nuxtjs-icon.svg",
   jekyll: "https://www.vectorlogo.zone/logos/jekyllrb/jekyllrb-icon.svg",
-  nextjs: "https://cdn.worldvectorlogo.com/logos/nextjs-3.svg",
+  nextjs: "https://cdn.worldvectorlogo.com/logos/nextjs-2.svg",
   reactnative: "https://reactnative.dev/img/header_logo.svg",
   mariadb: "https://www.vectorlogo.zone/logos/mariadb/mariadb-icon.svg",
   cockroachdb: "https://cdn.worldvectorlogo.com/logos/cockroachdb.svg",
@@ -434,8 +448,10 @@ const icons = {
   apachecordova:
     "https://www.vectorlogo.zone/logos/apache_cordova/apache_cordova-icon.svg",
   zapier: "https://www.vectorlogo.zone/logos/zapier/zapier-icon.svg",
+  ifttt: "https://www.vectorlogo.zone/logos/ifttt/ifttt-ar21.svg",
   postman: "https://www.vectorlogo.zone/logos/getpostman/getpostman-icon.svg",
   erlang: "https://www.vectorlogo.zone/logos/erlang/erlang-official.svg",
+  nim: "https://www.vectorlogo.zone/logos/nim-lang/nim-lang-icon.svg",
   sqlite: "https://www.vectorlogo.zone/logos/sqlite/sqlite-icon.svg",
   mssql: "https://www.svgrepo.com/show/303229/microsoft-sql-server-logo.svg",
   middleman:
@@ -480,6 +496,7 @@ const skillWebsites = {
   meteor: "https://www.meteor.com/",
   mongodb: "https://www.mongodb.com/",
   mysql: "https://www.mysql.com/",
+  nestjs: "https://nestjs.com/",
   nginx: "https://www.nginx.com",
   nodejs: "https://nodejs.org",
   openresty: "https://openresty.org/",
@@ -520,6 +537,8 @@ const skillWebsites = {
   hadoop: "https://hadoop.apache.org/",
   bash: "https://www.gnu.org/software/bash/",
   pytorch: "https://pytorch.org/",
+  pandas: "https://pandas.pydata.org/",
+  seaborn: "https://seaborn.pydata.org/",
   opencv: "https://opencv.org/",
   illustrator: "https://www.adobe.com/in/products/illustrator.html",
   figma: "https://www.figma.com/",
@@ -583,6 +602,7 @@ const skillWebsites = {
   heroku: "https://heroku.com",
   appwrite: "https://appwrite.io",
   zapier: "https://zapier.com",
+  ifttt: "https://ifttt.com/",
   elixir: "https://elixir-lang.org",
   travisci: "https://travis-ci.org",
   apachecordova: "https://cordova.apache.org/",
@@ -590,6 +610,7 @@ const skillWebsites = {
   mssql: "https://www.microsoft.com/en-us/sql-server",
   postman: "https://postman.com",
   erlang: "https://www.erlang.org/",
+  nim: "https://nim-lang.org/",
   middleman: "https://middlemanapp.com/",
 }
 

src/images/icons/Automation/ifttt.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 12" style="enable-background:new 0 0 24 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF4A00;}
+</style>
+<path d="M.837 2.756h6.488v4.062H.837z" fill="#09f"/><path d="M.837 6.818H4.9v2.427H.837z" fill="#f1422a"/><path d="M4.9 6.818h2.427v2.427H4.9z" fill="#333"/><path d="M8.168 3.96h1.298v4.08H8.168zm7.418 0H13.36v1.298h.927V8.04h1.298V5.258h.927V3.96zm3.524 0h-2.226v1.298h.927V8.04H19.1V5.258h.927V3.96zm3.524 0h-2.226v1.298h.927V8.04h1.298V5.258h.927V3.96zM13 5.258V3.96h-2.967v4.08h1.298V6.927h1.113V5.63H11.32v-.37z" fill="#09f"/>
+</svg>

src/images/icons/BackendDevelopment/nestjs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#DF234F" d="M75.4.3c-.9 0-1.8.2-2.6.5 1.7 1.1 2.6 2.6 3.1 4.3 0 .2.1.4.1.6 0 .2.1.4.1.6.1 2.9-.8 3.3-1.4 5-1 2.2-.7 4.6.5 6.5.1.2.2.5.4.7-1.3-8.4 5.7-9.6 7-12.2.1-2.3-1.8-3.8-3.3-4.9C77.8.5 76.6.3 75.4.3zm10.5 1.8c-.1.8 0 .6-.1 1 0 .3 0 .6-.1.9-.1.3-.1.5-.2.8-.1.3-.2.5-.3.8-.1.2-.2.4-.3.7-.1.1-.2.3-.3.4-.1.1-.1.2-.2.3-.2.2-.3.5-.5.7l-.6.6c-.2.2-.4.4-.6.5-.7.5-1.5.9-2.2 1.4-.2.2-.5.3-.7.5-.2.2-.4.3-.6.5l-.6.6c-.2.2-.4.4-.5.7-.2.2-.3.5-.5.7-.1.3-.2.5-.4.8-.1.3-.2.5-.3.8-.1.3-.2.6-.2.8 0 .1 0 .3-.1.4 0 .1 0 .3-.1.4v1.4c0 .3 0 .5.1.8 0 .3.1.5.2.8.1.3.2.5.3.8.1.2.2.3.2.5l-7.6-2.9c-1.3-.4-2.5-.7-3.8-1-.7-.2-1.4-.3-2.1-.5-2-.4-4-.7-6-.9h-.2c-2-.2-3.9-.3-5.9-.3-1.5 0-2.9.1-4.3.2-2 .1-4 .4-6 .7l-1.5.3c-1 .2-2 .4-3 .7-.5.1-1 .3-1.5.4-.5.2-1 .4-1.4.6-.4.2-.7.3-1.1.5-.1 0-.1 0-.2.1-.3.2-.6.3-.9.5-.1 0-.2.1-.2.1-.4.2-.7.4-1 .5-.2.1-.5.2-.7.3-.1.1-.2.1-.3.2-.3.2-.6.3-.9.5-.3.2-.6.3-.8.5-.2.2-.5.3-.7.5 0 0-.1 0-.1.1-.2.1-.4.3-.6.5l-.1.1c-.2.1-.3.3-.5.4-.1 0-.1.1-.2.1-.2.1-.3.3-.5.4 0 .1-.1.1-.1.1l-.6.6-.1.1-.6.6s0 .1-.1.1l-.5.5c-.1.1-.2.1-.2.2l-.6.6c0 .1-.1.1-.1.2l-.8.8-.1.1c-.5.6-1.1 1.1-1.7 1.6-.6.5-1.2 1-1.9 1.5s-1.3.9-2 1.3-1.4.7-2.1 1c-.7.3-1.4.6-2.1.8-1.4.3-2.8.9-4 1 0-.5-.3-.4-.6-.4-.3.1-.6.1-.8.2-.3.1-.5.2-.8.3-.3.1-.5.2-.8.4-.2.2-.5.3-.7.5-.2.2-.5.4-.7.6-.2.2-.5.4-.7.6-.2.2-.4.4-.6.7-.2.3-.4.5-.5.8-.2.2-.3.5-.5.8-.1.3-.3.6-.4.9l-.3.9c-.1.3-.1.5-.2.8v.1c-.1.3-.1.7-.1.9.1-.1.1.1.1.3v.4c0 .2.1.4.1.6.1.2.1.4.2.6.1.2.2.4.4.6.1.2.3.4.4.6.2.2.4.4.6.5.2.2.4.4.6.5.8.7 1 .9 2 1.5.2.1.3.2.5.3h.1v.2c0 .3.1.5.2.8.1.3.2.6.3.8l.3.6c0 .1.1.1.1.2.1.3.3.5.4.7.2.2.3.5.5.7l.6.6.6.6H8c.2.2.4.3.6.5.2.2.5.3.7.4.2.1.5.3.8.4.2.1.4.2.7.2 0 0 .1 0 .1.1.1 0 .3.1.4.1-.1 1.8-.1 3.5.1 4.1.3.7 1.8-1.4 3.2-3.7-.2 2.3-.3 5 0 5.8.4.8 2.3-1.8 4.1-4.6 23.4-5.4 44.8 10.8 47.1 33.7-.4-3.6-4.8-5.6-6.9-5.1-1 2.4-2.7 5.6-5.4 7.5.2-2.2.1-4.4-.3-6.6-.7 3-2.1 5.9-4.1 8.3-3.1.2-6.3-1.3-7.9-3.6-.1-.1-.2-.3-.3-.4-.1-.2-.2-.5-.3-.7-.1-.2-.2-.5-.2-.7v-.7-.5c0-.2.1-.5.2-.7.1-.2.1-.5.2-.7.1-.2.2-.5.4-.7.6-1.6.6-2.9-.5-3.6l-.6-.3c-.1 0-.3-.1-.4-.1-.1 0-.2-.1-.3-.1-.2-.1-.5-.1-.7-.2-.2-.1-.5-.1-.7-.1-.2 0-.5-.1-.7-.1h-.5c-.3 0-.5 0-.7.1-.2 0-.5.1-.7.1-.2.1-.5.1-.7.2-.2.1-.4.2-.7.3l-.6.3c-7.7 5-3.1 16.8 2.1 20.2-2 .4-4 .8-4.6 1.2l-.1.1c1.4.9 2.9 1.6 4.5 2.2 2.1.7 4.4 1.3 5.4 1.6 2.7.6 5.5.8 8.3.6 14.6-1 26.6-12.2 28.8-26.8.1.3.1.6.2.9.1.6.2 1.2.3 1.9.1.3.1.6.1.9v.1c0 .3.1.6.1.9 0 .4.1.7.1 1.1V91.6c0 .3-.1.5-.1.8v.3c0 .3-.1.6-.1 1-.1.3-.1.6-.2.9v.1c-.1.3-.1.6-.2.9v.1c-.1.3-.1.6-.2.9v.1l-.3.9v.1c-.1.3-.2.7-.3 1-.1.3-.2.6-.4 1-.1.3-.2.7-.4 1-.1.3-.3.6-.4 1-.1.3-.3.6-.4.9 0 .1-.1.2-.1.2s0 .1-.1.1c-2.1 4.3-5.3 8.1-9.3 11.1-.3.2-.5.4-.8.6-.1.1-.2.1-.2.2-.2.2-.5.3-.7.5l.1.2c.5-.1.9-.1 1.4-.2.9-.1 1.7-.3 2.6-.5.2 0 .5-.1.7-.2.2 0 .3-.1.5-.1s.5-.1.7-.1c.2-.1.4-.1.6-.2 3.3-.8 6.5-1.9 9.6-3.2-5.3 7.2-12.3 13-20.5 16.8 3.8-.3 7.6-.9 11.3-2 13.3-3.9 24.5-12.9 31.2-25-1.4 7.6-4.4 14.9-8.9 21.3 3.2-2.1 6.1-4.6 8.8-7.3 7.4-7.7 12.3-17.6 13.9-28.1 1.1 5.2 1.5 10.6 1 15.9 23.9-33.3 2-67.8-7.2-76.9 0-.1-.1-.1-.1-.2v0c0 .4 0 .8-.1 1.2-.1.8-.2 1.5-.3 2.2-.2.7-.4 1.5-.6 2.2-.2.7-.5 1.4-.8 2.1-.3.7-.6 1.4-1 2-.4.6-.8 1.3-1.2 1.9-.4.6-.9 1.2-1.4 1.8-.5.6-1 1.1-1.6 1.7-.3.3-.6.6-1 .8-.3.2-.5.4-.8.7-.6.5-1.2.9-1.9 1.3-.6.4-1.3.8-2 1.1l-2.1.9c-.7.3-1.4.5-2.1.7-.7.2-1.5.4-2.2.5-.8.1-1.5.2-2.2.3-.5 0-1.1.1-1.6.1-.8 0-1.5-.1-2.2-.1-.8-.1-1.5-.2-2.2-.3-.8-.1-1.5-.3-2.2-.6.7-.1 1.5-.1 2.2-.3.8-.1 1.5-.3 2.2-.5.7-.2 1.5-.4 2.1-.7l2.1-.9c.7-.3 1.3-.7 2-1.1.6-.4 1.3-.9 1.9-1.3.6-.5 1.2-1 1.7-1.5.6-.5 1.1-1.1 1.6-1.6.5-.6 1-1.2 1.4-1.8.1-.1.1-.2.2-.3.3-.5.7-1.1 1-1.6.4-.7.7-1.3 1-2 .3-.7.6-1.4.8-2.1l.6-2.1c.1-.8.3-1.5.3-2.2.1-.8.1-1.5.1-2.2 0-.5 0-1.1-.1-1.6-.1-.8-.2-1.5-.3-2.2-.1-.8-.3-1.5-.5-2.2-.2-.7-.5-1.4-.7-2.1-.3-.7-.6-1.4-.9-2-.4-.7-.7-1.3-1.1-2-.4-.6-.9-1.2-1.3-1.8-.5-.6-1-1.1-1.5-1.7-.3-.3-.6-.6-.9-.8-1.5-1.2-3-2.2-4.6-3.2-.2-.1-.4-.2-.7-.3-1.3-1.1-2.3-1.4-3.3-1.8z"/></svg>

src/images/icons/Social/devto.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 235 234" xmlns="http://www.w3.org/2000/svg" class="rainbow-logo" preserveAspectRatio="xMinYMin meet"><g fill="none" fill-rule="evenodd"><path fill="#88AEDC" d="m234.04 175.67-75.69 58.28h47.18L234.04 212z"/><path d="m234.04 140.06-121.93 93.89h.02l121.91-93.87zM133.25.95.04 103.51v.02L133.27.95z"/><path fill="#F58F8E" fill-rule="nonzero" d="M.04.95v30.16L39.21.95z"/><path fill="#FEE18A" fill-rule="nonzero" d="M39.21.95.04 31.11v35.9L85.84.95z"/><path fill="#F3F095" fill-rule="nonzero" d="M85.84.95.04 67.01v36.5L133.25.95z"/><path fill="#55C1AE" fill-rule="nonzero" d="M133.27.95.04 103.53v35.59L179.49.95z"/><path fill="#F7B3CE" fill-rule="nonzero" d="M234.04.95h-7.37L.04 175.45v35.93l234-180.18z"/><path fill="#88AEDC" fill-rule="nonzero" d="M179.49.95.04 139.12v36.33L226.67.95z"/><path fill="#F58F8E" fill-rule="nonzero" d="M234.04 31.2.04 211.38v22.57h18.03l215.97-166.3z"/><path fill="#FEE18A" fill-rule="nonzero" d="M234.04 67.65 18.07 233.95H64.7l169.34-130.39z"/><path fill="#F3F095" fill-rule="nonzero" d="M234.04 103.56 64.7 233.95h47.41l121.93-93.89z"/><path fill="#55C1AE" fill-rule="nonzero" d="m234.04 140.08-121.91 93.87h46.22l75.69-58.28z"/><path fill="#F7B3CE" fill-rule="nonzero" d="m234.04 212-28.51 21.95h28.51z"/><g fill="#FFF"><path d="M65.2372 77.75c4.5139.95 7.774 2.8 11.1343 6.3 3.0595 3.2 4.9653 6.85 5.7678 10.95.652 3.45.652 40.55 0 44.05-1.7052 9.1-9.4792 16.2-19.109 17.45-2.0062.25-8.7269.5-14.8458.5H37V77h12.4384c8.8272 0 13.3412.2 15.7988.75ZM51.5449 117v25.6l5.166-.2c4.4637-.15 5.4167-.35 7.4228-1.5 3.9121-2.3 3.9623-2.45 3.9623-24.2 0-21.2 0-21.2-3.6613-23.6-1.8056-1.2-2.558-1.35-7.473-1.55l-5.4168-.15V117ZM130.7895 84.25v7.25h-25.579v18h15.548V124h-15.548l.1003 9.1.1505 9.15 12.6892.15 12.639.1V157h-14.7957c-16.4508 0-19.0087-.3-21.6167-2.6-3.6613-3.2-3.4607-1.15-3.6112-36.3-.1003-21.9.0502-32.25.4013-33.65.7021-2.6 3.6613-5.8 6.2693-6.7 1.5548-.55 5.467-.7 17.7047-.75h15.6483v7.25ZM162.4372 105.1c3.7114 14.25 6.821 25.6 6.9213 25.25.1505-.35 3.3102-12.4 7.0718-26.85l6.8712-26.25 7.8242-.15c5.9183-.1 7.8743.05 7.8743.5s-17.3536 66.2-18.3567 69.5c-.7021 2.3-4.4637 7-6.5702 8.25-2.6582 1.5-6.5703 1.75-8.9777.5-2.1567-1.1-5.0155-4.4-6.47-7.5-.9028-1.9-15.6483-56-19.0588-70l-.3511-1.35h7.8241c7.6737 0 7.8743 0 8.2756 1.1.2006.65 3.4105 12.8 7.122 27Z"/></g></g></svg>

src/pages/index.css

@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap");
+
 :root {
   --grey-05: #f5f6f7;
   --grey-10: #dfdfe2;
@@ -25,12 +26,46 @@ body {
   color: var(--grey-90);
 }
 
-[type="checkbox"] {
-  -webkit-box-shadow: 0 1px 1px var(--grey-90) !important;
-  -moz-box-shadow: 0 1px 1px var(--grey-90) !important;
-  box-shadow: 0 1px 1px var(--grey-90) !important;
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.checkbox-label {
   cursor: pointer;
-  border-radius: 0px !important;
+}
+.checkbox-label:hover .tooltiptext {
+  visibility: visible;
+}
+.checkbox-label__input {
+  position: absolute;
+  opacity: 0;
+}
+.checkbox-label__control {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+  vertical-align: middle;
+  background-color: #f7fafc;
+  border: 2px solid var(--grey-90);
+  transform: scale(0.75);
+}
+.checkbox-label__input:checked + .checkbox-label__control:after {
+  position: absolute;
+  display: block;
+  content: "";
+  top: 5px;
+  left: 5px;
+  width: 10px;
+  height: 10px;
+  background-color: var(--dark-purple);
+}
+.checkbox-label__input:hover + .checkbox-label__control,
+.checkbox-label__input:focus + .checkbox-label__control {
+  box-shadow: 0 0 0 10px rgba(10, 10, 35, .1);
 }
 
 .section {
@@ -79,11 +114,6 @@ a {
   padding: 2% 5%;
   font-size: 14px;
 }
-
-.skillCheckboxLabel:hover .tooltiptext {
-  visibility: visible;
-}
-
 .tooltiptext::after {
   content: " ";
   position: absolute;
@@ -95,6 +125,7 @@ a {
   border-style: solid;
   border-color: transparent var(--grey-90) transparent transparent;
 }
+
 .workflow {
   margin-left: 2%;
   padding: 1%;
@@ -120,9 +151,11 @@ a {
   .tooltiptext {
     display: none;
   }
+
   .warning {
     font-size: 10px;
   }
+
   .workflow {
     font-size: 12px;
   }

src/pages/index.js

@@ -292,7 +292,7 @@ const IndexPage = () => {
     tempElement.setAttribute(
       "href",
       `data:text/json;charset=utf-8,${encodeURIComponent(
-        JSON.stringify({ prefix, data, link, social, skills })
+        JSON.stringify({ prefix, data, link, social, skills, support })
       )}`
     )
     tempElement.setAttribute("download", "data.json")
@@ -367,6 +367,7 @@ const IndexPage = () => {
     setLink(DEFAULT_LINK)
     setSocial(DEFAULT_SOCIAL)
     setSkills(DEFAULT_SKILLS)
+    setSupport(DEFAULT_SUPPORT)
   }
 
   const mergeDefaultWithNewDataSkills = (defaultSkills, newSkills) => {
@@ -396,6 +397,7 @@ const IndexPage = () => {
       setData(restoreData.data || DEFAULT_DATA)
       setLink(restoreData.link || DEFAULT_LINK)
       setSocial(restoreData.social || DEFAULT_SOCIAL)
+      setSupport(restoreData.support || DEFAULT_SUPPORT)
 
       const restoreDataSkills = mergeDefaultWithNewDataSkills(
         DEFAULT_SKILLS,
@@ -410,10 +412,12 @@ const IndexPage = () => {
 
   const handleFileInput = e => {
     const file = e.target.files[0]
-    const reader = new FileReader()
-    reader.readAsText(file, "UTF-8")
-    reader.onload = () => {
-      setRestore(reader.result)
+    if (file && file.type === "application/json") {
+      const reader = new FileReader()
+      reader.readAsText(file, "UTF-8")
+      reader.onload = () => {
+        setRestore(reader.result)
+      }
     }
   }
 

src/utils/__tests__/validation.test.js

@@ -0,0 +1,30 @@
+import {
+  isGitHubUsernameValid,
+  isMediumUsernameValid,
+  isTwitterUsernameValid,
+} from "../validation"
+
+describe("validation", () => {
+  it("isGitHubUsernameValid", () => {
+    expect(
+      isGitHubUsernameValid(
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+      )
+    ).toBe(false)
+    expect(isGitHubUsernameValid("rahuldkjain")).toBe(true)
+  })
+
+  it("isMediumUsernameValid", () => {
+    expect(isMediumUsernameValid("rahuldkjain")).toBe(false)
+    expect(isMediumUsernameValid("@rahuldkjain")).toBe(true)
+  })
+
+  it("isTwitterUsernameValid", () => {
+    expect(
+      isTwitterUsernameValid(
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+      )
+    ).toBe(false)
+    expect(isTwitterUsernameValid("rahuldkjain")).toBe(true)
+  })
+})