aheh/github-profile-readme-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[add]: tailwind css

Browse Source
This commit is contained in:
rahuldkjain
2020-09-05 17:25:33 +05:30
parent 1b1c1c366f e742df1b98
commit 588bb821d6
25 changed files with 1708 additions and 928 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+10 -4
View File
@@ -82,16 +82,22 @@ npm start
- [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him. - [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
- [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot. - [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed the support with his donation. Thanks a lot.
## Support 🙏
<p align="center"> <p align="left">
<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/> <a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
</a>
<a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
<img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
</a>
</p> </p>
<p align="center"> <p align="left">
<a href="https://ko-fi.com/A0A81XXSX"><img src="https://www.ko-fi.com/img/githubbutton_sm.svg" alt="sponsor github profile readme generator"/> <a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
</a> </a>
<a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
</p> </p>
<hr>
<p align="center"> <p align="center">
Developed with ❤️ in India 🇮🇳 Developed with ❤️ in India 🇮🇳
</p> </p>
gatsby-browser.js
+2 -1
View File
@@ -1 +1,2 @@
require("prismjs/themes/prism-okaidia.css") import "./src/styles/tailwind.css";
require("prismjs/themes/prism-okaidia.css");
gatsby-config.js
+18 -3
View File
@@ -52,8 +52,23 @@ module.exports = {
// other options // other options
}, },
}, },
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [require("tailwindcss")],
}
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: false,
develop: false,
tailwind: true,
}
},
`gatsby-plugin-twitter`
], ],
// this (optional) plugin enables Progressive Web App + Offline functionality // this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline // To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`, // `gatsby-plugin-offline`,
} }
package-lock.json
Generated
+379
View File
@@ -1059,6 +1059,16 @@
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
}, },
"@fullhuman/postcss-purgecss": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
"integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
"dev": true,
"requires": {
"postcss": "7.0.32",
"purgecss": "^2.3.0"
}
},
"@graphql-tools/schema": { "@graphql-tools/schema": {
"version": "6.0.11", "version": "6.0.11",
"resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-6.0.11.tgz", "resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-6.0.11.tgz",
@@ -2435,6 +2445,23 @@
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
"integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==" "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ=="
}, },
"acorn-node": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
"dev": true,
"requires": {
"acorn": "^7.0.0",
"acorn-walk": "^7.0.0",
"xtend": "^4.0.2"
}
},
"acorn-walk": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
"dev": true
},
"address": { "address": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz", "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
@@ -2822,6 +2849,12 @@
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
}, },
"at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
"dev": true
},
"atob": { "atob": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -5107,6 +5140,12 @@
} }
} }
}, },
"css-unit-converter": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
"dev": true
},
"css-what": { "css-what": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -5578,6 +5617,12 @@
} }
} }
}, },
"defined": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
"integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
"dev": true
},
"del": { "del": {
"version": "5.1.0", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz", "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz",
@@ -5684,6 +5729,17 @@
} }
} }
}, },
"detective": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
"integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
"dev": true,
"requires": {
"acorn-node": "^1.6.1",
"defined": "^1.0.0",
"minimist": "^1.1.1"
}
},
"devcert": { "devcert": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/devcert/-/devcert-1.1.1.tgz", "resolved": "https://registry.npmjs.org/devcert/-/devcert-1.1.1.tgz",
@@ -7344,6 +7400,12 @@
"pend": "~1.2.0" "pend": "~1.2.0"
} }
}, },
"fetch-retry": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-4.0.1.tgz",
"integrity": "sha512-EhIeVBkq9T2z1ANDr2kmLujoHOTdLvR9t/nzLSdX4PMIFinLyyZFYX9T6Fb3LrbiHQEhujq1O7ElsqjuqYIsEA==",
"dev": true
},
"figgy-pudding": { "figgy-pudding": {
"version": "3.5.2", "version": "3.5.2",
"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -8060,6 +8122,68 @@
"micromatch": "^3.1.10" "micromatch": "^3.1.10"
} }
}, },
"gatsby-plugin-postcss": {
"version": "2.3.11",
"resolved": "https://registry.npmjs.org/gatsby-plugin-postcss/-/gatsby-plugin-postcss-2.3.11.tgz",
"integrity": "sha512-IHZ2s0iLspL3spYKpFz4SUqQHPPImvPhvVAFEBkGNRA65ffmgOLqucsaXzINjFcpdy5o3+dS+GJuMePaSGYIbg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.10.3",
"postcss-loader": "^3.0.0"
}
},
"gatsby-plugin-purgecss": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-purgecss/-/gatsby-plugin-purgecss-5.0.0.tgz",
"integrity": "sha512-vzBQSBfZuzmm6+P5qedw+LCgtQm0HRzdDUjytdCwgYCBRuxUjxSkHAFBpemSXqkklfWxs6jcLjRuElVqSDLT1w==",
"dev": true,
"requires": {
"fs-extra": "^9.0.0",
"loader-utils": "^2.0.0",
"purgecss": "^2.1.0"
},
"dependencies": {
"fs-extra": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
"integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
"dev": true,
"requires": {
"at-least-node": "^1.0.0",
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
"universalify": "^1.0.0"
}
},
"jsonfile": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
"integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
"dev": true,
"requires": {
"graceful-fs": "^4.1.6",
"universalify": "^1.0.0"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"universalify": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
"integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
"dev": true
}
}
},
"gatsby-plugin-react-helmet": { "gatsby-plugin-react-helmet": {
"version": "3.3.6", "version": "3.3.6",
"resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.3.6.tgz", "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.3.6.tgz",
@@ -8104,6 +8228,15 @@
} }
} }
}, },
"gatsby-plugin-twitter": {
"version": "2.3.10",
"resolved": "https://registry.npmjs.org/gatsby-plugin-twitter/-/gatsby-plugin-twitter-2.3.10.tgz",
"integrity": "sha512-WQzjGpeKCdxujzAWE2yFOKaI494J/Qb6vhDdLvtevOAZVXSaMdTSfwSSUr17jsu8TV5s47fasKox+h/0uRlJUw==",
"dev": true,
"requires": {
"@babel/runtime": "^7.10.3"
}
},
"gatsby-plugin-typescript": { "gatsby-plugin-typescript": {
"version": "2.4.8", "version": "2.4.8",
"resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.8.tgz", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.8.tgz",
@@ -8353,6 +8486,52 @@
} }
} }
}, },
"gatsby-remark-embedder": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/gatsby-remark-embedder/-/gatsby-remark-embedder-3.0.0.tgz",
"integrity": "sha512-Do0NA09+ehs8mycfGTx0VbA6Ti4ALIILCMLax/zbspXVFaRfgbOoB/CgIEW9Raai98oMpiJtpAr0T6UR76AImA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.10.5",
"fetch-retry": "^4.0.1",
"node-fetch": "^2.6.0",
"unist-util-visit": "^2.0.3"
},
"dependencies": {
"@babel/runtime": {
"version": "7.11.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
"integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"node-fetch": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
"integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==",
"dev": true
},
"unist-util-is": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.2.tgz",
"integrity": "sha512-Ofx8uf6haexJwI1gxWMGg6I/dLnF2yE+KibhD3/diOqY2TinLcqHXCV6OI5gFVn3xQqDH+u0M625pfKwIwgBKQ==",
"dev": true
},
"unist-util-visit": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
"dev": true,
"requires": {
"@types/unist": "^2.0.0",
"unist-util-is": "^4.0.0",
"unist-util-visit-parents": "^3.0.0"
}
}
}
},
"gatsby-remark-prismjs": { "gatsby-remark-prismjs": {
"version": "3.5.10", "version": "3.5.10",
"resolved": "https://registry.npmjs.org/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.5.10.tgz", "resolved": "https://registry.npmjs.org/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.5.10.tgz",
@@ -12824,6 +13003,12 @@
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==" "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
}, },
"normalize.css": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
"dev": true
},
"npm-conf": { "npm-conf": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz", "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
@@ -13782,6 +13967,53 @@
"postcss": "^7.0.26" "postcss": "^7.0.26"
} }
}, },
"postcss-functions": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
"integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
"dev": true,
"requires": {
"glob": "^7.1.2",
"object-assign": "^4.1.1",
"postcss": "^6.0.9",
"postcss-value-parser": "^3.3.0"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
},
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}
}
},
"postcss-js": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
"integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
"dev": true,
"requires": {
"camelcase-css": "^2.0.1",
"postcss": "^7.0.18"
}
},
"postcss-load-config": { "postcss-load-config": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
@@ -14073,6 +14305,16 @@
} }
} }
}, },
"postcss-nested": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
"integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
"dev": true,
"requires": {
"postcss": "^7.0.32",
"postcss-selector-parser": "^6.0.2"
}
},
"postcss-normalize-charset": { "postcss-normalize-charset": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -14437,6 +14679,12 @@
} }
} }
}, },
"pretty-hrtime": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
"dev": true
},
"prismjs": { "prismjs": {
"version": "1.20.0", "version": "1.20.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz",
@@ -14609,6 +14857,26 @@
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
}, },
"purgecss": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
"integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
"dev": true,
"requires": {
"commander": "^5.0.0",
"glob": "^7.0.0",
"postcss": "7.0.32",
"postcss-selector-parser": "^6.0.2"
},
"dependencies": {
"commander": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
"integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
"dev": true
}
}
},
"q": { "q": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -15203,6 +15471,24 @@
} }
} }
}, },
"reduce-css-calc": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
"integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
"dev": true,
"requires": {
"css-unit-converter": "^1.1.1",
"postcss-value-parser": "^3.3.0"
},
"dependencies": {
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
}
}
},
"redux": { "redux": {
"version": "4.0.5", "version": "4.0.5",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
@@ -17470,6 +17756,99 @@
} }
} }
}, },
"tailwindcss": {
"version": "1.7.6",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.7.6.tgz",
"integrity": "sha512-focAhU3ciM1/UYBHQVKKzede4zC3y9+IHzU2N/ZF6mbZbhY8S96lOxrO2Y6LMU08+Dbh2xBLmO1bsioLk3Egig==",
"dev": true,
"requires": {
"@fullhuman/postcss-purgecss": "^2.1.2",
"autoprefixer": "^9.4.5",
"browserslist": "^4.12.0",
"bytes": "^3.0.0",
"chalk": "^3.0.0 || ^4.0.0",
"color": "^3.1.2",
"detective": "^5.2.0",
"fs-extra": "^8.0.0",
"lodash": "^4.17.20",
"node-emoji": "^1.8.1",
"normalize.css": "^8.0.1",
"object-hash": "^2.0.3",
"postcss": "^7.0.11",
"postcss-functions": "^3.0.0",
"postcss-js": "^2.0.0",
"postcss-nested": "^4.1.1",
"postcss-selector-parser": "^6.0.0",
"postcss-value-parser": "^4.1.0",
"pretty-hrtime": "^1.0.3",
"reduce-css-calc": "^2.1.6",
"resolve": "^1.14.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
"dev": true,
"requires": {
"@types/color-name": "^1.1.1",
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true
},
"lodash": {
"version": "4.17.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
"dev": true
},
"object-hash": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
"integrity": "sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==",
"dev": true
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"tapable": { "tapable": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
package.json
+6 -1
View File
@@ -25,8 +25,13 @@
"react-helmet": "^6.1.0" "react-helmet": "^6.1.0"
}, },
"devDependencies": { "devDependencies": {
"gatsby-plugin-postcss": "^2.3.11",
"gatsby-plugin-purgecss": "^5.0.0",
"gatsby-plugin-twitter": "^2.3.10",
"gatsby-remark-embedder": "^3.0.0",
"gh-pages": "^3.1.0", "gh-pages": "^3.1.0",
"prettier": "2.0.5" "prettier": "2.0.5",
"tailwindcss": "^1.7.6"
}, },
"keywords": [ "keywords": [
"gatsby" "gatsby"
src/components/addons.js
+12 -12
View File
@@ -25,34 +25,34 @@ const Addons = (props) => {
document.body.removeChild(tempElement); document.body.removeChild(tempElement);
} }
return ( return (
<div className="section"> <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
<div className="section-title">Add-ons</div> <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Add-ons</div>
<div className="checkbox"> <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="visitors-count" className="checkboxLabel"> <label htmlFor="visitors-count" className="cursor-pointer">
<input type="checkbox" id="visitors-count" checked={props.data.visitorsBadge} <input type="checkbox" id="visitors-count" checked={props.data.visitorsBadge}
onChange={event => props.handleCheckChange('visitorsBadge')} />&nbsp; display visitors count badge onChange={event => props.handleCheckChange('visitorsBadge')} />&nbsp; display visitors count badge
</label> </label>
</div> </div>
<div className="checkbox"> <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="github-stats" className="checkboxLabel"> <label htmlFor="github-stats" className="cursor-pointer">
<input id="github-stats" type="checkbox" checked={props.data.githubStats} <input id="github-stats" type="checkbox" checked={props.data.githubStats}
onChange={event => props.handleCheckChange('githubStats')} />&nbsp; display github profile stats card onChange={event => props.handleCheckChange('githubStats')} />&nbsp; display github profile stats card
</label> </label>
</div> </div>
<div className="checkbox"> <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="top-languages" className="checkboxLabel"> <label htmlFor="top-languages" className="cursor-pointer">
<input id="top-languages" type="checkbox" checked={props.data.topLanguages} <input id="top-languages" type="checkbox" checked={props.data.topLanguages}
onChange={event => props.handleCheckChange('topLanguages')} />&nbsp; display top skills onChange={event => props.handleCheckChange('topLanguages')} />&nbsp; display top skills
</label> </label>
</div> </div>
<div className="checkbox"> <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="dev-dynamic-blogs" className="checkboxLabel"> <label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
<input id="dev-dynamic-blogs" type="checkbox" checked={props.data.devDynamicBlogs} <input id="dev-dynamic-blogs" type="checkbox" checked={props.data.devDynamicBlogs}
onChange={event => props.handleCheckChange('devDynamicBlogs')} />&nbsp; display latest dev.to blogs dynamically (GitHub Action) onChange={event => props.handleCheckChange('devDynamicBlogs')} />&nbsp; display latest dev.to blogs dynamically (GitHub Action)
</label> </label>
</div> </div>
<div className="checkbox"> <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="medium-dynamic-blogs" className="checkboxLabel"> <label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
<input id="medium-dynamic-blogs" type="checkbox" checked={props.data.mediumDynamicBlogs} <input id="medium-dynamic-blogs" type="checkbox" checked={props.data.mediumDynamicBlogs}
onChange={event => props.handleCheckChange('mediumDynamicBlogs')} />&nbsp; display latest medium blogs dynamically (GitHub Action) onChange={event => props.handleCheckChange('mediumDynamicBlogs')} />&nbsp; display latest medium blogs dynamically (GitHub Action)
</label> </label>
src/components/footer.js
+3 -3
View File
@@ -3,8 +3,8 @@ import links from '../constants/page-links'
import { Link } from 'gatsby' import { Link } from 'gatsby'
const Footer = () => { const Footer = () => {
return ( return (
<div className="footer"> <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
<div className="footer-pages"> <div className="w-full flex justify-evenly items-center py-2 text-orange-500">
<div> <div>
<Link to={links.about} activeStyle={{ color: "#002ead" }}> <Link to={links.about} activeStyle={{ color: "#002ead" }}>
About About
@@ -21,7 +21,7 @@ const Footer = () => {
</Link> </Link>
</div> </div>
</div> </div>
<div className="footer-proud"> <div className="py-2">
Developed in India <span role="img" aria-label="india"> 🇮🇳</span> Developed in India <span role="img" aria-label="india"> 🇮🇳</span>
</div> </div>
</div> </div>
src/components/header.js
+16 -17
View File
@@ -4,9 +4,9 @@ import logo from "../images/mdg.png"
import links from "../constants/page-links" import links from "../constants/page-links"
import gsap from "gsap" import gsap from "gsap"
import axios from "axios" import axios from "axios"
import {Link} from "gatsby" import { Link } from "gatsby"
const Header = (props) => { const Header = props => {
const fetchData = async () => { const fetchData = async () => {
var response = await axios.get( var response = await axios.get(
"https://api.github.com/repos/rahuldkjain/github-profile-readme-generator" "https://api.github.com/repos/rahuldkjain/github-profile-readme-generator"
@@ -29,10 +29,10 @@ const Header = (props) => {
fetchData() fetchData()
setInterval(fetchData, 60000) setInterval(fetchData, 60000)
gsap.set(".star-icon, .fork-icon", { gsap.set(".star, .fork", {
transformOrigin: "center", transformOrigin: "center",
}) })
gsap.to(".star-icon, .fork-icon", { gsap.to(".star, .fork", {
rotateZ: "360", rotateZ: "360",
duration: 2, duration: 2,
ease: "elastic.inOut", ease: "elastic.inOut",
@@ -42,28 +42,27 @@ const Header = (props) => {
}, []) }, [])
return ( return (
<div className="header"> <div className="shadow flex items-center justify-center flex-col mb-2 py-2">
<Link to={links.home}> <Link to={links.home}>
<h1 className="heading"> <h1 className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col">
<img <img
src={logo} src={logo}
className="logo" className="w-12 h-12"
alt="github profile markdown generator logo" alt="github profile markdown generator logo"
/> />
<div> <div>{props.heading}</div>
{props.heading}
</div>
</h1> </h1>
</Link> </Link>
<div className="github"> <div className="flex justify-center items-center">
<a <a
href="https://github.com/rahuldkjain/github-profile-readme-generator" href="https://github.com/rahuldkjain/github-profile-readme-generator"
aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub" aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
target="blank" target="blank"
className="mr-2"
> >
<div className="github-button"> <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
<StarIcon size={16} className="star-icon" /> Star this repo{" "} <StarIcon size={16} id="star-icon" className="px-1 w-6 star" />Star this repo
<span className="github-count">{stats.starsCount}</span> <span className="github-count px-1 sm:px-2">{stats.starsCount}</span>
</div> </div>
</a> </a>
<a <a
@@ -71,9 +70,9 @@ const Header = (props) => {
aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub" aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
target="blank" target="blank"
> >
<div className="github-button"> <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
<RepoForkedIcon size={16} className="fork-icon" /> Fork on GitHub{" "} <RepoForkedIcon size={16} id="fork-icon" className="px-1 w-6 fork" />Fork on GitHub
<span className="github-count">{stats.forksCount}</span> <span className="github-count px-1 sm:px-2">{stats.forksCount}</span>
</div> </div>
</a> </a>
</div> </div>
src/components/layout.js
+21
View File
@@ -0,0 +1,21 @@
import React from "react";
import Header from "./header";
import Footer from "./footer";
const Layout = ({children}) => {
return (
<div className="flex flex-col min-h-screen">
<header>
<Header heading="GitHub Profile README Generator" />
</header>
<main className="flex-grow">
{children}
</main>
<footer>
<Footer />
</footer>
</div>
)
};
export default Layout;
src/components/markdown.js
+2 -2
View File
@@ -70,7 +70,7 @@ const Markdown = (props) => {
listChosenSkills.push(`<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`); listChosenSkills.push(`<img src="${icons[skill]}" alt="${skill}" width="40" height="40"/>`);
} }
}); });
return listChosenSkills.length > 0 ? `<p align="left">${listChosenSkills.join(' ')}</p>` : ''; return listChosenSkills.length > 0 ? (<>{`<p align="left">${listChosenSkills.join(' ')}</p>`}<br/><br/></>) : '';
} }
const DisplayDynamicBlogs = (props) => { const DisplayDynamicBlogs = (props) => {
if (props.show) { if (props.show) {
@@ -93,7 +93,7 @@ const Markdown = (props) => {
return ''; return '';
} }
return ( return (
<div id="markdown-content"> <div id="markdown-content" className="break-words">
<><Title prefix={props.prefix.title} title={props.data.title} /></> <><Title prefix={props.prefix.title} title={props.data.title} /></>
<><SubTitle subtitle={props.data.subtitle} /></> <><SubTitle subtitle={props.data.subtitle} /></>
<><VisitorsBadge show={props.data.visitorsBadge} github={props.social.github} /></> <><VisitorsBadge show={props.data.visitorsBadge} github={props.social.github} /></>
src/components/markdownPreview.js
+16 -16
View File
@@ -5,7 +5,7 @@ const MarkdownPreview = (props) => {
const TitlePreview = (props) => { const TitlePreview = (props) => {
if (props.prefix && props.title) { if (props.prefix && props.title) {
return ( return (
<h1 className="title">{props.prefix + ' ' + props.title}</h1> <h1 className="text-center text-xl font-bold">{props.prefix + ' ' + props.title}</h1>
) )
} }
return null; return null;
@@ -13,7 +13,7 @@ const MarkdownPreview = (props) => {
const SubTitlePreview = (props) => { const SubTitlePreview = (props) => {
if (props.subtitle) { if (props.subtitle) {
return ( return (
<h3 className="subtitle">{props.subtitle}</h3> <h3 className="text-center font-medium">{props.subtitle}</h3>
) )
} }
return null; return null;
@@ -22,18 +22,18 @@ const MarkdownPreview = (props) => {
if (props.prefix && props.project) { if (props.prefix && props.project) {
if (props.link) { if (props.link) {
return ( return (
<div> <div className="my-2">
{props.prefix + ' '}<a href={props.link} className="link" target="blank">{props.project}</a> {props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.project}</a>
</div> </div>
); );
} else { } else {
return (<div>{props.prefix + ' '}<b>{props.project}</b></div>); return (<div className="my-2">{props.prefix + ' '}<b>{props.project}</b></div>);
} }
} }
if (props.prefix && props.link) { if (props.prefix && props.link) {
return ( return (
<div> <div className="my-2">
{props.prefix + ' '}<a href={props.link} className="link" target="blank">{props.link}</a> {props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.link}</a>
</div> </div>
); );
} }
@@ -60,13 +60,13 @@ const MarkdownPreview = (props) => {
} }
const DisplaySocial = (props) => { const DisplaySocial = (props) => {
if (props.username) { if (props.username) {
return (<a className="link social-icon" href={props.base + '/' + props.username} target="blank"><img className="icon" src={props.icon} alt="props.username" /></a>) return (<a className="no-underline text-blue-700 m-2" href={props.base + '/' + props.username} target="blank"><img className="w-6 h-6" src={props.icon} alt="props.username" /></a>)
} }
return null; return null;
} }
const SocialPreview = (props) => { const SocialPreview = (props) => {
return ( return (
<div className="social"> <div className="flex justify-center items-end">
<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://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://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://twitter.com" icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg" username={props.social.twitter} />
@@ -94,32 +94,32 @@ const MarkdownPreview = (props) => {
const VisitorsBadgePreview = (props) => { const VisitorsBadgePreview = (props) => {
let link = "https://komarev.com/ghpvc/?username=" + props.github let link = "https://komarev.com/ghpvc/?username=" + props.github
if (props.show) { if (props.show) {
return (<div className="badge"> <img className="badgeImage" src={link} alt={props.github} /> </div>) return (<div className="text-left my-2"> <img className="h-4 sm:h-6" src={link} alt={props.github} /> </div>)
} }
return null; return null;
} }
const GitHubStatsPreview = (props) => { const GitHubStatsPreview = (props) => {
let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true" let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
if (props.show) { if (props.show) {
return (<div className="github-stats-card"><img src={link} alt={props.github} /></div>) return (<div className="text-center mx-4 mb-4"><img src={link} alt={props.github} /></div>)
} }
return null; return null;
} }
const TopLanguagesPreview = (props) => { const TopLanguagesPreview = (props) => {
let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html" let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html"
if (props.show) { if (props.show) {
return (<div className="top-languages-card"><img src={link} alt={props.github} /></div>) return (<div className="text-center mx-4 mb-4"><img src={link} alt={props.github} /></div>)
} }
return <div className="top-languages-card"> &nbsp;</div>; return <div className="text-center mx-4 mb-4"> &nbsp;</div>;
} }
const SkillsPreview = (props) => { const SkillsPreview = (props) => {
var listSkills = [] var listSkills = []
skills.forEach((skill) => { skills.forEach((skill) => {
if (props.skills[skill]) { if (props.skills[skill]) {
listSkills.push(<img className="skill-preview-icon" key={skill} src={icons[skill]} alt={skill} />) listSkills.push(<img className="my-4 mx-4 h-6 w-6 sm:h-10 sm:w-10" key={skill} src={icons[skill]} alt={skill} />)
} }
}); });
return listSkills.length > 0 ? <div className='skills-preview'>{listSkills}</div> : '' return listSkills.length > 0 ? <div className='flex flex-wrap justify-start items-center'>{listSkills}</div> : ''
} }
return ( return (
<div id="markdown-preview"> <div id="markdown-preview">
@@ -128,7 +128,7 @@ const MarkdownPreview = (props) => {
<VisitorsBadgePreview show={props.data.visitorsBadge} github={props.social.github} /> <VisitorsBadgePreview show={props.data.visitorsBadge} github={props.social.github} />
<WorkPreview work={props} /> <WorkPreview work={props} />
<SkillsPreview skills={props.skills} /> <SkillsPreview skills={props.skills} />
<div className="github-cards"> <div className="block sm:flex sm:justify-center sm:items-start">
<TopLanguagesPreview show={props.data.topLanguages} github={props.social.github} /> <TopLanguagesPreview show={props.data.topLanguages} github={props.social.github} />
<GitHubStatsPreview show={props.data.githubStats} github={props.social.github} /> <GitHubStatsPreview show={props.data.githubStats} github={props.social.github} />
</div> </div>
src/components/skills.js
+9 -9
View File
@@ -1,18 +1,18 @@
import React, { Fragment } from "react" import React from "react"
import { icons, categorizedSkills } from "../constants/skills" import { icons, categorizedSkills } from "../constants/skills"
const Skills = props => { const Skills = props => {
const createSkill = skill => { const createSkill = skill => {
return ( return (
<div className="skillCheckbox" key={skill}> <div className="w-1/3 sm:w-1/4 my-6" key={skill}>
<label htmlFor={skill} className="skillCheckboxLabel"> <label htmlFor={skill} className="skillCheckboxLabel cursor-pointer flex items-center justify-start">
<input <input
id={skill} id={skill}
type="checkbox" type="checkbox"
checked={props.skills[skill]} checked={props.skills[skill]}
onChange={event => props.handleSkillsChange(skill)} onChange={(event) => props.handleSkillsChange(skill)}
/> />
<img className="skill-icon" src={icons[skill]} alt={skill} /> <img className="ml-4 w-8 h-8 sm:w-10 sm:h-10" src={icons[skill]} alt={skill} />
<span className="tooltiptext">{skill}</span> <span className="tooltiptext">{skill}</span>
</label> </label>
</div> </div>
@@ -20,15 +20,15 @@ const Skills = props => {
} }
return ( return (
<div> <div className="px-2 sm:px-6 mb-10">
<div className="section-title">Skills</div> <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Skills</div>
{Object.keys(categorizedSkills).map(key => ( {Object.keys(categorizedSkills).map(key => (
<div key={key}> <div key={key}>
<h4 className="skills-category-title"> <h4 className="text-sm sm:text-xl text-gray-900 text-center">
{categorizedSkills[key].title} {categorizedSkills[key].title}
</h4> </h4>
<div className="skills"> <div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">
{categorizedSkills[key].skills.map(skill => createSkill(skill))} {categorizedSkills[key].skills.map(skill => createSkill(skill))}
</div> </div>
</div> </div>
src/components/social.js
+89 -85
View File
@@ -2,91 +2,95 @@ import React from 'react';
const Social = (props) => { const Social = (props) => {
return ( return (
<div className="section"> <div className="px-2 sm:px-6 mb-4">
<div className="section-title">Social</div> <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Social</div>
<div className="container"> <div className="flex flex-wrap justify-center items-center">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
className="icon" alt="github" /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
<input id="github" placeholder="github username" className="inputField lg" className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="github" />
value={props.social.github} onChange={event => props.handleSocialChange('github', event)} /> <input id="github" placeholder="github username"
</div> className="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"
<div className="container"> value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg" </div>
className="icon" alt="twitter" /> <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
<input id="twitter" placeholder="twitter username" className="inputField lg" <img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} /> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="twitter" />
</div> <input id="twitter" placeholder="twitter username"
<div className="container"> className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg" value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
className="icon" alt="dev.to" /> </div>
<input id="dev" placeholder="dev.to username" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.dev} onChange={event => props.handleSocialChange('dev', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dev.to" />
<div className="container"> <input id="dev" placeholder="dev.to username" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg" value={props.social.dev} onChange={event => props.handleSocialChange('dev', event)} />
className="icon" alt="codepen" /> </div>
<input id="codepen" placeholder="codepen username" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.codepen} onChange={event => props.handleSocialChange('codepen', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codepen" />
<div className="container"> <input id="codepen" placeholder="codepen username" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg" value={props.social.codepen} onChange={event => props.handleSocialChange('codepen', event)} />
className="icon" alt="codesandbox" /> </div>
<input id="codesandbox" placeholder="codesandbox username" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.codesandbox} onChange={event => props.handleSocialChange('codesandbox', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codesandbox" />
<div className="container"> <input id="codesandbox" placeholder="codesandbox username" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg" value={props.social.codesandbox} onChange={event => props.handleSocialChange('codesandbox', event)} />
className="icon" alt="stackoverflow" /> </div>
<input id="stackoverflow" placeholder="stackoverflow user ID" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="stackoverflow" />
<div className="container"> <input id="stackoverflow" placeholder="stackoverflow user ID" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg" value={props.social.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', event)} />
className="icon" alt="linkedin" /> </div>
<input id="linkedin" placeholder="linkedin username" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.linkedin} onChange={event => props.handleSocialChange('linkedin', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="linkedin" />
<div className="container"> <input id="linkedin" placeholder="linkedin username" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg" value={props.social.linkedin} onChange={event => props.handleSocialChange('linkedin', event)} />
className="icon" alt="kaggle" /> </div>
<input id="kaggle" placeholder="kaggle username" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.kaggle} onChange={event => props.handleSocialChange('kaggle', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="kaggle" />
<div className="container"> <input id="kaggle" placeholder="kaggle username" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg" value={props.social.kaggle} onChange={event => props.handleSocialChange('kaggle', event)} />
className="icon" alt="facebook" /> </div>
<input id="fb" placeholder="facebook username" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.fb} onChange={event => props.handleSocialChange('fb', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="facebook" />
<div className="container"> <input id="fb" placeholder="facebook username" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" value={props.social.fb} onChange={event => props.handleSocialChange('fb', event)} />
className="icon" alt="instagram" /> </div>
<input id="instagram" placeholder="instagram username" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="instagram" />
<div className="container"> <input id="instagram" placeholder="instagram username" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg" value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} />
className="icon" alt="dribbble" /> </div>
<input id="dribbble" placeholder="dribbble username" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.dribbble} onChange={event => props.handleSocialChange('dribbble', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dribbble" />
<div className="container"> <input id="dribbble" placeholder="dribbble username" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg" value={props.social.dribbble} onChange={event => props.handleSocialChange('dribbble', event)} />
className="icon" alt="behance" /> </div>
<input id="behance" placeholder="behance username" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.behance} onChange={event => props.handleSocialChange('behance', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="behance" />
<div className="container"> <input id="behance" placeholder="behance username" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg" value={props.social.behance} onChange={event => props.handleSocialChange('behance', event)} />
className="icon" alt="medium" /> </div>
<input id="medium" placeholder="medium username (with @)" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.medium} onChange={event => props.handleSocialChange('medium', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
</div> className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="medium" />
<div className="container"> <input id="medium" placeholder="medium username (with @)" className="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"
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg" value={props.social.medium} onChange={event => props.handleSocialChange('medium', event)} />
className="icon" alt="youtube" /> </div>
<input id="youtube" placeholder="youtube channel name" className="inputField lg" <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
value={props.social.youtube} onChange={event => props.handleSocialChange('youtube', event)} /> <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="youtube" />
<input id="youtube" placeholder="youtube channel name" className="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"
value={props.social.youtube} onChange={event => props.handleSocialChange('youtube', event)} />
</div>
</div> </div>
<div className="container"> <div className="container">
src/components/subtitle.js
+3 -3
View File
@@ -2,9 +2,9 @@ import React from 'react';
const Subtitle = (props) => { const Subtitle = (props) => {
return ( return (
<div className="section"> <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
<div className="section-title">Subtitle</div> <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Subtitle</div>
<input id="subtitle" className="inputField lg prefix" value={props.data.subtitle} <input id="subtitle" className="w-full text-xs sm:text-lg 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" value={props.data.subtitle}
onChange={event => props.handleDataChange('subtitle', event)} /> onChange={event => props.handleDataChange('subtitle', event)} />
</div> </div>
); );
src/components/title.js
+10 -6
View File
@@ -2,12 +2,16 @@ import React from 'react';
const Title = (props) => { const Title = (props) => {
return ( return (
<div className="section"> <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
<div className="section-title">Title</div> <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Title</div>
<input id="title-prefix" className="inputField sm prefix" value={props.prefix.title} <div className="flex justify-start items-center w-full text-regular text-xs sm:text-lg">
onChange={event => props.handlePrefixChange('title', event)} /> <input id="title-prefix"
<input id="title-name" placeholder="name" className="inputField md" value={props.data.title} className="w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
onChange={event => props.handleDataChange('title', event)} /> value={props.prefix.title} onChange={event => props.handlePrefixChange('title', event)} />
<input id="title-name" placeholder="name" className="placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.data.title}
onChange={event => props.handleDataChange('title', event)} />
</div>
</div> </div>
); );
} }
src/components/work.js
+169 -70
View File
@@ -1,74 +1,173 @@
import React from 'react'; import React from "react"
const Work = (props) => { const Work = props => {
return ( return (
<div className="section"> <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
<div className="section-title">Work</div> <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
<div className="row"> Work
<input id="currentWork-prefix" className="inputField md prefix" value={props.prefix.currentWork} </div>
onChange={event => props.handlePrefixChange('currentWork', event)} /> <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
<input id="currentWork" placeholder="project name" className="inputField sm" value={props.data.currentWork} <input
onChange={event => props.handleDataChange('currentWork', event)} /> id="currentWork-prefix"
<input id="currentWork-link" placeholder="project link" className="inputField md link" placeholder="Hi, I'm "
value={props.link.currentWork} onChange={event => props.handleLinkChange('currentWork', event)} /> className="placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
</div> value={props.prefix.currentWork}
<div className="row"> onChange={event => props.handlePrefixChange("currentWork", event)}
<input id="collaborateOn-prefix" className="inputField md prefix" value={props.prefix.collaborateOn} />
onChange={event => props.handlePrefixChange('collaborateOn', event)} /> <input
<input id="collaborateOn" placeholder="project name" className="inputField sm" id="currentWork"
value={props.data.collaborateOn} onChange={event => props.handleDataChange('collaborateOn', event)} /> placeholder="project name"
<input id="collaborateOn-link" placeholder="project link" className="inputField md link" className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.link.collaborateOn} onChange={event => props.handleLinkChange('collaborateOn', event)} /> value={props.data.currentWork}
</div> onChange={event => props.handleDataChange("currentWork", event)}
<div className="row"> />
<input id="helpWith-prefix" className="inputField md prefix" value={props.prefix.helpWith} <input
onChange={event => props.handlePrefixChange('helpWith', event)} /> id="currentWork-link"
<input id="helpWith" placeholder="project name" className="inputField sm" placeholder="project link"
value={props.data.helpWith} onChange={event => props.handleDataChange('helpWith', event)} /> className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
<input id="helpWith-link" placeholder="project link" className="inputField md link" value={props.link.currentWork}
value={props.link.helpWith} onChange={event => props.handleLinkChange('helpWith', event)} /> onChange={event => props.handleLinkChange("currentWork", event)}
</div> />
</div>
<div className="row"> <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
<input id="currentLearn-prefix" className="inputField md prefix" value={props.prefix.currentLearn} <input
onChange={event => props.handlePrefixChange('currentLearn', event)} /> id="collaborateOn-prefix"
<input id="currentLearn" placeholder="Frameworks, courses etc." className="inputField md" className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.data.currentLearn} onChange={event => props.handleDataChange('currentLearn', event)} /> value={props.prefix.collaborateOn}
</div> onChange={event => props.handlePrefixChange("collaborateOn", event)}
<div className="row"> />
<input id="ama-prefix" className="inputField md prefix" value={props.prefix.ama} <input
onChange={event => props.handlePrefixChange('ama', event)} /> id="collaborateOn"
<input id="ama" placeholder="react, vue and gsap" className="inputField md" placeholder="project name"
value={props.data.ama} onChange={event => props.handleDataChange('ama', event)} /> className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
</div> value={props.data.collaborateOn}
onChange={event => props.handleDataChange("collaborateOn", event)}
<div className="row"> />
<input id="contact-prefix" className="inputField md prefix" value={props.prefix.contact} <input
onChange={event => props.handlePrefixChange('contact', event)} /> id="collaborateOn-link"
<input id="contact" placeholder="example@gmail.com" className="inputField md" placeholder="project link"
value={props.data.contact} onChange={event => props.handleDataChange('contact', event)} /> className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
</div> value={props.link.collaborateOn}
onChange={event => props.handleLinkChange("collaborateOn", event)}
/>
</div>
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
<input
id="helpWith-prefix"
className="placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.prefix.helpWith}
onChange={event => props.handlePrefixChange("helpWith", event)}
/>
<input
id="helpWith"
placeholder="project name"
className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.data.helpWith}
onChange={event => props.handleDataChange("helpWith", event)}
/>
<input
id="helpWith-link"
placeholder="project link"
className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.link.helpWith}
onChange={event => props.handleLinkChange("helpWith", event)}
/>
</div>
<div className="row"> <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
<input id="portfolio-prefix" className="inputField md prefix" value={props.prefix.portfolio} <input
onChange={event => props.handlePrefixChange('portfolio', event)} /> id="currentLearn-prefix"
<input id="portfolio" placeholder="portfolio link" className="inputField md" className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.link.portfolio} onChange={event => props.handleLinkChange('portfolio', event)} /> value={props.prefix.currentLearn}
</div> onChange={event => props.handlePrefixChange("currentLearn", event)}
<div className="row"> />
<input id="blog-prefix" className="inputField md prefix" value={props.prefix.blog} <input
onChange={event => props.handlePrefixChange('blog', event)} /> id="currentLearn"
<input id="blog" placeholder="blog link" className="inputField md" placeholder="Frameworks, courses etc."
value={props.link.blog} onChange={event => props.handleLinkChange('blog', event)} /> className="placeholder-gray-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
</div> value={props.data.currentLearn}
<div className="row"> onChange={event => props.handleDataChange("currentLearn", event)}
<input id="funFact-prefix" className="inputField md prefix" value={props.prefix.funFact} />
onChange={event => props.handlePrefixChange('funFact', event)} /> </div>
<input id="funFact" placeholder="Chai over Coffee" className="inputField md" <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
value={props.data.funFact} onChange={event => props.handleDataChange('funFact', event)} /> <input
</div> id="ama-prefix"
</div> className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
); value={props.prefix.ama}
onChange={event => props.handlePrefixChange("ama", event)}
/>
<input
id="ama"
placeholder="react, vue and gsap"
className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.data.ama}
onChange={event => props.handleDataChange("ama", event)}
/>
</div>
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
<input
id="contact-prefix"
className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.prefix.contact}
onChange={event => props.handlePrefixChange("contact", event)}
/>
<input
id="contact"
placeholder="example@gmail.com"
className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.data.contact}
onChange={event => props.handleDataChange("contact", event)}
/>
</div>
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
<input
id="portfolio-prefix"
className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.prefix.portfolio}
onChange={event => props.handlePrefixChange("portfolio", event)}
/>
<input
id="portfolio"
placeholder="portfolio link"
className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.link.portfolio}
onChange={event => props.handleLinkChange("portfolio", event)}
/>
</div>
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
<input
id="blog-prefix"
className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.prefix.blog}
onChange={event => props.handlePrefixChange("blog", event)}
/>
<input
id="blog"
placeholder="blog link"
className="placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.link.blog}
onChange={event => props.handleLinkChange("blog", event)}
/>
</div>
<div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
<input
id="funFact-prefix"
className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.prefix.funFact}
onChange={event => props.handlePrefixChange("funFact", event)}
/>
<input
id="funFact"
placeholder="Chai over Coffee"
className="placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
value={props.data.funFact}
onChange={event => props.handleDataChange("funFact", event)}
/>
</div>
</div>
)
} }
export default Work; export default Work
src/html.js
+37
View File
@@ -0,0 +1,37 @@
import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{props.headComponents}
<script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="rahuldkjain" data-description="Support me on Buy me a coffee!" data-message="Thank you for visiting. You can now buy me a coffee!" data-color="#FF813F" data-position="" data-x_margin="18" data-y_margin="18"></script>
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
src/markdown-pages/about.md
+8 -1
View File
@@ -16,14 +16,21 @@ The profile should be neat and minimal to give a clear overview of the work. Non
To solve this, GitHub Profile README Generator came into existence. To solve this, GitHub Profile README Generator came into existence.
So many developers contributed to the project and made it more awesome to use. You can contribute too to make it grow even further. So many developers contributed to the project and made it more awesome to use. You can contribute too to make it grow even further.
<p align="left">
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/issues" target="blank"> <a href="https://github.com/rahuldkjain/github-profile-readme-generator/issues" target="blank">
<img src="https://img.shields.io/github/issues/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator issues"/> <img src="https://img.shields.io/github/issues/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator issues"/>
</a> </a>
<br>
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls" target="blank"> <a href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls" target="blank">
<img src="https://img.shields.io/github/issues-pr/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator pull-requests"/> <img src="https://img.shields.io/github/issues-pr/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator pull-requests"/>
</a> </a>
</p>
### Contributors 🙏
List of the developers who contributed to the project. A big shout out for them.
<a href="https://github.com/rahuldkjain/github-profile-readme-generator/graphs/contributors">
<img src="https://contributors-img.web.app/image?repo=rahuldkjain/github-profile-readme-generator" />
</a>
<hr/> <hr/>
## How do I create a profile README? ## How do I create a profile README?
src/markdown-pages/support.md
+48 -5
View File
@@ -10,14 +10,57 @@ title: "💵 Support OSS"
You can come forward to support the developers by making small donations. You will never know what this support mean to them. If you find the tool really helpful, then it will be very grateful to support the tool 🙇. You can come forward to support the developers by making small donations. You will never know what this support mean to them. If you find the tool really helpful, then it will be very grateful to support the tool 🙇.
<p align="center"> <p align="left">
<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/> <a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
</p> </a>
<p align="center">
<a href="https://ko-fi.com/A0A81XXSX"><img src="https://www.ko-fi.com/img/githubbutton_sm.svg" alt="sponsor github profile readme generator"/> <a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
</a>
<a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
</a> </a>
</p> </p>
## Social Support 🤝
<a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
<img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
</a>
Let the world know how you feel using this tool. Share with others on twitter.
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">&quot;How to Use Github&#39;s README Feature to Track Your Stats in One Click&quot; by <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a> <a href="https://t.co/3dxv0G2sBJ">https://t.co/3dxv0G2sBJ</a> <a href="https://twitter.com/hashtag/repositoriesongithub?src=hash&amp;ref_src=twsrc%5Etfw">#repositoriesongithub</a> <a href="https://twitter.com/hashtag/react?src=hash&amp;ref_src=twsrc%5Etfw">#react</a></p>&mdash; Hacker Noon (@hackernoon) <a href="https://twitter.com/hackernoon/status/1301615959107678215?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is a great tool to generate customized GitHub profile README: <a href="https://t.co/dTpnz0iTP2">https://t.co/dTpnz0iTP2</a> <a href="https://t.co/WcEkK2DKz0">pic.twitter.com/WcEkK2DKz0</a></p>&mdash; Alisher Abdulkhaev (@alisher_ai) <a href="https://twitter.com/alisher_ai/status/1298858350885576704?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr">github profile readme generator: <a href="https://t.co/fQDUBdE0jz">https://t.co/fQDUBdE0jz</a></p>&mdash; merve (@mervenoyann) <a href="https://twitter.com/mervenoyann/status/1301436574475976706?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote>
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is super cool 😎 A Github Profile README Generator.<br><br>👉 Link: <a href="https://t.co/KHC4M9vSzw">https://t.co/KHC4M9vSzw</a> <a href="https://t.co/JmrQ3P6Wkp">pic.twitter.com/JmrQ3P6Wkp</a></p>&mdash; Dat Tran (@datitran) <a href="https://twitter.com/datitran/status/1298947006371713024?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Nice GitHub Profile generator, for the relatively new account README:<a href="https://t.co/YG3O0Pqy3M">https://t.co/YG3O0Pqy3M</a><a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a></p>&mdash; Steve &quot;ardalis&quot; Smith (@ardalis) <a href="https://twitter.com/ardalis/status/1300953474868314118?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr">Github Profile Readme Generator <a href="https://t.co/p20HK5gGHF">https://t.co/p20HK5gGHF</a> <a href="https://t.co/nFyhrO3XjN">pic.twitter.com/nFyhrO3XjN</a></p>&mdash; Speckyboy (@speckyboy) <a href="https://twitter.com/speckyboy/status/1301233718405869568?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">I finally updated my github readme <a href="https://t.co/8rcyuW1UTM">https://t.co/8rcyuW1UTM</a> <br>thanks to this generator : <a href="https://t.co/c0GHc4n1S6">https://t.co/c0GHc4n1S6</a> plus some changes.<br><br>Thank you <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a> for this great generator, saved me a lot of time.</p>&mdash; Abir El Halimi (@abiir07) <a href="https://twitter.com/abiir07/status/1299013498178076673?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This morning I set up my <a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a> profile readme, really amazing what great tools the users have already created to make this easier.<br><br>Big shout out to <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a>!<a href="https://t.co/bL0XwfJ78B">https://t.co/bL0XwfJ78B</a> <a href="https://t.co/xBLVFOJegt">pic.twitter.com/xBLVFOJegt</a></p>&mdash; Max Schmitt (@maxibanki) <a href="https://twitter.com/maxibanki/status/1296408691273498624?ref_src=twsrc%5Etfw">August 20, 2020</a></blockquote>
<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Special thanks to everyone&#39;s repos that are featured in my latest video:<a href="https://twitter.com/bathtype?ref_src=twsrc%5Etfw">@bathtype</a><a href="https://twitter.com/anuraghazru?ref_src=twsrc%5Etfw">@anuraghazru</a><a href="https://twitter.com/Shields_io?ref_src=twsrc%5Etfw">@Shields_io</a><a href="https://twitter.com/AlexandreSanlim?ref_src=twsrc%5Etfw">@AlexandreSanlim</a><a href="https://twitter.com/Ileriayooo?ref_src=twsrc%5Etfw">@Ileriayooo</a><a href="https://twitter.com/james_madhacks?ref_src=twsrc%5Etfw">@james_madhacks</a><a href="https://twitter.com/misteranmol?ref_src=twsrc%5Etfw">@misteranmol</a><a href="https://twitter.com/n_moore?ref_src=twsrc%5Etfw">@n_moore</a><a href="https://twitter.com/novatorem?ref_src=twsrc%5Etfw">@novatorem</a><a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a><a href="https://twitter.com/geeky_abhiz?ref_src=twsrc%5Etfw">@geeky_abhiz</a><br><br>These developers are making your GitHub Profiles look awesome! 💪</p>&mdash; 𝚌𝚘𝚍𝚎𝚂𝚃𝙰𝙲𝙺𝚛 ⚡👨‍💻 (@codeSTACKr) <a href="https://twitter.com/codeSTACKr/status/1294618297086943232?ref_src=twsrc%5Etfw">August 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet data-dnt="true"" data-theme="light"><p lang="tr" dir="ltr">GitHub Profile Readme Generator ile GitHub profilinizi profesyonelleştirin! <a href="https://t.co/iaZAdGtf9t">https://t.co/iaZAdGtf9t</a></p>&mdash; Yazılım Karavanı (@yazilimkaravani) <a href="https://twitter.com/yazilimkaravani/status/1301467413591007232?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr"><a href="https://twitter.com/hashtag/CSS?src=hash&amp;ref_src=twsrc%5Etfw">#CSS</a> <a href="https://twitter.com/hashtag/Automated?src=hash&amp;ref_src=twsrc%5Etfw">#Automated</a> | Github Profile README Generator <a href="https://t.co/CTcrnDuWov">https://t.co/CTcrnDuWov</a></p>&mdash; Yohan J. Rodríguez (@hasdid) <a href="https://twitter.com/hasdid/status/1299070955646586882?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">If you are unsure or need to spice up your GitHub README page. Check out this cool Github profile readme Generator by ⁦<a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a>⁩. <a href="https://twitter.com/hashtag/rstats?src=hash&amp;ref_src=twsrc%5Etfw">#rstats</a> <a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a> ⁦<a href="https://twitter.com/github?ref_src=twsrc%5Etfw">@github</a>⁩ <a href="https://twitter.com/hashtag/AcademicTwitter?src=hash&amp;ref_src=twsrc%5Etfw">#AcademicTwitter</a> <a href="https://t.co/OMyYJJYmxR">https://t.co/OMyYJJYmxR</a></p>&mdash; Seevasant Indran (@zeeva85) <a href="https://twitter.com/zeeva85/status/1301213068060438528?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Github Profile README Generator<br>By <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a> <br><br>Pretty way to create GitHub profile README with addons.<br><br>Check out on <a href="https://twitter.com/ProductHunt?ref_src=twsrc%5Etfw">@ProductHunt</a> <a href="https://t.co/qgxhLmUgV2">https://t.co/qgxhLmUgV2</a></p>&mdash; Raj Maurya (@codemaurya) <a href="https://twitter.com/codemaurya/status/1299700992577957888?ref_src=twsrc%5Etfw">August 29, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
## Sponsors 🙇 ## Sponsors 🙇
- [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him. - [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.
src/pages/index.css
+126 -130
View File
@@ -21,23 +21,23 @@
html, html,
body { body {
margin: 1%; /* margin: 1%; */
padding: 1%; /* padding: 0% 0.5%; */
font-family: "Roboto Mono", monospace; font-family: "Roboto Mono", monospace;
color: var(--grey-90); color: var(--grey-90);
} }
.section-title { /* .section-title {
margin: 0 !important; margin: 0 !important;
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
padding-left: 2%; padding-left: 2%;
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
} } */
input:focus { /* input:focus {
outline: none; outline: none;
} } */
[type="checkbox"] { [type="checkbox"] {
-webkit-box-shadow: 0 1px 1px var(--grey-90) !important; -webkit-box-shadow: 0 1px 1px var(--grey-90) !important;
@@ -47,10 +47,10 @@ input:focus {
border-radius: 0px !important; border-radius: 0px !important;
} }
.icon { /* .icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
} } */
.section { .section {
width: 100%; width: 100%;
@@ -58,27 +58,27 @@ input:focus {
margin: 2% 0%; margin: 2% 0%;
} }
.inputField { /* .inputField {
border: 0px solid; border: 0px solid;
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
margin: 2%; margin: 2%;
padding: 1% 2% 1% 1%; padding: 1% 2% 1% 1%;
font-size: 18px; font-size: 18px;
height: 25px; height: 25px;
} } */
/*
.row { .row {
width: 100%; width: 100%;
display: flex; display: flex;
/* justify-content: flex-start; */ justify-content: flex-start;
} } */
.inputField:focus { /* .inputField:focus {
border-bottom: 1px solid var(--dark-blue); border-bottom: 1px solid var(--dark-blue);
color: var(--grey-90); color: var(--grey-90);
} } */
.sm { /* .sm {
width: 15%; width: 15%;
} }
@@ -88,13 +88,13 @@ input:focus {
.lg { .lg {
width: 50%; width: 50%;
} } */
.prefix { /* .prefix {
color: var(--grey-80); color: var(--grey-80);
} } */
.button { /* .button {
padding: 1% 0%; padding: 1% 0%;
background: var(--grey-05); background: var(--grey-05);
border: 2px solid var(--grey-85); border: 2px solid var(--grey-85);
@@ -102,41 +102,34 @@ input:focus {
width: 25%; width: 25%;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} } */
.container { /* .container {
width: 50%; width: 50%;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} } */
.checkbox { /* .checkbox {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding-left: 2%; padding-left: 2%;
margin: 1% 0%; margin: 1% 0%;
} } */
.skillCheckboxLabel {
width: 70%;
font-weight: 500;
cursor: pointer;
display: flex;
margin: 8%;
}
/*
.checkboxLabel { .checkboxLabel {
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
} } */
.submit { /* .submit {
display: flex; display: flex;
justify-content: center; justify-content: center;
} } */
.warning { .warning {
color: var(--red); color: var(--red);
@@ -144,26 +137,26 @@ input:focus {
margin-left: 2%; margin-left: 2%;
padding: 1%; padding: 1%;
} }
/*
.preview { .preview {
border: 2px solid var(--grey-75); border: 2px solid var(--grey-75);
-webkit-box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75); -webkit-box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
-moz-box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75); -moz-box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75); box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
padding: 0% 2%; padding: 0% 2%;
} } */
.markdown-section { .markdown-section {
min-height: calc(100vh - 100px); min-height: calc(100vh - 100px);
} }
/*
.markdown { .markdown {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} } */
.markdown-box { /* .markdown-box {
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
color: var(--grey-85); color: var(--grey-85);
@@ -173,9 +166,9 @@ input:focus {
box-shadow: 3px 5px 5px 5px rgba(208, 208, 213, 0.75); box-shadow: 3px 5px 5px 5px rgba(208, 208, 213, 0.75);
padding: 1% 2% 0.5% 2%; padding: 1% 2% 0.5% 2%;
margin-top: 0.5%; margin-top: 0.5%;
} } */
.copy-button { /* .copy-button {
background: var(--grey-05); background: var(--grey-05);
border: 2px solid var(--grey-75); border: 2px solid var(--grey-75);
text-align: center; text-align: center;
@@ -184,9 +177,9 @@ input:focus {
justify-self: center; justify-self: center;
padding: 2% 0%; padding: 2% 0%;
align-self: center; align-self: center;
} } */
.download-button { /* .download-button {
background: var(--grey-05); background: var(--grey-05);
border: 2px solid var(--grey-75); border: 2px solid var(--grey-75);
text-align: center; text-align: center;
@@ -195,14 +188,14 @@ input:focus {
justify-self: center; justify-self: center;
padding: 2% 0%; padding: 2% 0%;
align-self: center; align-self: center;
} } */
.utils { /* .utils {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
margin-top: 4%; margin-top: 4%;
} } */
/*
.preview-button { .preview-button {
background: var(--grey-05); background: var(--grey-05);
border: 2px solid var(--grey-75); border: 2px solid var(--grey-75);
@@ -212,7 +205,7 @@ input:focus {
justify-self: end; justify-self: end;
padding: 2% 0%; padding: 2% 0%;
align-self: center; align-self: center;
} } */
.loader { .loader {
height: 100vh; height: 100vh;
@@ -223,7 +216,7 @@ input:focus {
font-size: 24px; font-size: 24px;
} }
.back-button { /* .back-button {
background: var(--grey-05); background: var(--grey-05);
border: 2px solid var(--grey-75); border: 2px solid var(--grey-75);
text-align: center; text-align: center;
@@ -232,82 +225,82 @@ input:focus {
justify-self: start; justify-self: start;
padding: 2% 0%; padding: 2% 0%;
align-self: center; align-self: center;
} } */
/*
.title { .title {
text-align: center; text-align: center;
} } */
.subtitle { /* .subtitle {
text-align: center; text-align: center;
} } */
.link { /* .link {
text-decoration: none; text-decoration: none;
color: var(--dark-blue); color: var(--dark-blue);
} } */
.social-icon { /* .social-icon {
margin: 1%; margin: 1%;
} } */
.badge { /* .badge {
text-align: left; text-align: left;
} } */
.github-cards { /* .github-cards {
display: flex; display: flex;
justify-content: center; justify-content: center;
} } */
.github-stats-card { /* .github-stats-card {
margin: 1%; margin: 1%;
} } */
.top-languages-card { /* .top-languages-card {
margin: 1%; margin: 1%;
} } */
.social { /* .social {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} } */
/*
.icon { .icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
margin: 1%; margin: 1%;
cursor: pointer; cursor: pointer;
} } */
.header { /* .header {
width: 100%; width: 100%;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
} } */
.heading { /* .heading {
color: var(--dark-blue); color: var(--dark-blue);
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
cursor: pointer; cursor: pointer;
} } */
.footer { /* .footer {
margin-top: 2%; margin-top: 2%;
width: 100%; width: 100%;
text-align: center; text-align: center;
padding: 1%; padding: 1%;
} } */
.footer-pages { /* .footer-pages {
display: grid; display: grid;
grid-template-columns: repeat( grid-template-columns: repeat(
auto-fill, auto-fill,
minmax(min(calc(20% + 20vmin), 100%), 1fr) minmax(min(calc(20% + 20vmin), 100%), 1fr)
); );
color: var(--grey-75); color: var(--grey-75);
} } */
.footer-proud { /* .footer-proud {
margin: 2% 0%; margin: 2% 0%;
} } */
a { a {
text-decoration: none; text-decoration: none;
@@ -315,11 +308,11 @@ a {
color: inherit; color: inherit;
} }
.github { /* .github {
display: inline-flex; display: inline-flex;
} } */
.github-button { /* .github-button {
color: var(--grey-90); color: var(--grey-90);
font-size: 12px; font-size: 12px;
font-weight: bolder; font-weight: bolder;
@@ -328,18 +321,18 @@ a {
border: 2px solid var(--grey-85); border: 2px solid var(--grey-85);
margin: 1%; margin: 1%;
width: 230px; width: 230px;
} } */
.github-count { .github-count {
color: var(--dark-purple); color: var(--dark-purple);
} }
/*
.logo { .logo {
width: 40px; width: 40px;
height: 40px; height: 40px;
} } */
.skills { /* .skills {
margin: 1%; margin: 1%;
width: 100%; width: 100%;
display: grid; display: grid;
@@ -360,13 +353,13 @@ a {
width: 40px; width: 40px;
height: 40px; height: 40px;
object-fit: contain; object-fit: contain;
} } */
.skill-preview-icon { /* .skill-preview-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: 1%; margin: 1%;
} } */
/* Tooltip css */ /* Tooltip css */
@@ -377,7 +370,7 @@ a {
color: var(--grey-05); color: var(--grey-05);
margin-left: 8%; margin-left: 8%;
background: var(--grey-90); background: var(--grey-90);
padding: 1px 5%; padding: 2% 5%;
font-size: 14px; font-size: 14px;
} }
@@ -402,20 +395,20 @@ a {
background: var(--grey-05); background: var(--grey-05);
} }
.config-options { /* .config-options {
margin-top: 48px; margin-top: 48px;
padding: 1% 1% 1% 2%; padding: 1% 1% 1% 2%;
font-weight: 700; font-weight: 700;
font-size: 12px; font-size: 12px;
border: 2px solid var(--grey-15); border: 2px solid var(--grey-15);
} } */
.new-tag { /* .new-tag {
font-size: 14px; font-size: 14px;
padding: 2px 4px; padding: 2px 4px;
background: var(--dark-green); background: var(--dark-green);
color: white; color: white;
} } */
.actions { /* .actions {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@@ -435,7 +428,7 @@ a {
.actions .data input { .actions .data input {
flex: 1; flex: 1;
} } */
@media only screen and (max-width: 580px) { @media only screen and (max-width: 580px) {
.tooltiptext { .tooltiptext {
@@ -444,29 +437,29 @@ a {
} }
@media only screen and (max-width: 1199px) { @media only screen and (max-width: 1199px) {
.section-title { /* .section-title {
font-size: 18px; font-size: 18px;
margin: 2% 0% !important; margin: 2% 0% !important;
} }
.inputField { .inputField {
font-size: 10px; font-size: 10px;
} } */
.icon { /* .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
} } */
.checkbox { .checkbox {
font-size: 12px; font-size: 12px;
} }
.button { /* .button {
width: 60%; width: 60%;
margin: 2% 0%; margin: 2% 0%;
font-size: 14px; font-size: 14px;
} } */
.badgeImage { /* .badgeImage {
height: 15px; height: 15px;
} } */
.heading { /* .heading {
font-size: 18px; font-size: 18px;
} }
.footer { .footer {
@@ -477,17 +470,17 @@ a {
auto-fill, auto-fill,
minmax(min(calc(10% + 20vmin), 100%), 1fr) minmax(min(calc(10% + 20vmin), 100%), 1fr)
); );
} } */
.github-button { /* .github-button {
font-size: 10px !important; font-size: 10px !important;
padding: 2% 1% !important; padding: 2% 1% !important;
width: 140px; width: 140px;
} } */
.logo { .logo {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
.skills { /* .skills {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
@@ -495,17 +488,20 @@ a {
margin-left: 12%; margin-left: 12%;
width: 25px; width: 25px;
height: 25px; height: 25px;
} } */
.skill-preview-icon { /* .skill-preview-icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: 1%; margin: 1%;
} } */
.hide-on-mobile { /* .hide-on-mobile {
display: none; display: none;
} } */
#markdown-content { /* #markdown-content {
word-break: break-all; word-break: break-all;
} */
.tooltiptext {
display: none;
} }
.warning { .warning {
font-size: 10px; font-size: 10px;
@@ -513,29 +509,29 @@ a {
.workflow { .workflow {
font-size: 12px; font-size: 12px;
} }
.github-cards { /* .github-cards {
display: block; display: block;
} } */
.github-stats-card{ /* .github-stats-card{
text-align: center; text-align: center;
} } */
.top-languages-card { /* .top-languages-card {
text-align: center; text-align: center;
} } */
.github-stats-card > img{ /* .github-stats-card > img{
width: 80%; width: 80%;
} } */
.top-languages-card > img{ /* .top-languages-card > img{
width: 80%; width: 80%;
} } */
.skills-category-title { /* .skills-category-title {
font-size: 14px; font-size: 14px;
} }
.actions { .actions {
grid-template-columns: 1fr; grid-template-columns: 1fr;
flex-direction: column; flex-direction: column;
} } */
} }
src/pages/index.js
+567 -551
View File
File diff suppressed because it is too large Load Diff
src/pages/tl.css
View File
src/styles/tailwind.css
+114
View File
@@ -0,0 +1,114 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind @screens;
/* Additional vertical padding used by kbd tag. */
.py-05 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.markdown {
@apply text-gray-900 leading-normal break-words;
}
.markdown > * + * {
@apply mt-0 mb-4;
}
/* .markdown p {
@apply flex justify-start items-center;
} */
.markdown li + li {
@apply mt-1;
}
.markdown li > p + p {
@apply mt-6;
}
.markdown strong {
@apply font-semibold;
}
.markdown a {
@apply text-blue-600 font-semibold;
}
.markdown strong a {
@apply font-bold;
}
.markdown h1 {
@apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
}
.markdown h2 {
@apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
}
.markdown h3 {
@apply leading-snug text-lg font-semibold mb-4 mt-6;
}
.markdown h4 {
@apply leading-none text-base font-semibold mb-4 mt-6;
}
.markdown h5 {
@apply leading-tight text-sm font-semibold mb-4 mt-6;
}
.markdown h6 {
@apply leading-tight text-sm font-semibold text-gray-600 mb-4 mt-6;
}
.markdown blockquote {
@apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
}
.markdown code {
@apply font-body text-sm inline bg-gray-200 rounded px-1 py-05;
}
.markdown pre {
@apply bg-gray-900 text-white overflow-scroll rounded p-4;
}
.markdown pre code {
@apply block p-0 rounded-none text-white;
}
.markdown ul {
@apply text-base pl-8 list-disc;
}
.markdown ol {
@apply text-base pl-8 list-decimal;
}
.markdown kbd {
@apply text-xs inline-block rounded border px-1 py-05 align-middle font-normal font-body shadow;
}
.markdown table {
@apply text-base border-gray-600;
}
.markdown th {
@apply border py-1 px-3;
}
.markdown td {
@apply border py-1 px-3;
}
/* Override pygments style background color. */
.markdown .highlight pre {
@apply bg-gray-100 !important;
}
src/templates/blogTemplate.js
+16 -9
View File
@@ -1,7 +1,9 @@
import React from "react" import React from "react"
import { graphql } from "gatsby" import { graphql } from "gatsby"
import Header from '../components/header' // import Header from '../components/header'
import Footer from '../components/footer' // import Footer from '../components/footer'
import {Helmet} from "react-helmet";
import Layout from "../components/layout";
export default function Template({ export default function Template({
data, // this prop will be injected by the GraphQL query below. data, // this prop will be injected by the GraphQL query below.
@@ -9,20 +11,25 @@ export default function Template({
const { markdownRemark } = data // data.markdownRemark holds your post data const { markdownRemark } = data // data.markdownRemark holds your post data
const { frontmatter, html } = markdownRemark const { frontmatter, html } = markdownRemark
return ( return (
<> <Layout>
<Header heading="GitHub Profile README Generator" /> {/* <Header heading="GitHub Profile README Generator" /> */}
<div className="blog-post-container"> <Helmet>
<meta charSet="utf-8" />
<title>{frontmatter.title}</title>
<link rel="canonical" href={`https://rahuldkjain.github.io/gh-profile-readme-generator`} />
</Helmet>
<div className="m-4 sm:p-10">
<div className="blog-post"> <div className="blog-post">
<h1>{frontmatter.title}</h1> <h1 className="text-4xl font-bold">{frontmatter.title}</h1>
{/* <h2>{frontmatter.date}</h2> */} {/* <h2>{frontmatter.date}</h2> */}
<div <div
className="blog-post-content" className="markdown"
dangerouslySetInnerHTML={{ __html: html }} dangerouslySetInnerHTML={{ __html: html }}
/> />
</div> </div>
</div> </div>
<Footer /> {/* <Footer /> */}
</> </Layout>
) )
} }
tailwind.config.js
+27
View File
@@ -0,0 +1,27 @@
module.exports = {
purge: [],
theme: {
extend: {},
fontSize: {
'xxs': '.60rem',
'xs': '.75rem',
'sm': '.875rem',
'tiny': '.875rem',
'base': '1rem',
'lg': '1.125rem',
'xl': '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5rem',
},
fontFamily: {
'title': ['Lato', 'sans-serif'],
'body': ['Roboto Mono', 'monospace'],
}
},
variants: {},
plugins: [],
}