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-04 15:54:39 +05:30
parent d96cde5132
commit 1f03dca892
20 changed files with 1352 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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
+14
View File
@@ -7,6 +7,20 @@ module.exports = {
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [require("tailwindcss")],
}
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: false,
develop: false,
tailwind: true,
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
package-lock.json
Generated
+318
View File
@@ -1059,6 +1059,16 @@
"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": {
"version": "6.0.11",
"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",
"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": {
"version": "1.1.2",
"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",
"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": {
"version": "2.1.2",
"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": {
"version": "2.1.3",
"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": {
"version": "5.1.0",
"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": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/devcert/-/devcert-1.1.1.tgz",
@@ -8060,6 +8116,68 @@
"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": {
"version": "3.3.6",
"resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.3.6.tgz",
@@ -12824,6 +12942,12 @@
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
"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": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
@@ -13782,6 +13906,53 @@
"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": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
@@ -14073,6 +14244,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": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -14437,6 +14618,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": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz",
@@ -14609,6 +14796,26 @@
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
"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": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -15203,6 +15410,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": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
@@ -17470,6 +17695,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": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
package.json
+4 -1
View File
@@ -25,8 +25,11 @@
"react-helmet": "^6.1.0"
},
"devDependencies": {
"gatsby-plugin-postcss": "^2.3.11",
"gatsby-plugin-purgecss": "^5.0.0",
"gh-pages": "^3.1.0",
"prettier": "2.0.5"
"prettier": "2.0.5",
"tailwindcss": "^1.7.6"
},
"keywords": [
"gatsby"
src/components/addons.js
+12 -12
View File
@@ -25,34 +25,34 @@ const Addons = (props) => {
document.body.removeChild(tempElement);
}
return (
<div className="section">
<div className="section-title">Add-ons</div>
<div className="checkbox">
<label htmlFor="visitors-count" className="checkboxLabel">
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Add-ons</div>
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="visitors-count" className="cursor-pointer">
<input type="checkbox" id="visitors-count" checked={props.data.visitorsBadge}
onChange={event => props.handleCheckChange('visitorsBadge')} />&nbsp; display visitors count badge
</label>
</div>
<div className="checkbox">
<label htmlFor="github-stats" className="checkboxLabel">
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="github-stats" className="cursor-pointer">
<input id="github-stats" type="checkbox" checked={props.data.githubStats}
onChange={event => props.handleCheckChange('githubStats')} />&nbsp; display github profile stats card
</label>
</div>
<div className="checkbox">
<label htmlFor="top-languages" className="checkboxLabel">
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="top-languages" className="cursor-pointer">
<input id="top-languages" type="checkbox" checked={props.data.topLanguages}
onChange={event => props.handleCheckChange('topLanguages')} />&nbsp; display top skills
</label>
</div>
<div className="checkbox">
<label htmlFor="dev-dynamic-blogs" className="checkboxLabel">
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
<input id="dev-dynamic-blogs" type="checkbox" checked={props.data.devDynamicBlogs}
onChange={event => props.handleCheckChange('devDynamicBlogs')} />&nbsp; display latest dev.to blogs dynamically (GitHub Action)
</label>
</div>
<div className="checkbox">
<label htmlFor="medium-dynamic-blogs" className="checkboxLabel">
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
<input id="medium-dynamic-blogs" type="checkbox" checked={props.data.mediumDynamicBlogs}
onChange={event => props.handleCheckChange('mediumDynamicBlogs')} />&nbsp; display latest medium blogs dynamically (GitHub Action)
</label>
src/components/footer.js
+3 -3
View File
@@ -3,8 +3,8 @@ import links from '../constants/page-links'
import { Link } from 'gatsby'
const Footer = () => {
return (
<div className="footer">
<div className="footer-pages">
<div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
<div className="w-full flex justify-evenly items-center py-2 text-blue-500">
<div>
<Link to={links.about} activeStyle={{ color: "#002ead" }}>
About
@@ -21,7 +21,7 @@ const Footer = () => {
</Link>
</div>
</div>
<div className="footer-proud">
<div className="py-2">
Developed in India <span role="img" aria-label="india"> 🇮🇳</span>
</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 gsap from "gsap"
import axios from "axios"
import {Link} from "gatsby"
import { Link } from "gatsby"
const Header = (props) => {
const Header = props => {
const fetchData = async () => {
var response = await axios.get(
"https://api.github.com/repos/rahuldkjain/github-profile-readme-generator"
@@ -29,10 +29,10 @@ const Header = (props) => {
fetchData()
setInterval(fetchData, 60000)
gsap.set(".star-icon, .fork-icon", {
gsap.set(".star, .fork", {
transformOrigin: "center",
})
gsap.to(".star-icon, .fork-icon", {
gsap.to(".star, .fork", {
rotateZ: "360",
duration: 2,
ease: "elastic.inOut",
@@ -42,28 +42,27 @@ const Header = (props) => {
}, [])
return (
<div className="header">
<div className="shadow flex items-center justify-center flex-col mb-2 py-2">
<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
src={logo}
className="logo"
className="w-12 h-12"
alt="github profile markdown generator logo"
/>
<div>
{props.heading}
</div>
<div>{props.heading}</div>
</h1>
</Link>
<div className="github">
<div className="flex justify-center items-center">
<a
href="https://github.com/rahuldkjain/github-profile-readme-generator"
aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
target="blank"
className="mr-2"
>
<div className="github-button">
<StarIcon size={16} className="star-icon" /> Star this repo{" "}
<span className="github-count">{stats.starsCount}</span>
<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} id="star-icon" className="px-1 w-6 star" />Star this repo
<span className="github-count px-1 sm:px-2">{stats.starsCount}</span>
</div>
</a>
<a
@@ -71,9 +70,9 @@ const Header = (props) => {
aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
target="blank"
>
<div className="github-button">
<RepoForkedIcon size={16} className="fork-icon" /> Fork on GitHub{" "}
<span className="github-count">{stats.forksCount}</span>
<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} id="fork-icon" className="px-1 w-6 fork" />Fork on GitHub
<span className="github-count px-1 sm:px-2">{stats.forksCount}</span>
</div>
</a>
</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"/>`);
}
});
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) => {
if (props.show) {
@@ -93,7 +93,7 @@ const Markdown = (props) => {
return '';
}
return (
<div id="markdown-content">
<div id="markdown-content" className="break-all">
<><Title prefix={props.prefix.title} title={props.data.title} /></>
<><SubTitle subtitle={props.data.subtitle} /></>
<><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) => {
if (props.prefix && props.title) {
return (
<h1 className="title">{props.prefix + ' ' + props.title}</h1>
<h1 className="text-center text-xl font-bold">{props.prefix + ' ' + props.title}</h1>
)
}
return null;
@@ -13,7 +13,7 @@ const MarkdownPreview = (props) => {
const SubTitlePreview = (props) => {
if (props.subtitle) {
return (
<h3 className="subtitle">{props.subtitle}</h3>
<h3 className="text-center font-medium">{props.subtitle}</h3>
)
}
return null;
@@ -22,18 +22,18 @@ const MarkdownPreview = (props) => {
if (props.prefix && props.project) {
if (props.link) {
return (
<div>
{props.prefix + ' '}<a href={props.link} className="link" target="blank">{props.project}</a>
<div className="my-2">
{props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.project}</a>
</div>
);
} 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) {
return (
<div>
{props.prefix + ' '}<a href={props.link} className="link" target="blank">{props.link}</a>
<div className="my-2">
{props.prefix + ' '}<a href={props.link} className="no-underline text-blue-700" target="blank">{props.link}</a>
</div>
);
}
@@ -60,13 +60,13 @@ const MarkdownPreview = (props) => {
}
const DisplaySocial = (props) => {
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;
}
const SocialPreview = (props) => {
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://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} />
@@ -86,32 +86,32 @@ const MarkdownPreview = (props) => {
const VisitorsBadgePreview = (props) => {
let link = "https://komarev.com/ghpvc/?username=" + props.github
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;
}
const GitHubStatsPreview = (props) => {
let link = "https://github-readme-stats.vercel.app/api?username=" + props.github + "&show_icons=true"
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;
}
const TopLanguagesPreview = (props) => {
let link = "https://github-readme-stats.vercel.app/api/top-langs/?username=" + props.github + "&layout=compact&hide=html"
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) => {
var listSkills = []
skills.forEach((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 (
<div id="markdown-preview">
@@ -120,7 +120,7 @@ const MarkdownPreview = (props) => {
<VisitorsBadgePreview show={props.data.visitorsBadge} github={props.social.github} />
<WorkPreview work={props} />
<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} />
<GitHubStatsPreview show={props.data.githubStats} github={props.social.github} />
</div>
src/components/skills.js
+8 -8
View File
@@ -4,15 +4,15 @@ import { icons, categorizedSkills } from "../constants/skills"
const Skills = props => {
const createSkill = skill => {
return (
<div className="skillCheckbox" key={skill}>
<label htmlFor={skill} className="skillCheckboxLabel">
<div className="w-1/3 sm:w-1/4 my-6" key={skill}>
<label htmlFor={skill} className="skillCheckboxLabel cursor-pointer flex items-center justify-start">
<input
id={skill}
type="checkbox"
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>
</label>
</div>
@@ -20,15 +20,15 @@ const Skills = props => {
}
return (
<div>
<div className="section-title">Skills</div>
<div className="px-2 sm:px-6 mb-4">
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Skills</div>
{Object.keys(categorizedSkills).map(key => (
<div key={key}>
<h4 className="skills-category-title">
<h4 className="text-sm sm:text-xl text-gray-900 text-center">
{categorizedSkills[key].title}
</h4>
<div className="skills">
<div className="flex justify-start items-center flex-wrap w-full mb-6 pl-10">
{categorizedSkills[key].skills.map(skill => createSkill(skill))}
</div>
</div>
src/components/social.js
+101 -85
View File
@@ -2,91 +2,107 @@ import React from 'react';
const Social = (props) => {
return (
<div className="section">
<div className="section-title">Social</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
className="icon" alt="github" />
<input id="github" placeholder="github username" className="inputField lg"
value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
className="icon" alt="twitter" />
<input id="twitter" placeholder="twitter username" className="inputField lg"
value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
className="icon" alt="dev.to" />
<input id="dev" placeholder="dev.to username" className="inputField lg"
value={props.social.dev} onChange={event => props.handleSocialChange('dev', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
className="icon" alt="codepen" />
<input id="codepen" placeholder="codepen username" className="inputField lg"
value={props.social.codepen} onChange={event => props.handleSocialChange('codepen', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
className="icon" alt="codesandbox" />
<input id="codesandbox" placeholder="codesandbox username" className="inputField lg"
value={props.social.codesandbox} onChange={event => props.handleSocialChange('codesandbox', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
className="icon" alt="stackoverflow" />
<input id="stackoverflow" placeholder="stackoverflow user ID" className="inputField lg"
value={props.social.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
className="icon" alt="linkedin" />
<input id="linkedin" placeholder="linkedin username" className="inputField lg"
value={props.social.linkedin} onChange={event => props.handleSocialChange('linkedin', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
className="icon" alt="kaggle" />
<input id="kaggle" placeholder="kaggle username" className="inputField lg"
value={props.social.kaggle} onChange={event => props.handleSocialChange('kaggle', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
className="icon" alt="facebook" />
<input id="fb" placeholder="facebook username" className="inputField lg"
value={props.social.fb} onChange={event => props.handleSocialChange('fb', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
className="icon" alt="instagram" />
<input id="instagram" placeholder="instagram username" className="inputField lg"
value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
className="icon" alt="dribbble" />
<input id="dribbble" placeholder="dribbble username" className="inputField lg"
value={props.social.dribbble} onChange={event => props.handleSocialChange('dribbble', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
className="icon" alt="behance" />
<input id="behance" placeholder="behance username" className="inputField lg"
value={props.social.behance} onChange={event => props.handleSocialChange('behance', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
className="icon" alt="medium" />
<input id="medium" placeholder="medium username (with @)" className="inputField lg"
value={props.social.medium} onChange={event => props.handleSocialChange('medium', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
className="icon" alt="youtube" />
<input id="youtube" placeholder="youtube channel name" className="inputField lg"
value={props.social.youtube} onChange={event => props.handleSocialChange('youtube', event)} />
<div className="px-2 sm:px-6 mb-4">
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Social</div>
<div className="flex flex-wrap justify-center items-center">
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="github" />
<input id="github" placeholder="github 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-1 sm:px-2 focus:border-blue-700"
value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="twitter" />
<input id="twitter" placeholder="twitter 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"
value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
</div>
{/* <div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
className="icon" alt="github" />
<input id="github" placeholder="github username" className="inputField lg"
value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
</div>
<div className="container">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
className="icon" alt="twitter" />
<input id="twitter" placeholder="twitter username" className="inputField lg"
value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
</div> */}
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dev.to" />
<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"
value={props.social.dev} onChange={event => props.handleSocialChange('dev', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codepen" />
<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"
value={props.social.codepen} onChange={event => props.handleSocialChange('codepen', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="codesandbox" />
<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"
value={props.social.codesandbox} onChange={event => props.handleSocialChange('codesandbox', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="stackoverflow" />
<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"
value={props.social.stackoverflow} onChange={event => props.handleSocialChange('stackoverflow', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="linkedin" />
<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"
value={props.social.linkedin} onChange={event => props.handleSocialChange('linkedin', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="kaggle" />
<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"
value={props.social.kaggle} onChange={event => props.handleSocialChange('kaggle', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="facebook" />
<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"
value={props.social.fb} onChange={event => props.handleSocialChange('fb', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="instagram" />
<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"
value={props.social.instagram} onChange={event => props.handleSocialChange('instagram', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dribbble" />
<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"
value={props.social.dribbble} onChange={event => props.handleSocialChange('dribbble', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="behance" />
<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"
value={props.social.behance} onChange={event => props.handleSocialChange('behance', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="medium" />
<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"
value={props.social.medium} onChange={event => props.handleSocialChange('medium', event)} />
</div>
<div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
<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>
);
src/components/subtitle.js
+3 -3
View File
@@ -2,9 +2,9 @@ import React from 'react';
const Subtitle = (props) => {
return (
<div className="section">
<div className="section-title">Subtitle</div>
<input id="subtitle" className="inputField lg prefix" value={props.data.subtitle}
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Subtitle</div>
<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)} />
</div>
);
src/components/title.js
+10 -6
View File
@@ -2,12 +2,16 @@ import React from 'react';
const Title = (props) => {
return (
<div className="section">
<div className="section-title">Title</div>
<input id="title-prefix" className="inputField sm prefix" value={props.prefix.title}
onChange={event => props.handlePrefixChange('title', event)} />
<input id="title-name" placeholder="name" className="inputField md" value={props.data.title}
onChange={event => props.handleDataChange('title', event)} />
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Title</div>
<div className="flex justify-start items-center w-full text-regular text-xs sm:text-lg">
<input id="title-prefix"
className="w-24 sm:w-40 mr-6 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
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>
);
}
src/components/work.js
+169 -70
View File
@@ -1,74 +1,173 @@
import React from 'react';
import React from "react"
const Work = (props) => {
return (
<div className="section">
<div className="section-title">Work</div>
<div className="row">
<input id="currentWork-prefix" className="inputField md prefix" value={props.prefix.currentWork}
onChange={event => props.handlePrefixChange('currentWork', event)} />
<input id="currentWork" placeholder="project name" className="inputField sm" value={props.data.currentWork}
onChange={event => props.handleDataChange('currentWork', event)} />
<input id="currentWork-link" placeholder="project link" className="inputField md link"
value={props.link.currentWork} onChange={event => props.handleLinkChange('currentWork', event)} />
</div>
<div className="row">
<input id="collaborateOn-prefix" className="inputField md prefix" value={props.prefix.collaborateOn}
onChange={event => props.handlePrefixChange('collaborateOn', event)} />
<input id="collaborateOn" placeholder="project name" className="inputField sm"
value={props.data.collaborateOn} onChange={event => props.handleDataChange('collaborateOn', event)} />
<input id="collaborateOn-link" placeholder="project link" className="inputField md link"
value={props.link.collaborateOn} onChange={event => props.handleLinkChange('collaborateOn', event)} />
</div>
<div className="row">
<input id="helpWith-prefix" className="inputField md prefix" value={props.prefix.helpWith}
onChange={event => props.handlePrefixChange('helpWith', event)} />
<input id="helpWith" placeholder="project name" className="inputField sm"
value={props.data.helpWith} onChange={event => props.handleDataChange('helpWith', event)} />
<input id="helpWith-link" placeholder="project link" className="inputField md link"
value={props.link.helpWith} onChange={event => props.handleLinkChange('helpWith', event)} />
</div>
<div className="row">
<input id="currentLearn-prefix" className="inputField md prefix" value={props.prefix.currentLearn}
onChange={event => props.handlePrefixChange('currentLearn', event)} />
<input id="currentLearn" placeholder="Frameworks, courses etc." className="inputField md"
value={props.data.currentLearn} onChange={event => props.handleDataChange('currentLearn', event)} />
</div>
<div className="row">
<input id="ama-prefix" className="inputField md prefix" value={props.prefix.ama}
onChange={event => props.handlePrefixChange('ama', event)} />
<input id="ama" placeholder="react, vue and gsap" className="inputField md"
value={props.data.ama} onChange={event => props.handleDataChange('ama', event)} />
</div>
<div className="row">
<input id="contact-prefix" className="inputField md prefix" value={props.prefix.contact}
onChange={event => props.handlePrefixChange('contact', event)} />
<input id="contact" placeholder="example@gmail.com" className="inputField md"
value={props.data.contact} onChange={event => props.handleDataChange('contact', event)} />
</div>
const Work = props => {
return (
<div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
Work
</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="currentWork-prefix"
placeholder="Hi, I'm "
className="placeholder-gray-700 mr-4 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.currentWork}
onChange={event => props.handlePrefixChange("currentWork", event)}
/>
<input
id="currentWork"
placeholder="project name"
className="placeholder-gray-700 mr-4 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.currentWork}
onChange={event => props.handleDataChange("currentWork", event)}
/>
<input
id="currentWork-link"
placeholder="project link"
className="placeholder-gray-700 text-blue-700 mr-4 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.currentWork}
onChange={event => props.handleLinkChange("currentWork", 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="collaborateOn-prefix"
className="mr-4 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.collaborateOn}
onChange={event => props.handlePrefixChange("collaborateOn", event)}
/>
<input
id="collaborateOn"
placeholder="project name"
className="placeholder-gray-700 mr-4 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.collaborateOn}
onChange={event => props.handleDataChange("collaborateOn", event)}
/>
<input
id="collaborateOn-link"
placeholder="project link"
className="placeholder-gray-700 text-blue-700 mr-4 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)}
/>
</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-4 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-4 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 text-blue-700 mr-4 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">
<input id="portfolio-prefix" className="inputField md prefix" value={props.prefix.portfolio}
onChange={event => props.handlePrefixChange('portfolio', event)} />
<input id="portfolio" placeholder="portfolio link" className="inputField md"
value={props.link.portfolio} onChange={event => props.handleLinkChange('portfolio', event)} />
</div>
<div className="row">
<input id="blog-prefix" className="inputField md prefix" value={props.prefix.blog}
onChange={event => props.handlePrefixChange('blog', event)} />
<input id="blog" placeholder="blog link" className="inputField md"
value={props.link.blog} onChange={event => props.handleLinkChange('blog', event)} />
</div>
<div className="row">
<input id="funFact-prefix" className="inputField md prefix" value={props.prefix.funFact}
onChange={event => props.handlePrefixChange('funFact', event)} />
<input id="funFact" placeholder="Chai over Coffee" className="inputField md"
value={props.data.funFact} onChange={event => props.handleDataChange('funFact', event)} />
</div>
</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="currentLearn-prefix"
className="mr-4 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.currentLearn}
onChange={event => props.handlePrefixChange("currentLearn", event)}
/>
<input
id="currentLearn"
placeholder="Frameworks, courses etc."
className="placeholder-gray-700 mr-4 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)}
/>
</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="ama-prefix"
className="mr-4 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-4 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-4 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-4 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-4 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 text-blue-700 mr-4 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-4 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 text-blue-700 mr-4 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-4 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-4 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/pages/index.css
+51 -58
View File
@@ -21,8 +21,8 @@
html,
body {
margin: 1%;
padding: 1%;
/* margin: 1%; */
padding: 0% 0.5%;
font-family: "Roboto Mono", monospace;
color: var(--grey-90);
}
@@ -47,10 +47,10 @@ input:focus {
border-radius: 0px !important;
}
.icon {
/* .icon {
width: 25px;
height: 25px;
}
} */
.section {
width: 100%;
@@ -120,13 +120,6 @@ input:focus {
margin: 1% 0%;
}
.skillCheckboxLabel {
width: 70%;
font-weight: 500;
cursor: pointer;
display: flex;
margin: 8%;
}
.checkboxLabel {
font-weight: 500;
@@ -175,7 +168,7 @@ input:focus {
margin-top: 0.5%;
}
.copy-button {
/* .copy-button {
background: var(--grey-05);
border: 2px solid var(--grey-75);
text-align: center;
@@ -184,9 +177,9 @@ input:focus {
justify-self: center;
padding: 2% 0%;
align-self: center;
}
} */
.download-button {
/* .download-button {
background: var(--grey-05);
border: 2px solid var(--grey-75);
text-align: center;
@@ -195,13 +188,13 @@ input:focus {
justify-self: center;
padding: 2% 0%;
align-self: center;
}
} */
.utils {
/* .utils {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
margin-top: 4%;
}
} */
.preview-button {
background: var(--grey-05);
@@ -233,51 +226,51 @@ input:focus {
padding: 2% 0%;
align-self: center;
}
/*
.title {
text-align: center;
}
} */
.subtitle {
/* .subtitle {
text-align: center;
}
} */
.link {
/* .link {
text-decoration: none;
color: var(--dark-blue);
}
} */
.social-icon {
/* .social-icon {
margin: 1%;
}
} */
.badge {
/* .badge {
text-align: left;
}
} */
.github-cards {
/* .github-cards {
display: flex;
justify-content: center;
}
.github-stats-card {
} */
/* .github-stats-card {
margin: 1%;
}
.top-languages-card {
} */
/* .top-languages-card {
margin: 1%;
}
.social {
} */
/* .social {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
} */
/*
.icon {
width: 25px;
height: 25px;
margin: 1%;
cursor: pointer;
}
} */
.header {
width: 100%;
@@ -362,11 +355,11 @@ a {
object-fit: contain;
}
.skill-preview-icon {
/* .skill-preview-icon {
width: 40px;
height: 40px;
margin: 1%;
}
} */
/* Tooltip css */
@@ -377,7 +370,7 @@ a {
color: var(--grey-05);
margin-left: 8%;
background: var(--grey-90);
padding: 1px 5%;
padding: 2% 5%;
font-size: 14px;
}
@@ -445,10 +438,10 @@ a {
.inputField {
font-size: 10px;
}
.icon {
/* .icon {
width: 20px;
height: 20px;
}
} */
.checkbox {
font-size: 12px;
}
@@ -457,9 +450,9 @@ a {
margin: 2% 0%;
font-size: 14px;
}
.badgeImage {
/* .badgeImage {
height: 15px;
}
} */
.heading {
font-size: 18px;
}
@@ -490,17 +483,17 @@ a {
width: 25px;
height: 25px;
}
.skill-preview-icon {
/* .skill-preview-icon {
width: 20px;
height: 20px;
margin: 1%;
}
} */
.hide-on-mobile {
display: none;
}
#markdown-content {
/* #markdown-content {
word-break: break-all;
}
} */
.tooltiptext {
display: none;
}
@@ -510,21 +503,21 @@ a {
.workflow {
font-size: 12px;
}
.github-cards {
/* .github-cards {
display: block;
}
.github-stats-card{
} */
/* .github-stats-card{
text-align: center;
}
.top-languages-card {
} */
/* .top-languages-card {
text-align: center;
}
.github-stats-card > img{
} */
/* .github-stats-card > img{
width: 80%;
}
.top-languages-card > img{
} */
/* .top-languages-card > img{
width: 80%;
}
} */
.skills-category-title {
font-size: 14px;
}
src/pages/index.js
+568 -544
View File
File diff suppressed because it is too large Load Diff
src/pages/tl.css
View File
src/styles/tailwind.css
+7
View File
@@ -0,0 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind @screens;
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: [],
}