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"

CODE_STYLE_GUIDE.md

@@ -3,14 +3,14 @@
 ## File Layout (`src/components/*.js`)
 
 1. Imports
-2. Reusabe components needed for the main component
+2. Reusable components needed for the main component
 3. Main component (Eg: Addons in addons.js)
 4. export default \<MainComponent\>;
 
 ## Reusable components
 
 * Do not make a new file for smaller components.
-* Smaller, reusable components neeeded in the main components should be added **above** the main component, **not** inside it.
+* Smaller, reusable components needed in the main components should be added **above** the main component, **not** inside it.
 * Use ES6 arrow functions for defining components.
 
 ## Spacing
@@ -84,7 +84,7 @@
 
 * We are using [octicons](https://primer.style/octicons/) for icons. Use this if you need to add icons. Do **not** add a new library for icons.
 * Try to not commit changes in `package.json`, `package-lock.json`. 
-* Disscuss with contributors on discord if you're planning to add/remove a package.
+* Discuss with contributors on discord if you're planning to add/remove a package.
 
 ## Further reading:
 

README.md

@@ -9,7 +9,7 @@
 
 <p align="center">
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/LICENSE" target="blank">
-<img src="https://img.shields.io/github/license/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator licence" />
+<img src="https://img.shields.io/github/license/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator license" />
 </a>
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/fork" target="blank">
 <img src="https://img.shields.io/github/forks/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator forks"/>
@@ -76,6 +76,8 @@ Just fill in the details such as `Name`, `Tagline`, `Dev Platforms Username`, `C
 
 - **GitHub Top Skills**
 
+- **GitHub Streak Stats**
+
 - **Dynamic Dev(.)to Blogs** (GitHub Action)
 
 - **Dynamic Medium Blogs** (GitHub Action)
@@ -84,6 +86,8 @@ 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)
 
+- **Buy Me A Coffee button**
+
 Click on `Generate README` to get your README in `markdown`.
 You can preview the README too.
 
@@ -132,6 +136,7 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
 - [Anurag Hazra](https://github.com/anuraghazra) for amazing [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
 - [Anton Komarev](https://github.com/antonkomarev) for super cool [github-profile-views-counter](https://github.com/antonkomarev/github-profile-views-counter)
 - [Gautam Krishna R](https://github.com/gautamkrishnar) for the awesome [blog post workflow](https://github.com/gautamkrishnar/blog-post-workflow)
+- [Jonah Lawrence](https://github.com/DenverCoder1) for the incredible [github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats)
 - [Julien Monty](https://github.com/konpa) for super useful [devicon](https://github.com/konpa/devicon)
 
 ## 🙇 Sponsors

jest.config.js

@@ -18,7 +18,7 @@ module.exports = {
   coverageThreshold: {
     global: {
       branches: 0,
-      functions: 76,
+      functions: 75,
       lines: 68,
       statements: 68,
     },

package.json

@@ -2,13 +2,14 @@
   "name": "github-profile-readme-generator",
   "private": true,
   "description": "A simple react app to generate beautiful github profile readme in md(markdown)",
-  "version": "1.1.10",
+  "version": "1.2.0",
   "author": "Rahul Jain <rahuldkjain@gmail.com>",
   "dependencies": {
     "@primer/octicons-react": "^10.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
+    "eslint": "^7.17.0",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-google-analytics": "^2.3.11",
@@ -21,7 +22,7 @@
     "gatsby-transformer-remark": "^2.8.27",
     "gatsby-transformer-sharp": "^2.5.7",
     "gsap": "^3.4.0",
-    "prismjs": "^1.20.0",
+    "prismjs": "^1.25.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

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://cdn.worldvectorlogo.com/logos/paypal-icon.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

@@ -182,7 +182,7 @@ exports[`Markdown Preview renders correctly 1`] = `
         },
         "prefix": Object {
           "ama": "💬 Ask me about",
-          "blog": "📝 I regulary write articles on",
+          "blog": "📝 I regularly write articles on",
           "collaborateOn": "👯 I’m looking to collaborate on",
           "contact": "📫 How to reach me",
           "currentLearn": "🌱 I’m currently learning",
@@ -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>
@@ -560,7 +564,7 @@ exports[`Work Preview renders correctly 1`] = `
   />
   <DisplayWork
     link=""
-    prefix="📝 I regulary write articles on"
+    prefix="📝 I regularly write articles on"
   />
   <DisplayWork
     link=""

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

@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skills renders correctly 1`] = `
+<div
+  className="px-2 sm:px-6 mb-10 "
+>
+  <div
+    className="text-xl sm:text-2xl font-bold font-title mt-2 mb-4 flex justify-between"
+  >
+    Skills
+    <div
+      className="relative flex"
+    >
+      <input
+        className="leading:none text-xs my-0 py-1 px-2 pr-8 sm:text-xl border-2 border-gray-900 focus:border-blue-700 placeholder-gray-700"
+        onChange={[Function]}
+        placeholder="Search Skills"
+        type="text"
+      />
+      <span
+        className="absolute"
+        style={
+          Object {
+            "right": "10px",
+          }
+        }
+      >
+        <SearchIcon
+          className="mb-1 transform scale-100 md:scale-125"
+          size={16}
+          verticalAlign="text-bottom"
+        />
+      </span>
+    </div>
+  </div>
+  <div
+    className="divide-y divide-gray-500"
+    key="language"
+  >
+    <div
+      className="text-sm sm:text-xl text-gray-900 text-left py-1"
+    >
+      Programming Languages
+    </div>
+    <div
+      className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10"
+    >
+      <div
+        className="w-1/3 sm:w-1/4 my-6"
+        key="javascript"
+      >
+        <label
+          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"
+            src="javascript.svg"
+          />
+          <span
+            className="tooltiptext"
+          >
+            javascript
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="divide-y divide-gray-500"
+    key="frontend_dev"
+  >
+    <div
+      className="text-sm sm:text-xl text-gray-900 text-left py-1"
+    >
+      Frontend Development
+    </div>
+    <div
+      className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10"
+    >
+      <div
+        className="w-1/3 sm:w-1/4 my-6"
+        key="react"
+      >
+        <label
+          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"
+            src="react.svg"
+          />
+          <span
+            className="tooltiptext"
+          >
+            react
+          </span>
+        </label>
+      </div>
+      <div
+        className="w-1/3 sm:w-1/4 my-6"
+        key="svelte"
+      >
+        <label
+          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="svelte.svg"
+          />
+          <span
+            className="tooltiptext"
+          >
+            svelte
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <span
+    className="flex justify-center text-gray-900"
+  />
+</div>
+`;

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

@@ -0,0 +1,383 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Social renders correctly 1`] = `
+<div
+  className="px-2 sm:px-6 mb-4"
+>
+  <div
+    className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2"
+  >
+    Social
+  </div>
+  <div
+    className="flex flex-wrap justify-center items-center"
+  >
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="github"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
+      />
+      <input
+        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 focus:border-blue-700"
+        id="github"
+        onChange={[Function]}
+        placeholder="github username"
+        value="github "
+      />
+    </div>
+    <div
+      className="w-1/2  flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="twitter"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="twitter"
+        onChange={[Function]}
+        placeholder="twitter username"
+        value="twitter"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="dev.to"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="dev"
+        onChange={[Function]}
+        placeholder="dev.to username"
+        value="dev"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codepen"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="codepen"
+        onChange={[Function]}
+        placeholder="codepen username"
+        value="codepen"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codesandbox"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="codesandbox"
+        onChange={[Function]}
+        placeholder="codesandbox username"
+        value="codesandbodx"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="stackoverflow"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="stackoverflow"
+        onChange={[Function]}
+        placeholder="stackoverflow user ID"
+        value="stackoverflow"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="linkedin"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="linkedin"
+        onChange={[Function]}
+        placeholder="linkedin username"
+        value="linkedin"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="kaggle"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="kaggle"
+        onChange={[Function]}
+        placeholder="kaggle username"
+        value="kaggle"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="facebook"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="fb"
+        onChange={[Function]}
+        placeholder="facebook username"
+        value="fb"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="instagram"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="instagram"
+        onChange={[Function]}
+        placeholder="instagram username"
+        value="instagram"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="dribbble"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="dribbble"
+        onChange={[Function]}
+        placeholder="dribbble username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="behance"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="behance"
+        onChange={[Function]}
+        placeholder="behance username"
+        value="behance"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="medium"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="medium"
+        onChange={[Function]}
+        placeholder="medium username (with @)"
+        value="medium"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="youtube"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="youtube"
+        onChange={[Function]}
+        placeholder="youtube channel name"
+        value="youtube"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codechef"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="codechef"
+        onChange={[Function]}
+        placeholder="codechef username"
+        value="codechef"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="hackerrank"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerrank.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="hackerrank"
+        onChange={[Function]}
+        placeholder="hackerrank username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codeforces"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codeforces.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="codeforces"
+        onChange={[Function]}
+        placeholder="codeforces username"
+        value="codeforces"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="leetcode"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/leetcode.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="leetcode"
+        onChange={[Function]}
+        placeholder="leetcode username"
+        value="leetcode"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="topcoder"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/topcoder.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="topcoder"
+        onChange={[Function]}
+        placeholder="topcoder username"
+        value="topcoder"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="hackerearth"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerearth.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="hackerearth"
+        onChange={[Function]}
+        placeholder="hackerearth user (with @)"
+        value="@hackerearth"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="geeksforgeeks"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/geeksforgeeks.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="geeksforgeeks"
+        onChange={[Function]}
+        placeholder="GFG (<username>/profile)"
+        value="geeks_for_geeks"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="discord"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/discord.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="discord"
+        onChange={[Function]}
+        placeholder="discord invite (only code)"
+        value="discord"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="rssfeed"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/rss.svg"
+      />
+      <input
+        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-2 focus:border-blue-700"
+        id="rssurl"
+        onChange={[Function]}
+        placeholder="RSS feed URL"
+        value="rssurl"
+      />
+    </div>
+  </div>
+</div>
+`;

src/components/__tests__/markdown.test.js

@@ -56,7 +56,7 @@ describe("Markdown", () => {
     },
     prefix: {
       ama: '💬 Ask me about',
-      blog: '📝 I regulary write articles on',
+      blog: '📝 I regularly write articles on',
       collaborateOn: '👯 I’m looking to collaborate on',
       contact: '📫 How to reach me',
       currentLearn: '🌱 I’m currently learning',

src/components/__tests__/markdownPreview.test.js

@@ -16,7 +16,7 @@ const DEFAULT_PREFIX = {
     resume: "📄 Know about my experiences",
     funFact: "⚡ Fun fact",
     portfolio: "👨‍💻 All of my projects are available at",
-    blog: "📝 I regulary write articles on",
+    blog: "📝 I regularly write articles on",
 }
 
 const DEFAULT_DATA = {
@@ -117,7 +117,7 @@ describe("Markdown Preview", () => {
                 link={link}
                 social={social}
                 skills={skills} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -126,24 +126,24 @@ describe("Title Preview", () => {
         let prefix = DEFAULT_PREFIX;
         let data = DEFAULT_DATA;
         const tree = shallow(<TitlePreview prefix={prefix.title} title={data.title} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no prefix", () => {
         let prefix = DEFAULT_PREFIX;
         const tree = shallow(<TitlePreview prefix={prefix.title} title={""} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no title", () => {
         let data = DEFAULT_DATA;
         const tree = shallow(<TitlePreview title={data.title} prefix={""} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no title and prefix", () => {
         const tree = shallow(<TitlePreview />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -151,29 +151,29 @@ describe("SubTitle Preview", () => {
     it("renders correctly", () => {
         let data = DEFAULT_DATA;
         const tree = shallow(<SubTitlePreview subtitle={data.subtitle} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no subtitle", () => {
         const tree = shallow(<SubTitlePreview subtitle={""} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
 describe("SectionTitle Preview", () => {
     it("renders correctly", () => {
         const tree = shallow(<SectionTitle visible={true} label={"dummy"} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no label", () => {
         const tree = shallow(<SectionTitle visible={true} label={""} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with visible false", () => {
         const tree = shallow(<SectionTitle visible={false} label={"dummy"} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -183,51 +183,51 @@ describe("DisplayWork Preview", () => {
         let data = DEFAULT_DATA;
         let link = DEFAULT_LINK;
         const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={link.currentWork} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no prefix, link and project", () => {
         const tree = shallow(<DisplayWork prefix={undefined} project={undefined} link={undefined} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no prefix", () => {
         let data = DEFAULT_DATA;
         let link = DEFAULT_LINK;
         const tree = shallow(<DisplayWork prefix={undefined} project={data.currentWork} link={link.currentWork} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no project", () => {
         let prefix = DEFAULT_PREFIX;
         let link = DEFAULT_LINK;
         const tree = shallow(<DisplayWork prefix={prefix} project={undefined} link={link.currentWork} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no link", () => {
         let prefix = DEFAULT_PREFIX;
         let data = DEFAULT_DATA;
         const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={undefined}/>)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no prefix and link", () => {
         let data = DEFAULT_DATA;
         const tree = shallow(<DisplayWork project={data.currentWork} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no project and link", () => {
         let prefix = DEFAULT_PREFIX;
         const tree = shallow(<DisplayWork prefix={prefix} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no project and prefix", () => {
         let link = DEFAULT_LINK;
         const tree = shallow(<DisplayWork link={link.currentWork} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -240,7 +240,7 @@ describe("DisplaySocial Preview", () => {
                 username={social.codepen}
             />
             )
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no username", () => {
@@ -250,7 +250,7 @@ describe("DisplaySocial Preview", () => {
                 username={""}
             />
             )
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -268,7 +268,7 @@ describe("VisitorsBadge Preview", () => {
                 }}
             />
             )
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with show true", () => {
@@ -284,7 +284,7 @@ describe("VisitorsBadge Preview", () => {
                 }}
             />
             )
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -296,7 +296,7 @@ describe("GithubProfileTrophy Preview", () => {
                 show={data.githubProfileTrophy}
                 github={social.github}
             />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with show true", () => {
@@ -306,7 +306,7 @@ describe("GithubProfileTrophy Preview", () => {
                 show={true}
                 github={social.github}
             />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -318,7 +318,7 @@ describe("TwitterBadgePreview Preview", () => {
                 show={data.twitterBadge}
                 twitter={social.twitter}
             />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with show true", () => {
@@ -328,7 +328,7 @@ describe("TwitterBadgePreview Preview", () => {
                 show={true}
                 twitter={social.twitter}
             />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -339,7 +339,7 @@ describe("Work Preview", () => {
         let link = DEFAULT_LINK;
         let props = { data: data, prefix: prefix, link: link }
         const tree = shallow(<WorkPreview work={props} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -347,7 +347,7 @@ describe("Social Preview", () => {
     it("renders correctly", () => {
         let social = DEFAULT_SOCIAL;
         const tree = shallow(<SocialPreview social={social} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -355,13 +355,13 @@ describe("Skills Preview", () => {
     it("renders correctly", () => {
         let skills = DUMMY_SKILLS.skills
         const tree = shallow(<SkillsPreview skills={skills} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with no skills", () => {
         let skills = {}
         const tree = shallow(<SkillsPreview skills={skills} />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -374,7 +374,7 @@ describe("TopLanguages Preview", () => {
                 github={social.github}
                 options={data.topLanguagesOptions}
             />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly with show true", () => {
@@ -385,7 +385,7 @@ describe("TopLanguages Preview", () => {
                 github={social.github}
                 options={data.topLanguagesOptions}
             />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })
@@ -398,7 +398,7 @@ describe("GitHubStats Preview", () => {
                 github={social.github}
                 options={data.githubStatsOptions}
             />)
-            
+
         expect(tree).toMatchSnapshot()
     })
     it("renders correctly", () => {
@@ -409,7 +409,7 @@ describe("GitHubStats Preview", () => {
                 github={social.github}
                 options={data.githubStatsOptions}
             />)
-            
+
         expect(tree).toMatchSnapshot()
     })
 })

src/components/__tests__/skills.test.js

@@ -0,0 +1,42 @@
+import React from "react"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
+
+import Skills from "../skills"
+
+jest.mock("../../constants/skills", () => ({
+  __esModule: true,
+  categorizedSkills: {
+    language: {
+      title: "Programming Languages",
+      skills: ["javascript"],
+    },
+    frontend_dev: {
+      title: "Frontend Development",
+      skills: ["react", "svelte"],
+    },
+  },
+  icons: {
+    javascript: "javascript.svg",
+    react: "react.svg",
+    svelte: "svelte.svg",
+  },
+}))
+
+describe("Skills", () => {
+  it("renders correctly", () => {
+    const component = shallow(<Skills skills={{ javascript: true }} />)
+    expect(toJson(component)).toMatchSnapshot()
+  })
+
+  it("calls handleSkillsChange prop when a skill is clicked", () => {
+    const mockFn = jest.fn()
+    const component = shallow(
+      <Skills skills={{ javascript: true }} handleSkillsChange={mockFn} />
+    )
+
+    component.find("#javascript").simulate("change")
+
+    expect(mockFn).toHaveBeenCalledTimes(1)
+  })
+})

src/components/__tests__/social.test.js

@@ -0,0 +1,44 @@
+import React from "react"
+import { shallow } from "enzyme"
+import toJson from "enzyme-to-json"
+
+import Social from "../social"
+
+describe("Social", () => {
+  const mockEvent = { target: { value: "This is a mock event" } }
+  const props = {
+    social: {
+      github: "github ",
+      twitter: "twitter",
+      dev: "dev",
+      codepen: "codepen",
+      codesandbox: "codesandbodx",
+      stackoverflow: "stackoverflow",
+      linkedin: "linkedin",
+      kaggle: "kaggle",
+      fb: "fb",
+      instagram: "instagram",
+      dribble: "dribble",
+      behance: "behance",
+      medium: "medium",
+      youtube: "youtube",
+      codechef: "codechef",
+      hackerrack: "hackerranck",
+      codeforces: "codeforces",
+      leetcode: "leetcode",
+      topcoder: "topcoder",
+      hackerearth: "@hackerearth",
+      geeks_for_geeks: "geeks_for_geeks",
+      discord: "discord",
+      rssurl: "rssurl",
+    },
+    handleSocialChange: jest.fn().mockReturnValue({}),
+  }
+  it("renders correctly", () => {
+    const component = shallow(<Social {...props} />)
+    for (let i = 0; i < component.find("input").length; i++) {
+      component.find("input").at(i).simulate("change", mockEvent)
+    }
+    expect(toJson(component)).toMatchSnapshot()
+  })
+})

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,180 +60,224 @@ 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 }) => (
+  <>
+    <label htmlFor={`${prefix}-theme`}>
+      Theme:&nbsp;
+      <select
+        id={`${prefix}-theme`}
+        onChange={({ target: { value } }) => onUpdate("theme", value)}
+        defaultValue={options.theme}
+      >
+        <option value="default">default</option>
+        <option value="dark">dark</option>
+        <option value="highcontrast">highcontrast</option>
+      </select>
+    </label>
+  </>
+)
 
 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])
+
   const blogPostPorkflow = () => {
     let payload = {
       dev: {
@@ -252,24 +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 }
+    setStreakStatsOptions(newStreakStatsOptions)
+    props.handleDataChange("streakStatsOptions", {
+      target: { value: newStreakStatsOptions },
+    })
   }
 
   return (
@@ -286,7 +355,7 @@ const Addons = props => {
             title="Customize Badge"
             CustomizationOptions={
               <CustomizeBadge
-                githubName={props.social.github} 
+                githubName={props.social.github}
                 badgeOptions={badgeOptions}
                 onBadgeUpdate={onBadgeUpdate}
               />
@@ -311,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}
+              />
             }
           />
         }
@@ -326,13 +399,36 @@ 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}
+              />
             }
           />
         }
       >
         display top skills
       </AddonsItem>
+      <AddonsItem
+        inputId="streak-stats"
+        inputChecked={props.data.streakStats}
+        onInputChange={() => props.handleCheckChange("streakStats")}
+        Options={
+          <CustomizeOptions
+            title="Customize Streak Stats Card"
+            CustomizationOptions={
+              <CustomizeStreakStats
+                prefix="streak-stats"
+                options={streakStatsOptions}
+                onUpdate={onStreakStatsUpdate}
+              />
+            }
+          />
+        }
+      >
+        display github streak stats
+      </AddonsItem>
       <AddonsItem
         inputId="twitter-badge"
         inputChecked={props.data.twitterBadge}
@@ -373,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/donate.js

@@ -48,16 +48,21 @@ const Donate = () => {
           {/* Paypal */}
           <a
             href="https://www.paypal.me/rahuldkjain/10"
-            className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
+            className="flex items-center justify-evenly bg-white-500 text-white py-2 px-4 my-2 border border-solid"
             target="_blank"
             rel="noreferrer"
           >
             <img
-              className="w-6 h-6 mr-2"
-              src="https://cdn.worldvectorlogo.com/logos/paypal-icon.svg"
+              className="w-32 h-4"
+              src="https://cdn.worldvectorlogo.com/logos/paypal-2.svg"
               alt="Donate rahuldkjain via paypal"
             />
-            Paypal
+            {/* <img
+              className="w-6 h-6 mr-2"
+              src="https://www.vectorlogo.zone/logos/paypal/paypal-ar21.svg"
+              alt="Donate rahuldkjain via paypal"
+            />
+            Paypal */}
           </a>
           {/* BuyMeACoffee */}
           <a

src/components/footer.js

@@ -92,7 +92,7 @@ const Footer = () => {
           <div className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2">
             <strong>Join Community</strong>
           </div>
-          <div class="ml-2 sm:ml-0">
+          <div className="ml-2 sm:ml-0">
             <a
               href="https://discord.gg/HHMs7Eg"
               aria-label="Discord of the community"

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

@@ -4,230 +4,218 @@ import { icons, skills, skillWebsites } from "../constants/skills"
 import {
   githubStatsLinkGenerator,
   topLanguagesLinkGenerator,
+  streakStatsLinkGenerator,
 } from "../utils/link-generators"
-
-const Markdown = props => {
-  const Title = props => {
-    if (props.prefix && props.title) {
-      return (
-        <>
-          {`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const SubTitle = props => {
-    if (props.subtitle) {
-      return (
-        <>
-          {`<h3 align="center">${props.subtitle}</h3>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    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) {
-        return (
-          <>
-            {`- ${props.prefix} [${props.project}](${props.link})`}
-            <br />
-            <br />
-          </>
-        )
-      } else {
-        return (
-          <>
-            {`- ${props.prefix} **${props.project}**`}
-            <br />
-            <br />
-          </>
-        )
-      }
-    }
-    if (props.prefix && props.link) {
-      return (
-        <>
-          {`- ${props.prefix} [${props.link}](${props.link})`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const DisplaySocial = 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="40" /></a>`}
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const VisitorsBadge = props => {
-    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 (
-        <>
-          {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    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"> <a href="${props.base}/${props.twitter}" target="blank"><img src="${link}" alt="${props.twitter}" /></a> </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 = ({ show, github, options }) => {
-    if (show) {
-      return (
-        <>
-          {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({
-            github: github,
-            options,
-          })}" alt="${github}" /></p>`}
-          <br />
-          <br />
-        </>
-      )
-    }
-    return ""
-  }
-  const isSocial = social => {
+const Title = props => {
+  if (props.prefix && props.title) {
     return (
-      social.dev ||
-      social.twitter ||
-      social.codepen ||
-      social.codesandbox ||
-      social.stackoverflow ||
-      social.linkedin ||
-      social.kaggle ||
-      social.instagram ||
-      social.fb ||
-      social.dribbble ||
-      social.behance ||
-      social.medium ||
-      social.youtube ||
-      social.codechef ||
-      social.hackerrank ||
-      social.codeforces ||
-      social.leetcode ||
-      social.topcoder ||
-      social.hackerearth ||
-      social.geeks_for_geeks ||
-      social.discord ||
-      social.rssurl
+      <>
+        {`<h1 align="center">${props.prefix + " " + props.title}</h1>`}
+        <br />
+      </>
     )
   }
-  const DisplaySkills = props => {
-    const listChosenSkills = []
-    skills.forEach(skill => {
-      if (props.skills[skill]) {
-        listChosenSkills.push(
-          `
-          <a href="${skillWebsites[skill]}" target="_blank">
-            <img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>
-          </a>
-          `
-        )
-      }
-    })
-    return listChosenSkills.length > 0 ? (
+  return ""
+}
+const SubTitle = props => {
+  if (props.subtitle) {
+    return (
       <>
-        <SectionTitle label="Languages and Tools:" />
-        {`<p align="left">${listChosenSkills.join(" ")}</p>`}
+        {`<h3 align="center">${props.subtitle}</h3>`}
         <br />
         <br />
       </>
-    ) : (
-      ""
     )
   }
-  const DisplayDynamicBlogs = props => {
-    if (props.show) {
+  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) {
       return (
         <>
-          {`### Blogs posts`}
+          {`- ${props.prefix} [${props.project}](${props.link})`}
+          <br />
+          <br />
+        </>
+      )
+    } else {
+      return (
+        <>
+          {`- ${props.prefix} **${props.project}**`}
           <br />
-          {`<!-- BLOG-POST-LIST:START -->`}
           <br />
-          {`<!-- BLOG-POST-LIST:END -->`}
-          <br /> <br />
         </>
       )
     }
-    return ""
   }
-  const DisplayTopLanguages = props => {
-    if (props.show) {
-      if (!props.showStats) {
-        return (
-          <>
-            {`<p><img align="center" src="${topLanguagesLinkGenerator({
-              github: props.github,
-              options: props.options,
-            })}" alt="${props.github}" /></p>`}
-            <br />
-            <br />
-          </>
-        )
-      }
+  if (props.prefix && props.link) {
+    return (
+      <>
+        {`- ${props.prefix} [${props.link}](${props.link})`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplaySocial = 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="40" /></a>`}
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const VisitorsBadge = props => {
+  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 (
+      <>
+        {`<p align="left"> <img src="${link}" alt="${props.github}" /> </p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  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"> <a href="${props.base}/${props.twitter}" target="blank"><img src="${link}" alt="${props.twitter}" /></a> </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 = ({ show, github, options }) => {
+  if (show) {
+    return (
+      <>
+        {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({
+          github: github,
+          options,
+        })}" alt="${github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const isSocial = social => {
+  return (
+    social.dev ||
+    social.twitter ||
+    social.codepen ||
+    social.codesandbox ||
+    social.stackoverflow ||
+    social.linkedin ||
+    social.kaggle ||
+    social.instagram ||
+    social.fb ||
+    social.dribbble ||
+    social.behance ||
+    social.medium ||
+    social.youtube ||
+    social.codechef ||
+    social.hackerrank ||
+    social.codeforces ||
+    social.leetcode ||
+    social.topcoder ||
+    social.hackerearth ||
+    social.geeks_for_geeks ||
+    social.discord ||
+    social.rssurl
+  )
+}
+const DisplaySkills = props => {
+  const listChosenSkills = []
+  skills.forEach(skill => {
+    if (props.skills[skill]) {
+      listChosenSkills.push(
+        `
+        <a href="${skillWebsites[skill]}" target="_blank" rel="noreferrer">
+          <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 />
+    </>
+  ) : (
+    ""
+  )
+}
+const DisplayDynamicBlogs = props => {
+  if (props.show) {
+    return (
+      <>
+        {`### Blogs posts`}
+        <br />
+        {`<!-- BLOG-POST-LIST:START -->`}
+        <br />
+        {`<!-- BLOG-POST-LIST:END -->`}
+        <br /> <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplayTopLanguages = props => {
+  if (props.show) {
+    if (!props.showStats) {
       return (
         <>
-          {`<p><img align="left" src="${topLanguagesLinkGenerator({
+          {`<p><img align="center" src="${topLanguagesLinkGenerator({
             github: props.github,
             options: props.options,
           })}" alt="${props.github}" /></p>`}
@@ -236,8 +224,62 @@ const Markdown = props => {
         </>
       )
     }
-    return ""
+    return (
+      <>
+        {`<p><img align="left" src="${topLanguagesLinkGenerator({
+          github: props.github,
+          options: props.options,
+        })}" alt="${props.github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
   }
+  return ""
+}
+const DisplayStreakStats = props => {
+  if (props.show) {
+    return (
+      <>
+        {`<p><img align="center" src="${streakStatsLinkGenerator({
+          github: props.github,
+          options: props.options,
+        })}" alt="${props.github}" /></p>`}
+        <br />
+        <br />
+      </>
+    )
+  }
+  return ""
+}
+const DisplaySupport = props => {
+  let viewSupport = false
+  Object.keys(props.support).forEach(key => {
+    if (props.support[key]) {
+      viewSupport = true
+    }
+  })
+  return viewSupport ? (
+    <div>
+      <SectionTitle label="Support:" />
+      {`<p>`}
+      {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 />
+    </div>
+  ) : (
+    ""
+  )
+}
+const Markdown = props => {
+  const icon_base_url =
+    "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/"
 
   return (
     <div id="markdown-content" className="break-words">
@@ -346,91 +388,91 @@ const Markdown = props => {
       <>
         <DisplaySocial
           base="https://codepen.io"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+          icon={icon_base_url + "codepen.svg"}
           username={props.social.codepen}
         />
       </>
       <>
         <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}
         />
       </>
       <>
         <DisplaySocial
           base="https://twitter.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
+          icon={icon_base_url + "twitter.svg"}
           username={props.social.twitter}
         />
       </>
       <>
         <DisplaySocial
           base="https://linkedin.com/in"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+          icon={icon_base_url + "linked-in-alt.svg"}
           username={props.social.linkedin}
         />
       </>
       <>
         <DisplaySocial
           base="https://stackoverflow.com/users"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+          icon={icon_base_url + "stack-overflow.svg"}
           username={props.social.stackoverflow}
         />
       </>
       <>
         <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}
         />
       </>
       <>
         <DisplaySocial
           base="https://kaggle.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+          icon={icon_base_url + "kaggle.svg"}
           username={props.social.kaggle}
         />
       </>
       <>
         <DisplaySocial
           base="https://fb.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+          icon={icon_base_url + "facebook.svg"}
           username={props.social.fb}
         />
       </>
       <>
         <DisplaySocial
           base="https://instagram.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+          icon={icon_base_url + "instagram.svg"}
           username={props.social.instagram}
         />
       </>
       <>
         <DisplaySocial
           base="https://dribbble.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
+          icon={icon_base_url + "dribbble.svg"}
           username={props.social.dribbble}
         />
       </>
       <>
         <DisplaySocial
           base="https://www.behance.net"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
+          icon={icon_base_url + "behance.svg"}
           username={props.social.behance}
         />
       </>
       <>
         <DisplaySocial
           base="https://medium.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
+          icon={icon_base_url + "medium.svg"}
           username={props.social.medium}
         />
       </>
       <>
         <DisplaySocial
           base="https://www.youtube.com/c"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
+          icon={icon_base_url + "youtube.svg"}
           username={props.social.youtube}
         />
       </>
@@ -444,56 +486,56 @@ const Markdown = props => {
       <>
         <DisplaySocial
           base="https://www.hackerrank.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
+          icon={icon_base_url + "hackerrank.svg"}
           username={props.social.hackerrank}
         />
       </>
       <>
         <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="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
+          icon={icon_base_url + "leet-code.svg"}
           username={props.social.leetcode}
         />
       </>
       <>
         <DisplaySocial
           base="https://www.hackerearth.com"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
+          icon={icon_base_url + "hackerearth.svg"}
           username={props.social.hackerearth}
         />
       </>
       <>
         <DisplaySocial
           base="https://auth.geeksforgeeks.org/user"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
+          icon={icon_base_url + "geeks-for-geeks.svg"}
           username={props.social.geeks_for_geeks}
         />
       </>
       <>
         <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}
         />
       </>
       <>
         <DisplaySocial
           base="https://discord.gg"
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/discord.svg"
+          icon={icon_base_url + "discord.svg"}
           username={props.social.discord}
         />
       </>
       <>
         <DisplaySocial
           base=""
-          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
+          icon={icon_base_url + "rss.svg"}
           username={props.social.rssurl}
         />
       </>
@@ -509,6 +551,9 @@ const Markdown = props => {
       <>
         <DisplaySkills skills={props.skills} />
       </>
+      <>
+        <DisplaySupport support={props.support} />
+      </>
       <>
         <DisplayTopLanguages
           show={props.data.topLanguages}
@@ -524,6 +569,13 @@ const Markdown = props => {
           options={props.data.githubStatsOptions}
         />
       </>
+      <>
+        <DisplayStreakStats
+          show={props.data.streakStats}
+          github={props.social.github}
+          options={props.data.streakStatsOptions}
+        />
+      </>
     </div>
   )
 }

src/components/markdownPreview.js

@@ -3,6 +3,7 @@ import { icons, skills, skillWebsites } from "../constants/skills"
 import {
   githubStatsLinkGenerator,
   topLanguagesLinkGenerator,
+  streakStatsLinkGenerator,
 } from "../utils/link-generators"
 
 export const TitlePreview = props => {
@@ -121,123 +122,168 @@ 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/"
   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">
       <SectionTitle label="Connect with me:" visible={viewSocial} />
-      <DisplaySocial
-        base="https://codepen.io"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
-        username={props.social.codepen}
-      />
-      <DisplaySocial
-        base="https://dev.to"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
-        username={props.social.dev}
-      />
-      <DisplaySocial
-        base="https://twitter.com"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
-        username={props.social.twitter}
-      />
-      <DisplaySocial
-        base="https://linkedin.com/in"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
-        username={props.social.linkedin}
-      />
-      <DisplaySocial
-        base="https://stackoverflow.com/users"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
-        username={props.social.stackoverflow}
-      />
-      <DisplaySocial
-        base="https://codesandbox.com"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
-        username={props.social.codesandbox}
-      />
-      <DisplaySocial
-        base="https://kaggle.com"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
-        username={props.social.kaggle}
-      />
-      <DisplaySocial
-        base="https://fb.com"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
-        username={props.social.fb}
-      />
-      <DisplaySocial
-        base="https://instagram.com"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
-        username={props.social.instagram}
-      />
-      <DisplaySocial
-        base="https://dribbble.com"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
-        username={props.social.dribbble}
-      />
-      <DisplaySocial
-        base="https://www.behance.net"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
-        username={props.social.behance}
-      />
-      <DisplaySocial
-        base="https://medium.com"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
-        username={props.social.medium}
-      />
-      <DisplaySocial
-        base="https://www.youtube.com/c"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
-        username={props.social.youtube}
-      />
-
-      <DisplaySocial
-        base="https://www.codechef.com/users"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
-        username={props.social.codechef}
-      />
-      <DisplaySocial
-        base="https://codeforces.com/profile"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
-        username={props.social.codeforces}
-      />
-      <DisplaySocial
-        base="https://www.hackerrank.com"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
-        username={props.social.hackerrank}
-      />
-      <DisplaySocial
-        base="https://auth.geeksforgeeks.org/user"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
-        username={props.social.geeks_for_geeks}
-      />
-      <DisplaySocial
-        base="https://www.hackerearth.com"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
-        username={props.social.hackerearth}
-      />
-      <DisplaySocial
-        base="https://www.topcoder.com/members"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
-        username={props.social.topcoder}
-      />
-      <DisplaySocial
-        base="https://www.leetcode.com"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
-        username={props.social.leetcode}
-      />
-      <DisplaySocial
-        base="https://discord.gg"
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/discord.svg"
-        username={props.social.discord}
-      />
-      <DisplaySocial
-        base=""
-        icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
-        username={props.social.rssurl}
-      />
+      <>
+        <DisplaySocial
+          base="https://codepen.io"
+          icon={icon_base_url + "codepen.svg"}
+          username={props.social.codepen}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://dev.to"
+          icon={icon_base_url + "devto.svg"}
+          username={props.social.dev}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://twitter.com"
+          icon={icon_base_url + "twitter.svg"}
+          username={props.social.twitter}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://linkedin.com/in"
+          icon={icon_base_url + "linked-in-alt.svg"}
+          username={props.social.linkedin}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://stackoverflow.com/users"
+          icon={icon_base_url + "stack-overflow.svg"}
+          username={props.social.stackoverflow}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://codesandbox.com"
+          icon={icon_base_url + "codesandbox.svg"}
+          username={props.social.codesandbox}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://kaggle.com"
+          icon={icon_base_url + "kaggle.svg"}
+          username={props.social.kaggle}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://fb.com"
+          icon={icon_base_url + "facebook.svg"}
+          username={props.social.fb}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://instagram.com"
+          icon={icon_base_url + "instagram.svg"}
+          username={props.social.instagram}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://dribbble.com"
+          icon={icon_base_url + "dribbble.svg"}
+          username={props.social.dribbble}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.behance.net"
+          icon={icon_base_url + "behance.svg"}
+          username={props.social.behance}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://medium.com"
+          icon={icon_base_url + "medium.svg"}
+          username={props.social.medium}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.youtube.com/c"
+          icon={icon_base_url + "youtube.svg"}
+          username={props.social.youtube}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.codechef.com/users"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
+          username={props.social.codechef}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.hackerrank.com"
+          icon={icon_base_url + "hackerrank.svg"}
+          username={props.social.hackerrank}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://codeforces.com/profile"
+          icon={icon_base_url + "codeforces.svg"}
+          username={props.social.codeforces}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.leetcode.com"
+          icon={icon_base_url + "leet-code.svg"}
+          username={props.social.leetcode}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.hackerearth.com"
+          icon={icon_base_url + "hackerearth.svg"}
+          username={props.social.hackerearth}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://auth.geeksforgeeks.org/user"
+          icon={icon_base_url + "geeks-for-geeks.svg"}
+          username={props.social.geeks_for_geeks}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://www.topcoder.com/members"
+          icon={icon_base_url + "topcoder.svg"}
+          username={props.social.topcoder}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base="https://discord.gg"
+          icon={icon_base_url + "discord.svg"}
+          username={props.social.discord}
+        />
+      </>
+      <>
+        <DisplaySocial
+          base=""
+          icon={icon_base_url + "rss.svg"}
+          username={props.social.rssurl}
+        />
+      </>
     </div>
   )
 }
@@ -269,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>
@@ -298,10 +348,7 @@ export const GitHubStatsPreview = ({ github, options, show }) => {
   if (show) {
     return (
       <div className="text-center mx-4 mb-4">
-        <img
-          src={githubStatsLinkGenerator({ github, options })}
-          alt={github}
-        />
+        <img src={githubStatsLinkGenerator({ github, options })} alt={github} />
       </div>
     )
   }
@@ -322,15 +369,30 @@ export const TopLanguagesPreview = ({ github, options, show }) => {
   return <div className="text-center mx-4 mb-4"> &nbsp;</div>
 }
 
+export const StreakStatsPreview = ({ github, options, show }) => {
+  if (show) {
+    return (
+      <div className="text-center mx-4 mb-4">
+        <img src={streakStatsLinkGenerator({ github, options })} alt={github} />
+      </div>
+    )
+  }
+  return null
+}
+
 export const SkillsPreview = props => {
   var listSkills = []
   skills.forEach(skill => {
     if (props.skills[skill]) {
       listSkills.push(
-        <a href={skillWebsites[skill]} target="_blank" rel="noreferrer">
+        <a
+          href={skillWebsites[skill]}
+          key={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}
           />
@@ -344,12 +406,53 @@ export const SkillsPreview = props => {
       {listSkills}
     </div>
   ) : (
-      ""
-    )
+    ""
+  )
+}
+
+export const SupportPreview = props => {
+  let viewSupport = false
+  Object.keys(props.support).forEach(key => {
+    if (props.support[key]) {
+      viewSupport = true
+    }
+  })
+  return props.support.buyMeACoffee || props.support.buyMeAKofi ? (
+    <div className="flex flex-wrap justify-start items-center">
+      <SectionTitle label="Support:" visible={viewSupport} />
+      {props.support.buyMeACoffee && (
+        <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>
+  ) : (
+    ""
+  )
 }
 
 const MarkdownPreview = props => {
-
   return (
     <div id="markdown-preview">
       <TitlePreview prefix={props.prefix.title} title={props.data.title} />
@@ -374,6 +477,7 @@ const MarkdownPreview = props => {
       <WorkPreview work={props} />
       <SocialPreview social={props.social} />
       <SkillsPreview skills={props.skills} />
+      <SupportPreview support={props.support} />
       <div className="block sm:flex sm:justify-center sm:items-start">
         <TopLanguagesPreview
           show={props.data.topLanguages}
@@ -385,6 +489,11 @@ const MarkdownPreview = props => {
           github={props.social.github}
           options={props.data.githubStatsOptions}
         />
+        <StreakStatsPreview
+          show={props.data.streakStats}
+          github={props.social.github}
+          options={props.data.streakStatsOptions}
+        />
       </div>
     </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

@@ -0,0 +1,43 @@
+import React from "react"
+
+const Support = props => {
+  return (
+    <div className="px-2 sm:px-6 mb-4">
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+        Support
+      </div>
+      <div className="flex flex-wrap justify-start items-center">
+        <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 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 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>
+  )
+}
+
+export default Support

src/constants/defaults.js

@@ -0,0 +1,97 @@
+export const DEFAULT_PREFIX = {
+  title: "Hi 👋, I'm",
+  currentWork: "🔭 I’m currently working on",
+  currentLearn: "🌱 I’m currently learning",
+  collaborateOn: "👯 I’m looking to collaborate on",
+  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 regularly write articles on",
+}
+
+export const DEFAULT_DATA = {
+  title: "",
+  subtitle: "A passionate frontend developer from India",
+  currentWork: "",
+  currentLearn: "",
+  collaborateOn: "",
+  helpWith: "",
+  ama: "",
+  contact: "",
+  funFact: "",
+  twitterBadge: false,
+  visitorsBadge: false,
+  badgeStyle: "flat",
+  badgeColor: "0e75b6",
+  badgeLabel: "Profile views",
+  githubProfileTrophy: false,
+  githubStats: false,
+  githubStatsOptions: {
+    theme: "",
+    titleColor: "",
+    textColor: "",
+    bgColor: "",
+    hideBorder: false,
+    cacheSeconds: null,
+    locale: "en",
+  },
+  topLanguages: false,
+  topLanguagesOptions: {
+    theme: "",
+    titleColor: "",
+    textColor: "",
+    bgColor: "",
+    hideBorder: false,
+    cacheSeconds: null,
+    locale: "en",
+  },
+  streakStats: false,
+  streakStatsOptions: {
+    theme: "",
+  },
+  devDynamicBlogs: false,
+  mediumDynamicBlogs: false,
+  rssDynamicBlogs: false,
+}
+
+export const DEFAULT_LINK = {
+  currentWork: "",
+  collaborateOn: "",
+  helpWith: "",
+  portfolio: "",
+  blog: "",
+  resume: "",
+}
+
+export const DEFAULT_SOCIAL = {
+  github: "",
+  dev: "",
+  linkedin: "",
+  codepen: "",
+  stackoverflow: "",
+  kaggle: "",
+  codesandbox: "",
+  fb: "",
+  instagram: "",
+  twitter: "",
+  dribbble: "",
+  behance: "",
+  medium: "",
+  youtube: "",
+  codechef: "",
+  hackerrank: "",
+  codeforces: "",
+  leetcode: "",
+  topcoder: "",
+  hackerearth: "",
+  geeks_for_geeks: "",
+  discord: "",
+  rssurl: "",
+}
+
+export const DEFAULT_SUPPORT = {
+    buyMeACoffee: ""
+}

src/constants/skills.js

@@ -22,6 +22,7 @@ const categorizedSkills = {
       "coffeescript",
       "elixir",
       "erlang",
+      "nim",
     ],
   },
 
@@ -32,6 +33,7 @@ const categorizedSkills = {
       "react",
       "svelte",
       "angularjs",
+      "angular",
       "backbonejs",
       "bootstrap",
       "vuetify",
@@ -66,6 +68,7 @@ const categorizedSkills = {
       "hadoop",
       "nginx",
       "openresty",
+      "nestjs",
     ],
   },
 
@@ -86,7 +89,14 @@ const categorizedSkills = {
 
   ai: {
     title: "AI/ML",
-    skills: ["tensorflow", "pytorch", "opencv", "scikit_learn"],
+    skills: [
+      "tensorflow",
+      "pytorch",
+      "pandas",
+      "seaborn",
+      "opencv",
+      "scikit_learn",
+    ],
   },
 
   database: {
@@ -132,7 +142,7 @@ const categorizedSkills = {
 
   baas: {
     title: "Backend as a Service(BaaS)",
-    skills: ["firebase", "amplify", "heroku"],
+    skills: ["firebase", "appwrite", "amplify", "heroku"],
   },
 
   framework: {
@@ -205,7 +215,7 @@ const categorizedSkills = {
 
   automation: {
     title: "Automation",
-    skills: ["zapier"],
+    skills: ["zapier", "ifttt"],
   },
 
   other: {
@@ -216,107 +226,111 @@ const categorizedSkills = {
 
 const icons = {
   vuejs:
-    "https://devicons.github.io/devicon/devicon.git/icons/vuejs/vuejs-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/vuejs/vuejs-original-wordmark.svg",
   react:
-    "https://devicons.github.io/devicon/devicon.git/icons/react/react-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg",
   angularjs:
-    "https://devicons.github.io/devicon/devicon.git/icons/angularjs/angularjs-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/angularjs/angularjs-original-wordmark.svg",
+  angular: "https://angular.io/assets/images/logos/angular/angular.svg",
   aws:
-    "https://devicons.github.io/devicon/devicon.git/icons/amazonwebservices/amazonwebservices-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg",
   android:
-    "https://devicons.github.io/devicon/devicon.git/icons/android/android-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/android/android-original-wordmark.svg",
   arduino: "https://cdn.worldvectorlogo.com/logos/arduino-1.svg",
   backbonejs:
-    "https://devicons.github.io/devicon/devicon.git/icons/backbonejs/backbonejs-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/backbonejs/backbonejs-original-wordmark.svg",
   bootstrap:
-    "https://devicons.github.io/devicon/devicon.git/icons/bootstrap/bootstrap-plain.svg",
-  c: "https://devicons.github.io/devicon/devicon.git/icons/c/c-original.svg",
+    "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",
   canvasjs:
     "https://raw.githubusercontent.com/Hardik0307/Hardik0307/master/assets/canvasjs-charts.svg",
   coffeescript:
-    "https://devicons.github.io/devicon/devicon.git/icons/coffeescript/coffeescript-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/coffeescript/coffeescript-original-wordmark.svg",
   codeigniter: "https://cdn.worldvectorlogo.com/logos/codeigniter.svg",
   cplusplus:
-    "https://devicons.github.io/devicon/devicon.git/icons/cplusplus/cplusplus-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/cplusplus/cplusplus-original.svg",
   css3:
-    "https://devicons.github.io/devicon/devicon.git/icons/css3/css3-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg",
   csharp:
-    "https://devicons.github.io/devicon/devicon.git/icons/csharp/csharp-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg",
   d3js:
-    "https://devicons.github.io/devicon/devicon.git/icons/d3js/d3js-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/d3js/d3js-original.svg",
   django:
-    "https://devicons.github.io/devicon/devicon.git/icons/django/django-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/django/django-original.svg",
   docker:
-    "https://devicons.github.io/devicon/devicon.git/icons/docker/docker-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg",
   dotnet:
-    "https://devicons.github.io/devicon/devicon.git/icons/dot-net/dot-net-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/dot-net/dot-net-original-wordmark.svg",
   electron:
-    "https://devicons.github.io/devicon/devicon.git/icons/electron/electron-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/electron/electron-original.svg",
   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",
+    "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",
   graphql: "https://www.vectorlogo.zone/logos/graphql/graphql-icon.svg",
   gulp:
-    "https://devicons.github.io/devicon/devicon.git/icons/gulp/gulp-plain.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/gulp/gulp-plain.svg",
   html5:
-    "https://devicons.github.io/devicon/devicon.git/icons/html5/html5-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg",
   hugo: "https://api.iconify.design/logos-hugo.svg",
   java:
-    "https://devicons.github.io/devicon/devicon.git/icons/java/java-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg",
   javascript:
-    "https://devicons.github.io/devicon/devicon.git/icons/javascript/javascript-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg",
   ionic: "https://upload.wikimedia.org/wikipedia/commons/d/d1/Ionic_Logo.svg",
   laravel:
-    "https://devicons.github.io/devicon/devicon.git/icons/laravel/laravel-plain-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/laravel/laravel-plain-wordmark.svg",
   meteor:
     "https://devicons.github.io/devicon/devicon.git/icons/meteor/meteor-original-wordmark.svg",
   mongodb:
-    "https://devicons.github.io/devicon/devicon.git/icons/mongodb/mongodb-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/mongodb/mongodb-original-wordmark.svg",
   mysql:
-    "https://devicons.github.io/devicon/devicon.git/icons/mysql/mysql-original-wordmark.svg",
+    "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://devicons.github.io/devicon/devicon.git/icons/nginx/nginx-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/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",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg",
+  openresty: "https://openresty.org/images/logo.png",
   oracle:
-    "https://devicons.github.io/devicon/devicon.git/icons/oracle/oracle-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/oracle/oracle-original.svg",
   photoshop:
-    "https://devicons.github.io/devicon/devicon.git/icons/photoshop/photoshop-plain.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/photoshop/photoshop-line.svg",
   xd: "https://cdn.worldvectorlogo.com/logos/adobe-xd.svg",
   php:
-    "https://devicons.github.io/devicon/devicon.git/icons/php/php-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/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",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/postgresql/postgresql-original-wordmark.svg",
   python:
-    "https://devicons.github.io/devicon/devicon.git/icons/python/python-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg",
   rails:
-    "https://devicons.github.io/devicon/devicon.git/icons/rails/rails-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/rails/rails-original-wordmark.svg",
   redis:
-    "https://devicons.github.io/devicon/devicon.git/icons/redis/redis-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/redis/redis-original-wordmark.svg",
   ruby:
-    "https://devicons.github.io/devicon/devicon.git/icons/ruby/ruby-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-original.svg",
   rust:
-    "https://devicons.github.io/devicon/devicon.git/icons/rust/rust-plain.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/rust/rust-plain.svg",
   sass:
-    "https://devicons.github.io/devicon/devicon.git/icons/sass/sass-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/sass/sass-original.svg",
   scala:
-    "https://devicons.github.io/devicon/devicon.git/icons/scala/scala-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/scala/scala-original.svg",
   solidworks: "https://cdn.worldvectorlogo.com/logos/solidworks.svg",
   symfony: "https://symfony.com/logos/symfony_black_03.svg",
   spring: "https://www.vectorlogo.zone/logos/springio/springio-icon.svg",
   swift:
-    "https://devicons.github.io/devicon/devicon.git/icons/swift/swift-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/swift/swift-original.svg",
   typescript:
-    "https://devicons.github.io/devicon/devicon.git/icons/typescript/typescript-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg",
   linux:
-    "https://devicons.github.io/devicon/devicon.git/icons/linux/linux-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg",
   redux:
-    "https://devicons.github.io/devicon/devicon.git/icons/redux/redux-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/icons/redux/redux-original.svg",
   webpack:
-    "https://devicons.github.io/devicon/devicon.git/icons/webpack/webpack-original.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/d00d0969292a6569d45b06d3f350f463a0107b0d/icons/webpack/webpack-original-wordmark.svg",
   flutter: "https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
   dart: "https://www.vectorlogo.zone/logos/dartlang/dartlang-icon.svg",
   kotlin: "https://www.vectorlogo.zone/logos/kotlinlang/kotlinlang-icon.svg",
@@ -339,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",
@@ -373,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",
@@ -401,7 +418,7 @@ const icons = {
   wx_widgets:
     "https://upload.wikimedia.org/wikipedia/commons/b/bb/WxWidgets.svg",
   ember:
-    "https://devicons.github.io/devicon/devicon.git/icons/ember/ember-original-wordmark.svg",
+    "https://raw.githubusercontent.com/devicons/devicon/master/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",
@@ -425,18 +442,21 @@ const icons = {
     "https://raw.githubusercontent.com/kenangundogan/fontisto/036b7eca71aab1bef8e6a0518f7329f13ed62f6b/icons/svg/brand/unreal-engine.svg",
   elixir: "https://www.vectorlogo.zone/logos/elixir-lang/elixir-lang-icon.svg",
   heroku: "https://www.vectorlogo.zone/logos/heroku/heroku-icon.svg",
+  appwrite: "https://www.vectorlogo.zone/logos/appwriteio/appwriteio-icon.svg",
   hexo: "https://www.vectorlogo.zone/logos/hexoio/hexoio-icon.svg",
   travisci: "https://www.vectorlogo.zone/logos/travis-ci/travis-ci-icon.svg",
   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://cdn.worldvectorlogo.com/logos/microsoft-sql-server.svg",
+  mssql: "https://www.svgrepo.com/show/303229/microsoft-sql-server-logo.svg",
   middleman:
     "https://raw.githubusercontent.com/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/logos/middleman.svg",
-  matlab: "https://raw.githubusercontent.com/simple-icons/simple-icons/master/icons/mathworks.svg",
+  matlab: "https://upload.wikimedia.org/wikipedia/commons/2/21/Matlab_Logo.png",
 }
 
 const skillWebsites = {
@@ -445,6 +465,7 @@ const skillWebsites = {
   vuejs: "https://vuejs.org/",
   react: "https://reactjs.org/",
   angularjs: "https://angular.io",
+  angular: "https://angular.io",
   aws: "https://aws.amazon.com",
   android: "https://developer.android.com",
   backbonejs: "https://backbonejs.org",
@@ -475,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/",
@@ -515,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/",
@@ -576,7 +600,9 @@ const skillWebsites = {
   unreal: "https://unrealengine.com/",
   hexo: "hexo.io/",
   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/",
@@ -584,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/behance.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+<defs><linearGradient id="behance-gradient" x1="64" y1="2.16" x2="64" y2="125.84" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#005cff"></stop><stop offset="1" stop-color="#0047ad"></stop></linearGradient></defs><g id="original"><rect fill="url(#behance-gradient)" x="2.16" y="2.16" width="123.68" height="123.67" rx="14.59" ry="14.59"></rect><path fill="#fff" d="M52.63,60.28s10.5-.78,10.5-13.09S54.54,28.87,43.66,28.87H7.86v68.8h35.8s21.85.69,21.85-20.31C65.51,77.36,66.47,60.28,52.63,60.28Zm-29-19.18h20s4.87,0,4.87,7.16-2.86,8.2-6.11,8.2H23.64Zm19.1,44.34H23.64V67.06h20s7.25-.1,7.25,9.45C50.91,84.46,45.61,85.36,42.74,85.44Z"></path><path fill="#fff" d="M94.66,46.38c-26.46,0-26.43,26.43-26.43,26.43s-1.82,26.3,26.43,26.3c0,0,23.54,1.34,23.54-18.29H106.1s.4,7.4-11,7.4c0,0-12.11.81-12.11-12h35.65S122.51,46.38,94.66,46.38Zm10.76,20.68H82.82s1.48-10.6,12.11-10.6S105.42,67.06,105.42,67.06Z"></path><rect fill="#fff" x="79.86" y="32.93" width="28.38" height="8.47"></rect></g>
+</svg>

src/images/icons/Social/blogger.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#FF7043;" d="M498.944,198.08c-10.816-4.608-57.184,0.512-70.048-11.104c-9.088-8.384-9.664-23.552-13.216-43.776
+	c-5.952-33.888-8.416-41.568-14.592-54.912C378.592,40.736,324.704,0,275.744,0H162.24C72.96,0,0,72.864,0,161.824v188.672
+	C0,439.296,72.96,512,162.24,512h186.464c89.28,0,161.76-72.704,162.272-161.504L512,219.84C512,219.84,512,203.68,498.944,198.08z
+	 M164.288,132.256h89.984c17.152,0,31.072,13.856,31.072,30.784c0,16.96-13.92,30.944-31.072,30.944h-89.984
+	c-17.152,0-31.072-14.016-31.072-30.944C133.216,146.08,147.136,132.256,164.288,132.256z M347.168,378.912h-182.88
+	c-17.152,0-31.072-14.016-31.072-30.784c0-16.928,13.92-30.784,31.072-30.784h182.88c16.992,0,30.912,13.856,30.912,30.784
+	C378.08,364.896,364.16,378.912,347.168,378.912z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/codepen.svg

@@ -0,0 +1 @@
+<svg id="Bold" enable-background="new 0 0 32 32" height="512" viewBox="0 0 32 32" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m26 32h-20c-3.314 0-6-2.686-6-6v-20c0-3.314 2.686-6 6-6h20c3.314 0 6 2.686 6 6v20c0 3.314-2.686 6-6 6z" fill="#e3f8fa"/><path d="m8.303 19.008 7.313 4.876c.249.153.516.155.768 0l7.313-4.876c.187-.125.303-.348.303-.571v-4.875c0-.223-.116-.447-.303-.571l-7.313-4.875c-.249-.153-.516-.155-.768 0l-7.313 4.875c-.187.124-.303.348-.303.571v4.875c0 .223.116.446.303.571zm7.01 3.019-5.384-3.589 2.402-1.607 2.982 1.991zm1.374 0v-3.205l2.982-1.991 2.402 1.607zm5.938-4.876-1.723-1.151 1.723-1.152zm-5.938-7.178 5.384 3.589-2.402 1.607-2.982-1.991zm-.687 4.401 2.429 1.625-2.429 1.626-2.429-1.625zm-.687-4.401v3.205l-2.982 1.991-2.402-1.607zm-5.938 4.876 1.724 1.151-1.723 1.152v-2.303z" fill="#26c6da"/></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/images/icons/Social/discord.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240"><style>.st0{fill:#7289DA;}</style><path class="st0" d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/><path class="st0" d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/></svg>

src/images/icons/Social/dribbble.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<circle style="fill:#EC407A;" cx="256" cy="254.272" r="240"/>
+<path style="fill:#C2185B;" d="M256,0C114.848,0,0,114.848,0,256s114.848,256,256,256s256-114.848,256-256S397.152,0,256,0z
+	 M479.904,257.92c-54.208-14.304-109.792-15.968-162.752-5.056c-7.232-18.048-15.04-35.808-23.424-53.344
+	c47.904-22.4,92.192-52.768,131.04-90.304C459.04,148.544,480,199.808,480,256C480,256.64,479.904,257.248,479.904,257.92z
+	 M402.144,86.624c-36.288,35.04-77.568,63.584-122.304,84.448c-23.904-45.76-51.872-89.472-83.52-130.752
+	C215.36,35.04,235.296,32,256,32C311.84,32,362.88,52.672,402.144,86.624z M164.704,51.648
+	c32.48,41.344,60.992,85.376,85.28,131.488c-67.2,25.664-140.16,35.52-213.216,26.976C51.584,139.2,100.096,80.64,164.704,51.648z
+	 M32,256c0-4.8,0.416-9.504,0.736-14.208c18.944,2.24,37.888,3.712,56.768,3.712c60.224,0,119.392-11.776,174.848-33.376
+	c7.68,16,14.912,32.224,21.6,48.672c-78.656,23.616-148.736,73.984-195.904,145.12C54.112,366.176,32,313.664,32,256z
+	 M113.44,428.64c43.392-68.224,109.568-116.32,184.032-138.08c20.224,55.68,34.784,113.504,43.264,172.672
+	C314.592,473.984,285.984,480,256,480C201.888,480,152.192,460.704,113.44,428.64z M370.752,448
+	c-8.8-56.384-22.752-111.584-41.856-164.864c48.352-9.088,98.944-6.944,148.224,6.976C466.784,357.184,426.752,414.4,370.752,448z"
+	/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/dropbox.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<polygon style="fill:#1E88E5;" points="512,99.136 361.376,0 256,88.672 407.872,183.168 	"/>
+	<polygon style="fill:#1E88E5;" points="150.624,0 0,99.104 104.16,183.168 256,88.672 	"/>
+	<polygon style="fill:#1E88E5;" points="256,277.696 150.624,366.368 0,267.232 104.128,183.168 256,277.696 407.84,183.168 
+		512,267.232 361.376,366.368 	"/>
+	<path style="fill:#1E88E5;" d="M368.992,399.648c-2.656,1.76-5.728,2.624-8.768,2.624c-3.68,0-7.328-1.28-10.304-3.744L256,319.488
+		l-93.92,79.04c-5.408,4.544-13.184,4.992-19.104,1.12L96,368.736V416l160.32,96L416,416v-47.296L368.992,399.648z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/envato.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.992 511.992" style="enable-background:new 0 0 511.992 511.992;" xml:space="preserve">
+<path style="fill:#7CB342;" d="M411.809,2.806c-18.304-8.992-111.168,1.28-178.112,65.504
+	C128.225,173.622,130.753,312.374,130.753,312.374s-3.488,14.272-18.336-6.432c-32.512-41.44-15.488-136.768-13.568-150.048
+	c2.688-18.72-9.248-19.264-14.208-13.088C-32.863,305.942,73.249,439.51,142.721,481.91c81.344,49.632,241.792,49.6,305.696-91.2
+	C528.033,215.382,434.753,14.038,411.809,2.806z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/facebook-alt.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#1976D2;" d="M384,176h-96v-64c0-17.664,14.336-32,32-32h32V0h-64l0,0c-53.024,0-96,42.976-96,96v80h-64v80h64v256
+	h96V256h64L384,176z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/facebook.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#1976D2;" d="M448,0H64C28.704,0,0,28.704,0,64v384c0,35.296,28.704,64,64,64h384c35.296,0,64-28.704,64-64V64
+	C512,28.704,483.296,0,448,0z"/>
+<path style="fill:#FAFAFA;" d="M432,256h-80v-64c0-17.664,14.336-16,32-16h32V96h-64l0,0c-53.024,0-96,42.976-96,96v64h-64v80h64
+	v176h96V336h48L432,256z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/geeks-for-geeks.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="76.533" height="39.026" viewBox="0 0 76.533 39.026" class="ready">
+                    <path d="M2380.7,6597.866a12.252,12.252,0,0,0-.261-1.513l-30.726-.027a12.545,12.545,0,0,1,.908-3.443,12.337,12.337,0,0,1,2.739-4.044,12.151,12.151,0,0,1,4.018-2.581,12.634,12.634,0,0,1,14.3,3.051l4.852-4.748a18.176,18.176,0,0,0-6.131-4.331,20.037,20.037,0,0,0-8.112-1.564,20.25,20.25,0,0,0-7.671,1.459,19.158,19.158,0,0,0-6.261,4.07,19.584,19.584,0,0,0-4.226,6.184,18.7,18.7,0,0,0-1.487,5.947h-.2a18.674,18.674,0,0,0-1.489-5.947,19.544,19.544,0,0,0-4.226-6.184,19.133,19.133,0,0,0-6.261-4.07,21.354,21.354,0,0,0-15.783.1,18.2,18.2,0,0,0-6.131,4.331l4.853,4.748a13.264,13.264,0,0,1,14.3-3.051,12.131,12.131,0,0,1,4.017,2.581,12.323,12.323,0,0,1,2.74,4.044,12.527,12.527,0,0,1,.908,3.443l-30.726.027a12.256,12.256,0,0,0-.261,1.513,15,15,0,0,0-.1,1.773,20.713,20.713,0,0,0,1.1,6.783,15.709,15.709,0,0,0,3.443,5.686,17.309,17.309,0,0,0,6,4.123,20.587,20.587,0,0,0,7.983,1.46,20.226,20.226,0,0,0,7.669-1.46,19.086,19.086,0,0,0,6.261-4.07,19.506,19.506,0,0,0,4.226-6.184,18.163,18.163,0,0,0,1.153-3.629h.871a18.27,18.27,0,0,0,1.151,3.629,19.545,19.545,0,0,0,4.226,6.184,19.111,19.111,0,0,0,6.261,4.07,20.241,20.241,0,0,0,7.671,1.46,20.572,20.572,0,0,0,7.981-1.46,17.282,17.282,0,0,0,6-4.123,15.717,15.717,0,0,0,3.445-5.686,20.726,20.726,0,0,0,1.1-6.783A15.259,15.259,0,0,0,2380.7,6597.866Zm-46.245,5.608a12.1,12.1,0,0,1-2.766,4.043,12.467,12.467,0,0,1-4.043,2.583,14.378,14.378,0,0,1-9.939.052,11.776,11.776,0,0,1-3.522-2.218,8.459,8.459,0,0,1-1.8-2.374,13.476,13.476,0,0,1-1.173-3.208l23.658,0A11.487,11.487,0,0,1,2334.457,6603.475Zm38.236,2.086a8.466,8.466,0,0,1-1.8,2.374,11.771,11.771,0,0,1-3.522,2.218,14.378,14.378,0,0,1-9.939-.052,12.491,12.491,0,0,1-4.044-2.583,12.088,12.088,0,0,1-2.765-4.043,11.427,11.427,0,0,1-.415-1.126h11.92v0h11.739A13.509,13.509,0,0,1,2372.692,6605.561Z" transform="translate(-2304.273 -6578.666)" fill="#2f8d46"></path>
+                </svg>

src/images/icons/Social/github.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#5C6BC0;" d="M255.968,5.329C114.624,5.329,0,120.401,0,262.353c0,113.536,73.344,209.856,175.104,243.872
+	c12.8,2.368,17.472-5.568,17.472-12.384c0-6.112-0.224-22.272-0.352-43.712c-71.2,15.52-86.24-34.464-86.24-34.464
+	c-11.616-29.696-28.416-37.6-28.416-37.6c-23.264-15.936,1.728-15.616,1.728-15.616c25.696,1.824,39.2,26.496,39.2,26.496
+	c22.848,39.264,59.936,27.936,74.528,21.344c2.304-16.608,8.928-27.936,16.256-34.368c-56.832-6.496-116.608-28.544-116.608-127.008
+	c0-28.064,9.984-51.008,26.368-68.992c-2.656-6.496-11.424-32.64,2.496-68c0,0,21.504-6.912,70.4,26.336
+	c20.416-5.696,42.304-8.544,64.096-8.64c21.728,0.128,43.648,2.944,64.096,8.672c48.864-33.248,70.336-26.336,70.336-26.336
+	c13.952,35.392,5.184,61.504,2.56,68c16.416,17.984,26.304,40.928,26.304,68.992c0,98.72-59.84,120.448-116.864,126.816
+	c9.184,7.936,17.376,23.616,17.376,47.584c0,34.368-0.32,62.08-0.32,70.496c0,6.88,4.608,14.88,17.6,12.352
+	C438.72,472.145,512,375.857,512,262.353C512,120.401,397.376,5.329,255.968,5.329z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/google.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<polygon style="fill:#FFC107;" points="341.344,352 512,352 341.344,32 170.656,32 "/>
+<polygon style="fill:#2196F3;" points="158.464,352 85.344,480 432,480 512,352 "/>
+<polygon style="fill:#4CAF50;" points="170.656,32 0,330.656 85.344,480 253.056,186.496 "/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/hackerearth.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>HackerEarth icon</title><path d="M20.983.002H9.508v6.494h.11a3.629 3.629 0 0 1 3.557-1.332l-.023-.004c1.966.144 3.91 1.336 4.02 5.158v7.554a.299.299 0 0 1-.287.287h-2.11a.287.287 0 0 1-.287-.287V10.55c0-1.778-.585-3.114-2.341-3.114h-.038a2.606 2.606 0 0 0-2.6 2.78v-.008 7.665a.287.287 0 0 1-.287.287H7.124a.287.287 0 0 1-.287-.287V.004H3.193L3.126.003c-.823 0-1.493.652-1.523 1.468V22.458c.03.857.73 1.541 1.59 1.546h17.792a1.458 1.458 0 0 0 1.413-1.55v.004V1.474A1.38 1.38 0 0 0 21.021.005l-.038.001h.002zm-2.54 20.983H5.555V19.66h12.888z"/></svg> 

src/images/icons/Social/hackerrank.svg

@@ -0,0 +1,2 @@
+<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 256 256' style='enable-background:new 0 0 256 256;' xml:space='preserve'><style type='text/css'> .st0{fill:#0E141E;} .st1{fill:#FFFFFF;} .st2{fill:#00EA64;}
+</style><rect x='0' y='0' class='st0' width='256' height='256'/><g><path class='st1' d='M125.39,85.35h-19.26c-0.65,0-1.18,0.53-1.18,1.18v30.61H84.2V86.54c0-0.65-0.53-1.18-1.18-1.18H63.76 c-0.65,0-1.18,0.53-1.18,1.18v82.85c0,0.65,0.53,1.18,1.18,1.18h19.26c0.65,0,1.18-0.53,1.18-1.18v-30.61h20.75v30.61 c0,0.65,0.53,1.18,1.18,1.18h19.26c0.65,0,1.18-0.53,1.18-1.18V86.54C126.57,85.88,126.04,85.35,125.39,85.35z'/><path class='st2' d='M199.76,170.57h-61.64c-0.65,0-1.18-0.53-1.18-1.18V86.53c0-0.65,0.53-1.18,1.18-1.18h61.64 c0.65,0,1.18,0.53,1.18,1.18v82.85C200.94,170.04,200.41,170.57,199.76,170.57z'/></g></svg>

src/images/icons/Social/instagram.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-46.0041" y1="634.1208" x2="-32.9334" y2="647.1917" gradientTransform="matrix(32 0 0 -32 1519 20757)">
+	<stop  offset="0" style="stop-color:#FFC107"/>
+	<stop  offset="0.507" style="stop-color:#F44336"/>
+	<stop  offset="0.99" style="stop-color:#9C27B0"/>
+</linearGradient>
+<path style="fill:url(#SVGID_1_);" d="M352,0H160C71.648,0,0,71.648,0,160v192c0,88.352,71.648,160,160,160h192
+	c88.352,0,160-71.648,160-160V160C512,71.648,440.352,0,352,0z M464,352c0,61.76-50.24,112-112,112H160c-61.76,0-112-50.24-112-112
+	V160C48,98.24,98.24,48,160,48h192c61.76,0,112,50.24,112,112V352z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-42.2971" y1="637.8279" x2="-36.6404" y2="643.4846" gradientTransform="matrix(32 0 0 -32 1519 20757)">
+	<stop  offset="0" style="stop-color:#FFC107"/>
+	<stop  offset="0.507" style="stop-color:#F44336"/>
+	<stop  offset="0.99" style="stop-color:#9C27B0"/>
+</linearGradient>
+<path style="fill:url(#SVGID_2_);" d="M256,128c-70.688,0-128,57.312-128,128s57.312,128,128,128s128-57.312,128-128
+	S326.688,128,256,128z M256,336c-44.096,0-80-35.904-80-80c0-44.128,35.904-80,80-80s80,35.872,80,80
+	C336,300.096,300.096,336,256,336z"/>
+<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-35.5456" y1="644.5793" x2="-34.7919" y2="645.3331" gradientTransform="matrix(32 0 0 -32 1519 20757)">
+	<stop  offset="0" style="stop-color:#FFC107"/>
+	<stop  offset="0.507" style="stop-color:#F44336"/>
+	<stop  offset="0.99" style="stop-color:#9C27B0"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_3_);" cx="393.6" cy="118.4" r="17.056"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/kaggle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path d="M18.825 23.859c-.022.092-.117.141-.281.141h-3.139c-.187 0-.351-.082-.492-.248l-5.178-6.589l-1.448 1.374v5.111c0 .235-.117.352-.351.352H5.505c-.236 0-.354-.117-.354-.352V.353c0-.233.118-.353.354-.353h2.431c.234 0 .351.12.351.353v14.343l6.203-6.272c.165-.165.33-.246.495-.246h3.239c.144 0 .236.06.285.18c.046.149.034.255-.036.315l-6.555 6.344l6.836 8.507c.095.104.117.208.07.358" fill="#03A9F4"/><rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" /></svg>

src/images/icons/Social/leet-code.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="94px" height="111px" viewBox="0 0 94 111" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>1_black</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="branding_-resource" transform="translate(-2093.000000, -290.000000)">
+            <g id="1_black" transform="translate(2093.000000, 290.000000)">
+                <path d="M67.5068339,83.0664138 C70.0005384,80.5763786 74.0371402,80.5828822 76.5228362,83.0809398 C79.0085322,85.5789975 79.00204,89.6226456 76.5083355,92.1126808 L65.4351451,103.169577 C55.2192332,113.370744 38.5604663,113.518673 28.1722578,103.513204 C28.112217,103.455678 23.486583,98.9201326 8.22702585,83.9570195 C-1.92478479,74.0028895 -2.93614945,58.0748736 6.61697549,47.8463644 L24.4286944,28.7745461 C33.9100043,18.6218594 51.3874487,17.5122246 62.2279907,26.2789232 L78.4052912,39.3620235 C81.1448956,41.5776292 81.5728103,45.5984975 79.3610655,48.3428842 C77.1493207,51.0872709 73.1354592,51.5159327 70.3958548,49.300327 L54.2186634,36.2173149 C48.5492813,31.6325105 38.631911,32.2621597 33.7398535,37.5006265 L15.9279056,56.5726899 C11.2772073,61.552182 11.7865613,69.5740156 17.1461283,74.8292186 C28.3515339,85.8169393 36.9874071,94.2846214 36.9973988,94.294225 C42.3981571,99.4959838 51.130862,99.418438 56.43358,94.1233737 L67.5068339,83.0664138 Z" id="path_3" fill="#FFA116" fill-rule="nonzero"></path>
+                <path d="M40.6069914,72.0014117 C37.086019,72.0014117 34.2317068,69.142117 34.2317068,65.6149982 C34.2317068,62.0878794 37.086019,59.2285847 40.6069914,59.2285847 L87.6247154,59.2285847 C91.1456879,59.2285847 94,62.0878794 94,65.6149982 C94,69.142117 91.1456879,72.0014117 87.6247154,72.0014117 L40.6069914,72.0014117 Z" id="path_2" fill="#B3B3B3"></path>
+                <path d="M49.4124315,2.02335002 C51.8178981,-0.552320454 55.852269,-0.686893945 58.4234511,1.72277172 C60.9946333,4.13243738 61.1289722,8.17385083 58.7235056,10.7495213 L15.9282277,56.5728697 C11.2773659,61.551984 11.7867168,69.5737689 17.1459309,74.8291832 L36.9094236,94.2091099 C39.4255514,96.6764051 39.4686234,100.719828 37.0056277,103.240348 C34.5426319,105.760868 30.5062548,105.804016 27.990127,103.33672 L8.22654289,83.9567041 C-1.92467414,74.0021005 -2.93603527,58.0741402 6.61751533,47.846311 L49.4124315,2.02335002 Z" id="path_1" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/images/icons/Social/linked-in-alt.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<rect y="160" style="fill:#1976D2;" width="114.496" height="352"/>
+	<path style="fill:#1976D2;" d="M426.368,164.128c-1.216-0.384-2.368-0.8-3.648-1.152c-1.536-0.352-3.072-0.64-4.64-0.896
+		c-6.08-1.216-12.736-2.08-20.544-2.08l0,0l0,0c-66.752,0-109.088,48.544-123.04,67.296V160H160v352h114.496V320
+		c0,0,86.528-120.512,123.04-32c0,79.008,0,224,0,224H512V274.464C512,221.28,475.552,176.96,426.368,164.128z"/>
+	<circle style="fill:#1976D2;" cx="56" cy="56" r="56"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/linked-in.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 128 128">
+<g id="original"><path fill="#0076b2" d="M116,3H12a8.91,8.91,0,0,0-9,8.8V116.22A8.91,8.91,0,0,0,12,125H116a8.93,8.93,0,0,0,9-8.81V11.77A8.93,8.93,0,0,0,116,3Z"></path><path fill="#fff" d="M21.06,48.73H39.17V107H21.06Zm9.06-29a10.5,10.5,0,1,1-10.5,10.49,10.5,10.5,0,0,1,10.5-10.49"></path><path fill="#fff" d="M50.53,48.73H67.89v8h.24c2.42-4.58,8.32-9.41,17.13-9.41C103.6,47.28,107,59.35,107,75v32H88.89V78.65c0-6.75-.12-15.44-9.41-15.44s-10.87,7.36-10.87,15V107H50.53Z"></path></g>
+</svg>

src/images/icons/Social/medium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Bold" enable-background="new 0 0 32 32" height="512" viewBox="0 0 32 32" width="512"><path d="m26 32h-20c-3.314 0-6-2.686-6-6v-20c0-3.314 2.686-6 6-6h20c3.314 0 6 2.686 6 6v20c0 3.314-2.686 6-6 6z" fill="#ffe6e2"/><path d="m22.723 11.155 1.277-1.221v-.267h-4.423l-3.152 7.845-3.585-7.845h-4.638v.268l1.492 1.795c.145.132.222.327.202.522v7.055c.046.254-.037.515-.215.7l-1.681 2.036v.264h4.763v-.268l-1.68-2.033c-.182-.185-.268-.442-.231-.7v-6.102l4.181 9.106h.486l3.595-9.106v7.254c0 .192 0 .231-.126.356l-1.294 1.251v.268h6.275v-.268l-1.247-1.221c-.109-.082-.166-.221-.143-.356v-8.977c-.021-.135.035-.274.144-.356z" fill="#fc573b"/></svg>

src/images/icons/Social/messenger.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#1E88E5;" d="M256,0C114.624,0,0,106.112,0,237.024c0,74.592,37.216,141.12,95.392,184.576V512l87.168-47.84
+	c23.264,6.432,47.904,9.92,73.44,9.92c141.376,0,256-106.112,256-237.024C512,106.112,397.376,0,256,0z"/>
+<polygon style="fill:#FAFAFA;" points="281.44,319.2 216.256,249.664 89.056,319.2 228.96,170.656 295.744,240.192 421.376,170.656 
+	"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/myspace-alt.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path style="fill:#37474F;" d="M416,288c-52.928,0-96,43.072-96,96v16c0,8.832,7.168,16,16,16h160c8.832,0,16-7.168,16-16v-16
+		C512,331.072,468.928,288,416,288z"/>
+	<circle style="fill:#37474F;" cx="416" cy="176" r="80"/>
+	<path style="fill:#37474F;" d="M224,288c-44.096,0-80,35.872-80,80v32c0,8.832,7.168,16,16,16h128c8.832,0,16-7.168,16-16v-32
+		C304,323.872,268.096,288,224,288z"/>
+	<path style="fill:#37474F;" d="M64,288c-35.296,0-64,28.704-64,64v48c0,8.832,7.168,16,16,16h96c8.832,0,16-7.168,16-16v-48
+		C128,316.704,99.296,288,64,288z"/>
+	<circle style="fill:#37474F;" cx="224" cy="192" r="72"/>
+	<circle style="fill:#37474F;" cx="64" cy="208" r="56"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/myspace.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path style="fill:#37474F;" d="M400,224c-31.36,0-59.648,13.024-80,33.856V256c0-52.928-43.072-96-96-96
+		c-31.136,0-58.56,15.136-76.128,38.176C133.76,175.36,108.736,160,80,160c-44.096,0-80,35.904-80,80v112h128v64h160v96h224V336
+		C512,274.24,461.76,224,400,224z"/>
+	<circle style="fill:#37474F;" cx="400" cy="96" r="96"/>
+	<circle style="fill:#37474F;" cx="224" cy="80" r="64"/>
+	<circle style="fill:#37474F;" cx="80" cy="96" r="48"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/path.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.012 512.012" style="enable-background:new 0 0 512.012 512.012;" xml:space="preserve">
+<path style="fill:#C62828;" d="M511.869,183.98C509.085,112.972,443.773-1.332,254.301,0.012
+	C56.445,1.42-1.379,133.932,0.029,209.676c1.376,75.776,50.848,117.696,50.848,117.696l73.856-60.864c0,0-31.36,2.688-31.36-59.52
+	c0-94.784,113.568-119.04,186.016-117.696s129.632,59.84,130.624,105.504c0.96,44.64-10.88,72.96-47.04,93.312
+	c-43.2,24.352-95.552,2.72-95.552,2.72l0.704-152.832l-97.664,0.576l-0.256,269.952c0,0-0.896,21.6-26.112,20.288
+	c-18.08-0.928-40.928-20.8-40.928-20.8l0.16,80.32c0,0,28.192,23.68,72.8,23.68c96.16,0,91.968-94.016,91.968-94.016v-52.96
+	c0,0,19.616,9.472,58.624,9.472C488.381,374.508,514.205,243.532,511.869,183.98z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/photo.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<polygon style="fill:#FFC107;" points="128,128 0,256 192,256 240,240 "/>
+<polygon style="fill:#FFA000;" points="128,128 240,240 256,192 256,128 "/>
+<polygon style="fill:#4CAF50;" points="128,384 256,512 256,320 240,272 "/>
+<polygon style="fill:#388E3C;" points="128,384 240,272 192,256 128,256 "/>
+<polygon style="fill:#2196F3;" points="384,384 512,256 320,256 272,272 "/>
+<polygon style="fill:#1976D2;" points="384,384 272,272 256,320 256,384 "/>
+<polygon style="fill:#F44336;" points="384,128 256,0 256,192 272,240 "/>
+<polygon style="fill:#9C27B0;" points="384,128 272,240 320,256 384,256 "/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/picasa.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#FFC107;" d="M384,34.528V352h109.216C505.248,322.336,512,289.984,512,256C512,161.312,460.448,78.816,384,34.528
+	z"/>
+<path style="fill:#F44336;" d="M352,18.784C322.336,6.752,289.984,0,256,0c-30.848,0-60.288,5.728-87.68,15.744L352,187.168V18.784z
+	"/>
+<path style="fill:#4CAF50;" d="M160,493.216C189.664,505.248,222.016,512,256,512c94.688,0,177.184-51.552,221.472-128H160V493.216z
+	"/>
+<path style="fill:#9C27B0;" d="M136.384,29.728C55.296,72.704,0,157.856,0,256c0,22.56,3.2,44.352,8.704,65.184l216.064-208.992
+	L136.384,29.728z"/>
+<path style="fill:#2196F3;" d="M128,477.472V250.336L19.84,354.944C41.568,406.656,79.872,449.6,128,477.472z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/pinterest.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.977 511.977" style="enable-background:new 0 0 511.977 511.977;" xml:space="preserve">
+<path style="fill:#D32F2F;" d="M262.948,0C122.628,0,48.004,89.92,48.004,187.968c0,45.472,25.408,102.176,66.08,120.16
+	c6.176,2.784,9.536,1.6,10.912-4.128c1.216-4.352,6.56-25.312,9.152-35.2c0.8-3.168,0.384-5.92-2.176-8.896
+	c-13.504-15.616-24.224-44.064-24.224-70.752c0-68.384,54.368-134.784,146.88-134.784c80,0,135.968,51.968,135.968,126.304
+	c0,84-44.448,142.112-102.208,142.112c-31.968,0-55.776-25.088-48.224-56.128c9.12-36.96,27.008-76.704,27.008-103.36
+	c0-23.904-13.504-43.68-41.088-43.68c-32.544,0-58.944,32.224-58.944,75.488c0,27.488,9.728,46.048,9.728,46.048
+	S144.676,371.2,138.692,395.488c-10.112,41.12,1.376,107.712,2.368,113.44c0.608,3.168,4.16,4.16,6.144,1.568
+	c3.168-4.16,42.08-59.68,52.992-99.808c3.968-14.624,20.256-73.92,20.256-73.92c10.72,19.36,41.664,35.584,74.624,35.584
+	c98.048,0,168.896-86.176,168.896-193.12C463.62,76.704,375.876,0,262.948,0"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/reddit.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 514.24 514.24" style="enable-background:new 0 0 514.24 514.24;" xml:space="preserve">
+<g>
+	<polygon style="fill:#FAFAFA;" points="192,289.121 176,289.089 176,289.121 	"/>
+	<polygon style="fill:#FAFAFA;" points="336,289.121 352,289.121 336,289.089 	"/>
+</g>
+<path style="fill:#FF9800;" d="M514.24,241.121c0-35.296-28.704-64-64-64c-14.112,0-27.52,4.608-38.464,12.96
+	c-35.712-24.8-82.496-39.584-132.256-43.328l26.848-62.976l78.112,18.24c2.496,24.16,22.72,43.104,47.52,43.104
+	c26.464,0,48-21.536,48-48s-21.536-48-48-48c-16.768,0-31.52,8.672-40.096,21.76l-91.296-21.344
+	c-7.744-1.76-15.328,2.176-18.4,9.312l-37.12,87.04c-53.728,1.856-104.928,16.992-143.584,43.36
+	C90.976,181.441,77.92,177.121,64,177.121c-35.296,0-64,28.704-64,64c0,23.392,12.768,44.544,32.352,55.392
+	c-0.256,2.816-0.352,5.696-0.352,8.608c0,88.224,100.48,160,224,160c123.488,0,224-71.776,224-160c0-2.496-0.096-4.96-0.256-7.424
+	C500.608,287.073,514.24,265.409,514.24,241.121z"/>
+<g>
+	<circle style="fill:#FAFAFA;" cx="432" cy="97.121" r="16"/>
+	<circle style="fill:#FAFAFA;" cx="176" cy="289.121" r="32"/>
+	<path style="fill:#FAFAFA;" d="M329.888,395.265c-22.08,15.968-48,23.968-73.888,23.968s-51.808-8-73.888-23.968
+		c-7.168-5.184-8.768-15.2-3.584-22.336s15.2-8.736,22.336-3.584c32.992,23.84,77.28,23.904,110.272,0
+		c7.136-5.152,17.12-3.616,22.336,3.584C338.656,380.097,337.024,390.081,329.888,395.265z"/>
+	<circle style="fill:#FAFAFA;" cx="336" cy="289.121" r="32"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/rss.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 448 448" style="enable-background:new 0 0 448 448;" xml:space="preserve">
+<g>
+	<circle style="fill:#FFA000;" cx="64" cy="384" r="64"/>
+	<path style="fill:#FFA000;" d="M0,149.344v85.344c117.632,0,213.344,95.68,213.344,213.312h85.312
+		C298.656,283.328,164.672,149.344,0,149.344z"/>
+	<path style="fill:#FFA000;" d="M0,0v85.344C200,85.344,362.688,248,362.688,448H448C448,200.96,247.04,0,0,0z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/skype.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#03A9F4;" d="M502.912,258.656c0-132.96-109.312-240.768-244.192-240.768c-14.208,0-28.16,1.216-41.76,3.52
+	C195.136,7.872,169.312,0,141.632,0C63.392,0,0,62.496,0,139.648c0,25.76,7.104,49.856,19.456,70.624
+	c-3.232,15.616-4.96,31.84-4.96,48.384c0,132.992,109.344,240.8,244.192,240.8c15.296,0,30.208-1.408,44.736-4.032
+	C323.392,505.984,346.144,512,370.4,512c78.208,0,141.6-62.528,141.6-139.616c0-22.272-5.312-43.328-14.72-62.016
+	C500.992,293.664,502.912,276.416,502.912,258.656z"/>
+<path style="fill:#FAFAFA;" d="M383.968,373.728c-11.296,15.776-27.968,28.256-49.632,37.088
+	c-21.408,8.768-47.04,13.28-76.288,13.28c-35.072,0-64.48-6.08-87.456-18.112c-16.416-8.736-29.92-20.544-40.192-35.2
+	c-10.4-14.72-15.616-29.344-15.616-43.52c0-8.768,3.424-16.448,10.176-22.688c6.688-6.24,15.264-9.344,25.504-9.344
+	c8.384,0,15.616,2.464,21.504,7.36c5.6,4.736,10.432,11.712,14.304,20.64c4.32,9.792,9.024,18.048,13.984,24.48
+	c4.832,6.304,11.712,11.552,20.512,15.68c8.864,4.096,20.8,6.24,35.456,6.24c20.192,0,36.768-4.288,49.184-12.64
+	c12.192-8.16,18.08-18.016,18.08-30.048c0-9.472-3.104-16.96-9.408-22.816c-6.656-6.144-15.424-10.912-26.048-14.208
+	c-11.104-3.392-26.176-7.104-44.8-10.944c-25.376-5.344-46.912-11.648-64-18.88c-17.504-7.36-31.648-17.536-41.952-30.24
+	c-10.496-12.992-15.808-29.216-15.808-48.288c0-18.176,5.568-34.56,16.576-48.704c10.912-14.048,26.848-25.024,47.424-32.48
+	c20.256-7.392,44.352-11.104,71.648-11.104c21.792,0,40.96,2.496,56.992,7.424c16.096,4.928,29.664,11.584,40.32,19.808
+	c10.752,8.32,18.752,17.12,23.744,26.336c5.056,9.28,7.648,18.528,7.648,27.456c0,8.608-3.36,16.448-10.016,23.232
+	c-6.72,6.848-15.168,10.304-25.088,10.304c-9.024,0-16.128-2.208-21.024-6.464c-4.576-4-9.344-10.24-14.592-19.136
+	c-6.08-11.392-13.472-20.384-21.92-26.752c-8.224-6.176-21.92-9.248-40.8-9.248c-17.472,0-31.744,3.456-42.304,10.304
+	c-10.176,6.56-15.136,14.112-15.136,23.072c0,5.472,1.6,10.048,4.896,13.984c3.456,4.224,8.352,7.84,14.56,10.912
+	c6.4,3.168,13.024,5.728,19.648,7.52c6.784,1.856,18.144,4.64,33.792,8.192c19.776,4.16,37.92,8.864,53.984,13.952
+	c16.288,5.088,30.304,11.392,41.824,18.784c11.68,7.52,20.928,17.12,27.52,28.64c6.592,11.616,9.92,25.856,9.92,42.432
+	C401.056,339.84,395.296,357.92,383.968,373.728z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/snapchat.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.976 511.976" style="enable-background:new 0 0 511.976 511.976;" xml:space="preserve">
+<path style="fill:#FFEB3B;" d="M501.94,374.42c-68.448-11.264-99.296-81.376-100.544-84.352c-0.096-0.192-0.16-0.384-0.288-0.576
+	c-3.488-7.104-4.32-12.96-2.4-17.408c3.744-8.768,18.08-13.312,27.552-16.32c2.752-0.864,5.344-1.696,7.488-2.528
+	c9.344-3.68,16-7.68,20.416-12.192c5.248-5.408,6.272-10.592,6.208-13.952c-0.16-8.192-6.432-15.488-16.448-19.04
+	c-3.36-1.376-7.232-2.112-11.136-2.112c-2.656,0-6.624,0.352-10.368,2.112c-8,3.744-15.168,5.792-21.344,6.08
+	c-3.264-0.16-5.568-0.864-7.072-1.536c0.192-3.2,0.384-6.496,0.608-9.888l0.096-1.472c2.208-34.656,4.928-77.76-6.528-103.36
+	c-7.84-17.536-18.368-32.608-31.328-44.832c-10.848-10.24-23.456-18.56-37.472-24.704c-24.352-10.752-47.072-12.352-58.464-12.352
+	h-0.032c-0.448,0-0.864,0-1.248,0c-3.168,0.032-8.32,0.096-8.8,0.096c-11.36,0-34.112,1.6-58.528,12.352
+	c-13.984,6.144-26.528,14.432-37.344,24.672c-12.896,12.224-23.392,27.264-31.2,44.736c-11.456,25.568-8.736,68.672-6.56,103.296
+	v0.064c0.224,3.712,0.48,7.584,0.704,11.36c-1.664,0.736-4.384,1.568-8.384,1.568c-6.464,0-14.144-2.048-22.816-6.112
+	c-2.56-1.184-5.472-1.792-8.672-1.792c-5.152,0-10.624,1.504-15.328,4.288c-5.952,3.488-9.792,8.384-10.848,13.856
+	c-0.672,3.584-0.64,10.72,7.296,17.952c4.384,3.968,10.784,7.648,19.072,10.912c2.176,0.864,4.768,1.664,7.488,2.528
+	c9.472,3.008,23.84,7.552,27.584,16.32c1.888,4.448,1.056,10.304-2.432,17.408c-0.096,0.192-0.192,0.384-0.256,0.576
+	c-0.896,2.048-9.056,20.448-25.792,39.872c-9.504,11.04-19.968,20.288-31.104,27.456c-13.6,8.768-28.288,14.464-43.68,16.992
+	c-6.048,0.992-10.368,6.368-10.016,12.48c0.096,1.76,0.512,3.52,1.248,5.216v0.032c2.464,5.728,8.128,10.56,17.344,14.816
+	c11.264,5.216,28.096,9.6,50.08,13.024c1.12,2.112,2.272,7.392,3.072,11.008c0.832,3.84,1.696,7.808,2.944,12
+	c1.344,4.544,4.8,9.984,13.728,9.984c3.392,0,7.264-0.768,11.776-1.632c6.592-1.28,15.616-3.04,26.848-3.04
+	c6.24,0,12.704,0.544,19.2,1.632c12.544,2.08,23.36,9.696,35.872,18.528c18.304,12.928,39.04,27.552,70.72,27.552
+	c0.864,0,1.728-0.032,2.592-0.096c1.024,0.064,2.336,0.096,3.68,0.096c31.68,0,52.416-14.624,70.72-27.52l0.032-0.032
+	c12.512-8.8,23.328-16.416,35.872-18.496c6.496-1.088,12.96-1.632,19.2-1.632c10.752,0,19.264,1.376,26.848,2.848
+	c4.96,0.96,8.8,1.44,11.776,1.44h0.288h0.288c6.528,0,11.328-3.584,13.152-9.824c1.216-4.128,2.08-7.968,2.944-11.904
+	c0.736-3.392,1.952-8.832,3.04-10.944c21.984-3.456,38.816-7.808,50.08-13.024c9.184-4.256,14.848-9.088,17.312-14.784
+	c0.736-1.696,1.184-3.456,1.28-5.28C512.308,380.788,507.988,375.38,501.94,374.42z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/soundcloud.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path style="fill:#FF9800;" d="M432,240c-5.696,0-11.296,0.608-16.672,1.76C408.128,169.024,346.592,112,272,112
+		c-8.832,0-16,7.168-16,16v256c0,8.832,7.168,16,16,16h160c44.128,0,80-35.872,80-80C512,275.904,476.128,240,432,240z"/>
+	<path style="fill:#FF9800;" d="M208,144c-8.832,0-16,7.168-16,16v224c0,8.832,7.168,16,16,16s16-7.168,16-16V160
+		C224,151.168,216.832,144,208,144z"/>
+	<path style="fill:#FF9800;" d="M144,208c-8.832,0-16,7.168-16,16v160c0,8.832,7.168,16,16,16s16-7.168,16-16V224
+		C160,215.168,152.832,208,144,208z"/>
+	<path style="fill:#FF9800;" d="M80,208c-8.832,0-16,7.168-16,16v160c0,8.832,7.168,16,16,16s16-7.168,16-16V224
+		C96,215.168,88.832,208,80,208z"/>
+	<path style="fill:#FF9800;" d="M16,256c-8.832,0-16,7.168-16,16v96c0,8.832,7.168,16,16,16s16-7.168,16-16v-96
+		C32,263.168,24.832,256,16,256z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/spotify.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<circle style="fill:#8BC34A;" cx="256" cy="256" r="256"/>
+<g>
+	<path style="fill:#37474F;" d="M360.352,376.352c-3.2,0-6.4-0.928-9.184-2.912c-60-42.176-159.808-44.512-227.2-28.8
+		c-8.544,2.016-17.216-3.36-19.2-11.968s3.328-17.216,11.968-19.232c74.08-17.152,184.8-14.016,252.8,33.824
+		c7.264,5.088,8.96,15.072,3.904,22.272C370.304,373.984,365.376,376.352,360.352,376.352z"/>
+	<path style="fill:#37474F;" d="M391.648,313.76c-3.264,0-6.496-0.96-9.344-3.008C312.736,260.8,227.232,248.384,113.12,271.68
+		c-8.608,1.696-17.12-3.808-18.88-12.48c-1.792-8.64,3.808-17.12,12.448-18.88c123.424-25.184,216.928-11.104,294.304,44.416
+		c7.168,5.152,8.8,15.168,3.648,22.336C401.536,311.424,396.64,313.76,391.648,313.76z"/>
+	<path style="fill:#37474F;" d="M422.976,230.272c-3.104,0-6.24-0.896-8.992-2.752c-88.224-59.872-222.336-60.16-309.152-29.44
+		c-8.32,2.88-17.472-1.44-20.416-9.792c-2.944-8.32,1.408-17.472,9.76-20.416C188.608,134.496,334.944,135.2,432,201.024
+		c7.328,4.96,9.184,14.912,4.256,22.208C433.12,227.808,428.064,230.272,422.976,230.272z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/stack-overflow.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g fill="#ff9800"><path d="m6.444 14.839 10.338 2.196.433-2.089-10.338-2.212z"/><path d="m6.215 17.571h10.566v2.127h-10.566z"/><path d="m7.8 9.831 9.572 4.526.887-1.944-9.577-4.538z"/><path d="m17.373 14.358-.001-.001-.001.001z"/></g><path d="m2 15.429v8.571h18.992v-8.571h-2.113v6.428h-14.766v-6.428z" fill="#757575"/><path d="m10.453 5.063 8.109 6.873 1.346-1.65-8.109-6.873z" fill="#ff9800"/><path d="m22 8.587-6.302-8.587-1.691 1.286 6.302 8.587z" fill="#ff9800"/></svg>

src/images/icons/Social/team.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<circle style="fill:#2196F3;" cx="256" cy="256" r="256"/>
+<polygon style="fill:#FAFAFA;" points="64,256 192,160 178.08,224 333.92,224 320,160 448,256 320,352 333.92,288 178.08,288 
+	192,352 "/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/tumblr.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#37474F;" d="M287.936,223.84v117.248c0,29.568-0.32,46.848,2.752,55.296c3.072,8.288,10.816,16.992,19.616,22.112
+	c11.008,6.72,24.32,10.048,38.528,10.048c25.952,0,41.472-3.328,67.2-20.128v76.96l0,0c-22.016,10.272-41.184,16.352-58.816,20.352
+	c-17.6,4.32-36.832,6.272-57.408,6.272c-23.456,0-37.408-2.88-55.136-8.736c-18.208-5.952-33.44-14.4-46.176-25.408
+	c-12.96-10.88-21.44-22.496-26.4-34.848c-5.056-12.256-7.424-30.208-7.424-53.728V209.856H95.968v-72.544
+	c20.224-6.624,42.624-15.936,57.088-28.128c13.984-12.32,25.824-26.88,34.24-44.096c8.8-16.896,14.784-38.752,18.112-65.088h82.528
+	v128.032h128.096v95.808H287.936z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/twitch.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path style="fill:#673AB7;" d="M48,0L16,96v352h128v64h64l64-64h96l128-136.32V0H48z M464,288l-89.6,96H260.928L192,434.144V384H80
+		V32h384V288z"/>
+	<rect x="240" y="128" style="fill:#673AB7;" width="32" height="128"/>
+	<rect x="336" y="128" style="fill:#673AB7;" width="32" height="128"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/twitter-alt.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#03A9F4;" d="M384,384H256c-35.296,0-64-28.704-64-64v-32h192c35.328,0,64-28.672,64-64s-28.672-64-64-64H192V64
+	c0-35.328-28.672-64-64-64S64,28.672,64,64v256c0,105.888,86.112,192,192,192h128c35.328,0,64-28.672,64-64S419.328,384,384,384z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/twitter.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#03A9F4;" d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016
+	c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992
+	c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056
+	c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152
+	c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792
+	c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44
+	C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568
+	C480.224,136.96,497.728,118.496,512,97.248z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/viddler.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#2196F3;" d="M388.384,293.088c68.256,0,123.616-54.88,123.616-122.56C512,102.88,456.64,48,388.384,48
+	c-62.112,0-113.44,45.376-122.208,104.48h-4C253.376,93.376,202.016,48,139.904,48C71.648,48,16.32,102.88,16.32,170.528
+	c0,67.04,54.304,121.536,121.728,122.528v0.032h3.712v41.76L0,296.768v162.976l141.76-42.272V464h208.352l-61.056-170.912h99.04
+	H388.384z M139.904,205.12c-19.296,0-34.912-15.456-34.912-34.624c0-19.104,15.648-34.592,34.912-34.592
+	s34.912,15.488,34.912,34.592C174.816,189.664,159.168,205.12,139.904,205.12 M356,170.528c0-19.104,15.584-34.592,34.848-34.592
+	c19.328,0,34.976,15.488,34.976,34.592c0,19.136-15.648,34.656-34.976,34.656C371.584,205.152,356,189.664,356,170.528"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/vimeo.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.011 512.011" style="enable-background:new 0 0 512.011 512.011;" xml:space="preserve">
+<path style="fill:#00BCD4;" d="M0,154.248l20.672,27.232c0,0,42.88-33.824,57.152-16.992
+	c14.464,16.992,69.216,221.024,87.328,258.752c15.808,33.056,59.68,76.672,107.616,45.568
+	c48.384-31.296,208.096-167.68,236.704-329.056c28.544-161.088-192.512-127.36-215.68,13.056
+	c58.304-35.008,89.728,14.336,59.84,70.112c-29.952,56-57.44,92.512-71.68,92.512c-13.984,0-25.056-37.568-41.44-102.784
+	c-16.8-67.552-16.8-189.344-87.072-175.52C87.008,50.248,0,154.248,0,154.248z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/vine.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.057 512.057" style="enable-background:new 0 0 512.057 512.057;" xml:space="preserve">
+<path style="fill:#26A69A;" d="M460.957,212.128c11.456-25.664,17.696-58.912,17.696-88.064C478.653,45.632,438.973,0,366.269,0
+	c-74.784,0-118.496,57.952-118.496,134.336c0,75.68,35.104,140.672,92.96,170.272c-24.32,49.056-55.296,92.288-87.584,124.864
+	c-58.56-71.424-111.52-166.656-133.28-352.544H33.405c39.936,309.6,158.944,408.16,190.4,427.104
+	c17.792,10.784,33.152,10.272,49.408,1.024c25.536-14.656,102.272-91.968,144.768-182.56c17.824-0.064,39.264-2.112,60.64-7.008
+	v-60.96c-13.088,3.04-25.728,4.384-37.12,4.384c-64.096,0-113.408-45.12-113.408-123.584c0-38.432,14.752-58.432,35.584-58.432
+	c19.84,0,33.056,17.952,33.056,54.336c0,20.704-5.504,43.392-9.568,56.8C387.197,188.064,406.941,222.784,460.957,212.128z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/vk.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.962 511.962" style="enable-background:new 0 0 511.962 511.962;" xml:space="preserve">
+<path style="fill:#1E88E5;" d="M250.503,400.807h30.592c0,0,9.248-1.024,13.952-6.112c4.352-4.672,4.192-13.44,4.192-13.44
+	s-0.608-41.056,18.464-47.104c18.784-5.952,42.912,39.68,68.48,57.248c19.328,13.28,34.016,10.368,34.016,10.368l68.384-0.96
+	c0,0,35.776-2.208,18.816-30.336c-1.376-2.304-9.888-20.8-50.848-58.816c-42.88-39.808-37.12-33.344,14.528-102.176
+	c31.456-41.92,44.032-67.52,40.096-78.464c-3.744-10.432-26.88-7.68-26.88-7.68l-76.928,0.448c0,0-5.696-0.768-9.952,1.76
+	c-4.128,2.496-6.784,8.256-6.784,8.256s-12.192,32.448-28.448,60.032c-34.272,58.208-48,61.28-53.6,57.664
+	c-13.024-8.416-9.76-33.856-9.76-51.904c0-56.416,8.544-79.936-16.672-86.016c-8.384-2.016-14.528-3.36-35.936-3.584
+	c-27.456-0.288-50.72,0.096-63.872,6.528c-8.768,4.288-15.52,13.856-11.392,14.4c5.088,0.672,16.608,3.104,22.72,11.424
+	c7.904,10.72,7.616,34.848,7.616,34.848s4.544,66.4-10.592,74.656c-10.4,5.664-24.64-5.888-55.2-58.72
+	c-15.648-27.04-27.488-56.96-27.488-56.96s-2.272-5.568-6.336-8.544c-4.928-3.616-11.84-4.768-11.84-4.768l-73.152,0.448
+	c0,0-10.976,0.32-15.008,5.088c-3.584,4.256-0.288,13.024-0.288,13.024s57.28,133.984,122.112,201.536
+	C182.983,404.871,250.503,400.807,250.503,400.807L250.503,400.807z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/whatsapp.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#4CAF50;" d="M256.064,0h-0.128l0,0C114.784,0,0,114.816,0,256c0,56,18.048,107.904,48.736,150.048l-31.904,95.104
+	l98.4-31.456C155.712,496.512,204,512,256.064,512C397.216,512,512,397.152,512,256S397.216,0,256.064,0z"/>
+<path style="fill:#FAFAFA;" d="M405.024,361.504c-6.176,17.44-30.688,31.904-50.24,36.128c-13.376,2.848-30.848,5.12-89.664-19.264
+	C189.888,347.2,141.44,270.752,137.664,265.792c-3.616-4.96-30.4-40.48-30.4-77.216s18.656-54.624,26.176-62.304
+	c6.176-6.304,16.384-9.184,26.176-9.184c3.168,0,6.016,0.16,8.576,0.288c7.52,0.32,11.296,0.768,16.256,12.64
+	c6.176,14.88,21.216,51.616,23.008,55.392c1.824,3.776,3.648,8.896,1.088,13.856c-2.4,5.12-4.512,7.392-8.288,11.744
+	c-3.776,4.352-7.36,7.68-11.136,12.352c-3.456,4.064-7.36,8.416-3.008,15.936c4.352,7.36,19.392,31.904,41.536,51.616
+	c28.576,25.44,51.744,33.568,60.032,37.024c6.176,2.56,13.536,1.952,18.048-2.848c5.728-6.176,12.8-16.416,20-26.496
+	c5.12-7.232,11.584-8.128,18.368-5.568c6.912,2.4,43.488,20.48,51.008,24.224c7.52,3.776,12.48,5.568,14.304,8.736
+	C411.2,329.152,411.2,344.032,405.024,361.504z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/wordpress.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#757575;" d="M256,0C114.848,0,0,114.848,0,256s114.848,256,256,256s256-114.848,256-256S397.152,0,256,0z M256,32
+	c45.216,0,87.264,13.568,122.496,36.704C366.24,75.52,354.88,89.856,354.88,120.32c0,16.192,11.04,34.976,23.808,56.736
+	c15.328,26.112,34.336,58.592,29.568,82.048c-5.248,15.52-18.56,50.752-32.992,88.352l-66.144-190.08
+	c1.344-0.352,2.848-0.576,4.128-0.992c8.384-2.784,12.896-11.84,10.112-20.224c-2.816-8.384-11.84-12.832-20.256-10.112
+	c-13.632,4.544-38.304,4.448-53.12,4.416h-4.448h-4.448c-14.72,0.032-39.488,0.128-53.12-4.416
+	c-8.288-2.816-17.376,1.728-20.192,10.112s1.728,17.44,10.112,20.224c6.752,2.272,14.72,3.488,22.848,4.384l39.36,102.336
+	l-37.216,93.888L139.296,158.08c2.336-0.544,4.832-0.96,6.976-1.696c8.384-2.784,12.928-11.84,10.112-20.224
+	s-11.84-12.928-20.224-10.112c-13.6,4.544-38.336,4.416-53.152,4.416h-4.384c-2.88,0-5.248-0.224-7.68-0.416
+	C111.296,70.912,179.168,32,256,32z M32,256c0-25.152,4.352-49.28,12.032-71.872l98.176,264.48C76.384,409.536,32,337.952,32,256z
+	 M192.288,470.656L257.056,307.2l62.848,163.424C299.648,476.64,278.208,480,256,480C233.856,480,212.512,476.64,192.288,470.656z
+	 M370.528,448.128c20.736-53.152,56.448-145.216,67.168-176.352l0.416,0.128c0.448-1.28,0.928-2.944,1.248-4.896
+	c3.616-10.048,6.688-19.232,9.152-26.976c7.904-24.992,12.928-46.976,15.552-66.432C474.24,199.136,480,226.88,480,256
+	C480,337.632,435.968,408.992,370.528,448.128z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/yahoo.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.996 511.996" style="enable-background:new 0 0 511.996 511.996;" xml:space="preserve">
+<g>
+	<circle style="fill:#7B1FA2;" cx="377.484" cy="447.996" r="32"/>
+	<path style="fill:#7B1FA2;" d="M479.852,41.244c-5.824-5.952-13.696-9.248-22.112-9.248c-16.16,0-29.856,12.064-31.776,28.608
+		L377.676,365.5c-1.312,8.416,4.16,16.416,12.512,18.144c1.12,0.224,2.208,0.352,3.296,0.352c7.136,0,13.568-4.736,15.456-11.872
+		l79.2-297.952c0.16-0.576,0.288-1.056,0.352-1.632c0.64-1.664,0.96-3.424,0.992-5.216
+		C489.708,57.052,486.284,47.804,479.852,41.244z"/>
+	<path style="fill:#7B1FA2;" d="M300.012,3.42c-7.52,0.288-14.912-0.704-21.856-2.752c-7.936-2.272-16.16,1.632-19.328,9.184
+		l-89.12,214.688L80.108,9.852C76.94,2.3,68.62-1.668,60.78,0.668c-6.976,2.08-14.208,2.816-21.76,2.752
+		c-5.632-0.224-10.688,2.464-13.76,7.008s-3.616,10.336-1.44,15.36l113.664,261.504v208.704c0,8.832,7.168,16,16,16h32
+		c8.832,0,16-7.168,16-16l0.192-209.152L315.148,25.788c2.144-5.024,1.632-10.816-1.44-15.328
+		C310.668,5.916,305.388,3.612,300.012,3.42z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/images/icons/Social/youtube.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path style="fill:#F44336;" d="M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80
+		c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904
+		C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728
+		c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816
+		c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096
+		C512,181.088,504.704,138.592,490.24,113.92z"/>
+	<polygon style="fill:#FAFAFA;" points="192,352 192,160 352,256 	"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/markdown-pages/about.md

@@ -5,7 +5,7 @@ title: "👨‍💻 About"
 ---
 
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/blob/master/LICENSE" target="blank">
-<img src="https://img.shields.io/github/license/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator licence" />
+<img src="https://img.shields.io/github/license/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator license" />
 </a>
 
 **GitHub Profile README Generator** is an OSS(Open Source Software) that provides a cool interface to generate GitHub profile README in markdown.

src/markdown-pages/addons.md

@@ -28,6 +28,18 @@ You can customize the theme too. See how to customize yours [here](https://githu
 
 <br/>
 
+## [GitHub Readme Streak Stats](https://github.com/DenverCoder1/github-readme-streak-stats)
+
+Stay motivated while contributing to open source by displaying your current contribution streak
+
+![rahuldkjain](https://github-readme-streak-stats.herokuapp.com/?user=rahuldkjain)
+
+Developed by by [Jonah Lawrence](https://github.com/DenverCoder1).
+
+See how to customize the theme [here](https://github.com/DenverCoder1/github-readme-streak-stats)
+
+<br/>
+
 ## [GitHub Profile Views Counter](https://github.com/antonkomarev/github-profile-views-counter)
 
 It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react"
+import gsap from "gsap"
 import MarkdownPreview from "../components/markdownPreview"
 import Markdown from "../components/markdown"
-// import Header from "../components/header"
 import Title from "../components/title"
 import Subtitle from "../components/subtitle"
 import Work from "../components/work"
@@ -9,10 +9,11 @@ import Social from "../components/social"
 import Addons from "../components/addons"
 import Skills from "../components/skills"
 import Donate from "../components/donate"
+import Support from "../components/support"
 import { initialSkillState } from "../constants/skills"
-import gsap from "gsap"
 import Loader from "../components/loader"
-// import Footer from "../components/footer"
+import SEO from "../components/seo"
+import Layout from "../components/layout"
 import "./index.css"
 import {
   ArrowLeftIcon,
@@ -23,105 +24,20 @@ import {
   MarkdownIcon,
   FileCodeIcon,
 } from "@primer/octicons-react"
-import SEO from "../components/seo"
 import {
   isGitHubUsernameValid,
   isMediumUsernameValid,
   isTwitterUsernameValid,
 } from "../utils/validation"
-import Layout from "../components/layout"
+import {
+  DEFAULT_PREFIX,
+  DEFAULT_DATA,
+  DEFAULT_LINK,
+  DEFAULT_SOCIAL,
+  DEFAULT_SUPPORT,
+} from "../constants/defaults"
 
-const DEFAULT_PREFIX = {
-  title: "Hi 👋, I'm",
-  currentWork: "🔭 I’m currently working on",
-  currentLearn: "🌱 I’m currently learning",
-  collaborateOn: "👯 I’m looking to collaborate on",
-  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 = {
-  title: "",
-  subtitle: "A passionate frontend developer from India",
-  currentWork: "",
-  currentLearn: "",
-  collaborateOn: "",
-  helpWith: "",
-  ama: "",
-  contact: "",
-  funFact: "",
-  twitterBadge: false,
-  visitorsBadge: false,
-  badgeStyle: "flat",
-  badgeColor: "0e75b6",
-  badgeLabel: "Profile views",
-  githubProfileTrophy: false,
-  githubStats: false,
-  githubStatsOptions: {
-    theme: "",
-    titleColor: "",
-    textColor: "",
-    bgColor: "",
-    hideBorder: false,
-    cacheSeconds: null,
-    locale: "en",
-  },
-  topLanguages: false,
-  topLanguagesOptions: {
-    theme: "",
-    titleColor: "",
-    textColor: "",
-    bgColor: "",
-    hideBorder: false,
-    cacheSeconds: null,
-    locale: "en",
-  },
-  devDynamicBlogs: false,
-  mediumDynamicBlogs: false,
-  rssDynamicBlogs: false,
-}
-
-const DEFAULT_LINK = {
-  currentWork: "",
-  collaborateOn: "",
-  helpWith: "",
-  portfolio: "",
-  blog: "",
-  resume: "",
-}
-
-const DEFAULT_SOCIAL = {
-  github: "",
-  dev: "",
-  linkedin: "",
-  codepen: "",
-  stackoverflow: "",
-  kaggle: "",
-  codesandbox: "",
-  fb: "",
-  instagram: "",
-  twitter: "",
-  dribbble: "",
-  behance: "",
-  medium: "",
-  youtube: "",
-  codechef: "",
-  hackerrank: "",
-  codeforces: "",
-  leetcode: "",
-  topcoder: "",
-  hackerearth: "",
-  geeks_for_geeks: "",
-  discord: "",
-  rssurl: "",
-}
-
-const KeepCacheUpdated = ({ prefix, data, link, social, skills }) => {
+const KeepCacheUpdated = ({ prefix, data, link, social, skills, support }) => {
   useEffect(() => {
     localStorage.setItem(
       "cache",
@@ -131,9 +47,10 @@ const KeepCacheUpdated = ({ prefix, data, link, social, skills }) => {
         link,
         social,
         skills,
+        support,
       })
     )
-  }, [prefix, data, link, social, skills])
+  }, [prefix, data, link, social, skills, support])
 }
 
 const DEFAULT_SKILLS = initialSkillState
@@ -144,6 +61,7 @@ const IndexPage = () => {
   const [link, setLink] = useState(DEFAULT_LINK)
   const [social, setSocial] = useState(DEFAULT_SOCIAL)
   const [skills, setSkills] = useState(DEFAULT_SKILLS)
+  const [support, setSupport] = useState(DEFAULT_SUPPORT)
 
   const [restore, setRestore] = useState("")
   const [generatePreview, setGeneratePreview] = useState(false)
@@ -190,6 +108,12 @@ const IndexPage = () => {
     setSocial(change)
   }
 
+  const handleSupportChange = (field, e) => {
+    let change = { ...support }
+    change[field] = e.target.value
+    setSupport(change)
+  }
+
   const handleCheckChange = field => {
     let change = { ...data }
     change[field] = !change[field]
@@ -253,7 +177,8 @@ const IndexPage = () => {
       data.visitorsBadge ||
       data.githubProfileTrophy ||
       data.githubStats ||
-      data.topLanguages
+      data.topLanguages ||
+      data.streakStats
     ) {
       if (social.github && isGitHubUsernameValid(social.github)) {
         generate()
@@ -367,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")
@@ -410,6 +335,10 @@ const IndexPage = () => {
       cache.skills
     )
     setSkills(cacheSkills || DEFAULT_SKILLS)
+
+    setSupport(
+      cache.support ? { ...DEFAULT_SUPPORT, ...cache.support } : DEFAULT_SUPPORT
+    )
   }
 
   useEffect(() => {
@@ -430,7 +359,7 @@ const IndexPage = () => {
   }, [])
 
   // keep cache updated
-  KeepCacheUpdated({ prefix, data, link, social, skills })
+  KeepCacheUpdated({ prefix, data, link, social, skills, support })
 
   const handleResetForm = () => {
     setPrefix(DEFAULT_PREFIX)
@@ -438,6 +367,7 @@ const IndexPage = () => {
     setLink(DEFAULT_LINK)
     setSocial(DEFAULT_SOCIAL)
     setSkills(DEFAULT_SKILLS)
+    setSupport(DEFAULT_SUPPORT)
   }
 
   const mergeDefaultWithNewDataSkills = (defaultSkills, newSkills) => {
@@ -467,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,
@@ -481,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)
+      }
     }
   }
 
@@ -516,11 +449,16 @@ const IndexPage = () => {
             handleCheckChange={handleCheckChange}
             handleDataChange={handleDataChange}
           />
+          <Support
+            support={support}
+            handleSupportChange={handleSupportChange}
+          />
           <div className="section">
             {(data.visitorsBadge ||
               data.githubProfileTrophy ||
               data.githubStats ||
-              data.topLanguages) &&
+              data.topLanguages ||
+              data.streakStats) &&
             !social.github ? (
               <div className="warning">
                 * Please add github username to use these add-ons
@@ -670,6 +608,7 @@ const IndexPage = () => {
                     link={link}
                     social={social}
                     skills={skills}
+                    support={support}
                   />
                 ) : (
                   ""
@@ -681,6 +620,7 @@ const IndexPage = () => {
                     link={link}
                     social={social}
                     skills={skills}
+                    support={support}
                   />
                 ) : (
                   ""

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)
+  })
+})

src/utils/link-generators.js

@@ -13,8 +13,19 @@ const githubStatsStylingQueryString = options => {
   return query_string
 }
 
+const streakStatsStylingQueryString = options => {
+  const params = {
+    ...(options.theme && options.theme !== "none") && { theme: options.theme },
+  }
+  const query_string = Object.entries(params).map(([key, value]) => `${key}=${value}`).join("&")
+  return query_string
+}
+
 export const githubStatsLinkGenerator = ({github, options}) =>
   `https://github-readme-stats.vercel.app/api?username=${github}&${githubStatsStylingQueryString(options)}`
 
 export const topLanguagesLinkGenerator = ({github, options}) =>
  `https://github-readme-stats.vercel.app/api/top-langs?username=${github}&${githubStatsStylingQueryString(options)}&layout=compact`
+
+export const streakStatsLinkGenerator = ({github, options}) =>
+ `https://github-readme-streak-stats.herokuapp.com/?user=${github}&${streakStatsStylingQueryString(options)}`